用HTML的方式编写HTML（而不是XHTML的方式）附实例

前端小工
135 阅读7分钟

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

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

HTML, XHTML, html

在20世纪90年代，有了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的方式来写。

编写HTML的XHTML方式

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的方式

让我们走回头路的一种方法是否定XHTML所强加的规则。让我们来实际操作一下（不包括SGML部分，因为HTML已经不是基于SGML了）。

  • 文件可能没有良好的格式。
  • 元素和属性名称不得使用小写字母。
  • 对于非空的元素，结束标记并不总是必需的。
  • 属性值可能并不总是加引号。
  • 支持属性的最小化。
  • 空的元素不需要被关闭。
  • 属性值中的空白处理并不是按照XML来做的。
  • 脚本和样式元素不需要CDATA部分。
  • 具有id 和name 属性的元素不可以只使用id 。
  • 具有预定义值集的属性不区分大小写。
  • 作为十六进制值的实体引用不一定只用小写。

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

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

剥开这些规则，这看起来不太像我们在使用XML，而更像是在使用HTML。但我们还没有完成。

"文档可能没有良好的格式 "表明，如果HTML代码是无效的，那也没什么。因为XML有严格的错误处理，所以XHTML指出格式良好也没有问题。但是，虽然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.com/">CSS-Tricks</A>

这看起来就像你在大喊大叫，你可能不喜欢这样，但这样写也是可以的。

当你想浓缩该链接时，HTML为你提供了省略某些引号的选择。

<A HREF=https://css-tricks.com/>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. 尊重语法和语义。
  2. 使用HTML所提供的选项，只要你能坚持这样做。
    • 记住，元素和属性名称可以是小写或大写的。
  3. 将HTML的使用保持在绝对的最低限度
    • 记住，展示性和行为性的标记应该由CSS和JavaScript来处理。
    • 记住开始和结束标签并不总是必需的。
    • 记住空的元素不需要被关闭。
    • 记住，有些属性有默认值，允许省略这些属性-值对。
    • 请记住，属性值不一定要加引号。
    • 记住属性最小化是被支持的。

这与HTML的三条基本规则相似，这并不是巧合，它的工作前提是较小的有效载荷也会导致更快的网站，而且这遵循最小化网络开发的流派。这些都不是新东西--我们的领域可能只是决定重新发现它。工具也是可用的：html-minifier可能是最成熟的、能够处理所有HTML优化的工具。

你已经用XHTML的方式学习了HTML。HTML并不是XHTML。重新发现HTML，并帮助形成一种新的、现代的HTML编写方式--它承认，但不一定基于XML。

avatar
文章
阅读
粉丝