您可以从源 HTML 中省略各种 HTML,它仍然是有效的标记。
这看起来不奇怪吗?
<p>Paragraph one.
<p>Paragraph two.
<p>Paragraph three.
对我来说确实很奇怪,但结束的 </p>
标签是可选的。浏览器会检测到它需要这些标签,并在 DOM 中正确显示。
这可能发生在你编写的 HTML 中,你甚至不知道。例如…
<table>
<tr>
<td></td>
</tr>
</table>
对我来说,这看起来很正常,但浏览器会为你注入一个 <tbody>
在 <tr>
周围。在 HTML 中是可选的,但 DOM 会将其包含在内。
Heck,你甚至不需要像这样使用 <body>
!Jens Oliver Meiert 分享更多
<link rel=stylesheet href=default.css>
一些属性在某种意义上也是“可选的”,因为它们有你可以省略的默认值。例如,一个 <button>
自动是 <button type="submit">
。
Jens 进一步 论证,这些几乎被认为是优化,因为它减少了文件大小,从而提高了网络速度。
我个人不喜欢这样看待 HTML。这让我感到紧张,因为在实际情况下,如果你没有正确操作,就会出现问题。并非所有文件名都可以不加引号。有时,省略结束标签意味着以你意想不到的方式将一个兄弟元素包裹起来。我甚至愿意为更具弹性的网站牺牲一点点性能。这就像我知道 * {}
不是一个特别高效的选择器,但担心 CSS 选择器性能在大多数情况下是多余的担心(速度差异微不足道)。
我实际上非常喜欢 JSX 强制你编写“HTML”的方式。这种严格性也有助于代码格式化(例如 Prettier),作为额外的好处。
但是,性能提升就是性能提升,所以我不会拒绝自动将这些东西添加到编译输出的工具。这显然是 HTMLminifier 可以做到的事情。
我正在为客户开发一个 Mega-Menu WordPress 插件。它涉及一些插入的
’s,我注意到在 Chrome(可能还有其他浏览器)中,它会自动添加结束的
’s 在菜单中,即使源代码中没有它们…这显然让我很不舒服,所以我花了一些时间来找出导致缺少结束’s 的错误。如果我没有想到去查看,我可能就错过了它。这种行为让诊断这类问题变得更加麻烦。
看起来它在我的回复中删除了 div 标签。哎呀。
据我所知,XHTML 不允许作者省略“可选”的结束标签,也就是说,如果你省略了,那么你的 XHTML 就无效。HTML 和 Web 浏览器可能会让作者摆脱很多糟糕的习惯,但这并不是一种好风格,而且我认为不值得为了它而牺牲任何微不足道的性能提升。考虑到其他人必须在你离开那份工作后维护你的丑陋代码等。通过省略结束标签,你还会迷惑“美化打印”工具,如果你需要使用的话。编写漂亮的代码。
我完全同意 Chris 的观点。我还建议我的同事始终在每个按钮中添加
type
属性,即使它是提交按钮,因为这样更明确。删除不必要的标签和属性是压缩工具的任务,我很乐意让它帮我完成这项工作 :)我记得有一段时间我们不费心去关闭
<option>
,例如。我认为是在 xHTML 出现之前。xHTML 强制我们关闭标签(
<img />
,<br />
等)。我想现在更干净了,而且留给解释的空间更少了。删除结束标签可能会减少带宽使用量,但是
1) 我打赌在 GZIP 压缩之后不会太多。所有那些结束的 LIs 不会在网络上传输时每个占 5 个字节。
2) 它对页面解析时间有什么影响?我的猜测是它会大大减慢页面解析速度。
此外,Colin 说得对——可读性是需要考虑的因素。
如果你从进化的角度来看,HTML 中的奇怪的不一致性就更有意义了。随着我们对标记能力的要求发生变化,我们既是影响的代理人,又是变化的代理人……不断演进 HTML,使其适应我们的新需求,但不要过度演进,使其变成全新的东西。
就像任何生物进化一样,这会导致一些残留的……退化的东西。不同的是,我们可以直接放弃对那些过时功能的浏览器支持,所以我们不用在这里怀疑这个特定功能的用途。
这种清理确实给不一致性留下了很多空间……比如,有些元素**需要**关闭,有些关闭是可选的,有些元素根本没有关闭,而有些元素(可选地)有自闭合斜杠。
我认为段落示例有效,因为嵌套的段落元素不是有效的 HTML,所以浏览器会知道这一点,并在为你开始一个新的段落之前关闭该元素。
对此我没有来源,只是我自己的推理方式。
这也让我想知道是否有任何 HTML 压缩工具使用了这些技巧!
关闭列表元素标签 () 也是可选的
Remy Sharp 回答了为什么 p 标签是那样:
我希望我们能够禁用它,用于调试目的。
在前端工作时,我们有时会在不同的浏览器上看到奇怪的行为。
在大多数情况下,开发人员犯了一个小错误(结束标签在错误的循环级别上等),而浏览器倾向于以不同的方式“修复”它。
然后,要证明这不是 CSS 问题有时会变得很麻烦,因为你并不总是能看到原始代码。
如果你使用像 CSS HTML Validator 这样的好的验证器,那么你可以设置一个选项来要求可选的结束标签。
出于某种原因,首页上的第一个示例被规范化为包含了缺少的标签。
问题:一些 HTML 压缩工具默认情况下不会删除
</p>
或</li>
。如果它们默认情况下删除了这些,会发生什么?回顾标记语言的演变,SGML 和 DTDs 给 HTML 及其 DTD 带来了一些生机。当 HTML 5 出现时,DTD 不再被认为是可行的。
读取 DTD 以推断如何应用标记的能力被埋藏在浏览器中。
!–=================== 段落 =======================================–>
!ELEMENT P – O (%inline;)* — 段落 –>
!ATTLIST P
%attrs; — %coreattrs, %i18n, %events —
>
“-” 开始标签必需
O 结束标签可选
https://www.w3.org/TR/html4/struct/text.html#edef-P