天天看點

《HTML5與CSS3實戰指南》——2.3 HTML5常見問題

本節書摘來自異步社群《html5與css3實戰指南》一書中的第2章,第2.3節,作者: 【美】estelle weyl , louis lazaris , alexis goldstein 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

在簡要介紹了html5标記以後,您可能會有一些問題。以下是一些常見問題的答案。

2.3.1 為什麼這些變更仍能夠在舊版浏覽器中工作

這是許多開發人員難于接受html5的地方。其實這根本不是問題,為了便于讀者了解,我們會将html5和css3的一些新功能(後面章節将介紹)進行對比。

在css中,在添加新功能時(例如,border-radius屬性将圓角添加到元素中),同時也需要将它添加到浏覽器呈現引擎中,是以舊版浏覽器無法識别它。是以,使用者在使用不支援border-radius的浏覽器浏覽網頁時,圓角就變成了方形。css3的其他功能也與其類似,是以在某種程度上降低了它的使用性能。

許多開發人員認為html5與css的工作方式類似。某些進階功能及我們在本書中稍後介紹的api可能是這樣的,但并不是所有的更改都是如此,比如更簡單的文法、減少的備援和新文檔類型。

在精心研究了舊版浏覽器可以處理及不可以處理什麼之後,才對html5文法進行了定義。例如,在html5中,至少需要15個字元組成文檔類型聲明,以便所有浏覽器以标準模式顯示頁面。

同樣,xhtml需要在html元素中包含更長的字元編碼聲明和其他的屬性來用于驗證,浏覽器并不需要他們來正确顯示頁面。再次聲明,舊版浏覽器經過了精心檢測,最後決定台灣字元編碼并删除xmlns屬性,浏覽器仍将正确顯示頁面。

經過簡化的script和link元素也屬于“簡化但不破壞舊頁面”這一類别。我們上面看到的boolean屬性同樣也屬于此類别,浏覽器通常忽略像checked和disabled這樣的屬性值,那為什麼還要提供這些屬性呢?

如第1章所述,您不應害怕使用html5。設計該語言時,已經考慮到向後相容性的問題,并以盡可能支援現有内容為目标。

與css3和javascript中的更改不同,必須在浏覽器制造商确實對此進行支援以後,新添加部分才可得到執行。使用html5文法則不需要等待新版浏覽器的發行。此外,當使用新的語義元素時,隻需少量javascript代碼即可與舊版浏覽器相容。

什麼是标準模式?

當基于标準的web設計處于起步階段時,浏覽器制造商們就面臨着一個問題:支援新标準,在許多情況下,将會打破為舊版非标準浏覽器設計的現有網頁的向後相容性。浏覽器制造商需要一個信号來訓示既定網頁能夠按照标準來呈現。他們在文檔類型中發現這樣一個信号:新的、符合标準的網頁包含格式正确的文檔類型,舊版非标準網頁通常則沒有。

将文檔類型作為信号使用,浏覽器可以在标準模式(它們嘗試按照标準以呈現字母的方式呈現元素)和quirks模式(它們試圖模仿舊版浏覽器“離奇”的呈現能力,以確定頁面按照意圖呈現)之間進行切換。

可以肯定地說,在目前的開發領域,幾乎每一個網頁都有一個适當的文檔類型,是以将以标準模式呈現;是以,您将不太可能要處理一個由quirks模式呈現的頁面。當然,如果一個使用者使用非常古老的浏覽器(比如internet explorer 4)浏覽網頁,将會使用該浏覽器的呈現模式顯示頁面。這就是quirks模式所要模仿的,而且無論是否使用文檔類型,它都将這樣運作。

盡管xhtml和舊版的html文檔類型包含了所引用規範的确切版本資訊,但是浏覽器并沒有真正利用這種資訊。隻要呈現了一個看似正确的文檔類型,它們就将以标準模式呈現頁面。是以,html5的文檔類型已經精簡到了啟動任何浏覽器标準模式所需的最低限度。

有關更多資訊及一張概述了不同浏覽器以quirks模式呈現的原因的圖表,請參見wikipedia1。您也可以在sitepoint的css參考資料2中閱讀關于标準模式和quirks模式的概述。

2.3.2 是否需要關閉所有标簽

在基于xhtml的文法中,需要關閉所有元素,即使已經有了相應的結束标記(比如</html>)或在void元素的情況下,在标簽結尾處有一個正斜杠。後者是不包含子元素(比如input、img或link)的元素。

您仍可以在html5中使用該文法樣式,您更喜歡它可能是由于為了保持編碼的一緻性和可維護性,但已不需要添加尾部反斜杠以用于void元素驗證。繼續我們的“精簡”主題,html5允許您在此類元素後面删除尾部反斜杠,這樣您的标記看起來更加幹淨、整潔。

值得一提的是,在html5中,大多數元素可以包含嵌套元素,但如果恰巧是空的,仍然需要有一個相應的結束标記配對。此規則雖有例外,但是可以簡單地認為這就是它的普遍性。

2.3.3 關于其他的基于xhtml的文法使用習慣

關于這個問題,其實省略結尾斜線僅是基于html5文法與xhtml不同的一方面。實際上,html5驗證完全忽略了文法風格問題,它隻在編碼錯誤以某種方式終止檔案運作時才報錯。

這就意味着如果能夠通過驗證,那麼下面5行代碼就是完全等同的:

《HTML5與CSS3實戰指南》——2.3 HTML5常見問題

https://yqfile.alicdn.com/1ed26f1b182b7be205c5f2de9fc24128bfc88f4c.png" >

在html5中,您可以使用小寫、大寫或大小寫混合的标記名稱或屬性,同樣也可以使用引用或未引用的屬性值(隻要這些值不包含空格或其他保留字元),都能通過驗證。

在xhtml中,所有屬性都必須有值,即使它們是多餘的。例如,您經常會看到類似下面的标記:

《HTML5與CSS3實戰指南》——2.3 HTML5常見問題

在html5中,屬性是“開”或“關”(稱為布爾屬性)可以不用指定任何值。是以上述input元素可以寫成下列代碼:

《HTML5與CSS3實戰指南》——2.3 HTML5常見問題

是以,至少就文法而言,html5的驗證要求寬松了許多。這是否就意味着您可以無所顧忌并在任意指定元素上使用任何文法呢?不,我們當然不建議這樣做。

我們鼓勵開發人員選擇一種文法風格,并堅持下去—特别是如果您在一個團隊中工作,代碼維護和可讀性都是非常重要的。我們還建議(雖然這不是必須的)您選擇最簡單的編碼風格,并保持一緻。

以下是一些準則,您可以考慮使用。

所有元素和屬性都小寫,就像您使用xhtml一樣。

除去那些不要求用結束标記的元素,我們建議關閉所有包含内容的元素 (比如<p>text</p>)。

盡管您可以不給屬性值添加引号,但是極有可能您所編寫的屬性要求添加引号(例如,當聲明由空格分開的多個類時,或在url上附加查詢字元串值時)。是以,為了保持統一性,我們建議您使用引号。

元素沒有任何内容,可删除尾部反斜杠(比如meta或input)。

避免為布爾屬性提供多餘值(例如,使用<input type="checkbox"checked>,而不使用<input type="checkbox" checked="chec-ked">`)。

并不是要求大家全部接受以上建議,但我們相信這些合理的文法建議能夠實作幹淨标記,并易于閱讀和維護。

如果您濫用編碼風格,包含大量沒有必要的東西,就是對html5創始者在力求語言簡化所取得的進展方面加以否定。

繼續閱讀