以 HTML 方式编写 HTML（而非 XHTML 方式）

您可能不再使用 XHTML，但当您编写 HTML 时，您可能比您想象的更多地受到 XHTML 的影响。您很可能正在以 XHTML 的方式编写 HTML。

什么是以 XHTML 方式编写 HTML，什么是以 HTML 方式编写 HTML？让我们来看看。

HTML、XHTML、HTML

在 1990 年代，出现了 HTML。在 2000 年代，出现了 XHTML。然后，在 2010 年代，我们又回到了 HTML。这就是简单的故事。

您也可以从规范的粗略日期判断出来：HTML “1” 1992 年，HTML 2.0 1995 年，HTML 3.2 1997 年，HTML 4.01 1999 年；XHTML 1.0 2000 年，XHTML 1.1 2001 年；“HTML5” 2007 年。

当每个人都相信 XML 和 XML 派生产品是未来时，XHTML 变得流行起来。“所有事物都用 XML”。对于 HTML 来说，这产生了深远的影响：我们学会了以 XHTML 的方式编写它的影响。

以 XHTML 方式编写 HTML

XHTML 方式有详细的记录，因为 XHTML 1.0 在其关于 “与 HTML 4 的差异” 的部分中对此进行了详细描述。

• 文档必须格式良好。
• 元素和属性名称必须为小写。
• 对于非空元素，需要结束标签。
• 属性值必须始终加引号。
• 属性最小化 不受支持。
• 空元素需要关闭。
• 属性值中的空白处理根据 XML 完成。
• 脚本和样式元素需要 CDATA 部分。
• SGML 排除不可用。
• 具有 id 和 name 属性的元素，例如 a、applet、form、frame、iframe、img 和 map，应该只使用 id。
• 具有预定义值集的属性区分大小写。
• 实体引用作为十六进制值必须为小写。

这看起来很熟悉吗？除了标记 CDATA 内容以及处理 SGML 排除之外，您可能遵循所有这些规则。所有规则。

虽然 XHTML 已经消失，但其中许多规则从未被质疑过。有些甚至被提升为 HTML 的“最佳实践”。

这就是以 XHTML 方式编写 HTML 的方式，以及它对该领域产生的持久影响。

以 HTML 方式编写 HTML

让我们通过否定 XHTML 强加的规则来进行回顾。让我们实际做一下（不包括 SGML 部分，因为 HTML 不再基于 SGML）

• 文档可能不是格式良好的。
• 元素和属性名称可能不是小写。
• 对于非空元素，结束标签并不总是必需的。
• 属性值可能并不总是加引号。
• 属性最小化受支持。
• 空元素不需要关闭。
• 属性值中的空白处理不根据 XML 完成。
• 脚本和样式元素不需要 CDATA 部分。
• 具有 id 和 name 属性的元素可能不只使用 id。
• 具有预定义值集的属性不区分大小写。
• 实体引用作为十六进制值可能不只为小写。

让我们删除那些深奥的东西；那些看起来无关紧要的东西。这包括 XML 空白处理、CDATA 部分、name 属性值的加倍、预定义值集的大小写以及十六进制实体引用。

• 文档可能不是格式良好的。
• 元素和属性名称可能不是小写。
• 对于非空元素，结束标签并不总是必需的。
• 属性值可能并不总是加引号。
• 属性最小化受支持。
• 空元素不需要关闭。

剥离这些规则之后，这看起来更像是我们使用 HTML，而不是 XML。但我们还没完。

“文档可能不是格式良好的”意味着，如果 HTML 代码无效，是可以的。XHTML 可以指向格式良好，因为 XML 具有严格的错误处理。但是，虽然 HTML 文档即使在包含严重语法和格式良好问题的情况下也能正常工作，但对于专业人士——以及我们的领域来说，使用和滥用这种弹性都没有用。（我在我的文章 “批判性地捍卫前端开发” 中曾经论证过这种情况。）

因此，HTML 方式不会建议“文档可能不是格式良好的”。同样明确的是，不仅结束标签，而且开始标签也不总是必需的。重新措辞和重新排序，这就是本质

• 开始标签和结束标签并不总是必需的。
• 空元素不需要关闭。
• 元素和属性名称可以是小写或大写。
• 属性值可能并不总是加引号。
• 属性最小化受支持。

示例

在实践中，这看起来如何？对于开始标签和结束标签，请注意，许多标签 是可选的。例如，段落和列表在 XHTML 中是这样编写的

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<ul>
  <li>Praesent augue nisl</li>
  <li>Lobortis nec bibendum ut</li>
  <li>Dictum ac quam</li>
</ul>

但是，在 HTML 中，您可以使用以下代码（它有效）来编写它们

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<ul>
  <li>Praesent augue nisl
  <li>Lobortis nec bibendum ut
  <li>Dictum ac quam
</ul>

开发人员还学会了这样编写空元素

<br />

这是 XHTML 带给 HTML 的东西，但正如 斜杠对空元素没有影响 一样，您只需要以下内容

<br>

在 HTML 中，您也可以用全部大写来编写所有内容

<A HREF="https://css-tricks.org.cn/">CSS-Tricks</A>

看起来您在喊叫，您可能不喜欢，但这样写是可以的。

当您要压缩该链接时，HTML 为您提供了一个选项，即 省略某些引号

<A HREF=https://css-tricks.org.cn/>CSS-Tricks</A>

根据经验，当属性值不包含空格或等号时，通常可以省略引号。

最后，HTML–HTML——不是 XHTML–HTML——也允许最小化属性。也就是说，您可以像这样标记一个 input 元素为必需和只读

<input type="text" required="required" readonly="readonly">

您可以最小化属性

<input type="text" required readonly>

如果您不仅利用了引号不需要的事实，而且还利用了 text 是此处 type 属性的默认值（还有更多此类 不需要的属性-值组合），您将得到一个示例，它展示了 HTML 的全部最小化美感

<input required readonly>

以 HTML 方式编写 HTML

以上内容不是对 HTML 在 90 年代状况的表示。当时的 HTML 充斥着用于布局的 <table> 元素，充满了表示性代码，在很大程度上是无效的（就像今天一样），用户代理支持差异很大。然而，这是我们希望在 XML 和 XHTML 出现之前保留的本质。

如果您愿意接受对更全面、现代的 HTML 编写方式的建议，我有一个建议。（HTML 是我的主要关注领域，因此我通过一些文章的链接来补充这一点。）

1. 尊重语法和语义。
   • 验证您的 HTML，并且只发布有效的 HTML。
2. 使用 HTML 提供给您的选项，只要您始终如一地使用即可。
   • 请记住，元素和属性名称可以是小写或大写。
3. 将 HTML 的使用保持在绝对最小限度
   • 请记住，表示性和行为标记应由 CSS 和 JavaScript 处理。
   • 请记住，开始标签和结束标签 并不总是 必需的。
   • 请记住，空元素不需要关闭。
   • 请记住，某些属性具有默认值，这使得 这些属性-值对可以省略。
   • 请记住，属性值 可能并不总是 加引号。
   • 请记住，属性最小化受支持。

这与 HTML 的三大基本规则 相似，与 更小的负载也会导致更快的网站 的前提一致，并且遵循 最小化 Web 开发理念。所有这些都不是什么新鲜事物——我们的领域可以仅仅决定重新发现它。工具也是可用的：html-minifier 可能是最完善的，并且能够处理所有 HTML 优化。

您已经以 XHTML 的方式学习了 HTML。HTML 不是 XHTML。重新发现 HTML，并帮助塑造一种新的、现代的 HTML 编写方式——它承认 XML，但不一定基于 XML。