HTML/XHTML 常見問題 · Flask中文文檔

### 導航 - [索引](# "總目錄") - [下一頁](# "安全注意事項") | - [上一頁](# "Flask 中的設計決策") | - [Flask 0.10.1 文檔](#) ? # HTML/XHTML 常見問題 Flask 文檔和示例應用使用 HTML5 。你可能會注意到，在許多情況下當結束標簽是可選的時候，并不使用它們，這樣 HTML 會更簡潔且加載更迅速。因為在開發者中，關于 HTML 和 XHTML 有許多混淆，本文檔試圖回答一些主要的疑問。 ### XHTML 的歷史一段時間， XHTML 的出現欲取代 HTML 。然而，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 的模板引擎（比如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 規范的開發在 2004 年就以 “Web 應用1.0”之名由網頁超文本技術工作小組（Web Hypertext Application Technology Working Group），或 WHATWG（由主要的瀏覽器供應商蘋果、 Mozilla 以及 Opera 組成）啟動了，目的是編寫一個新的改良的HTML 規范，基于現有的瀏覽器行為，而不是不切實際和不向后兼容的規范。例如，在 HTML4 中 <title/Hello/ 理論上與 <title>Hello</title> 處理得完全相同。然而，由于人們已然使用了諸如 <link/> 的 XHTML-like 標簽，瀏覽器供應商在規范語法之上實現了 XHTML 語法。在 2007 年，這個標準被 W3C 收入一個新的 HTML 規范，也就是 HTML5 。現在，隨著 XHTML 2 工作組解散和 HTML5 被所有主流瀏覽器供應商實現，XHTML 正在失去吸引力。 ### HTML vs. 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](https://box.kancloud.cn/2016-03-26_56f6a4a8a2e1d.png)[[1]](#) | ![No](https://box.kancloud.cn/2016-03-26_56f6a4a8b4dc2.png) | ![No](https://box.kancloud.cn/2016-03-26_56f6a4a8b4dc2.png) | | 支持 <br/> | ![No](https://box.kancloud.cn/2016-03-26_56f6a4a8b4dc2.png) | ![Yes](https://box.kancloud.cn/2016-03-26_56f6a4a8a2e1d.png) | ![Yes](https://box.kancloud.cn/2016-03-26_56f6a4a8a2e1d.png)[[2]](#) | | 支持 <script/> | ![No](https://box.kancloud.cn/2016-03-26_56f6a4a8b4dc2.png) | ![Yes](https://box.kancloud.cn/2016-03-26_56f6a4a8a2e1d.png) | ![No](https://box.kancloud.cn/2016-03-26_56f6a4a8b4dc2.png) | | 應該使用的 MIME 類型： text/html | ![Yes](https://box.kancloud.cn/2016-03-26_56f6a4a8a2e1d.png) | ![No](https://box.kancloud.cn/2016-03-26_56f6a4a8b4dc2.png)[[3]](#) | ![Yes](https://box.kancloud.cn/2016-03-26_56f6a4a8a2e1d.png) | | 應該使用的 MIME 類型：application/xhtml+xml | ![No](https://box.kancloud.cn/2016-03-26_56f6a4a8b4dc2.png) | ![Yes](https://box.kancloud.cn/2016-03-26_56f6a4a8a2e1d.png) | ![No](https://box.kancloud.cn/2016-03-26_56f6a4a8b4dc2.png) | | 嚴格的錯誤處理 | ![No](https://box.kancloud.cn/2016-03-26_56f6a4a8b4dc2.png) | ![Yes](https://box.kancloud.cn/2016-03-26_56f6a4a8a2e1d.png) | ![No](https://box.kancloud.cn/2016-03-26_56f6a4a8b4dc2.png) | | 內聯 SVG | ![No](https://box.kancloud.cn/2016-03-26_56f6a4a8b4dc2.png) | ![Yes](https://box.kancloud.cn/2016-03-26_56f6a4a8a2e1d.png) | ![Yes](https://box.kancloud.cn/2016-03-26_56f6a4a8a2e1d.png) | | 內聯 MathML | ![No](https://box.kancloud.cn/2016-03-26_56f6a4a8b4dc2.png) | ![Yes](https://box.kancloud.cn/2016-03-26_56f6a4a8a2e1d.png) | ![Yes](https://box.kancloud.cn/2016-03-26_56f6a4a8a2e1d.png) | | <video> 標簽 | ![No](https://box.kancloud.cn/2016-03-26_56f6a4a8b4dc2.png) | ![No](https://box.kancloud.cn/2016-03-26_56f6a4a8b4dc2.png) | ![Yes](https://box.kancloud.cn/2016-03-26_56f6a4a8a2e1d.png) | | <audio> 標簽 | ![No](https://box.kancloud.cn/2016-03-26_56f6a4a8b4dc2.png) | ![No](https://box.kancloud.cn/2016-03-26_56f6a4a8b4dc2.png) | ![Yes](https://box.kancloud.cn/2016-03-26_56f6a4a8a2e1d.png) | | 新的語義標簽，比如 <article> | ![No](https://box.kancloud.cn/2016-03-26_56f6a4a8b4dc2.png) | ![No](https://box.kancloud.cn/2016-03-26_56f6a4a8b4dc2.png) | ![Yes](https://box.kancloud.cn/2016-03-26_56f6a4a8a2e1d.png) | | [[1]](#) | 這是一個從 SGML 中繼承過來的鮮為人知的特性。由于上述的原因，它通常不被瀏覽器支持。 | |-----|-----| | [[2]](#) | 這用于兼容生成 <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 中是完全有效的: ~~~ <!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 ，減少了服務器端生成圖像來圖形化顯示數據的必要。 - 新的表單控件類型，比如 <inputtype="data"> 使得用戶代理記錄和驗證其值更容易。 - 高級 JavaScript API ，諸如 Web Storage 、 Web Workers 、 Web Sockets 、地理位置以及離線應用。除此之外，也添加了許多其它的特性。 Mark Pilgrim 即將出版的書[Dive Into HTML5](http://www.diveintohtml5.org/) [http://www.diveintohtml5.org/] 是 HTML5 中新特性的優秀入門書。并不是所有的這些特性已經都被瀏覽器支持，無論如何，請謹慎使用。 ### 應該使用什么？一般情況下，答案是 HTML 5 。考慮到 web 瀏覽器最新的開發，幾乎沒有理由再去使用 XHTML 。總結上面給出的原因: - Internet Explorer （令人悲傷的是目前市場份額處于領先）對 XHTML 支持不佳。 - 許多 JavaScript 庫也不支持 XHTML ，由于它需要復雜的命名空間 API 。 - HTML 添加了數個新特性，包括語義標簽和期待已久的 <audio> 和<video> 標簽。 - 它背后獲得了大多數瀏覽器供應商的支持。 - 它易于編寫，而且更簡潔。對于大多數應用，使用 HTML5 無疑比 XHTML 要好。 ? 版權所有 2013, Armin Ronacher.