HTML嵌套规则-创新互联

HTML嵌套规则

创新互联建站专业为企业提供闽侯网站建设、闽侯做网站、闽侯网站设计、闽侯网站制作等企业网站建设、网页设计与制作、闽侯企业网站模板建站服务，10多年闽侯做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

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>

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。