HTML/XHTML 常见问答

Flask 的文档和示例应用使用 HTML5 。你可能会注意到，在许多情况下，当结束标记是可选的时候，并不使用它们，这样 HTML 会更简洁且加载更迅速。因为在开发者中，有许多关于 HTML 和 XHTML 的混淆，本文档尝试回答一些主要的疑问。

XHTML 的历史

有一段时间， XHTML 横空出世，大有取代 HTML 之势。然而时至今日，鲜有真正使用 XHTML （根据 XML 规则处理的 HTML ）的网站。出现这种情况的原因很多。其一是 Internet Explorer 对 XHTML 支持不完善。 根据规范要求 XHTML 必须使用application/xhtml+xml MIME 类型，但是 Internet Explorer 却拒绝读取这个 MIME 类型的文件。

虽然通过配置 Web 服务器来为 XHTML 提供正确的服务相对简单，但是却很少有人这么做。这可能是因为正确地使用 XHTML 是一件很痛苦的事情。

痛中之通是 XML 苛刻的（严厉且无情）错误处理。当 XML 处理中遭遇错误时，浏览器会把一个丑陋的错误消息显示给用户，而不是尝试从错误中恢并显示出能显示的部分。 web 上大多数的 (X)HTML 是基于非 XML 的模板引擎（比如 Flask 所使用的Jinja）生成的。而这些模板引擎并不会阻止你偶然创建无效的 XHTML 。也有基于XML 的模板引擎，诸如 Kid 和流行的 Genshi ，但是它们通常具有更大的运行时开销， 并且用起来很不爽，因为它们必须遵守 XML 规则。

大多数用户，不管怎样，假设他们正确地使用了 XHTML 。他们在文档的顶部写下一个 XHTML doctype ，并且闭合了所有必要闭合的标签（ 在 XHTML 中 <br> 要写作 <br /> 或 <br></br> ）。即使文档可以正确地通过 XHTML 验证，然而真正决定浏览器中 XHTML/HTML 处理的是前面提到的，经常不被正确设置的 MIME类型。一旦类型错误，有效的 XHTML 会被视作无效的 HTML 处理。

XHTML 也改变了使用 JavaScript 的方式。要在 XHTML 下正确地工作，程序员不得不使用带有 XHTML 名称空间的 DOM 接口来查询 HTML 元素。

HTML5 的历史

HTML5 规范是由网络超文本应用技术工作组（ WHATWG ）于 2004 年开始制定的，最初的名称是“ Web 应用1.0 ”。 WHATWG 由主要的浏览器供应商苹果、 Mozilla 和Opera 组成。 HTML5 规范的目标是编写一个新的更好的 HTML 规范，该规范是基于现有浏览器的行为的，而不是不切实际的，不向后兼容的。

例如，在 HTML4 中 <title/Hello/ 与 <title>Hello</title> 理论上完全相同。然而，由于人们沿用了 <link /> 之类的 XHTML-like 标签， 浏览器就会识别为 XHTML 而不是 HTML 。

2007 年， W3C 以这个规范为基础，制定了一个新的 HTML 规范，也就是 HTML5 。现在，随着 XHTML 2 工作组的解散，而且 HTML5 正在被所有主流浏览器供应商实现，XHTML 逐渐失去了吸引力。

HTML 对比 XHTML

下面的表格展示 HTML 4.01 、 XHTML 1.1 和 HTML5 简要功能比价。（不包括XHTML 1.0 ，因为它已经被 XHTML 1.1 和几乎不使用的 XHTML5 代替。）

HTML4.01XHTML1.1HTML5
<tag/value/ == <tag>value</tag>Yes1NoNo
支持 <br/>NoYesYes2
支持 <script/>NoYesNo
应该解析为 text/htmlYesNo3Yes
应该解析为application/xhtml+xmlNoYesNo
严格的错误处理NoYesNo
内联 SVGNoYesYes
内联 MathMLNoYesYes
<video> 标记NoNoYes
<audio> 标记NoNoYes
新的语义标记，比如 <article>NoNoYes
  • 1

  • 这是一个从 SGML 继承过来的隐晦的功能。由于上述的原因，它通常不被浏览器支持。

  • 2

  • 这用于兼容根据 XHTML 规范为 <br> 之类的标记生成的服务代码。它不应该在新代码中出现。

  • 3

  • XHTML 1.0 是考虑向后兼容，允许呈现为 text/html 的最后一个 XHTML标准。

“严格”意味着什么？

HTML5 严格地定义了解析规则，但是同时也明确地规定了浏览器如何处理解析错误。而不是像 XHTML 一样，只是简单的终止解析。有的人对有显而易见的语法错误的标记任然能够得到预想的结果感到疑惑不解（例如结尾标记缺失或者属性值未用引号包裹）。

之所以能够得到预想的结果，有的是因为大多数浏览器会宽容处理错误标记，有的是因为错误已经被指定了解决方式。以下结构在 HTML5 标准中是可选的，但一定被浏览器支持：

  • 用 <html> 标签包裹文档。

  • 把页首元素包裹在 <head> 里或把主体元素包裹在 <body> 里。

  • 闭合 <p> 、 <li> 、 <dt> 、 <dd> 、 <tr> 、<td> 、 <th> 、 <tbody> 、 <thead> 或 <tfoot> 标签。

  • 用引号包裹属性值，只要它们不含有空白字符或其特殊字符（比如 < 、> 、 ' 或 " ）。

  • 布尔属性必须赋值。

这意味着下面的页面在 HTML5 中是完全有效的:

  1. <!doctype html>
  2. <title>Hello HTML5</title>
  3. <div class=header>
  4.   <h1>Hello HTML5</h1>
  5.   <p class=tagline>HTML5 is awesome
  6. </div>
  7. <ul class=nav>
  8.   <li><a href=/index>Index</a>
  9.   <li><a href=/downloads>Downloads</a>
  10.   <li><a href=/about>About</a>
  11. </ul>
  12. <div class=body>
  13.   <h2>HTML5 is probably the future</h2>
  14.   <p>
  15.     There might be some other things around but in terms of
  16.     browser vendor support, HTML5 is hard to beat.
  17.   <dl>
  18.     <dt>Key 1
  19.     <dd>Value 1
  20.     <dt>Key 2
  21.     <dd>Value 2
  22.   </dl>
  23. </div>

HTML5 中的新技术

HTML5 增加了许多新功能，使得网络应用易写易用。

  • <audio> 和 <video> 标记提供了不使用 QuickTime 或 Flash 之类的复杂附件的嵌入音频和视频的方式。

  • 像 <article> 、 <header> 、 <nav> 和 <time> 之类的语义化元素，使得内容易于理解。

  • <canvas> 标记支持强大的绘图 API ，减少了图形化展示数据时在服务器端生成图像的需求。

  • 新的表单控件类型，比如 <input type="data"> 方便用户代理输入和验证数据。

  • 高级 JavaScript API ，诸如 Web Storage 、 Web Workers 、 Web Sockets 、地理位置以及离线应用。

除了上述功能之外， HTML5 还添加了许多其它的特性。 Mark Pilgrim 即将出版的Dive Into HTML5 一书是 HTML5 新特性的优秀指导书。目前，并不是所有的新特性都已被浏览器支持，无论如何，请谨慎使用。

应该使用什么？

当前情况下，答案是 HTML5 。考虑到 web 浏览器最新的开发，几乎没有理由再使用XHTML 。综上所述：

  • Internet Explorer （令人悲伤的是目前市场份额处于领先） 对 XHTML 支持不佳。

  • 许多 JavaScript 库也不支持 XHTML ，原因是它需要复杂的命名空间 API 。

  • HTML5 添加了数个新特性，包括语义标记和期待已久的 <audio> 和<video> 标记。

  • 它背后获得了大多数浏览器供应商的支持。

  • 它易于编写，而且更简洁。

对于大多数应用，毫无疑问使用 HTML5 比 XHTML 更好。