HTML嵌套規則

HTML嵌套規則

HTML存在許多種類的标簽，有的标簽下面隻允許特定的标簽存在，這就叫HTML嵌套規則。

不按HTML嵌套規則寫，浏覽器就不會正确解析，會将不符合嵌套規則的節點發到目标節點下面，或者變成純文字。

塊狀元素和内聯元素

塊狀元素:是可以容納内聯元素和塊狀元素，塊狀元素排斥其他元素與其位于同一行，寬度(width)和高度(height)起作用，常見的塊狀元素為div或者p。

如:address、blockquote、center、dir、div、dl、dt、dd、 fieldset、form、h1~h6、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul

内聯元素:可以容納文本和其他内聯元素，允許其他内聯元素與其位于同一行，但高度(height)和寬度(width)不起作用，常見的内聯元素為a。

如: a、abbr、acronym、b、bdo、big、 br、 cite、 code、 dfn、em、font、i、img、 input、 kbd、 label、 q、s 、samp、 select、 small、span、 strike、 strong 、sub 、sup、 textarea 、tt、 u、 var。

規則1：塊元素可以包含内聯元素或某些塊元素，但内聯元素卻不能包含塊元素，它隻能包含其他的内聯元素

如：<div><h1></h1><p></p></div>  對

<a href='#'><span></span></a> 對

<span><div></div></span> 錯

規則2：塊狀元素不能發在<p>裡面

如： <p><ol><li></li></ol></p> 錯

<p><div></div></p> 錯

規則3：有幾個塊狀元素隻能包含内聯元素不能包含塊級元素，這幾個标簽是

如：h1 h2 h3 h4 h5 h6 p dt

規則4: li可以包含div标簽

如：<li><div></div></li>  錯

li和div 等級平等

規則5：塊元素與塊元素并列，内聯元素與内聯元素并列

如：<div><h2></h2><p></p></div> 對

<div><a #href='#'></a><span></span></div>  對

<div><h2></h2><span></span></div> h2塊元素 span内聯元素 不被提倡 錯

某些特殊元素

<ol><li> 或者<ul><li> 隻允許注釋節點或者style span标簽的存在

<dl>

    <dt>Today</dt>

    <dd>Today is yesterday</dd>

    <dt>Tomorrow</dt>

    <dd>Tomorrow is today</dd>

</dl> 

<select name ="bid" id="brand_3" mutiple="false">

    <option value="">請選擇品牌</option>

    <optgroup label="A"></optgroup>

    <option value="693" custom="693">A AC寶馬</option>

    <option value="62" custom="62">A 阿斯頓馬丁</option>

    <option value="1"  custom="1">A 奧迪</option>

    <optgroup label="B"></optgroup>

    <option value="723" custom="723">B 巴博斯</option>

    <option value="44" custom="44">B 保時捷</option>

    <option value="582" custom="582">B 寶馬</option>

</select> 

根據mutiple 是多選還是單選 

<img src="imgs/1.jpg" usemap="#myimage"/>

     <map name="myimage">

     <!--rect 矩形 circle 圓形 poly 多邊形-->

     <!--圓形 coords 前2個數字為圓心坐标，最後一個數字為半徑長度 -->

     <!--矩形 coords 前2個數字為左上角坐标，後2個數字為右下角坐标 -->

     <!--多邊形 coords 每一個轉折點坐标依序填入 -->

</map> 

後續的多媒體就不更新了暫時用不到

表格系列

<table>

    <colgroup span="2" valign="top">

      <col align="center"></col>

      <col valign="middle"></col>

    </colgroup>

    <thead>

       <tr>

        <th>Month</th>

        <th>Savings</th>

      </tr>

    </thead>

    <tfoot>

      <tr>

       <td>Sum</td>

       <td>$180</td>

     </tr>

    </tfoot>

    <tbody>

         <td>January</td>

         <td>$100</td>

        <td>February</td>

        <td>$80</td>

   </tbody>

</table>

本文轉自 卓行天下  51CTO部落格，原文連結：http://blog.51cto.com/9951038/1745921，如需轉載請自行聯系原作者