标签嵌套规则知多少?

萌码编程
11-07 13:51

标签之间可以嵌套,这是大家都知道的。那是不是任何标签都可以互相嵌套,百无禁忌呢?咱们看个例子:

HTML代码:

<p><div>标签嵌套</div></p>

浏览器渲染结果:

虽然例子中的代码是将<div>标签写在<p>标签之中,但是渲染时<div>标签将<p>标签分隔成了两个!这样必然会影响页面中的布局效果!

所以,标签之间的嵌套是要遵守一定规则的,这个规则如下:

1、块级元素分3个级别:

  1)body

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

  3)不可自由嵌套的块级元素

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

块级元素一般用来搭建网站架构、布局、承载内容……比如这些标签:div、ul、li、form、h1~h6、p等。其中,不可自由嵌套的块级元素指的是只能放行内元素,不能放其他块级元素 。例如上面案例中的<p>标签,另外还有标题标签<h1>-<h6><caption>;分隔线<hr>;一个特别的元素<dt>(它只存在于列表元素<dl>的子一级)。

除此之外还有几个元素是比较特别的:<ul>、<ol>、<dl>、<table>,它们的子一层必须是指定元素,<ul>、<ol>的子一级必须是<li>;<dl>的子一级必须是<dt>或者<dd>;<table>的子一层必须是<caption> 或<thead>、<tfoot>、<tbody>等,而再子一层必须是<tr> (<tr>只存在于<thead>、<tfoot>、<tbody>中),之后才是可放内容的<td>或者<th>。

内联元素一般用在网站内容之中的某些细节或部位,用以“强调、区分样式、上标、下标、锚点”等等,比如:<a>、<span>、<img>、<input>、<strong>、<sub>等。在内联元素中,还可以再区分一下,例如<img>、<input>,它们可以定义宽高。虽然在IE 浏览器里,所有的元素都可以定义宽高,但这是IE自己的标准,并非所有浏览器都支持,W3C称它们为替换元素,它们在属于inline的情况下同样具有block的一些特性,在"display:inline-block的应用"中所说的inline-block其实就是让其他元素也模拟成replaced元素,使之既可以以内联元素显示,又可以设置块级元素的属性。

ps:<li>标签属于块级元素,所以它的内部可以嵌套其他元素,比如<div>或者<p>,但是,<li>本身只能嵌套在<ul>或<ol>中