HTML/XHTML 常见问题 — Flask 文档

来自菜鸟教程
Flask/docs/1.1.x/htmlfaq
跳转至:导航、​搜索

HTML/XHTML 常见问题

Flask 文档和示例应用程序使用 HTML5。 您可能会注意到,在许多情况下,当结束标记是可选的时,它们不会被使用,因此 HTML 更干净且加载速度更快。 由于开发人员对 HTML 和 XHTML 存在很多混淆,因此本文档试图回答一些主要问题。

XHTML 的历史

有一段时间,HTML 似乎即将被 XHTML 取代。 但是,Internet 上几乎没有任何网站是真正的 XHTML(使用 XML 规则处理的 HTML)。 出现这种情况有几个主要原因。 其中之一是 Internet Explorer 缺乏适当的 XHTML 支持。 XHTML 规范规定 XHTML 必须使用 MIME 类型 application/xhtml+xml,但 Internet Explorer 拒绝读取具有该 MIME 类型的文件。 虽然配置 Web 服务器以正确地提供 XHTML 服务相对容易,但很少有人这样做。 这可能是因为正确使用 XHTML 可能会非常痛苦。

痛苦的最重要原因之一是 XML 严酷(严格而无情)的错误处理。 当遇到 XML 解析错误时,浏览器应该向用户显示丑陋的错误消息,而不是尝试从错误中恢复并显示它所能显示的内容。 Web 上的大多数 (X)HTML 生成基于非 XML 模板引擎(例如 Jinja,Flask 中使用的引擎),它们不能防止您意外创建无效的 XHTML。 有基于 XML 的模板引擎,例如 Kid 和流行的 Genshi,但它们通常会带来更大的运行时开销,并且使用起来并不那么简单,因为它们必须遵守 XML 规则。

然而,大多数用户认为他们正确地使用了 XHTML。 他们在文档的顶部写了一个 XHTML 文档类型并自动关闭所有必要的标签(<br> 在 XHTML 中变成 <br/><br></br>)。 然而,即使文档正确地验证为 XHTML,真正决定浏览器中 XHTML/HTML 处理的是 MIME 类型,如前所述,它通常没有正确设置。 因此,有效的 XHTML 被视为无效的 HTML。

XHTML 还改变了 JavaScript 的使用方式。 为了正确使用 XHTML,程序员必须使用命名空间 DOM 接口和 XHTML 命名空间来查询 HTML 元素。


HTML5 的历史

HTML5 规范的开发于 2004 年由 Web 超文本应用技术工作组或 WHATWG(由主要浏览器供应商 Apple、Mozilla 和 Opera 组成)以“Web Applications 1.0”的名义开始,其目标是编写一个新的和改进的 HTML 规范,基于现有的浏览器行为,而不是不切实际和向后不兼容的规范。

例如,在 HTML4 中 <title/Hello/ 理论上解析与 <title>Hello</title> 完全相同。 然而,由于人们在使用 <link /> 之类的 XHTML 标记,浏览器供应商在规范定义的语法上实现了 XHTML 语法。

2007 年,该规范被采纳为 W3C 旗下新 HTML 规范的基础,即 HTML5。 目前,XHTML 似乎正在失去吸引力,因为 XHTML 2 工作组已经解散,所有主要浏览器供应商都在实施 HTML5。


HTML 与 XHTML

下表为您提供了 HTML 4.01、XHTML 1.1 和 HTML5 中可用功能的快速概览。 (不包括 XHTML 1.0,因为它被 XHTML 1.1 和几乎不使用的 XHTML5 取代。)

HTML4.01 XHTML1.1 HTML5
<tag/value/ == <tag>value</tag> Yes 1 No No
<br/> 支持 No Yes Yes 2
<script/> 支持 No Yes No
应作为 text/html Yes No 3 Yes
应作为 application/xhtml+xml No Yes No
严格的错误处理 No Yes No
内联 SVG No Yes Yes
内联 MathML No Yes Yes
<video> 标签 No No Yes
<audio> 标签 No No Yes
新的语义标签,如 <article> No No Yes
1
这是从 SGML 继承的一个不起眼的特性。 由于上面详述的原因,浏览器通常不支持它。
2
这是为了与为 <br> 等标签生成 XHTML 的服务器代码兼容。 不应在新代码中使用它。
3
XHTML 1.0 是最后一个允许作为 text/html 用于向后兼容的 XHTML 标准。


“严格”是什么意思?

HTML5 已经严格定义了解析规则,但它也准确地指定了浏览器应该如何对解析错误做出反应——不像 XHTML,它只是声明解析应该中止。 有些人对明显无效但仍会产生预期结果的语法感到困惑(例如,缺少结束标记或未加引号的属性值)。

其中一些工作是因为大多数浏览器在遇到标记错误时使用宽松的错误处理,其他一些实际上是指定的。 根据标准,以下结构在 HTML5 中是可选的,但浏览器必须支持:

  • 将文档包装在 <html> 标签中
  • 包装 <head> 中的 header 元素或 <body> 中的 body 元素
  • 关闭 <p><li><dt><dd><tr><td><th><tbody><thead><tfoot> 标签。
  • 引用属性,只要它们不包含空格或特殊字符(如 <>'")。
  • 要求布尔属性具有值。

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

<!doctype html>
<title>Hello HTML5</title>
<div class=header>
  <h1>Hello HTML5</h1>
  <p class=tagline>HTML5 is awesome
</div>
<ul class=nav>
  <li><a href=/index>Index</a>
  <li><a href=/downloads>Downloads</a>
  <li><a href=/about>About</a>
</ul>
<div class=body>
  <h2>HTML5 is probably the future</h2>
  <p>
    There might be some other things around but in terms of
    browser vendor support, HTML5 is hard to beat.
  <dl>
    <dt>Key 1
    <dd>Value 1
    <dt>Key 2
    <dd>Value 2
  </dl>
</div>

HTML5 中的新技术

HTML5 添加了许多使 Web 应用程序更易于编写和使用的新功能。

  • <audio><video> 标签提供了一种嵌入音频和视频的方法,无需像 QuickTime 或 Flash 这样的复杂插件。
  • 语义元素,如 <article><header><nav><time>,使内容更容易理解。
  • <canvas> 标签,支持强大的绘图 API,减少了服务器生成的图像以图形方式呈现数据的需要。
  • 新的表单控件类型,如 <input type="date">,允许用户代理更轻松地输入和验证值。
  • 高级 JavaScript API,如 Web 存储、Web Workers、Web Sockets、地理定位和离线应用程序。

还添加了许多其他功能。 关于 HTML5 新功能的一个很好的指南是 Mark Pilgrim 即将出版的书 Dive Into HTML5。 然而,并非所有浏览器都支持它们,因此请谨慎使用。


应该使用什么?

目前,答案是 HTML5。 考虑到 Web 浏览器的最新发展,几乎没有理由使用 XHTML。 总结上面给出的原因:

  • Internet Explorer(遗憾的是,它目前在市场份额上处于领先地位)对 XHTML 的支持很差。
  • 许多 JavaScript 库也不支持 XHTML,因为它需要更复杂的命名空间 API。
  • HTML5 增加了几个新特性,包括语义标签和期待已久的 <audio><video> 标签。
  • 它得到了大多数浏览器供应商的支持。
  • 它更容易编写,也更紧凑。

对于大多数应用程序来说,使用 HTML5 无疑比使用 XHTML 更好。