HTML標籤詳解

--  HTML標籤詳解
HTML指令詳解
結構
＜html＞
＜head＞
＜title＞標題＜title＞
＜/head. .........
＜/body＞
＜/html＞
1.檔案標題
＜title＞..........＜/title＞
2.檔案更新--＜ meta＞
　【1】10秒後自動更新一次
　　＜meta http-equiv="refresh" content=10＞
　【2】10秒後自動連結到另一檔="10；URL=欲連結文件之URL"＞
3.查詢用表單--＜isindex>
　　　若欲設定查詢欄位前的提示文字：
　　＜isindex PRompt="提示文字"＞
4.預設的基準路徑--＜base>
   ＜base href="放置檔案的主機之URL"＞
版面
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）色碼
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= 或百分比＞ "#"＞ #號可為 left：表格向左對齊（預設值） center：表格向中對齊 right：表格向右對齊 
【4】分隔線的顏色 ＜hr color=#rrggbb＞ 
【5】實心分隔線 ＜hr noshade＞
17.向中對齊 ＜center＞..........＜/center＞
18.依原始樣式顯示 ＜pre＞.......... ＜/pre＞
19.＜body＞指令的屬性 
【1】背景顏色 -- bgcolor ＜body bgcolor=#rrggbb＞ 
＠ 3】設定背景圖案不會捲動 -- bgproperties ＜body bgproperties=fixed＞ 
【4】文件內容文字的顏色 -- text ＜body text=#rrgg body link=#rrggbb＞ 
【6】被選取的超連結文字顏色 -- vlink ＜body vlink=#rrggbb＞ 
【7】已連結過的超連結文字顏色＠-- alink
20.註解 ＜!--..........--＞21.特殊字元表示法 
符 號 　　語 法  
＜  〔　〔｠｠
& 　　 　＆ａｍｐ  
"  　　　ｑｕｏｔ  

圖片
1.插入圖片 ＜img src="圖形檔案名稱"＞
2.設定圖框 -- border ＜img src="圖形檔案名稱" border=點數＞
3.設定圖形大小＜img src="圖形檔名" width=寬度點數 height=高度點數＞
4.設定圖形上下左右留空 -- vspaceⅱhspace ＜img src="圖形檔名空點數＞
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"＞       shape =rect：矩形         shape=circle：圓形         shape=poly：多邊形    
【2】定義區域中四個座數為數字右下角座標
例：＜area shape=rect coords=100,50,200,75 href="URL"＞
b.圓形：必須使用三個數字，前兩個數字為圓心的座標，最後一個數字為半徑長度
例：＜area shape=circle coords=85,155,30 href="URL"＞
c.任圖形（多邊形）：將圖形每一轉折點座標依序填入
例：任意圖形（多邊形）：將圖形每一轉折點座標依序填入
例：＜area poly coords=232,70,285,70,300,90,250,90,200,78 href="URL"＞
表格
1.定義表格 ＜table＞..........＜/table＞ 
【邊框的厚度 -- border
＜table border=點數＞ 
【2】設定格線的寬度 -- cellspacing
＜table cellspacing=點數＞ 
table cellpadding=點數＞ 
【4】調整表格寬度 -- width
＜table width=點數或百分比＞ 
【5】調整表格高度 -- height
＜table 
【5】調整表格高度 -- height
＜table 
數或百分比調整表格高度 -- height
＜table 
表百分比或百分比調整表格背景色彩 -- bgcolor
＜table bgcolor=#rrggbb＞ 
【7】設定表格邊框色彩 -- bordercolor
＜table border caption＞..........＜/caption＞ 
表格標題位置 -- align
＜caption align="#"＞ #號可為 top：表標題置於表格上方（預設值）
bottom：表標題置於表格下方
4.定義列 ＜tr＞
5.定義欄位 《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 ＜li＞項目2 ＜li＞項目3 ＜/dir＞ P.S.目錄式清單每個項目不能超過20個字符（即10個中文字）
二、選項式清單 ＜menu＞ ＜li＞ ＜li＞1 ＜ li＞項目2 ＜li＞項目3 ＜/menu＞
三、有序號的清單 ＜ol＞ ＜li＞項目1 ＜li＞項目2 ＜li＞項目【1】序號形式 -- type ＜ol type=#＞或＜li type=#＞ #號可為 A：表以大寫英文字母AⅱBⅱCⅱD...做為項目編號 a：表以小寫英文字母為22ⅱbⅢ .做為項目編號 I：表以大寫羅馬數字做為項目編號 i：表以小寫羅馬數字做為項目編號 1：表以阿拉伯數字做為項目編號（預設值） 
【2】起始數字 - - start ＜ol start=欲開始計數的序數＞ 
【3】指定編號 -- value ＜li value=欲指定的序數＞
四、無序號的清單 ＜ul＞ ＜li＞ ＜ ＜li＞項目3 ＜/ul＞ 
【1】項目符號形式 -- type ＜ul type=#＞或＜li type=#＞ #號為 disc：實心圓點（預設值）圓點（預設值）圓點（預設值）圓點點 square：實心方塊 
【2】原始清單 -- plain ＜ul plain＞ 
【3】清單排列方式 -- warp 《1》清單垂直排列 ＜ul warp = warp 《1》清單垂直排列＠ horiz＞
五、定義式清單 ＜dl＞ ＜dt＞項目1 ＜dd＞項目1說明 ＜dt＞項目2 ＜dd＞項目2說明 ＜dt＞項目2 ＜dd＞項目2說明 ＜dt＞項目緊密排列 -- compact ＜dl compact＞ P.S.如此可使＜dt＞的內容與＜dd＞的內容在同一行，僅 以數格空白相隔而不換行，但若＜dt＞的文字超過一 定的長度後，compact的作用就消失了！
表單
一、基本架構 ＜form action="處理資料用的CGI程序之URL"或"mailto:電子信箱的URL" method="get或post"＞ .......... .. ........ .......... ＜/form＞ 
二、輸入檔案型表單 ＜form action="URL" method="post"＞ ＜input＞ ＜input＞ .. ........ .......... ＜/form＞ 
【1】欄位類型 -- type ＜input type=#＞ #號可為 text：文字輸入 passWord：密碼 checkbox ：多重選取按鈕 radio：單選鈕 submit：接受按鈕 reset：重設按鈕 image：圖形鈕 hidden：隱藏欄位 
【2】欄位名稱 -- name ＜input name="資料欄名"＞欄位名稱 -- name ＜input name="資料欄名"＞欄位名稱 -- name ＜input name="資料欄名"＞欄位名稱.S.type為submitⅱreset則name不必設定 
【3】文件上的預設值 -- value ＜input value="預設字符串"＞ 
【4】設定欄位的寬度 -- size ＜input 
=字】設定欄位的寬度 -- size ＜input size=字】設定欄位的寬度 -- size ＜input size=字】元數＞ 
【5】限制最大輸入字串的長度 -- maxlength ＜input maxlength=字元數＞ 
【6】預設checkbox或radio =radio checked＞ 
【7】指定圖形的URL -- src ＜input type=image src="圖檔名"＞ 
【8】圖文對準號可為 top：文字對齊圖片之頂端 middle：文字對齊圖片中間 buttom：文字對齊圖片底部
三、選擇式表單 ＜form action="URL" method="post"＞ ＜select＞ ＜option method="post"＞ ＜select＞ option＞ .......... .......... ＜/select＞ ＜/form＞ 
A、＜select＞的屬性 
【1】欄位名稱 -- name ＜select name="資料欄位名"＞ 
【2】設定顯示的選項數 -- size ＜select size=個數＞ 
【3】多重選項 -- multiple ＜select multiplelect＞
【1】定義選項的傳回值 -- value ＜option value="傳回值"＞ 
【2】預先選取的選項 -- selected ＜option selected＞
、多列輸入文字區表單="URL" method="post"＞ ＜textarea＞ .......... .......... ＜/textarea＞ ＜/form＞ 
【1】文字區的變數名稱-- name ＜textarea name=變數名稱＞ 
【2】設定文字輸入區寬度 -- cols ＜textarea cols=字元數＞ 
【3】一個文字 . ＞ 
【4】輸入區設定預設字符串 ＜textarea＞ 預設文字 ＜/textarea＞ 
【5】自動換行與否 -- wrap ＜textarea wrap=#＞ #號可為 off：表輸入的文字超過欄寬時，不會自動換行（預設值） virtual：表輸入的文字在超過欄寬時會自動換行
連結
一、連結至其他文件 ＜a href="URL"＞說明文字或圖片＜/a＞
二、連結至文件內之某一處（外部連結） 
《1》起點
＜a href="檔名#名稱"＞..........＜/a＞ 
《2》終點 ＜a name="名稱"＞
三、frame的超連結 
【1】開啟新的瀏覽器顯示連結檔 -- _blank ＜a href="URL" target=_blank＞
【2】顯示連結檔於目前的frame -- _self ＜a href="URL" %get=self3" 】以上一層的分割視窗顯示連結文件 -- _parent ＜a href="URL" target=_parent＞
【4】以全視窗顯示連結檔 -- _top ＜a href="URLL getget=top" 5】以特定視窗顯示連結文件 --＜a href="URL" target="特定視窗名稱"＞
FRAME
一、分割視窗指令 ＜frameset＞..........＜/frameset＞
【1】垂直（上下）分割 -- rows
＜frameset rows=#＞ #號可為點數：如欲分割為100,200,300三個視窗，則
＜frameset s=100,200,330,300,300,300 ＜frameset rows=*,500,*＞
百分比：如＜frameset rows=30%,70%＞，各 項總和最好為100%
【2】水平（左右） -- cols ＜frame 或百分比＞
二ⅱ指定視窗內容 -- ＜frame＞
＜frameset cols=30%,70%＞    ＜frame＞   ＜frame ＜frame src =HTML檔名＞ 
【2】定義視窗的名稱 -- name
＜frame name=視窗名稱＞ 
【3】設定檔與上邊框的距離 -- marginheight
＜設定文件與左右邊框的距離 -- marginwidth
＜frame marginwidth=點數＞ 
【5】設定分割視窗捲軸 -- scrolling
＜frame scrolling=#＞ -- scrolling
＜frame scrolling=#＞ -- scrolling
＜frame scrolling=#＞ -- scrolling
＜出現捲軸 auto：自動判斷檔案大小需不需要捲軸（預設值）
【6】鎖住分割視窗的大小 -- noresize ＜frame noresize＞

 以上就是HTML標籤詳解的內容，更多相關文章請注意PHP中文網（www.php.cn）！