愚人碼頭

          知恥而后勇,知不足而進
          隨筆 - 33, 文章 - 1, 評論 - 26, 引用 - 0
          數據加載中……

          HTML標簽詳解

          --  HTML標簽詳解
          HTML指令詳解
          結構
          <html>
          <head>
          <title>標題<title>
          </head>
          <body>..........文件內容..........
          </body>
          </html>
          1.文件標題
          <title>..........</title>
          2.文件更新--<meta>
           【1】10秒后自動更新一次
            <meta http-equiv="refresh" content=10>
           【2】10秒後自動連結到另一文件
            <meta http-equiv="refresh" content="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=點數或百分比> 
          【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.注解 <!--..........-->21.特殊字元表示法 
          符 號   語 法  
          <     &lt  
          >     &gt  
          &     &amp  
          "     &quot  
          空白    &nbsp  

           

          圖片
          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.定義表格 <table>..........</table> 
          【1】設定邊框的厚度 -- border
          <table border=點數> 
          【2】設定格線的寬度 -- cellspacing
          <table cellspacing=點數> 
          【3】設定資料與格線的距離 -- cellpadding
          <table cellpadding=點數> 
          【4】調整表格寬度 -- width
          <table width=點數或百分比> 
          【5】調整表格高度 -- height
          <table height=點數或百分比> 
          【6】設定表格背景色彩 -- bgcolor
          <table bgcolor=#rrggbb> 
          【7】設定表格邊框色彩 -- bordercolor
          <table bordercolor=#rrggbb>
          2.顯示格線 <table border>
          3.表格標題
          <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=欲合并欄位數>
          清單
          一、目錄式清單 
          <dir> <li>項目1 <li>項目2 <li>項目3 </dir> P.S.目錄式清單每一個項目不能超過20個字元(即10個中文字)
          二、選項式清單 <menu> <li>項目1 <li>項目2 <li>項目3 </menu>
          三、有序號的清單 <ol> <li>項目1 <li>項目2 <li>項目3 </ol> 
          【1】序號形式 -- type <ol type=#>或<li type=#> #號可為 A:表以大寫英文字母AⅱBⅱCⅱD...做為項目編號 a:表以小寫英文字母aⅱbⅱcⅱd...做為項目編號 I:表以大寫羅馬數字做為項目編號 i:表以小寫羅馬數字做為項目編號 1:表以阿拉伯數字做為項目編號(預設值) 
          【2】起始數字 -- start <ol start=欲開始計數的序數> 
          【3】指定編號 -- value <li value=欲指定的序數>
          四、無序號的清單 <ul> <li>項目1 <li>項目2 <li>項目3 </ul> 
          【1】項目符號形式 -- type <ul type=#>或<li type=#> #號可為 disc:實心圓點(預設值) circle:空心圓點 square:實心方塊 
          【2】原始清單 -- plain <ul plain> 
          【3】清單排列方式 -- warp 《1》清單垂直排列 <ul warp = vert> 《2》清單水平排列 <ul warp = horiz>
          五、定義式清單 <dl> <dt>項目1 <dd>項目1說明 <dt>項目2 <dd>項目2說明 <dt>項目3 <dd>項目3說明 </dl> 
          緊密排列 -- 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="資料欄名"> P.S.若type為submitⅱreset則name不必設定 
          【3】文件上的預設值 -- value <input value="預設之字串"> 
          【4】設定欄位的寬度 -- size <input size=字元數> 
          【5】限制最大輸入字串的長度 -- maxlength <input maxlength=字元數> 
          【6】預設checkbox或radio的初值 -- checked <input type=checkbox checked> <input type=radio checked> 
          【7】指定圖形的URL -- src <input type=image src="圖檔名"> 
          【8】圖文對齊 -- align <input type=image align="#"> #號可為 top:文字對齊圖片之頂端 middle:文字對齊圖片之中間 buttom:文字對齊圖片之底部
          三、選擇式表單 <form action="URL" method="post"> <select> <option> <option> .......... .......... </select> </form> 
          A、<select>的屬性 
          【1】欄位名稱 -- name <select name="資料欄位名"> 
          【2】設定顯示的選項數 -- size <select size=個數> 
          【3】多重選項 -- multiple <select multiple> 
          B、<option>的屬性 
          【1】定義選項的傳回值 -- value <option value="傳回值"> 
          【2】預先選取的選項 -- selected <option selected>
          四、多列輸入文字區表單 <form action="URL" method="post"> <textarea> .......... .......... </textarea> </form> 
          【1】文字區的變數名稱 -- name <textarea name=變數名稱> 
          【2】設定文字輸入區寬度 -- cols <textarea cols=字元數> 
          【3】設定文字輸入區高度 -- rows <textarea rows=列數> 
          【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" target=_self>
          【3】以上一層的分割視窗顯示連結文件 -- _parent <a href="URL" target=_parent>
          【4】以全視窗顯示連結文件 -- _top <a href="URL" target=_top> 
          【5】以特定視窗顯示連結文件 --<a href="URL" target="特定視窗名稱">
          FRAME
          一、分割視窗指令 <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=點數或百分比>
          二ⅱ指定視窗內容 -- <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>

          posted on 2005-11-17 15:21 船夫 閱讀(376) 評論(1)  編輯  收藏 所屬分類: Web開發

          評論

          # re: HTML標簽詳解  回復  更多評論   

          <font size=3>66666666666666666</font>
          2007-10-15 21:45 | 888888888888
          主站蜘蛛池模板: 屏东市| 余干县| 佛坪县| 重庆市| 新乡县| 宜良县| 通山县| 高唐县| 黎城县| 城固县| 得荣县| 东明县| 临漳县| 固安县| 罗甸县| 景德镇市| 康平县| 蒙山县| 新绛县| 四会市| 高雄市| 资兴市| 高清| 闽清县| 米易县| 吴堡县| 东乌珠穆沁旗| 平遥县| 鱼台县| 新安县| 栖霞市| 昌乐县| 莆田市| 安徽省| 芮城县| 平乡县| 新兴县| 福安市| 唐海县| 惠水县| 肇源县|