HTML嵌套规则

HTML嵌套规则

HTML存在许多种类的标签，有的标签下面只允许特定的标签存在，这就叫HTML嵌套规则。
不按HTML嵌套规则写，浏览器就不会正确解析，会将不符合嵌套规则的节点发到目标节点下面，或者变成纯文本。

块状元素和内联元素
块状元素:是可以容纳内联元素和块状元素，块状元素排斥其他元素与其位于同一行，宽度(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
内联元素:可以容纳文本和其他内联元素，允许其他内联元素与其位于同一行，但高度(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><h2></h2><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：有几个块状元素只能包含内联元素不能包含块级元素，这几个标签是
如：h2 h3 h4 h5 h6 h7 p dt

规则4: li可以包含div标签
如：<li><div></div></li>  错
li和div 等级平等

规则5：块元素与块元素并列，内联元素与内联元素并列
如：<div><h3></h3><p></p></div> 对
<div><a #href='#'></a><span></span></div>  对
<div><h3></h3><span></span></div> h3块元素 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="#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个数字为圆心坐标，最后一个数字为半径长度 -->
     <area shape="rect"  coords="50,50,100,100" href="http://www.qq.com">
     <!--矩形 coords 前2个数字为左上角坐标，后2个数字为右下角坐标 -->
     <area shape="poly"  coords="232,70,285,70,300,90,250,90,200,78" href="http://www.taobao.com">
     <!--多边形 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>
       <tr>
         <td>January</td>
         <td>$100</td>
      </tr>
      <tr>
        <td>February</td>
        <td>$80</td>
      </tr>
   </tbody>
</table>