HTML非常用標簽 optgroup、sub、sup和bdo示例代碼

字號:


    HTML標簽之optgroup、sub、sup和bdo的用法與示例代碼,需要的朋友可以參考下。
    optgroup 用在select 標記中 可以使下拉列表內容更加有條理 
    代碼如下:
    <select>
    <optgroup label="aaa">
    <option>分清是非</option>
    <option>分清是非</option>
    <option>分清是非</option>
    </optgroup>
    <optgroup label="bbb">
    <option>分清是非</option>
    <option>分清是非</option>
    <option>分清<br/>是非</option>
    </optgroup>
    </select>
    sub 上標 
    sup 下標 可與<em>一起用于注釋 
    dbo dir 標記一起使用,可以改變文字的輸出方向,右->左 
    代碼如下:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>4個不常用HTML標簽optgroup、sub、sup和bdo。</title>
    <style type="text/css">
    fieldset{width:300px;padding:5px 5px;  margin:30px auto; display:block; line-height:125%; font-size:15px;}
    legend{margin-left:15px; font-size:18px; color:red; }
    bdo{color:red;}
    </style>
    </head>
    <body>
    <fieldset><legend>optgroup</legend>
    <select>
    <optgroup label="HTML標記">
    <option>table</option>
    <option>tr</option>
    <option>td</option>
    <option>th</option>
    </optgroup>
    <optgroup label="ASP內置對象">
    <option>cookies</option>
    <option>session</option>
    <option>application</option>
    <option>redirect</option>
    </optgroup>
    </select>
    <select>
    <optgroup label="">
    <option>....</option>
    </optgroup> 
    </select>
    </fieldset>
    <fieldset>
    <legend>sub標記</legend>
    X<sub>2</sub> 上標 X<sub>2</sub>
    X<sup>2</sup> 下標 X<sup>2</sup>
    <hr />
    與<em>標簽結合可以用于注釋,例:
    flying<sub><em>注:HTML XHTML網頁編碼 版主</em></sub>
    </fieldset>
    <fieldset><legend>bdo標記</legend>
    <bdo dir="ltr">我非常愛你</bdo>
    <bdo dir="rtl">你愛常非我</bdo>
    輸出結果為  
    <bdo dir="ltr">我非常愛你</bdo>
    <bdo dir="rtl">你愛常非我</bdo>
    注:使用bod標簽時必須連用dir標簽屬性,ltr指從左到右的編排順序,rtl指從右到左的編排順序。
    </p>
    </p>
    </fieldset>
    </body>
    </html>
    提示:您可以先修改部分代碼再運行