《Web前端开发最佳实践》——3.3　正确闭合HTML标签

简介：

本节书摘来自华章计算机《Web前端开发最佳实践》一书中的第3章，第3.3节,作者:党　建 更多章节内容可以访问云栖社区“华章计算机”公众号查看。

3.3　正确闭合HTML标签

HTML元素的内容模型定义了元素的结构，表明元素可以包含哪些内容以及元素可以有哪些属性。元素可以包含的内容包括其他元素和字符，但是也有一些元素是空元素，即不能包含任何内容，这些元素对应的HTML标签也称为自闭合标签，下面列出了HTML中所有的自闭合标签：area、base、br、col、command、 embed、hr、img、input、keygen、link、meta、param、source、track、wbr
W3C制定了多个版本的HTML规范，目前流行的HTML规范有XHTML 1.0、HTML 4.01和HTML5。规范中规定了所有HTML标签的语法，其中规定非自闭合标签必须有开始标签和结束标签，而自闭合标签没有闭合标签。示例代
码如下：

<!-- 非自闭合标签必须有开始和结束标签 -->
<a href="demo.html" title="demo">simple</a>
<!-- 自闭合标签必须没有结束标签 -->
<img src="demo.png" alt="demo" />

有关自闭合标签中是否应该添加符号“/”，在XHTML 1.0、HTML 4.01和HTML5的规范中稍有不同。XHTML的规范最严格，必须在自闭合标签中添加“/”来表明标签的结束。在HTML 4.01的规范中，不推荐在自闭合标签中添加“/”。而HTML5最宽松，自闭合标签添加“/”和不添加“/”都符合规范，在自闭合标签中添加符号“/”是可选的。示例代码如下：

<!-- 如下写法符合XHTML 1.0、HTML 4.01和HTML5的规范，但在HTML4中不推荐 -->
<img src="demo.png" alt="demo" />
<!-- 如下写法不符合XHTML 1.0规范，但符合HTML 4.01和HTML5的规范 -->
<img src="demo.png" alt="demo">

如下的这几种写法不符合规范，应该严格禁止：

<!-- 错误：非自闭合标签没有结束标签 -->
<a href="demo.html" title="demo">simple</a>
<!-- 错误：非自闭合标签使用自闭合标签的语法 -->
<a href="demo.html" title="demo" />
<!-- 错误：自闭合标签使用非自闭合标签的语法 -->
<img src="demo.png" alt="demo"></img>
当元素的起始标签和结束标签不在同一个元素的内容中时，则会出现交叉嵌套。应该严格禁止标签之间的交叉嵌套。
下面的例子中起始标签“<span>”在元素div的内容中，而结束标签“</span>”则在div元素的内容之外。
<!-- 错误：起始标签"<span>"在元素div的内容中，结束标签"</span>"则在div元素的内容之外 -->
<div>foo <span>bar</div>baz</span>

一般通过编写层次缩进良好的HTML代码能够最大化地避免出现这样交叉嵌套的错误代码。