《Web前端开发最佳实践》——3.3 正确闭合HTML标签-阿里云开发者社区

开发者社区> 华章出版社> 正文

《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代码能够最大化地避免出现这样交叉嵌套的错误代码。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:

华章出版社

官方博客
官网链接