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

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

 无内容元素(Void elements)

  无内容元素是一种不能包含任何内容的特殊元素。而其他元素,比如 <div>,则既可以不包含任何内容,又可以包含另一个元素或者文字。

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

  <br> <hr> <img> <input> <link> <meta>

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

  <area> <base> <col> <command> <embed> <keygen>
  <param> <source> <track> <wbr>

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

  <br></br> 这样的写法是不合法的 HTML 写法,因为它暗示 br 可以包含内容(但 <br>你好!</br> 是完全没有意义的)。而 <br> 和 <br /> 这两种写法都很常见。

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

  追溯历史

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

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

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

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

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

  那么,不包含任何内容的标签就可以写成 <quote// 了,其中 quote 是标签名,第一个 / 用于启用无尾标签,第二个 / 表示无尾标签结束。

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

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

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

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

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

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

  HTML5 好样的!

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

 合法性

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

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

  • 一个 “<” 字符。
  • 标签名。
  • 此项可选,一个或多个属性,每一个属性的前面必须有一个或多个空格。
  • 此项可选,一个或多个空格。
  • 此项可选,一个 “/” 字符,此项只能在无内容元素中出现。
  • 一个 “>” 字符。

  倒数第二部分的 “/” 字符是可选的,而且没有任何实际含义。所以 <br> 和 <br /> 其实没有实质区别。

 正确性

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

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

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

 缺点

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

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

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

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

 我对无内容标签的看法

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

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

  我的问题来了:为什么不用 <img> 的内容代替 alt 属性?我认为这样写更直观:

  <img src="doge.png">Image of doge</img>。

  <meta> 标签甚至还有一个叫 content 的属性!为什么不直接把 content 的值写在标签的内容里呢?<input value="Value content"> 应该写成 <input> Value content</input> ,就像 <textarea> 那样。其他标签不一而足。

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

 最后的想法:<script> 标签

  这个标签真的很困扰我,因为它的含义很简单,写法却很罗嗦。<script src="my-script.js"></script> 这种写法看起来似乎是错的,因为 <script> 的内容与 my-script.js 并没有逻辑关联。(HTML 规范允许你同时给它添加内容和 src 属性)

  问题在于 <script> 标签不是一个无内容标签,你可以把 JavaScript 写在它里面。所以这里并没有可选的 / 闭合标记(译注:这就是为什么<script src="script.js" />的写法是错的)。

  使用 <link> 标签来代替 <script> 就完美了,因为它已经被用于导入外部文件,而且提供了所有必需的属性。当然,Web 平台总是需要考虑向后兼容,不然所有不支持这种语法的旧式浏览器全都无法解析你的页面了。

  原文链接: Matias Meno

HTML标签 闭合还是不闭合?的更多相关文章

  1. 剖析html对标准标签和自定义标签闭合与不闭合渲染问题

    昨天在修改去年写的系统的时候无意中看到了当时写的一个利用标准标签未闭合在单元格内把整个单元格颜色渲染成红色的效果,如下: 当时的问题是从后台返回来的是个int整数而%是写在页面上的如图 这 时候就出现 ...

  2. QA: 自闭合标签要不要手动闭合?

    起 自闭合标签末尾要不要加 /,这个问题一直 "困扰" 着我.但是抱着无所谓的态度,一直没有仔细去看下. 以 img 标签为例,一般有以下三种写法: <img src=&qu ...

  3. 正则匹配闭合HTML标签(支持嵌套)

    任何复杂的正则表达式都是由简单的子表达式组成的,要想写出复杂的正则来,一方面需要有化繁为简的功底,另外一方面,我们需要从正则引擎的角度去思考问题.关于正则引擎的原理,推荐<Mastering R ...

  4. js自动闭合html标签,自动补全html标记

    假如我有一个DIV,如果没有闭合后面的样式都会乱了,这样的代码可能会影响后面的样式,我希望用js去自动闭合这种没有闭合的标签: 代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  5. Web前端开发最佳实践(5):正确闭合HTML标签,停止使用不标准的标签和属性

    正确闭合HTML标签 HTML元素的内容模型定义了元素的结构,表明元素可以包含哪些内容以及元素可以有哪些属性.元素可以包含的内容包括其他元素和字符,但是也有一些元素是空元素,即不能包含任何内容,这些元 ...

  6. PHP - 闭合标签

    最最开始的时候经常遇到这个问题,就是如果一个文件里面全部都是php代码的话,我写了前闭合和后闭合的时候,文件一多就容易报错,老是说什么有关输出的错误,貌似大概就是header已经发了. 手册上面这个样 ...

  7. 自闭合标签-主动闭合标签-meta-link标签

    <!DOCTYPE html><!--规定标准的html--><!--一个页在只有一对html标签--><!--标签的属性 指定英文--><htm ...

  8. sublime text3中使用Emmet部分标签无法闭合

    转载自:http://geek100.com/2490/ 不过很早就发现br,input, img在sublime text中是没有闭合标签 / 的. 我一般都是手动补上的, 今天突然想起这个问题, ...

  9. 配置 ESLint 自动格式化自闭合标签(Self closing tag)

    对于没有子元素或不需要子元素的 HTML 标签,通常写成其自闭合的形式会显得简洁些, - <SomeComponent></SomeComponent> + <SomeC ...

随机推荐

  1. 周末 “CTO训练营”

    今天下午去中关村参加了51cto高招 “CTO训练营”  第一期. 呃蛮有收获,聊技术发展,技术cto线路或对应发展,人事对应cto发展,投资人对应看法,51cto老总的看法. 呃,挺有意思,同样认识 ...

  2. python编程之socket编程基础

    python socket编程,首先需要import   socket模块 首先创建一个socket对象 expl = socket.socket(socket.AF_INET,socket.SOCK ...

  3. 【10.17校内测试】【二进制数位DP】【博弈论/预处理】【玄学(?)DP】

    Solution 几乎是秒想到的水题叻! 异或很容易想到每一位单独做贡献,所以我们需要统计的是区间内每一位上做的贡献,就是统计区间内每一位是1的数的数量. 所以就写数位dp辣!(昨天才做了数字统计不要 ...

  4. UVALive 5971

    Problem J Permutation Counting Dexter considers a permutation of first N natural numbers good if it ...

  5. SCC缩点

    int V; //顶点数量 vector<int> G[max_v]; //图的邻接表表示方法 vector<int> rG[max_v]; //把边反向建的图 vector& ...

  6. git一些命令

    ************git基本命令***************git config --global user.name "xielehe" 设置名字git config - ...

  7. visio2013 激活工具,仅供交流学习

    visio2013激活软件 环境是 win7, 64 bit 装了 visio 2013 , 可以却不能用它来画图,在网上找了一些破解工具,大都不能解决问题.网上不靠谱的广告型文章太多了 所幸,终于找 ...

  8. Map:HashMap和TreeMap

    一.Map集合     特点:将键映射到值得对象 Map集合和Collection集合的区别? Collection:是单列集合,存储的是单独出现的元素    Map: 是双列集合,存储的是键值对形式 ...

  9. mysql数据库表迁移

    @ 把老数据库中的某个表倒出成sql文件 $mysqldump -uroot -p123456 my_db > my_db.sql (输入密码) @ 在新环境中导入 $sudo apt-get ...

  10. 前些日子用css画的大白

    闲来无事用css画的一个大白...其实有一些地方偷懒了用svg去画的,因为用纯几何形状组合去画变化那么复杂的曲线不太现实.但svg曲线坐标还是自己一点点调出来的,没有用工具生成. ps:点击身体的某些 ...