不朽情缘五个红人多少倍

書名： HTML5+CSS3從入門到精通（微課精編版）
作者名：前端科技
本章字數： 1993字
更新時間： 2021-02-03 09:30:35

1.2　HTML5設計原則

從HTML 2.0到XHTML 2.0，XHTML 2.0由于語法解析過于嚴格，因此不太適合互聯網開放、自由的精神。Jeremy Keith認為所有的項目都應該先有設計原則，HTML5也同樣如此，W3C為此發布了HTML設計原則（http://www.w3.org/TR/html-design-principles/），強調了HTML5規范的兼容性、實用性和互操作性。

1.2.1　避免不必要的復雜性

規范可以寫得十分復雜，但瀏覽器的實現應該非常簡單。把復雜的工作留給瀏覽器后臺去處理，用戶僅需要輸入簡單的字符，甚至不需要輸入，才是最佳文檔規范。因此，HTML5首先采用化繁為簡的思路進行設計。

【示例1】在HTML4.01中定義文檔類型的代碼如下：

    <!DOCTYPE html PUBLIC "-//W3C/DTD HTML4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML5簡化如下：

    <!DOCTYPE html>

HTML4.01和XHTML中的DOCTYPE過于冗長，連自己都記不住這些內容，但在HTML5中只需要簡單的<!DOCTYPE html>就可以了。DOCTYPE是給驗證器用的，而非瀏覽器，瀏覽器只在做DOCTYPE切換時關注這個標簽，因此并不需要寫得太復雜。

【示例2】在HTML4.01中定義字符編碼的代碼如下：

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

在XHTML 1.0中還需要再聲明XML標簽，并在其中指定字符編碼。

    <?xml version="1.0" encoding="utf-8" ?>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

HTML5簡化如下：

    <meta charset="utf-8">

關于省略不必要的復雜性，或者說避免不必要的復雜性的例子還有不少，但關鍵是既能避免不必要的復雜性，還不會妨礙在現有瀏覽器中使用。

在HTML5中，如果使用link元素鏈接到一個樣式表，先定義rel="stylesheet"，然后再定義type="text/css"，這樣就重復了。對瀏覽器而言，只要設置rel="stylesheet"就夠了，因為它可以猜出要鏈接的是一個CSS樣式表，沒必要再指定type屬性。

對Web開發而言，大家都使用JavaScript腳本語言，也是默認的通用語言，用戶可以為script元素定義type="text/javascript"屬性，也可以什么都不寫，瀏覽器自然會假設在使用JavaScript。

1.2.2　支持已有內容

XHTML 2.0最大的問題就是不支持已經存在的內容，這違反了Postel法則（即對自己發送的東西要嚴格，對接收的東西則要寬容）。現實情況中，開發者可以寫出各種風格的HTML，瀏覽器遇到這些代碼時，在內部所構建出的結構應該是一樣的，呈現的效果也應該是一樣的。

【示例】下面示例展示了編寫同樣內容的四種不同寫法，四種寫法唯一的不同點就是語法。

從瀏覽器解析的角度分析，這些寫法實際上都是一樣的。HTML5必須支持已經存在的約定，適應不同的用戶習慣，而不是用戶適應瀏覽器的嚴格解析標準。

1.2.3　解決實際問題

規范應該去解決現實中實際遇到的問題，而不該考慮那些復雜的理論問題。

【示例】既然有在<a>中嵌套多個段落標簽的需要，那就讓規范支持它。

這塊內容包含一個標題和一個段落。按HTML4規范，必須至少使用兩個鏈接。

    <h2><a href="#">標題文本</a></h2>
    <p><a href="#">段落文本</a></p>

在HTML5中，只需要把所有內容都包裹在一個鏈接中就行了。

其實這種寫法早已經存在，當然以前這樣寫是不合乎規范的。所以說，HTML5解決現實的問題，其本質還是糾正因循守舊的規范標準，現在把標準改了，允許用戶這樣寫了。

1.2.4　用戶怎么使用就怎么設計規范

當一個實踐已經被廣泛接受時，就應該考慮將它吸納進來，而不是禁止它或開發一個新的實踐。例如，HTML5新增了nav、section、article、aside等標簽，它們引入了新的文檔模型，即文檔中的文檔。在section中，還可以嵌套h1到h6的標簽，這樣就有了無限的標題層級，這也是很早之前Tim Berners Lee所設想的。

【示例】下面幾行代碼相信大家都不會陌生，這些都是頻繁被使用過的ID名稱。

    <div id="header">...</div>
    <div id="navigation">...</div>
    <div id="main">...</div>
    <div id="aside">...</div>
    <div id="footer">...</div>

在HTML5中，可以用新的元素代替使用。

    <header>...</header>
    <nav>...</nav>
    <div id="main">...</div>
    <aside>...</aside>
    <footer>...</footer>

實際上，這并不是HTML5工作組想出來的，也不是W3C提出來的，而是谷歌根據大數據分析用戶習慣得出來的。

1.2.5　優雅地降級

漸進增強的另一面就是優雅地回退。最典型的例子就是使用type屬性增強表單。

【示例1】下面代碼列出了可以為type屬性指定的新值，如number、search、range等。

    <input type="number" />
    <input type="search" />
    <input type="range" />
    <input type="email" />
    <input type="date" />
    <input type="url" />

最關鍵的問題在于：當瀏覽器看到這些新type值時會如何處理。老版本瀏覽器是無法理解這些新type值的。但是當它們看到自己不理解的type值時，會將type的值解釋為text。

【示例2】對于新的video元素，它設計得很簡單、實用。針對不支持video元素的瀏覽器可以這樣寫。

這樣HTML5視頻與Flash視頻就可以協同起來，用戶不用糾結如何選擇。

如果愿意的話，還可以使用source元素，而非src屬性來指定不同的視頻格式。

上面代碼包含了4個不同的層次。

　如果瀏覽器支持video元素，也支持H264，沒什么好說的，用第一個視頻。

　如果瀏覽器支持video元素，支持Ogg，那么用第二個視頻。

　如果瀏覽器不支持video元素，那么就要試試Flash視頻。

　如果瀏覽器不支持video元素，也不支持Flash視頻，還可以給出下載鏈接。

總之，無論是HTML5，還是Flash，一個也不能少。如果只使用video元素提供視頻，難免會遇到問題。而如果只提供Flash影片，性質是一樣的。所以還是應該兩者兼顧。

1.2.6　支持的優先級

用戶與開發者的重要性要遠遠高于規范和理論。在考慮優先級時，應該按照下面順序：

用戶>編寫HTML的開發者>瀏覽器廠商>規范制定者>理論

這個設計原則本質上是一種解決沖突的機制。例如，當面臨一個要解決的問題時，如果W3C給出了一種解決方案，而WHATWG給出了另一種解決方案。一旦遇到沖突，最終用戶優先，其次是作者，再是實現者，然后標準制定者，最后才是理論上的完美。

根據最終用戶優先的原理，開發人員在鏈條中的位置高于實現者，假如我們發現了規范中的某些地方有問題，就不支持實現這個特性，那么就等于把相應的特性給否定了，規范里就得刪除，因為用戶有更高的權重。本質上用戶擁有了更大的發言權，開發人員也擁有更多的主動性。

官术网_书友最值得收藏!

HTML5+CSS3從入門到精通（微課精編版）

1.2 HTML5設計原則

1.2.1 避免不必要的復雜性

1.2.2 支持已有內容

1.2.3 解決實際問題

1.2.4 用戶怎么使用就怎么設計規范

1.2.5 優雅地降級

1.2.6 支持的優先級