标签嵌套规则和注意事项

1、块级元素可以嵌套内联元素，但是内联元素不能包含块级元素

2、块级元素分3个级别：

　　1）body

　　2）可自由嵌套的块级元素

　　3）不可自由嵌套的块级元素：只能放行内元素，不能放其他块级元素  例如：标题标记的<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption>；段落标记的<p>；分隔线<hr>；一个特别的元素<dt>(它只存在于列表元素<dl>的子一级)。

在HTML里有几个元素是比较特别的：<ul>、<ol>、<dl>、<table>，它们的子一层必须是指定元素，<ul>、<ol>的子一级必须是<li>；<dl>的子一级必须是<dt>或者<dd>；<table>的子一层必须是<caption> 或<thead>、<tfoot>、<tbody>等，而再子一层必须是<tr> （<tr>只存在于<thead>、<tfoot>、<tbody>中），之后才是可放内容的<td>或者<th>

 

上面的规则是w3c标准，有些虽然不建议使用但是浏览器依然可以正常渲染出来，而有些则不会正常渲染，例如 p标签里面放div

原始代码：

<p><div>你好</div></p>

浏览器世界渲染代码：

<p></p>
<div>你好</div>

所以还是尽量按照上面的标准执行最好

3.在内联元素中，还是可以再区分一下，有几个元素（<img>、<input>等）比较特别，它们可以定义宽高。虽然在IE 浏览器里，所有的元素都可以定义宽高，但这是IE自己的标准，并非所有浏览器都支持，W3C称它们为替换元素，它们在属于inline的情况下同样具有block的一些特性，在"display:inline-block的应用"中所说的inline-block其实就是让其他元素也模拟成replaced元素，使之既可以以内联元素显示，又可以设置块级元素的属性。

 

块元素(block element) HTML标签分类明细
    * address - 地址
    * blockquote - 块引用
    * center - 举中对齐块
    * dir - 目录列表
    * div - 常用块级容易，也是css layout的主要标签
    * dl - 定义列表
    * fieldset - form控制组
    * form - 交互表单 （只能用来容纳其它块元素）
    * h1 - 大标题
    * h2 - 副标题
    * h3 - 3级标题
    * h4 - 4级标题
    * h5 - 5级标题
    * h6 - 6级标题
    * hr - 水平分隔线
    * isindex - input prompt
    * menu - 菜单列表
    * noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
    * noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
    * ol - 排序表单
    * p - 段落
    * pre - 格式化文本
    * table - 表格
    * ul - 非排序列表

  内联元素(inline element) 一般都是基于语义级(semantic)的基本元素，只能容纳文本或者其它内联元素。
   * a - 锚点
    * abbr - 缩写
    * acronym - 首字
    * b - 粗体(不推荐)
    * bdo - bidi override
    * 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 - 定义变量