一、文字
1.標題文字 <h#>..........</h#> #=1~6；h1為最大字，h6為最小字
2.字體變化 <font>..........</font>
【1】字體大小 <font size=#>..........</font> #=1~7；數字愈大字也愈大
【2】指定字型 <font face="字體名稱">..........</font>
【3】文字顏色 <font color=#rrggbb>..........</font>
rr：表紅色（red）色碼
gg：表綠色（green）色碼
bb：表藍色（blue）色碼
rrggbb也可用6位顏色代碼數字
3.顯示小字體 <small>..........</small>
4.顯示大字體 <big>..........</big>
5.粗體字 <b>..........</b>
6.斜體字 <i>..........</i>
7.打字機字體 <tt>..........</tt>
8.底線 <u>..........</u>
9.刪除線 <strike>..........</strike>
10.下標字 <sub>..........</sub>
11.上標字 <sup>..........</sup>
12.文字閃爍效果 <blink>..........</blink>
13.換行（也稱回車） <br>
14.分段 <p>
15.文字的對齊方向 <p align="#"> #號可為 left：表向左對齊（預設值） center：表向中對齊 right：表向右對齊 P.S.<p align="#">之後的文字都會以所設的對齊方式顯示，直到出現另一個<p align="#">改變其對齊方向，遇到<hr>或<h#>標籤時會自動設回預設的向左對齊。
16.分隔線 <hr>
【1】分隔線的粗細 <hr size=點數>
【2】分隔線的寬度 <hr size=點數或百分比>
【3】分隔線對齊方向 <hr align="#">
#號可為 left：表向左對齊（預設值） center：表向中對齊 right：表向右對齊
【4】分隔線的顏色 <hr color=#rrggbb>
【5】實心分隔線 <hr noshade>
17.居中對齊 <center>..........</center>
18.依原始樣式顯示 <pre>..........</pre>
19.<body>指令的屬性
【1】背景顏色 -- bgcolor <body bgcolor=#rrggbb>
【2】背景圖案 -- background <body background="圖形文件名">
【3】設定背景圖案不會捲動 -- bgproperties <body bgproperties=fixed>
【4】文件內容文字的顏色 -- text <body text=#rrggbb>
【5】超連結文字顏色 -- link <body link=#rrggbb>
【6】正被選取的超連結文字顏色 -- vlink <body vlink=#rrggbb>
【7】已連結過的超連結文字顏色 -- alink <body alink=#rrggbb>
20.文字移動指令<MARQUEE>..........</MARQUEE>
移動速度指令是:scrollAmount=# #最小為1，速度為最慢；數字越大移動的越快。
移動方向指令是：direction=# up向上、down向下、left向左、right向右。
指令舉例：<MARQUEE scrollAmount=3 direction=up>..........</MARQUEE>
二、圖片
1.插入圖片 <img src="圖形文件名">
2.設定圖框 -- border <img src="圖形文件名" border=點數>
3.設定圖形大小 -- width、height <img src="圖形文件名" width=寬度點數 height=高度點數>
4.設定圖形上下左右留空 -- vspace、hspace <img src="圖形文件名" vspace=上下留空點數 hspace=左右留空點數>
5.圖形附註 <img src="圖形文件名" alt="說明文字">
6.預載圖片
<img src="高解析度圖形文件名" lowsrc="低解析度圖形文件名"> P.S.兩個圖的圖形大小最好一致;
7.影像地圖（Image Map） <img src="圖形文件名" usemap="#圖的名稱"> <map name="圖的名稱">
<area shape=形狀 coords=區域座標列表 href="連結點之URL">
<area shape=形狀 coords=區域座標列表 href="連結點之URL">
<area shape=形狀 coords=區域座標列表 href="連結點之URL">
<area shape=形狀 coords=區域座標列表 href="連結點之URL"> </map <
【1】定義形狀 -- shape
shape=rect：矩形 shape=circle：圓形 shape=poly：多邊形
【2】定義區域 -- coords
a.矩形：必須使用四個數字，前兩個數字為左上角座標，後兩個數字為右下角座標
例：<area shape=rect coords=100,50,200,75 href="URL">
b.圓形：必須使用三個數字，前兩個數字為圓心的座標，最後一個數字為半徑長度
例：<area shape=circle coords=85,155,30 href="URL">
c.任意圖形（多邊形）：將圖形之每一轉折點座標依序填入
例：<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL"
三、表格相關
1.表格標題
<caption>..........</caption>
表格標題位置 -- align
<caption align="#"> #號可為 top：表標題置於表格上方（預設值）
bottom：表標題置於表格下方
2.定義列 <tr>
3.定義欄位 《1》<td>：靠左對齊
《2》<th>：靠中對齊ⅱ粗體
【1】水平位置 -- align <th align="#">
#號可為 left：向左對齊 center：向中對齊 right：向右對齊
【2】垂直位置 -- align <th align="#"> #號可為
top：向上對齊 middle：向中對齊 bottom：向下對齊
【3】欄位寬度 -- width <th width=點數或百分比>
【4】欄位垂直合併 -- rowspan <th rowspan=欲合併欄位數>
【5】欄位橫向合併 -- colspan <th colspan=欲合併欄位數>
四、表格的主要屬性
1. <table>標記的主要屬性
align定義表格的對齊方式，有三個屬性值center，left，right
background定義表格的背景圖案，屬性值為圖片的地址
bgcolor定義表格的背景顏色，屬性值是各種顏色代碼
border定義表格的邊框寬度，屬性值是數字
bordercolor定義表格邊框的顏色，屬性值是各種顏色代碼
cellpadding定義單元格內容與單元格邊框之間的距離，屬性值是數字
cellspacing定義表格中單元格之間的距離
height定義表格的高度，屬性值是數字
width定義表格的寬度，屬性值是數字
2. <tr>標記，表格是由多行與多列組成的，<tr>標記用來定義表格的一行，他的屬性極其屬性值定義的是表格中的該行，其主要屬性與屬性值如下：
align定義對齊方式，屬性值與上同
background定義背景圖案 bgcolor定義背景色
3. <td>標記。用<td>標記概況起來的內容表示表格的單元。其主要屬性與屬性值和<table>標記的一樣，補充兩個合併列和行的代碼：
colspan定義合併表格的列數，屬性值是數字
rowspan定義合併表格的行數，屬性值是數字
五、FRAME
1、分割視窗指令 <frameset>..........</frameset>
【1】垂直（上下）分割 -- rows
<frameset rows=#> #號可為點數：
如欲分割為100,200,300三個視窗，則<frameset rows=100,200,300>；
亦可以*號代表，如<frameset rows=*,500,*>
百分比：如<frameset rows=30%,70%>，各項總和最好為100%;
【2】水平（左右）分割 -- cols <frameset cols=點數或百分比>
2、指定視窗內容 -- <frame>
<frameset cols=30%,70%> <frame> <frame> </frameset>
【1】指定視窗的文件名稱 -- src <frame src=HTML檔名>
【2】定義視窗的名稱 -- name
<frame name=視窗名稱>
【3】設定文件與上下邊框的距離 -- marginheight
<frame marginheight=點數>
【4】設定文件與左右邊框的距離 -- marginwidth
<frame marginwidth=點數>
【5】設定分割視窗捲軸 -- scrolling
<frame scrolling=#> #號可為 yes：固定出現捲軸
no：不出現捲軸
auto：自動判斷文件大小需不需要捲軸（預設值）
【6】鎖住分割視窗的大小 -- noresize <frame noresize>
第四講：頁面布局
由於瀏覽器不識別文本中的格式，文字都連續顯示在螢幕上，需要按什麼格式顯示，
必需加格式控制符，如「br」就是換行控制符。常用的還有分段符「p」，用「p」
不僅將以後文字換到下行，而且還插入一空行。如連用兩個「br」「br」與換成一
個「p」可完成同樣功能。
還有一個強制不換行指令<nobr>，到一個</nobe>中間的字元都在一行顯示。
瀏覽器對於文本中的空格，不管多少只認一個空格。必須把輸入法條中的「半形」
改成「全形」也就是把「半月」形標誌改為「滿月」形的再輸入空格，瀏覽器才識別，
因為這種「空格」實際上完全不同於西文空格，這是在漢字型檔中的一種不可顯示的具有
兩個ASC代碼的一種字元，所以瀏覽器可以完全保留這種空格。在HTML代碼中也有專用
的空格代碼，就是在 表示空格，不過嫌麻煩，一般人不常用。只是在西文輸入中
沒有「全形」空格，才用 ，每 表示一個半形空格。
在頁面中有時需要用橫線分切內容，「hr」是畫線指令，在這個指令中還可以設置
線尺寸和顏色。線的橫向尺寸我們習慣叫「長度」，這裡我們叫「寬」，是按螢幕來說
的，我們的螢幕橫向叫「寬」，縱向叫高，所以也把線的橫向尺寸叫「寬」。指令格式
如下：
「hr size=XXpx width=XXpx color=XXXXXX>」
其中「size=」縱向尺寸、「width=」橫向尺寸、「color=」線條顏色。「px」表
示「點」，就是以多少個「點」來定義尺寸。或者有人問那這一個「點」是多大呀！這
可要看你的顯示器了，你現在的顯示模式如是「600X800」，橫向看你的螢幕就是800個
點，每個點大小你自己算吧。如果你還不清楚，下面我給你畫個線看：這線是縱向尺寸
4點，橫向尺寸400點，顏色是紅，代碼是： 「hr size=4 width=400 color=ff0000」。
--------------------------------------------------------------------------------
各項參數之間要有空格，注意這可是「半形」空格。以後注意在書寫代碼時所有字元
必須在「半形」狀態下輸入，如誤用了「全形」字元，系統是不承認的。另外對初學者還
要提醒一項，有些伺服器對字元的大、小寫也是敏感的，就是說同一個字元的大寫和小寫，
系統認為是兩個不同的字元，這點在寫網頁時也應注意。
在頁面中兩行文字中還需要設置間距，使用指令是：「style=line-height:XX」
其中「XX」可以是每行高度在螢幕上的點數，也可以是與文字的比例。如要使每行高
度是文字高度的1.5倍，就設「style=line-height:150%」，這樣行與行間就有半個字的
空間。也可以點數來設，「style=line-height:20px」，表示每行所佔高度的尺寸是20點。
設置參數可以放在<body>裡面，這是對整個頁面有效，如「body style=line-height:20px」，也可以放在分段符里，只對該段設置，如「p style=line-height:20px」。
為了對某一部分內容設定格式，要用一個定義區域的指令，「div」定義區域，
用「/div」結束。
在「div」裡面可以放很多設置參數，如上面的行高度也可以放在「div」裡面：
「div style=line-height:20px」。
「div」裡面還可把字元安排為靠左、靠右、居中，指令格式分別是：
「div align=left、div align=right、div align=center 」
注意：引號內的內容，使用時兩端要換成<>括起來，這裡為了能正常顯示用「」代替。
第五講：圖片，音頻，和滾動字幕
一：圖片的使用
1. 在頁面中插入圖片
在頁面中插入圖片用< IMG>標記，通過對<IMG>標記的屬性值的調節可以控制圖片
在頁面中的精確顯示。其格式如下：
<IMG src＝「圖片地址」 屬性1＝屬性值 屬性2＝屬性值>
圖片的屬性主要有高度（height），寬度（width），對齊方式（align）等，屬性值
主要是數字，對齊方式的屬性值為：center，left。right。
2. 用圖片作為超連結
圖片可以做為超連結的熱點內容。此時要與A標記配合使用，其格式為：
<a herf=「超連結的文件名」><img src＝「圖片文件名」></a>
二：音頻的使用
管它mms.http.rtsp.只要看後綴尾檔是asf.wma.wmv.wmv.rm.通通可以適用下面的
代碼:embed src="歌的地址" width="350，80%" height="60，80%">
三：移動字幕的使用
移動字幕使用<MARQUEE>標記，其基本格式：<marquee 屬性＝屬性值>滾動內容</marquee>
它的主要屬性及其屬性值如下：
對齊方式（align）其屬性值是center，left，right
移動字元的背景色（bgcolor）屬性值為顏色代碼。
移動字元的循環次數（loop）屬性值為數字。
移動方式（behavior）屬性值為：scroll:文字單向移動，side:移動到邊界停止，alternate:到邊界後反向移動
文字高度和寬度，以象素為單位（width height）屬性值為數字。
字元左右留白長度（hspace）屬性值為數字。
字元上下留白長度（vspace）屬性值為數字。
字元的移動速度（scrollamount）屬性值為數字。
字元移動每步的延時（scrolldelay）屬性值為數字。
四：視頻的使用
1.[視頻]語法也可以這樣(貼RM，WMV格式) 代碼：<embed src="歌的地址" width=400 height=300>
2.這個代碼是需要點擊才可以播放的，適用於試聽(rm/MP3/RA/WMA) 代碼：
<EMBED src=歌曲名 volume="100" width=39 height=18 hidden="FALSE" autostart="fault" type="audio/x-pn-realaudio-plugin" controls="PlayButton"></embed>
3.這個代碼是自動播放的，也是用於試聽(類型同上)代碼：
<embed src="歌曲的地址 帶http的" width="39" height="18" autostart="true" hidden="false" loop="infinite" align="center" volume="100" type="audio/x-pn-realaudio-plugin" controls="PlayButton" autostart="true">
貼內背景公式：
<*center><*table cellpadding=0 cellspacing=0 border=0 WIDTH=100% align=center table background="內背景圖片地址" width=720><*tr><*td><*center>
。。。。。。
（要貼的內容－－圖片或文字）
貼圖:（兩種方法）
貼圖的正確格式是:
（1） <*center><*img src="（圖片地址）">
（2）[*IMG]（圖片地[*/IMG]
。。。。。。
<*td><*/table>(結尾）
圖片向左移動
<*marquee directio=left><8img src="圖片地址"><*/marquee>
文字向左移動
<*marquee directio=left><*font size=? color=?>文字部分<*/font><*/marquee>
貼FLASH
<*embed src="★"width="660"height="450">
歌
<*embed src="★"HIDDEN=TRUE AUTOSTART=TRUE LOOP=TRUE>
帖子外背景底圖
<*body background="地址">
外背景底圖圖不動
<*body background="地址" bgproperties="fixed">
圖片居中
<*center><*img src="圖片地址">
貼播放器
<*embed src="http://mp3.baidu.com/r?url=http://fchen.sosoo.net/music/pop/469.mp3" width=480 height=35 controls=ControlPanel loop=true autostart=true volume=100 type=audio/x-pn-realaudio-plugin Initfn=load-types mime-types=mime.types>
交替舞動的蝴蝶
<*FONT COLOR=GREEN><*marquee behavior="alternate"scrollamount=8 direction=right><*b><*font color=#7700bb size=6><*FONT color=red><*MARQUEE behavior=alternate direction=up height=150 width=50><*img src=http://www.fyj.cn/dhome/dimg/4013.gif><*/MARQUEE><*FONT color=orange><*MARQUEE behavior=alternate direction=up height=200 width=50><*img src=http://www.fyj.cn/dhome/dimg/4013.gif><*/MARQUEE><*FONT color=Fuchsia><*MARQUEE behavior=alternate direction=up height=150 width=50><*img src=http://www.fyj.cn/dhome/dimg/4013.gif><*/MARQUEE><*FONT color=olive><*MARQUEE behavior=alternate direction=up height=200 width=50><*img src=http://www.fyj.cn/dhome/dimg/4013.gif><*/MARQUEE><*FONT COLOR=GREEN><*MARQUEE behavior=alternate direction=up height=150 width=50><*img src=http://www.fyj.cn/dhome/dimg/4013.gif><*/MARQUEE><*FONT color=red><*MARQUEE behavior=alternate direction=up height=200 width=50><*img src=http://www.fyj.cn/dhome/dimg/4013.gif>
***************************************************************
帶框的背景
<*center><*table border="5" background=http://szg01.myrice.com/bg5.gif width="600" height="440" >
<*td><*/table>
文字向上滾注意文字分行並拉開行距：<*marquee direction=up scrollamount=3>
<*center><*font color="lime" size="5" face="隸書">緣分的朋友你們好<*/font>
<*/marquee>
緣分的朋友你們好
文字向下滾
<*marquee direction=down scrollamount=3>
<*center><*font color="lime" size="5" face="隸書">祝朋友們在緣分玩的開心<*/font>
<*/marquee>
祝朋友們在緣分玩的開心
文字移動速度的設置：
請注意下面語句中的紅色屬性(文字向左移動，選250比較好)
大家好！
IE默認值為60（單位：毫秒）
取值越大，移動越慢（小於60，IE仍默認為60）。
取值60 取值100 取值150 取值200 取值250
常用字體：
宋體 黑體 楷體_GB2312 仿宋_GB2312
新宋體 幼圓 隸書 方正舒體
華文新魏 華文行楷 華文細黑 華文彩雲
常用字體顏色：
淺綠----aqua 黑----black 蘭----blue 紫紅----fuchsia，
灰----gray 綠----green 亮綠----lime 茶----maroon，
深蘭----navy 橄欖----olive 紫----pourple 紅---red，
銀----silver 青----teal 白----white 黃----yellow
紫紅--purple
文字示例：(居中)
歡迎你朋友
字體(FONT)標記(TAGS)
標題字體(Header)
<*h#> ... <*/h#> #=1, 2, 3, 4, 5, 6
<*h1>今天天氣真好！<*/h1> 今天天氣真好！
<*h2>今天天氣真好！<*/h2> 今天天氣真好！
<*h3>今天天氣真好！<*/h3> 今天天氣真好！
<*h4>今天天氣真好！<*/h4> 今天天氣真好！
<*h5>今天天氣真好！<*/h5> 今天天氣真好！
<*h6>今天天氣真好！<*/h6> 今天天氣真好！
• <*hn>---<*/hn> 這些標記顯示黑體字。
• <*hn>---<*/hn> 這些標記自動插入一個空行，不必用 <8p>
標記再加空行。
因此在一行中無法使用不同大小的字體。
字體大小
<*font size=#> ... <*/font> #=1, 2, 3, 4, 5, 6, 7 or +#,
-#
<*basefont size=#> #=1, 2, 3, 4, 5, 6, 7
<*font size=7>今天天氣真好！<*/font> 今天天氣真好！
<*font size=6>今天天氣真好！<*/font> 今天天氣真好！
<*font size=5>今天天氣真好！<*/font> 今天天氣真好！
<*font size=4>今天天氣真好！<*/font> 今天天氣真好！
<*font size=3>今天天氣真好！<*/font> 今天天氣真好！
<*font size=2>今天天氣真好！<*/font> 今天天氣真好！
<*font size=1>今天天氣真好！<*/font> 今天天氣真好！
指定「字體大小」的標記和「指定字體」的標記的組合使用
<*i><*font size=5>
<*b>今天<*/b> 天氣<*font size=6> 真好！<
*/font>
<*/font><*/i>
今天 天氣 真好！
字體顏色
指定顏色 <*font color=#> ... <*/font>
#=rrggbb 16 進制數碼，或者是下列預定義色彩：
Black, Olive,
Teal, Red, Blue,
Maroon, Navy,
Gray, Lime,
Fuchsia, White,
Green, Purple,
Silver, Yellow,
Aqua
**********************
貼圖:
貼圖的正確格式是:<*center><*img src="http://yftk.voline.net/images/LOGOZZ.GIF">
圖片來回移動：(注意指定寬度和高度)
背景圖片語法：<*body background="http://www.binghe.com/s/yinyue/mid/images/star_back.gif"><*/body>
圖文居中:
在圖文前面加 <*center>
這是透明效果,大家試下,貼時要將* 號去掉. <*img src="http://forums.zol.com.cn/new/book_new_img/16739.img " width=300 height=250 style=filter:Alpha(opacity=100,style=2);> 為了您的安全，請只打開來源可靠的網址
來自: http://hi.baidu.com/qingchaxxd/blog/item/8d597508cb4be98ad1581bc4.html
|
目前共有2篇帖子。
html標籤大全（按功能詳解）
回復帖子 |
