HTML标签嵌套规则

[HTML] 纯文本查看 复制代码

<ul> <li> <h4><a href=""><div></div></a></h4> </li> </ul>

上面的代码来自于FACEBOOK，大家对于上面HTML标签的相互嵌套关系能否感觉有所不妥。

下面先对HTML标签的嵌套规则停止一下引见，然后再对上面的代码停止一下剖析。

一.HTML4/XHTML的嵌套规则:

在咱们的印象中会有这样的嵌套规则:

规则如下:

（1）.内联元素不能嵌套块元素。

（2）.<p>元素和<h1~6>元素不能嵌套块元素。

关于块级元素和内联元素:

块元素普通都从新行末尾，内联元素在一行内显示，咱们也可能经过CSS属性display的"inline"或"block"来扭转元素为内联元素或块元素，当然这是CSS中对元素的分类，显然用"display"的属性值来对html元素停止分类是不谨严的。

假设依照上述规则来讲，FACEBOOK做法就是一种谬误的，由于它在内联元素<a>元素中嵌套了块元素元素<div>，但上述规则是基于HTML4/xHTML1的strict形式，而FACEBOOK如今已经一致利用了html5的doctype，那么这个规则到底还是能否实用呢。

二.HTML5的元素嵌套规则:

W3C在最新的HTML5规范中对元素的分类模式:

元素的分类不再是块元素或内联元素这样来分类（其实素来就没有这样分），而是依照如下分类来分：Flow（流式元素）、Heading（题目元素）、Sectioning（章节元素）、Phrasing（段落元素）、Embedded（嵌入元素）、Interactive（交互元素）、Metadata（元数据元素）。

Flow（流式元素）:

在运用程序和文档的主体局部中利用的大局部元素都被分类为流式元素。

[HTML] 纯文本查看 复制代码

a， abbr， address， area（假设它是map元素的后裔）， article， aside， audio， b， bdi， bdo， blockquote， br， button， canvas， cite， code， command， datalist， del， details， dfn， div， dl，em， embed， fieldset， figure， footer， form， h1， h2， h3， h4， h5， h6， header， hgroup， hr， i， iframe， img， input， ins， kbd， keygen， label， map， mark， math， menu， meter，nav， noscript， object， ol， output， p， pre， progress， q， ruby， s， samp， script， section， select， small， span， strong， style（假设该元素设置了scoped属性）， sub， sup， svg， table，textarea， time， u， ul， var， video， wbr， text

Heading（题目元素）:

题目式元素定义一个区块/章节（section）（无论是明白的利用章节式内容的元素标记，或许题目式内容本身所隐含的）的题目。

[HTML] 纯文本查看 复制代码

h1， h2， h3， h4， h5， h6， hgroup

Sectioning（章节元素）:

章节式元素是用于定义题目及页脚范围的元素。

[HTML] 纯文本查看 复制代码

article， aside， nav， section

Phrasing（段落元素）:

段落式元素是文档中的文本、标记段落级文本的元素。

[HTML] 纯文本查看 复制代码

a（假设其只蕴含段落式元素）， abbr， area（假设它是map元素的后裔）， audio， b， bdi， bdo， br， button， canvas， cite， code， command， datalist， del（假设其只蕴含段落式元素）， dfn， em， embed， i，iframe， img， input， ins（假设其只蕴含段落式元素）， kbd， keygen， label， map（假设其只蕴含段落式元素）， mark， math， meter， noscript， object， output， progress， q， ruby， s， samp， script，select， small， span， strong， sub， sup， svg， textarea， time， u， var， video， wbr， text

Embedded（嵌入元素）:

嵌入式元素是引用或插入到文档中其余资源的元素。

[HTML] 纯文本查看 复制代码

audio， canvas， embed， iframe， img， math， object， svg， video

Interactive（交互元素）:

交互式元素是专门用于与用户交互的元素。

[HTML] 纯文本查看 复制代码

a， audio（假设设置了controls属性）， button， details， embed， iframe， img（假设设置了usemap属性）， input（假设type属性不为hidden形状）， keygen， label， menu（假设type属性为toolbar形状）， object（假设设置了usemap属性）， select， textarea， video（假设设置了controls属性）

Metadata（元数据元素）:

元数据元素是可能被用于阐明其余内容的体现或行为，或许在以后文档和其余文档之间建设联络的元素。

[HTML] 纯文本查看 复制代码

base，command，link，meta，noscript，script，style，title

各分类会有穿插或堆叠的现象，这阐明在html5中，元素能够属于上述一切分类中的一个或多个。

代码实例一:

<h1>~<h6>元素:

所属分类:

（1）.Flow content。

（2）.Heading content。

（3）.Palpable content.

顺便阐明: