《HTML5与CSS3实战指南》——2.2 基本的HTML5模板
本節(jié)書(shū)摘來(lái)自異步社區(qū)《HTML5與CSS3實(shí)戰(zhàn)指南》一書(shū)中的第2章，第2.2節(jié),作者： 【美】Estelle Weyl , Louis Lazaris , Alexis Goldstein 更多章節(jié)內(nèi)容可以訪問(wèn)云棲社區(qū)“異步社區(qū)”公眾號(hào)查看。
2.2 基本的HTML5模板
在您學(xué)習(xí)HTML5和新技術(shù)時(shí)，您可能想創(chuàng)建自己的藍(lán)圖或示例文件，并通過(guò)它們來(lái)構(gòu)建基于HTML5的項(xiàng)目。實(shí)際上，您可能對(duì)已存在的XHTML或HTML4.0項(xiàng)目已經(jīng)做了類(lèi)似的事情。我們鼓勵(lì)您這樣做，當(dāng)然您也可以考慮使用一些在線資源，從而為您提供一個(gè)HTML5的基本起點(diǎn)1。
在這個(gè)項(xiàng)目中，我們將從頭開(kāi)始，編寫(xiě)自己的代碼，并對(duì)每一部分進(jìn)行詳細(xì)講解。當(dāng)然，即使是最好、最龐大的示例網(wǎng)站也不可能包含所有的新元素和技術(shù)。我們也會(huì)詳細(xì)講解一些未在我們所創(chuàng)建的示例網(wǎng)站中應(yīng)用的新功能。這樣，在您決定如何創(chuàng)建HTML5和CSS3網(wǎng)站和Web應(yīng)用程序時(shí)，就會(huì)熟悉所提供的各種選項(xiàng)，也就可以將本書(shū)當(dāng)作許多技術(shù)的快速參考資料了。
讓我們從一個(gè)簡(jiǎn)單的HTML5網(wǎng)頁(yè)的基本框架開(kāi)始：
仔細(xì)看一下上面的標(biāo)記。如果您正在從XHTML或HTML4過(guò)渡到HTML5，您會(huì)立即注意到HTML5在許多方面是不同的。
**
2.2.1 Doctype**
首先，我們進(jìn)行文檔類(lèi)型聲明（Document Type Declaration，也稱(chēng)為doctype）。它可以用來(lái)告訴瀏覽器（或任何其他分析程序）它們所查看的文件類(lèi)型。在HTML文件中，它表示具體的HTML版本及風(fēng)格。doctype應(yīng)是位于HTML文件最頂端的第一個(gè)項(xiàng)目。過(guò)去，doctype聲明非常難看且很難記，對(duì)于XHTML 1.0嚴(yán)格類(lèi)型來(lái)說(shuō)，doctype聲明如下所示。
對(duì)于HTML4過(guò)渡類(lèi)型來(lái)說(shuō)，doctype聲明如下所示。
https://yqfile.alicdn.com/17b937f462c153707ead4de3714fcf25cc904ba2.png" >
經(jīng)過(guò)幾年的發(fā)展，代碼編輯軟件開(kāi)始提供包含doctype的HTML模板，或提供自動(dòng)插入模板的方式。當(dāng)然，快速的網(wǎng)頁(yè)搜索會(huì)很輕松地調(diào)出代碼以插入您需要的文檔類(lèi)型。
盡管在文檔頂端的一長(zhǎng)串文本并沒(méi)有對(duì)我們?cè)斐商蟮挠绊?#xff08;沒(méi)有迫使我們的網(wǎng)站瀏覽者下載其他的字節(jié)），HTML5清理了這個(gè)難以辨認(rèn)的眼中釘。現(xiàn)在，我們所需要的只是下面這一行代碼。
既簡(jiǎn)單又明了。請(qǐng)您注意，“5”已經(jīng)在聲明里消失了。盡管目前網(wǎng)站標(biāo)記的版本是“HTML5”，但這確實(shí)僅是之前的HTML標(biāo)準(zhǔn)的更新—以后的規(guī)范還會(huì)在今天的基礎(chǔ)上進(jìn)一步發(fā)展。由于瀏覽器要支持網(wǎng)站的所有內(nèi)容，因此這里沒(méi)有一個(gè)固定的文檔類(lèi)型去告訴瀏覽器應(yīng)支持文檔中的哪種功能。
2.2.2 html元素
任何HTML文件中所包含的內(nèi)容都是html元素，該元素在HTML5中并沒(méi)有顯著的變化。在我們的示例中，包含了值為“en”的lang屬性，表示文檔的語(yǔ)言是英語(yǔ)。在基于XHTML的語(yǔ)法中，要求包含xmlns屬性。在HTML5中，已經(jīng)沒(méi)有這項(xiàng)要求。即使是lang屬性，對(duì)于文檔的驗(yàn)證或正確運(yùn)行都不是必不可少的。
我們目前所擁有的標(biāo)記如下所示，其中包括結(jié)束</html>標(biāo)記：
2.2.3 head元素
頁(yè)面的下一部分是<head>部分。head中的第一行用來(lái)定義文檔的字符編碼。這是另一個(gè)被簡(jiǎn)化的元素。它的用法如下所示。
HTML5通過(guò)將字符編碼<meta>標(biāo)簽的內(nèi)容縮減到最少，從而使之得到改進(jìn)。代碼如下所示。
在幾乎所有的情況下，utf-8將是您在文檔中使用的值。本章篇幅有限，這里將不能完整地介紹字符編碼，或許您對(duì)此也并不感興趣。當(dāng)然，如果您想進(jìn)一步研究，可以訪問(wèn)W3C網(wǎng)站2查閱相關(guān)主題。
預(yù)先準(zhǔn)備 為確保所有瀏覽器能夠正確讀取字符編碼，整個(gè)字符編碼聲明必須包含在文檔的前512個(gè)字符中。必須將它放在所有基于內(nèi)容的元素前面（比如，
元素，我們將在示例網(wǎng)站中演示）。關(guān)于這個(gè)主題，我們可以寫(xiě)很多。但是，為了使你們節(jié)省精力，我們省去了一些細(xì)節(jié)。現(xiàn)在，我們可以滿意地接受這個(gè)簡(jiǎn)化的聲明，并繼續(xù)我們文檔的下一部分。
在這幾行中，HTML5與以前版本的語(yǔ)法幾乎沒(méi)有什么不同。頁(yè)面標(biāo)題的聲明和以前一樣，<meta>標(biāo)簽僅是一個(gè)可選的示例，用來(lái)表示可放置的位置，您可以按照自己的意愿，在此放置任意多個(gè)meta元素。
此標(biāo)記塊的主要部分是樣式表，我們使用習(xí)慣的link元素來(lái)包含它。初看起來(lái)，您可能沒(méi)有發(fā)現(xiàn)任何區(qū)別。但是按照慣例，link元素包含一個(gè)type屬性，其值為text/css。有趣的是，在XHTML或HTML4中不需要該屬性，即使是在使用嚴(yán)格的文檔類(lèi)型時(shí)也是如此。因?yàn)樗械臑g覽器都可以識(shí)別鏈接樣式表的內(nèi)容類(lèi)型，而無(wú)須其他的屬性，所以，基于HTML5的語(yǔ)法鼓勵(lì)您完全放棄使用type屬性。
2.2.4 公平競(jìng)爭(zhēng)
接下來(lái)，在介紹標(biāo)記中的新元素之前，我們需要先了解一些背景知識(shí)。
HTML5包括一些新元素，比如，我們將稍后介紹的article和section元素。您可能認(rèn)為是舊版瀏覽器的主要問(wèn)題，但這是錯(cuò)誤的想法。這是因?yàn)榇蠖鄶?shù)瀏覽器實(shí)際上并不在乎您使用什么標(biāo)簽。如果您的HTML文檔有<recipe>標(biāo)簽（或甚至使用<ziggy>標(biāo)簽），或者CSS將一些樣式附加到該元素上，幾乎所有瀏覽器都會(huì)正常運(yùn)行，并應(yīng)用該樣式。
當(dāng)然，這個(gè)假設(shè)的文檔不會(huì)生效，但在大多數(shù)瀏覽器（Internet Explorer是一個(gè)例外）上可正確呈現(xiàn)。在Internet Explorer 9之前，Internet Explorer禁止接收無(wú)法識(shí)別的元素。呈現(xiàn)引擎視這些秘密元素為“未知元素”，所以您不能改變其外觀及行為方式。這不僅包括我們所設(shè)想的元素，還包括那些在所開(kāi)發(fā)的瀏覽器中未定義的元素。當(dāng)然也包括HTML5的新元素。
編寫(xiě)本書(shū)時(shí)，Internet Explorer 9剛剛發(fā)布（被廣泛使用還會(huì)需要一段時(shí)間），所以這是一個(gè)問(wèn)題。我們想開(kāi)始使用這些光鮮的新標(biāo)簽，但是如果不能將這些CSS規(guī)則附加到這些元素上，那么我們的設(shè)計(jì)就會(huì)崩潰。
幸運(yùn)的是，這里有一個(gè)解決方案：一個(gè)非常簡(jiǎn)單的JavaScript，最初由John Resig開(kāi)發(fā)，可以神奇地使HTML5的新元素在Internet Explorer的早期版本中顯示。
我們已經(jīng)在條件注釋的標(biāo)簽<script>中包含了所謂的“HTML5 shiv”3。條件注釋是Microsoft在Internet Explorer中實(shí)施的一個(gè)專(zhuān)用功能。它們向您提供用腳本或樣式確定特定瀏覽器版本的能力4。這種條件注釋告訴瀏覽器：封裝的標(biāo)記僅供用戶(hù)使用Internet Explorer 9之前的版本查看網(wǎng)頁(yè)。
請(qǐng)注意，如果您用JavaScript庫(kù)處理HTML5的新功能或新API，可能已經(jīng)使HTML5的腳本可以運(yùn)行。在本例中，您可以刪除關(guān)于Remy Sharp的腳本。其中的一個(gè)示例是Modernizr5，這是一個(gè)JavaScript庫(kù)，它能檢測(cè)現(xiàn)代HTML和CSS的新功能，將在附錄A介紹它。Modernizr包括能夠使HTML5在Internet Explorer早期版本中顯示的代碼，所以Remy腳本就顯得多余了。
使用Internet Explorer 6～Internet Explorer 8但禁用了JavaScript的用戶(hù)該怎么辦呢？
當(dāng)然，仍有一些用戶(hù)（禁用了JavaScript的用戶(hù)）不能夠使用Remy的HTML5 shiv，可能有這個(gè)或那個(gè)原因。作為網(wǎng)站設(shè)計(jì)人員，即使用戶(hù)不能使用JavaScript，我們也必須使所有用戶(hù)都能夠?yàn)g覽我們創(chuàng)建的網(wǎng)站內(nèi)容。當(dāng)45%～75%的用戶(hù)使用Internet Explorer時(shí)，這似乎是一個(gè)嚴(yán)重的問(wèn)題。
但是事實(shí)并沒(méi)有那么糟糕。許多研究表明，不能使用JavaScript的用戶(hù)非常少，可以忽略不計(jì)。
2010年10月在雅虎網(wǎng)站發(fā)布的一項(xiàng)研究 6表明，全世界不能使用JavaScript的用戶(hù)大約只有1%。而另一個(gè)對(duì)數(shù)十億用戶(hù)的研究 7也得到了幾乎相同的結(jié)果。在這兩項(xiàng)研究中，相對(duì)于世界其他地方，美國(guó)用戶(hù)不能夠使用JavaScript的人數(shù)最多。
還有其他一些使用HTML5新元素的方式，不需要JavaScript在不受支持的瀏覽器中顯示設(shè)置了樣式的元素。不幸的是，那些方法很不現(xiàn)實(shí)，有許多其他缺陷。
如果您仍然十分關(guān)心這些用戶(hù)，可以考慮這種混合方法。例如，在缺少樣式的地方使用新HTML5元素不會(huì)有大問(wèn)題，同時(shí)對(duì)于主要的布局容器，可使用div等傳統(tǒng)的元素。
2.2.5 剩余部分是歷史簡(jiǎn)介
讓我們看看啟動(dòng)模板的剩余部分，我們通常使用body元素以及其結(jié)束標(biāo)記和</html>的結(jié)束標(biāo)記。我們還在script元素中包含JavaScript文件的引用。
與我們前面討論過(guò)的link元素非常相像，<script>標(biāo)簽并不要求您聲明type屬性。在XHTML中驗(yàn)證包含外部腳本的網(wǎng)頁(yè)，<script>標(biāo)簽應(yīng)如下所示：
出于實(shí)用性目的，JavaScript僅是一種在Web上使用的腳本語(yǔ)言，并且即使您不明確聲明，所有的瀏覽器也都會(huì)假設(shè)您使用的是JavaScript，所以type屬性無(wú)需在HTML5文檔中聲明：
https://yqfile.alicdn.com/a799d2876cdb1aeb167ebf2bfdb803665e27e97e.png" >
我們將script元素放在頁(yè)面底部，以使其符合嵌入JavaScript的最佳做法。我們還需處理頁(yè)面的載入速度。當(dāng)瀏覽器碰到腳本時(shí)，它會(huì)將腳本分解成若干部分，此時(shí)將暫停載入和呈現(xiàn)頁(yè)面的其余部分。如果在頁(yè)面頂部以及所有內(nèi)容之前放置大量腳本，這將導(dǎo)致頁(yè)面載入十分緩慢。這就是為什么將大部分腳本放在頁(yè)面最底部的原因，這樣可以在頁(yè)面載入完成以后，再對(duì)腳本進(jìn)行分解。
在一些情況（比如HTML shiv）下，由于您想在瀏覽器開(kāi)始呈現(xiàn)頁(yè)面之前呈現(xiàn)效果，可根據(jù)需要，將腳本放在文檔的head中。2
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的《HTML5与CSS3实战指南》——2.2 基本的HTML5模板的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： [剑指offer]面试题第[65]题[J
- 下一篇： 思维导图分析http之前端组成