一些 HTML 是“可选的”

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元免费积分!

您可以从源 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 可以做到的事情。