且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2022-10-04 15:57:42

本节书摘来自华章计算机《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代码能够最大化地避免出现这样交叉嵌套的错误代码。