OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

该不该闭合这些元素?曾经〈br/〉的写法是错误的


分享到


分类 编程技巧   发布 ourjs  1394289896000
注意 转载须保留原文链接,译文链接,作者译者等信息。  

你有没有想过,如果把 br 或 input 标签闭合起来,像 <br /> 会不会好点?或者在HTML5里面写成 <br> 会不会更好一点? 或者为什么把SCRIPT写成这样是不正确的 <script src="script.js" />? 好吧,我想过这些, 并且在寻找答案的时侯,我发现很多趣的东西 (比如某种奇怪的原因,你会觉得这东西很有意思).

如果你对其中的原委不感兴趣,就直接跳到节«有效性»获取你的答案。


VOID 元素

空(void)元素是一种特殊的元素,绝对不能有内容。这跟其他元素是一个很大的区别;其他可以为空,但也可以包含其他元素或文本(例如<div>) 。

最知名的空元素是:

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

鲜为人知的是:

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

就是这样。这些都是现有的空元素。

它不能,也从来没有过,将有效的HTML写成 <br></br>, 因为这样会导致 br 元素拥有内容 (<br>Hello!</br> 这样的写法完全没有意义). 然而,这是很常见的写法 <br> 和 <br />.

虽然大多数人都知道,在XHTML中,它是强制性写成 <br /> 但对HTML的规则没有要求。


历史

了解空(void)元素的历史,是有必要的。

HTMLXML 和 X(HT)ML 都是基于 SGML 的, HTML,XML和X ( HT)的ML都是基于SGML ,标准通用标记语言成型于1986年。HTML和XML直接从SGML继承。 XML是SGML的一个更严格的子集,这就是XHTML的基础。

XHTML写HTML基本相同 ,但基于XML。

到目前为止?好,然后到了有趣的部分:

SGML 有个功能叫 NET (Null End Tag). 这是一个简短的表示法,以避免关闭标签,当你的内容是简单的文本。使用NET写法,你可以用 <quote/Quoted text/ inste代替的 <quote/Quoted text/ instead of <quote>Quoted text</quote>.

另外说明,不包含任何文本元素,可以写成所谓的SHORTTAG NETENABL IMMEDNET <quote// 它跟这样的写法是等价的 <quote></quote>.

那么,按照这种逻辑,如果一个空元素没有结束标签, <br/将被解释为 <br>, 和 <br/> 然后会被解释成 <br>>这显然是不正确的语法。你可能像我一样,在想«这真是疯了! » 。不幸的是, HTML4规范的作者不这样认为,这就是为什么这是规范的一部分的原因。显然,浏览器厂商在当时并没有采用,这导致非常差的浏览器支持(其实在这种情况下,这可以说并不是一件坏事) 。

XML (以及XHTML)不认可这种疯狂的语法,并没有包括NET或SHORTTAG NETENABL IMMEDNET 的功能 ,而是提供一个健全的语法无效要素,即空元素看起来像这样: < BR / > 。这看很自然这也就是为什么大多数开发人员认为这是正确的书写方式。


幸运的是推动HTML发展的人们在万维网联盟(起草和整个网络设置标准的人们)也是从他们过去的错误中学习。这也是为什么HTML5变得友好得匀的原因。

在引进新的HTML5语法中, W3C的提到:


HTML 5中定义的HTML语法与HTML 4和在Web上发布的XHTML 1文件兼容,但不使用HTML 4是一些比较晦涩的SGML功能,如NET语法(如<em/content/)。


做得对 HTML5! (OurJS注* W3C标准委员会也会犯错,但目前关于HTML还没有错的特别离谱,这在后续的标准里都得到了纠正)

我想他们应该已经保留一些比较酷的标准,像 (<strong>Hell yea</>) 但是他们没有,至少HTML变得不那么混乱了)


有效性

再回到有效性的问题validity, 目前的 HTML5 specification for void elements (HTML5关吉void元素的规范)是这样:

开始标记由以下几部分组成,严格按照下列顺序:

  • 一个 "<" 字符.
  • 元素的标记名称.
  • 可选的,一个或多个属性,其中每一个的前面必须有一个或多个空格字符。
  • 可选的,一个或多个空格字符。
  • 可选的,一个“/”字符,它可以存在且仅当元素是一个空元素时。
  • 一个 ">" 字符


这意味着“/“”字符在HTML5中是可选的,它不添加任何意义。<br>和<br />之间完全没有差别。


正确性

那么,对于那些你们真正沉迷于X( HT ) ML的人来说,你可能会想:是的,它是可选的,但是<br /> i仍然“更正确”  ,但我要告诉你:这不是。事实上,人们可能会说,这种在void元素上添加 / 标签是语法错误。但可能大多考虑到了兼容性的原因,每一个浏览器都将<br>和<br />做相同处理。


谷歌的编程风