|
一,、文字標(biāo)簽：
1,、首標(biāo)簽與尾標(biāo)簽：首標(biāo)簽是<FONT> ，文字的尾標(biāo)簽是</FONT> ,，文字內(nèi)容要放在首標(biāo)簽與尾標(biāo)簽之間,。其表現(xiàn)方式為：<FONT>要放置的文字內(nèi)容</FONT>。
2,、文字標(biāo)簽屬性：包括字體（face）,、字號(hào)（size）、顏色（color）等,。文字標(biāo)簽常用的屬性還有：行高（line-height: 1.5em）,、字距（letter-spacing: 1px）、背景顏色[background-color: rgb(74, 105, 95)]等屬性 ,。
字體（face）：可以選擇宋體,、黑體、楷體,、隸書,、微軟雅黑等字體。
字號(hào)（size）：可選擇1—7,。1號(hào)字最小,，7號(hào)字最大。如果你錯(cuò)誤地把字號(hào)size的值輸入為比7大的數(shù)字,，則會(huì)按7號(hào)字顯示,。字號(hào)的值xxpx里的“px”，是像素的意思,，是一種長(zhǎng)度單位,。
字體顏色（color）：一是用十六進(jìn)制“#號(hào)表示顏色，如<FONT color=#ff0000>,；“#”符號(hào)的后面有六位數(shù),，前兩位數(shù)表示紅色，中間的兩位數(shù)表示綠色,，最后的兩位數(shù)表示藍(lán)色,。每一位上的數(shù)字，可以選擇16個(gè)數(shù)字其中之一,。0—9,，分別用0—9表示，10用a表示,，11用b表示,，12用c表示，13用d表示,，14用e表示,，15用f表示。數(shù)字選擇得越小,，其顏色越暗,；數(shù)字選擇得越大，其顏色越亮,。二是用十進(jìn)制顏色表示法：如：<font style="color: rgb(0, 0, 255); >,；三是用英語(yǔ)顏色名稱表示法：如：<FONT color=red>。
背景顏色[background-color: rgb(74, 105, 95)]
二,、圖片標(biāo)簽 ：
1,、圖片標(biāo)簽 ：<IMG 圖片標(biāo)簽沒有尾標(biāo)簽。
2,、 路徑： src 圖片的路徑,，是指圖片保存在哪個(gè)網(wǎng)站的服務(wù)器中。也就是 指圖片的地址 ,。
4 ,、 標(biāo)題 ： title 在等號(hào)后面的雙引號(hào)內(nèi)輸入標(biāo)題內(nèi)容,，當(dāng)用鼠標(biāo)箭頭指向 圖片的時(shí)候，就會(huì)顯示出這些文字,。例如：title="東方女性之魅力",。當(dāng) 用鼠標(biāo)箭頭指向圖片的時(shí)候，就會(huì)顯示出“東方女性之魅力”這些文字,。
5 ,、替代文本 ：alt 作用是當(dāng)圖片無(wú)法顯示的時(shí)候，就會(huì)顯示出這里的文字內(nèi)容,。
6 ,、 寬度 與高度 ： 寬度是 width ,，高度是height ， 其值用px表示,。
360圖書館系統(tǒng)設(shè)置的規(guī)格,，其寬度大約是680px左右，高度是隨你放入的網(wǎng)頁(yè)材料自動(dòng)調(diào)整的,。因此,，在段落標(biāo)簽中，我們一般不必設(shè)置其寬度與高度
7,、邊框線 ：
<IMG style="BORDER-BOTTOM: rgb(153,153,153) 4px solid; BORDER-LEFT: rgb(153,153,153) 4px solid; BORDER-TOP: rgb(153,153,153) 4px solid; BORDER-RIGHT: rgb(153,153,153) 4px solid" src="http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width=450>
上面的圖片標(biāo)簽中添加了寬度為4px的灰色的實(shí)線型邊框線,。要修改邊框線的顏色，你就修改上面標(biāo)簽中括號(hào)內(nèi)的數(shù)值,；要修改邊框線的寬度,，你就修改“4px”中的“4”；要修改邊框線的樣式,，你就替換solid代碼,。
邊框線的樣式有：dotted是點(diǎn)虛線型；dashed是線虛線型,；solid是實(shí)線型,；double是雙線型；groove是3D溝槽狀,；ridge是3D脊?fàn)?；inset是3D內(nèi)嵌式；outset是3D外嵌式,。
8,、對(duì)齊方式：
<IMG style="TEXT-ALIGN: center; DISPLAY: block" alt="" src="http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_8.jpg" width=450>
對(duì)齊方式有：居左對(duì)齊(<p align="left">)、居中對(duì)齊(<p align="center" >),、居右對(duì)齊(<p align="right">),。
“居左對(duì)齊”的段落標(biāo)簽，適用于普通文章的段落,；“居中對(duì)齊”的段落標(biāo)簽,，適用于文章的標(biāo)題，也適用于詩(shī)詞類文章,；“居右對(duì)齊”的段落標(biāo)簽,，適用于文章中末尾的作者署名與寫作日期。 9,、自定義鼠標(biāo)指針樣式 ：
<img style="border-width: 0px; margin: 0px; width: 700px; height: 900px; cursor: url(http://imgup2.poco.cn/mypoco/ani/mouse015.ani), w-resize;" id="albums" src="http://image18.360doc.com/DownloadImg/2010/12/1220/7595222_18.jpg">
修改括號(hào)內(nèi)陸址代碼即可改變鼠標(biāo)指針樣式 10,、外邊矩：
<IMG style="BORDER-RIGHT-WIDTH: 0px; MARGIN: 20px; WIDTH: 450px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" src="http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_9.jpg">
添加了外邊矩屬性，會(huì)在圖片外圍的四周留出一定的空白部位,。也可以設(shè)置為在圖片外圍的某一邊留出一定的空白部位,。
11,、絕對(duì)定位樣式或者相對(duì)定位樣式：
段落標(biāo)簽的首標(biāo)簽與尾標(biāo)簽：首標(biāo)簽是<p>，尾標(biāo)簽是</p>,。首標(biāo)簽與尾標(biāo)簽之間是要放置的內(nèi)容。表達(dá)方式為：<p>要放置的內(nèi)容</p>,。<IMG style="POSITION: absolute; WIDTH: 450px; TOP: 1200px; LEFT: 0px" alt="" src="http://image58.360doc.com/DownloadImg/2013/01/2515/29834659_15.jpg" width=450>
要把絕對(duì)定位樣式(absolute)改變?yōu)橄鄬?duì)定位樣式(relative)，只需把a(bǔ)bsolute修改為 relative即可,。
三,、段落標(biāo)簽： 1 ,、“居左對(duì)齊”標(biāo)簽是：<p align="left"><font style="color: rgb(0, 0, 255); font-family: 黑體; font-size: 20px;">文字內(nèi)容</font></p>
2 、 “居中對(duì)齊”的標(biāo)簽是：<p align="center"><font style="color: rgb(0, 0, 255); font-family: 黑體; font-size: 20px;">文字內(nèi)容</font></p>3 ,、 “居右對(duì)齊”的標(biāo)簽是：<p align="right"><font style="color: rgb(0, 0, 255); font-family: 黑體; font-size: 20px;">文字內(nèi)容</font></p> 以上聯(lián)合標(biāo)簽,，其順序是：段落首標(biāo)簽，文字首標(biāo)簽,，文字內(nèi)容,，文字尾標(biāo)簽，段落尾標(biāo)簽,。 4 ,、首行縮進(jìn)代碼： <P style="TEXT-INDENT: 2em"> 標(biāo)簽解析：<段落標(biāo)簽 css樣式＝“文字首行縮進(jìn)：2em”> 這里的2em，可以理解為：兩個(gè)文字的寬度,。 5,、 居左對(duì)齊代碼：<p align="left">這一段的文字是居左對(duì)齊</p> 居中對(duì)齊代碼： <p align="center" >我是居中對(duì)齊</p> 居右對(duì)齊代碼：<p align="right">我是居右對(duì)齊</p> 6 、 寬度代碼：<P style="WIDTH: 620px; 高度代碼：HEIGHT: 100px"> 7 ,、 背景顏色代碼：<P style="BACKGROUND-COLOR: #ffffaa">我有米黃色的背景顏色了,。</P> 8、 外邊距代碼：MARGIN: 30px">我有米黃色背景顏色和30px的外邊距</P> 9 ,、 滾動(dòng)條代碼：<P style="WIDTH: 400px; HEIGHT: 100px; OVERFLOW: auto">內(nèi)容</P> 標(biāo)簽解析：<段落標(biāo)簽 css樣式＝“寬度：400px,；高度：100px；OVERFLOW: auto代碼即為：設(shè)置滾動(dòng)條”> 10,、 邊框線代碼： <P style="BORDER-BOTTOM: rgb(153,253,255) 4px solid; BORDER-LEFT: rgb(153,253,255) 4px solid; BORDER-TOP: rgb(153,253,255) 4px solid; BORDER-RIGHT: rgb(153,253,255) 4px solid">內(nèi)容</P> 標(biāo)簽解析：<段落標(biāo)簽 css樣式＝“下邊框：十進(jìn)制顏色（紅色值為153,，綠色值為253，藍(lán)色值為255）邊框線寬度為4px 邊框線樣式為實(shí)心線,；左邊框：十進(jìn)制顏色（紅色值為153,，綠色值為253，藍(lán)色值為255）邊框線寬度為4px 邊框線樣式為實(shí)心線,；上邊框：十進(jìn)制顏色（紅色值為153,，綠色值為253，藍(lán)色值為255）邊框線寬度為4px 邊框線樣式為實(shí)心線,；右邊框：十進(jìn)制顏色（紅色值為153,，綠色值為253,，藍(lán)色值為255）邊框線寬度為4px 邊框線樣式為實(shí)心線；”> 11,、 背景圖片代碼：<p style="BORDER-BOTTOM: red 5px solid; BORDER-LEFT: red 5px solid; BACKGROUND: url(http://image57.360doc.com/DownloadImg/2012/11/2721/28522705_2.jpg); BORDER-TOP: red 5px solid; BORDER-RIGHT: red 5px solid">內(nèi)容</p> 標(biāo)簽解析：<段落標(biāo)簽 css樣式＝“下邊框：紅色 5px 實(shí)心線,；左邊框：紅色 5px 實(shí)心線；背景圖片：地址（http://image57.360doc.com/DownloadImg/2012/11/2721/28522705_2.jpg）,；上邊框：紅色 5px 實(shí)心線,；右邊框：紅色 5px 實(shí)心線；下邊框：紅色 5px 實(shí)心線,；左邊框：紅色 5px 實(shí)心線,；”> 12 、 豎排版樣式代碼：<P style="WRITING-MODE: tb-rl; WIDTH: 200px; HEIGHT: 350px">內(nèi)容</P> 13,、 絕對(duì)定位樣式與背景顏色的代碼：<P style="POSITION: absolute; BACKGROUND-COLOR: rgb(10,255,0); TOP: 100px; LEFT: 0px" >內(nèi)容</P> 標(biāo)簽解析：<段落標(biāo)簽 css樣式＝“定位方式：絕對(duì)定位,；背景顏色：十進(jìn)制顏色（紅色值10，綠色值255,，藍(lán)色值0）,；居上：100px；居左：0px”> 14 ,、 諸多文字屬性的代碼：<p style="width: 99%; color: rgb(0, 200, 0); line-height: 150%; letter-spacing: 10px; font-family: 黑體; font-size: 26pt; filter: glow(color=yelow, strength=5);" >內(nèi)容</P> 標(biāo)簽解析：<段落標(biāo)簽 css樣式＝“寬度：99％,；文字顏色：十進(jìn)制顏色（綠色）；行高：150％,；字距：10px,；字體：黑體；字號(hào)：26pt,；濾鏡：光暈濾鏡（顏色＝黃色,，強(qiáng)度＝5）；”> 四,、塊區(qū)標(biāo)簽與行內(nèi)塊區(qū)標(biāo)簽： 1,、塊區(qū)標(biāo)簽<div>： 1)塊區(qū)標(biāo)簽的首標(biāo)簽是：<div>，塊區(qū)標(biāo)簽的尾標(biāo)簽是：</div>,。其表達(dá)方式為：<div>要放置的內(nèi)容</div>,。 2)對(duì)齊方式： 制作“居左對(duì)齊”的文字，應(yīng)使用：
<div align="left"><font style="color: rgb(0, 0, 255); font-family: 黑體; font-size: 20px;">文字內(nèi)容</font></div>
制作“居中對(duì)齊”的文字,，應(yīng)使用：
<div align="center"><font style="color: rgb(0, 0, 255); font-family: 黑體; font-size: 20px;">文字內(nèi)容</font></div>
制作“居右對(duì)齊”的文字,，應(yīng)使用：
<div align="right"><font style="color: rgb(0, 0, 255); font-family: 黑體; font-size: 20px;">文字內(nèi)容</font></div>
制作文字網(wǎng)頁(yè)時(shí)，常常把塊區(qū)標(biāo)簽與文字標(biāo)簽組合起來(lái)應(yīng)用,。
制作圖片網(wǎng)頁(yè)時(shí),，則只用塊區(qū)標(biāo)簽就可以了。
2、行內(nèi)塊區(qū)標(biāo)簽：<span> 與段落標(biāo)簽<p>,、塊區(qū)標(biāo)簽<div>的用法基本相同,，只要把標(biāo)簽名稱替換一下就行了。
塊區(qū)標(biāo)簽與行內(nèi)塊區(qū)標(biāo)簽,，在一般情況下不設(shè)置其寬度與高度,。
不設(shè)置寬度與高度（也就是采用系統(tǒng)“默認(rèn)”的寬度與高度）有什么優(yōu)點(diǎn)呢？不設(shè)置寬度與高度,，系統(tǒng)就可以按照你放入網(wǎng)頁(yè)內(nèi)容的多少自行調(diào)節(jié)其寬度與高度,。
段落標(biāo)簽、塊區(qū)標(biāo)簽與行內(nèi)塊區(qū)標(biāo)簽都是塊級(jí)標(biāo)簽,，三種標(biāo)簽一起使用,，會(huì)形成一個(gè)“塊”，也就是一個(gè)方框,。在這個(gè)“塊”（即方框）中可以放置你要放入的網(wǎng)頁(yè)內(nèi)容。它們之間區(qū)別有三：
一是幾個(gè)段落標(biāo)簽連用,，各段文字自成一段,，瀏覽器會(huì)在各段之間留出兩行的空白區(qū)域。舉例如下：
<P style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">這些文字使用的都是段落標(biāo)簽,，各段文字自成一段,，瀏覽器會(huì)在各段之間留出兩行的空白區(qū)域。你觀察一下,，我們之間的空白區(qū)域是否是兩行呢,？</P>
<P style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">這些文字使用的都是段落標(biāo)簽，各段文字自成一段,，瀏覽器會(huì)在各段之間留出兩行的空白區(qū)域,。你觀察一下，我們之間的空白區(qū)域是否是兩行呢,？</P> <P style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">這些文字使用的都是段落標(biāo)簽,，各段文字自成一段，瀏覽器會(huì)在各段之間留出兩行的空白區(qū)域,。你觀察一下,，我們之間的空白區(qū)域是否是兩行呢？</P> 二是幾個(gè)塊區(qū)標(biāo)簽連用,，各段文字自成一段,，瀏覽器會(huì)在各段之間留出一行的空白區(qū)域。舉例如下：
<DIV style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000"> 這些文字使用的都是塊區(qū)標(biāo)簽,，各段文字自成一段,，瀏覽器會(huì)在各段文字之間留出一行的空白區(qū)域。你觀察一下,，我們之間的空白區(qū)域是否是一行呢,？ </DIV>
<DIV style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">這些文字使用的都是塊區(qū)標(biāo)簽,，各段文字自成一段，瀏覽器會(huì)在各段文字之間留出一行的空白區(qū)域,。你觀察一下,，我們之間的空白區(qū)域是否是一行呢？</DIV> <DIV style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">這些文字使用的都是塊區(qū)標(biāo)簽,，各段文字自成一段,，瀏覽器會(huì)在各段文字之間留出一行的空白區(qū)域。你觀察一下,，我們之間的空白區(qū)域是否是一行呢,？</DIV> 三是幾個(gè)行內(nèi)塊區(qū)標(biāo)簽連用，瀏覽器只會(huì)分行,，不能分段,，各個(gè)行內(nèi)塊區(qū)之間沒有空行。舉例如下：
<SPAN style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">這些文字使用的都是行內(nèi)塊區(qū)標(biāo)簽,，瀏覽器不給我們分段了,。你觀察一下，我們都跑到一個(gè)段落中了,。</SPAN><SPAN style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">這些文字使用的都是行內(nèi)塊區(qū)標(biāo)簽,，瀏覽器不給我們分段了。你觀察一下,，我們都跑到一個(gè)段落中了,。</SPAN><SPAN style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">這些文字使用的都是行內(nèi)塊區(qū)標(biāo)簽，瀏覽器不給我們分段了,。你觀察一下,，我們都跑到一個(gè)段落中了。</SPAN>
段落標(biāo)簽中可以包裹塊區(qū)標(biāo)簽與行內(nèi)塊區(qū)標(biāo)簽,。
塊區(qū)標(biāo)簽中可以包裹段落標(biāo)簽與行內(nèi)塊區(qū)標(biāo)簽,。
行內(nèi)塊區(qū)標(biāo)簽中不能夠包裹段落標(biāo)簽與塊區(qū)標(biāo)簽。
五,、移動(dòng)標(biāo)簽：
1,、首標(biāo)簽是<marquee>，尾標(biāo)簽是</marquee>
移動(dòng)標(biāo)簽的表達(dá)式為：<marquee>內(nèi)容</marquee>
2,、移動(dòng)標(biāo)簽常用的屬性：移動(dòng)方向（direction）,、移動(dòng)速度（scrollamount）、移動(dòng)方式（behavior）,、延時(shí)屬性（scrolldelay）,、對(duì)齊方式（aligh）、移動(dòng)屏幕的寬（width）和高（height）等屬性。
移動(dòng)方向（direction）：left（向左移動(dòng)）,、 right（向右移動(dòng)）,、up（向上移動(dòng)）、down（向下移動(dòng)）,。默認(rèn)為left （向左移動(dòng))
移動(dòng)速度（scrollamount）：移動(dòng)速度的屬值是大于等于1的數(shù)字,，數(shù)字越大移動(dòng)速度越快。速度取值的大小要看你制作網(wǎng)頁(yè)的需要而確定,。一般取值為3－4,。表示方法為：scrollamount=4。
移動(dòng)方式（behavior）：slide（由一端快速滑動(dòng)到另一端）,、alternate（來(lái)回滾動(dòng)）,。表示方法：behavior="slide" 表示由一端快速滑動(dòng)到另一端；behavior=alternate表示來(lái)回滾動(dòng),。
移動(dòng)屏幕的寬和高:width（寬）,、height（高）。表示方法：width="?" height="?" （,？處輸入數(shù)值）,。
對(duì)齊方式：aligh=left （居左對(duì)齊）或者align=right（居右對(duì)齊）或者align=center （居中對(duì)齊）。用css樣式表示：
style="TEXT-ALIGN: left" （居左對(duì)齊） style="TEXT-ALIGN: center" （居中對(duì)齊）style="TEXT-ALIGN: right" （居右對(duì)齊）,。 六,、標(biāo)簽解析：
1,、<p align="center">
解析：<段落標(biāo)簽 對(duì)齊方式＝居中對(duì)齊
2,、<p align="right">
解析：<段落標(biāo)簽 對(duì)齊方式＝居右對(duì)齊
3、<P style="WIDTH: 620px; HEIGHT: 100px">
解析：<段落標(biāo)簽 css樣式＝寬度：620px;高度100px">
4,、<P style="BACKGROUND-COLOR: #ffffaa; MARGIN: 30px">
解析：<段落標(biāo)簽css樣式＝“背景顏色：米黃色”>
5,、<P style="TEXT-INDENT: 2em">
解析：<段落標(biāo)簽css樣式＝“文字首行縮進(jìn)：2em”>
6、<img style="width: 300px; height: 450px;" src="http://image17.360doc.com/DownloadImg/2010/11/0321/6510364_2.jpg">
解析：<圖片標(biāo)簽="寬度： 300px;高度：450px;" 路徑="http://image17.360doc.com/DownloadImg/2010/11/0321/6510364_2.jpg">
7,、<img style="width: 300px; height: 450px;" title="東方女性之魅力" alt="“春天沒來(lái)”歡迎您" src="http://image17.360doc.com/DownloadImg/2010/11/0321/6510364_2.jpg">
解析：<圖片標(biāo)簽="寬度： 300px;高度：450px;"標(biāo)題="東方女性之魅力"替代文本="“春天沒來(lái)”歡迎您" 路徑="http://image17.360doc.com/DownloadImg/2010/11/0321/6510364_2.jpg">
8,、<font color="#ff0000" size="7" face="華文行楷">
解析：<文字標(biāo)簽 顏色=紅色 字號(hào)="7"號(hào) 字體="華文行楷">
9、<p style="width: 99%; color: rgb(0, 200, 0); line-height: 150%; letter-spacing: 10px; font-family: 黑體; font-size: 26pt; filter: glow(color=yelow, strength=0);" >
解析：<段落標(biāo)簽css樣式＝“寬度：99％,；文字顏色：十進(jìn)制顏色（綠色）,；行高：150％；字距：10px,；字體：黑體,；字號(hào)：26pt；濾鏡：光暈濾鏡（顏色＝黃色,，強(qiáng)度＝0）,；”>
10、<P style="POSITION: absolute; BACKGROUND-COLOR: rgb(10,255,0); TOP: 100px; LEFT: 0px" >
解析：<段落標(biāo)簽css樣式＝“定位方式：絕對(duì)定位；背景顏色：十進(jìn)制顏色（紅色值10,，綠色值255,，藍(lán)色值0）；居上：100px,；居左：0px”>
11,、<P style="WRITING-MODE: tb-rl; WIDTH: 200px; HEIGHT: 350px">
解析：<段落標(biāo)簽css樣式＝“排版樣式：豎排版；寬度：200px,；高度：350px”>
|
|
|
來(lái)自： 蟠龍圖書館 > 《常用標(biāo)簽》
