dt电子游戏官方网站

書名： HTML5 移動Web開發(fā)從入門到精通（微課精編版）
作者名：前端科技
本章字數(shù)： 2040字
更新時間： 2019-11-15 20:21:41

1.2　HTML5設(shè)計原則

從HTML 2.0到XHTML 2.0，XHTML 2.0由于語法解析過于嚴格，因此不太適合互聯(lián)網(wǎng)開放、自由的精神。Jeremy Keith認為所有的項目都應(yīng)該先有設(shè)計原則，HTML5也同樣如此，W3C為此發(fā)布了HTML設(shè)計原則（http://www.w3.org/TR/html-design-principles/），強調(diào)了HTML5規(guī)范的兼容性、實用性和互操作性。簡單說明如下。

1.2.1　避免不必要的復(fù)雜性

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

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

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

HTML5簡化如下。

    <!DOCTYPE html>

HTML4.01中的DOCTYPE過于冗長，很難記住這些內(nèi)容，但在HTML5中只需要簡單的<!DOCTYPE html>就可以了。DOCTYPE是給驗證器用的，而非瀏覽器，瀏覽器只在做DOCTYPE切換時關(guān)注它，因此并不需要寫得太復(fù)雜。

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

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

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

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

HTML5簡化如下。

    <meta charset="utf-8">

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

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

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

1.2.2　支持已有內(nèi)容

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

【示例】下面的示例展示了編寫同樣內(nèi)容的4種不同寫法，4種寫法唯一的不同點就是語法。

從瀏覽器解析的角度分析，這些寫法實際上都是一樣的。HTML5必須支持已經(jīng)存在的約定，適應(yīng)不同的用戶習(xí)慣，而不是用戶適應(yīng)瀏覽器的嚴格解析標(biāo)準(zhǔn)。

1.2.3　解決實際問題

規(guī)范應(yīng)該去解決現(xiàn)實中實際遇到的問題，而不該考慮那些復(fù)雜的理論問題。

【示例】既然有在a中嵌套多個段落元素的需要，那就讓規(guī)范支持它。

這塊內(nèi)容包含一個標(biāo)題，一個段落。按照HTML4規(guī)范，必須至少使用兩個鏈接。

    <h2><a href="#">標(biāo)題文本</a></h2>
    <p><a href="#">段落文本</a></p>

在HTML5中，只需要把所有內(nèi)容都包裹在一個鏈接中就可以了。

    <a href="#">
      <h2>標(biāo)題文本</h2>
      <p>段落文本</p>
    </a>

其實這種寫法早已經(jīng)存在，當(dāng)然以前這樣寫是不符合規(guī)范的。所以說，HTML5解決現(xiàn)實的問題，其本質(zhì)是糾正因循守舊的規(guī)范標(biāo)準(zhǔn)，現(xiàn)在把標(biāo)準(zhǔn)改了，允許用戶這樣寫了。

1.2.4　用戶怎么使用就怎么設(shè)計規(guī)范

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

【示例】下面的代碼相信讀者都不會陌生，這些都是頻繁被使用過的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提出來的，而是谷歌公司根據(jù)大數(shù)據(jù)分析用戶習(xí)慣得出來的。

1.2.5　優(yōu)雅地降級

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

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

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

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

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

    <video src="movie.mp4">
      <!--回退內(nèi)容-->
    </video>

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

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

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

　如果瀏覽器支持video元素，也支持H.264視頻編碼格式，用第一個視頻。
　如果瀏覽器支持video元素，支持Ogg視頻編碼格式，那么用第二個視頻。
　如果瀏覽器不支持video元素，那么就要試試Flash視頻。
　如果瀏覽器不支持video元素，也不支持Flash視頻，還可以給出下載鏈接。

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

1.2.6　支持的優(yōu)先級

用戶與開發(fā)者的重要性要遠遠高于規(guī)范和理論。在考慮優(yōu)先級時，應(yīng)該遵循下面的順序：

用戶→編寫HTML的開發(fā)者→瀏覽器廠商→規(guī)范制定者→理論

這個設(shè)計原則本質(zhì)上是一種解決沖突的機制。例如，當(dāng)面臨一個要解決的問題時，如果W3C給出了一種解決方案，而WHATWG（網(wǎng)頁超文本技術(shù)工作小組）給出了另一種解決方案。一旦遇到?jīng)_突，最終用戶優(yōu)先，其次是開發(fā)人員，再次是實現(xiàn)者，然后是規(guī)范制定者，最后才是理論上的完美。

根據(jù)最終用戶優(yōu)先的原則，開發(fā)人員在鏈條中的位置高于實現(xiàn)者，假如開發(fā)人員發(fā)現(xiàn)規(guī)范中的特性某些地方有問題，從而不支持實現(xiàn)該特性，那么等于把相應(yīng)的特性給否定了，相應(yīng)地，規(guī)范里就得刪除該特性，因為開發(fā)人員有更高的權(quán)重。本質(zhì)上用戶擁有了更大的發(fā)言權(quán)，開發(fā)人員也擁有了更多的主動性。

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

HTML5 移動Web開發(fā)從入門到精通（微課精編版）

1.2 HTML5設(shè)計原則

1.2.1 避免不必要的復(fù)雜性

1.2.2 支持已有內(nèi)容

1.2.3 解決實際問題

1.2.4 用戶怎么使用就怎么設(shè)計規(guī)范

1.2.5 優(yōu)雅地降級

1.2.6 支持的優(yōu)先級