HTML嵌套規(guī)則

HTML嵌套規(guī)則

HTML存在許多種類的標(biāo)簽，有的標(biāo)簽下面只允許特定的標(biāo)簽存在，這就叫HTML嵌套規(guī)則。
不按HTML嵌套規(guī)則寫，瀏覽器就不會正確解析，會將不符合嵌套規(guī)則的節(jié)點(diǎn)發(fā)到目標(biāo)節(jié)點(diǎn)下面，或者變成純文本。

塊狀元素和內(nèi)聯(lián)元素
塊狀元素:是可以容納內(nèi)聯(lián)元素和塊狀元素，塊狀元素排斥其他元素與其位于同一行，寬度(width)和高度(height)起作用，常見的塊狀元素為div或者p。
如:address、blockquote、center、dir、div、dl、dt、dd、 fieldset、form、h2~h7、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul
內(nèi)聯(lián)元素:可以容納文本和其他內(nèi)聯(lián)元素，允許其他內(nèi)聯(lián)元素與其位于同一行，但高度(height)和寬度(width)不起作用，常見的內(nèi)聯(lián)元素為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。

規(guī)則1：塊元素可以包含內(nèi)聯(lián)元素或某些塊元素，但內(nèi)聯(lián)元素卻不能包含塊元素，它只能包含其他的內(nèi)聯(lián)元素
如：<div><h2></h2><p></p></div>  對
<a href='#'><span></span></a> 對
<span><div></div></span> 錯


規(guī)則2：塊狀元素不能發(fā)在<p>里面
如： <p><ol><li></li></ol></p> 錯
<p><div></div></p> 錯

規(guī)則3：有幾個塊狀元素只能包含內(nèi)聯(lián)元素不能包含塊級元素，這幾個標(biāo)簽是
如：h2 h3 h4 h5 h6 h7 p dt

規(guī)則4: li可以包含div標(biāo)簽
如：<li><div></div></li>  錯
li和div 等級平等

規(guī)則5：塊元素與塊元素并列，內(nèi)聯(lián)元素與內(nèi)聯(lián)元素并列
如：<div><h3></h3><p></p></div> 對
<div><a #href='#'></a><span></span></div>  對
<div><h3></h3><span></span></div> h3塊元素 span內(nèi)聯(lián)元素 不被提倡 錯

某些特殊元素
<ol><li> 或者<ul><li> 只允許注釋節(jié)點(diǎn)或者style span標(biāo)簽的存在

<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> 
 
根據(jù)mutiple 是多選還是單選 

<img src="imgs/1.jpg" usemap="#myp_w_picpath"/>
     <map name="myp_w_picpath">
     <!--rect 矩形 circle 圓形 poly 多邊形-->
     <area shape="circle" coords="30,30,30" href="http://www.baidu.com">
     <!--圓形 coords 前2個數(shù)字為圓心坐標(biāo)，最后一個數(shù)字為半徑長度 -->
     <area shape="rect"  coords="50,50,100,100" href="http://www.qq.com">
     <!--矩形 coords 前2個數(shù)字為左上角坐標(biāo)，后2個數(shù)字為右下角坐標(biāo) -->
     <area shape="poly"  coords="232,70,285,70,300,90,250,90,200,78" href="http://www.taobao.com">
     <!--多邊形 coords 每一個轉(zhuǎn)折點(diǎn)坐標(biāo)依序填入 -->
</map> 
后續(xù)的多媒體就不更新了暫時用不到

表格系列
<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>
       <tr>
         <td>January</td>
         <td>$100</td>
      </tr>
      <tr>
        <td>February</td>
        <td>$80</td>
      </tr>
   </tbody>
</table>