0

0

html标签到底闭合还是不闭合

巴扎黑

巴扎黑

发布时间:2017-03-19 17:26:48

|

2720人浏览过

|

来源于php中文网

原创

  你在写 HTML5 代码的时候,是否纠结过应该写
还是
,是写 还是写 。写 为什么是错的呢?反正我纠结过,而且我发现这个话题其实比我想象中有意思的多。

  如果你对我的研究过程不感兴趣,你可以直接跳到“合法性”这一节得到答案。

 无内容元素(Void elements)

  无内容元素是一种不能包含任何内容的特殊元素。而其他元素,比如

,则既可以不包含任何内容,又可以包含另一个元素或者文字。

UNIX技术手册 Unix in a Nutshell, 4th Edition 英文PDF文字版
UNIX技术手册 Unix in a Nutshell, 4th Edition 英文PDF文字版

Unix in a Nutshell同时涵盖了许多重要的、业界标准的开放源码工具 本书还完整地讨论了常用的shell(bash、ksh及tcsh)和重要元素如正则表达式,乃至旧式工具如sed、awk与vi。 Unix不是一个庞大的物体:它是一个综合体,而《Unix技术手册》则是将这一切合并在一起的一本书。 到底unix是什么?原始的unix源码是由sco拥有,unix注册商标是由open group拥有,而领先的仿unix系统则是gnu/linux、mac os x及solaris。这些版本所附的命令与选

下载

  比较常见的无内容元素有:

  


html标签到底闭合还是不闭合

  不太常见的无内容元素有:

  


  

  现存所有的无内容元素就是以上这些了。

  
这样的写法是不合法的 HTML 写法,因为它暗示 br 可以包含内容(但
你好! 是完全没有意义的)。而

这两种写法都很常见。

  尽管我们都知道 XHTML 强制你必须写成
,但 HTML 里却没有明文规定。

  追溯历史

  为了完全地了解无内容元素,我们有必要了解一下它的历史。

  HTML、XML 和 XHTML 都是基于 SGML 的,SGML 的全称是“标准通用标记语言”,起草于1986年。
  HTML 和 XML 都派生自 SGML,其中 XML 是 SGML 的约束性子集,而 XHTML 是基于 XML 的。

XHTML 基本上和 HTML 一样,但是是基于 XML 的。

  知道这层关系后,接下来进入本文最有意思的部分。

  SGML 有一个特性叫做“无尾标签(NET,Null End Tag)”。当标签内只有简单的文字的时候,使用无尾标签就可以无须再闭合这个标签了。比如你可以把 Quoted text 写成 。)

  那么,不包含任何内容的标签就可以写成

  如果按照这个逻辑,
,那么
岂不是要被解析为
> 了吗?如果你和我想得一样,你肯定也会觉得这种语法很蠢。

  不幸的是 HTML4 规范的制定者们不这么认为,并且把它写进规范里了。不过显然当时的浏览器厂商对这种语法也不以为然,支持的程度不大。(在这一点上,说不定浏览器厂商们做了一件好事。)

  XML (也适用于 XHTML)规范的制定者意识到这种语法不怎么好,就直接没有包含无尾标签这种特性,
同时为无内容标签提供了一种比较好理解的语法。这种语法的名字叫做“无元素标签”,它看起来是这样的:
。这种语法看起来非常自然,因此当时的大多数开发者都认为这才是正确的写法。

  幸运地是 HTML 一直在改进,W3C 的成员一直在从他们过去作出的错误中学习经验教训。因此 HTML5 相比之前的版本才有这么大的进步。

  在介绍 HTML5 的新语法时, W3C 说:

HTML5 的语法完全兼容 HTML4 和 XHTML1,但是不兼容 SGML 中那些晦涩的 HTML4 特性。比如无尾标签(

  HTML5 好样的!

  (我觉得他们应该保留“短标签”特性,比如 不错喲>,我觉得这个特性很酷。不过,至少现在的 HTML 已经不再是那么杂乱无章了。)

 合法性

  好吧,我们回到文章开头关于合法性的问题,目前的 HTML5 规范中关于非内容标签的解释是这样的:

此类标签应由下列部分组成,顺序须与下表保持一致:

  • 一个 “

  • 标签名。

  • 此项可选,一个或多个属性,每一个属性的前面必须有一个或多个空格。

  • 此项可选,一个或多个空格。

  • 此项可选,一个 “/” 字符,此项只能在无内容元素中出现。

  • 一个 “>” 字符。

  倒数第二部分的 “/” 字符是可选的,而且没有任何实际含义。所以

其实没有实质区别。

 正确性

  喜欢 XML 和 XHTML 的开发者可能会说,“对呀,虽然 / 是可选的,但是
的写法‘更正确’一些。”

  我必须告诉你你错了。事实上,有观点认为无内容标签里的 / 其实是一个被容忍的语法错误。这种容忍是基于兼容性考虑的,它使得所有浏览器和解析器都把

同等对待。

  关于这一点,Google 代码风格指南 也明确规定了不要关闭无内容标签。

 缺点

  当然,不关闭无内容标签也有弊端,不过我认为这掩盖不了它的优点:使你的代码干净简洁。

  第一个缺点就是开发者必须知道哪些标签的无内容标签。假设你不知道 html标签到底闭合还是不闭合 是不是无内容标签,那么当你找不到它的闭合标签时,你就会疑惑到底应不应该关闭这个标签。不过无内容标签总共也只有那么几个,而且一般一眼就能看出来某个标签是不是无内容标签。

  第二个缺点是编辑器可能对没有闭合的无内容标签处理不好。编辑器的开发者们必须了解无内容标签,提供恰当的语法高亮和代码补全。当你在编辑器里写了一个 ,编辑器必须要知道它后面永远不会接一个 。

  但是这些功能实现起来很简单,我所知道的编辑器对这方面支持得都还挺好,所以这算不上一个真正的缺点。

 我对无内容标签的看法

  我觉得无内容标签这个概念其实是可以从 HTML 中剔除的,我们完全可以给这些标签添加内容,来代替它的某些属性。

  以 html标签到底闭合还是不闭合 标签为例,它有一个强制的 alt 属性,这个属性的存在是为了让那些看不到图片的用户(可能是因为生理缺陷,也可能是因为他们使用的设备不支持图片)知道这个图片的内容是什么(如果图片只是处于美观考虑,你其实不应该添加 alt 属性)。

  我的问题来了:为什么不用 html标签到底闭合还是不闭合 的内容代替 alt 属性?我认为这样写更直观:

  html标签到底闭合还是不闭合Image of doge。

   标签甚至还有一个叫 content 的属性!为什么不直接把 content 的值写在标签的内容里呢? 应该写成 Value content ,就像

  所以真正应该保留的无内容标签只有少数几个,只不过 W3C 必须考虑向后兼容性,所以要改变现状还是很困难的。

 最后的想法:

  这个标签真的很困扰我,因为它的含义很简单,写法却很罗嗦。 这种写法看起来似乎是错的,因为

  问题在于

  使用 标签来代替

  原文链接: Matias Meno   翻译: 伯乐在线 - 方应杭

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
Python 序列化
Python 序列化

本专题整合了python序列化、反序列化相关内容,阅读专题下面的文章了解更多详细内容。

0

2026.02.02

AO3官网入口与中文阅读设置 AO3网页版使用与访问
AO3官网入口与中文阅读设置 AO3网页版使用与访问

本专题围绕 Archive of Our Own(AO3)官网入口展开,系统整理 AO3 最新可用官网地址、网页版访问方式、正确打开链接的方法,并详细讲解 AO3 中文界面设置、阅读语言切换及基础使用流程,帮助用户稳定访问 AO3 官网,高效完成中文阅读与作品浏览。

91

2026.02.02

主流快递单号查询入口 实时物流进度一站式追踪专题
主流快递单号查询入口 实时物流进度一站式追踪专题

本专题聚合极兔快递、京东快递、中通快递、圆通快递、韵达快递等主流物流平台的单号查询与运单追踪内容,重点解决单号查询、手机号查物流、官网入口直达、包裹进度实时追踪等高频问题,帮助用户快速获取最新物流状态,提升查件效率与使用体验。

27

2026.02.02

Golang WebAssembly(WASM)开发入门
Golang WebAssembly(WASM)开发入门

本专题系统讲解 Golang 在 WebAssembly(WASM)开发中的实践方法,涵盖 WASM 基础原理、Go 编译到 WASM 的流程、与 JavaScript 的交互方式、性能与体积优化,以及典型应用场景(如前端计算、跨平台模块)。帮助开发者掌握 Go 在新一代 Web 技术栈中的应用能力。

11

2026.02.02

PHP Swoole 高性能服务开发
PHP Swoole 高性能服务开发

本专题聚焦 PHP Swoole 扩展在高性能服务端开发中的应用,系统讲解协程模型、异步IO、TCP/HTTP/WebSocket服务器、进程与任务管理、常驻内存架构设计。通过实战案例,帮助开发者掌握 使用 PHP 构建高并发、低延迟服务端应用的工程化能力。

5

2026.02.02

Java JNI 与本地代码交互实战
Java JNI 与本地代码交互实战

本专题系统讲解 Java 通过 JNI 调用 C/C++ 本地代码的核心机制,涵盖 JNI 基本原理、数据类型映射、内存管理、异常处理、性能优化策略以及典型应用场景(如高性能计算、底层库封装)。通过实战示例,帮助开发者掌握 Java 与本地代码混合开发的完整流程。

5

2026.02.02

go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

62

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

55

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

27

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号