HTML超文本標(biāo)記語(yǔ)言發(fā)展到今天已經(jīng)進(jìn)入 HTML5 蓬勃發(fā)展的新時(shí)代，這篇文章小白將帶大家仔細(xì)過(guò)一遍 HTML5 設(shè)計(jì)網(wǎng)頁(yè)的基本框架，先打好基礎(chǔ)，再建高樓大廈哈~
圖文 / 丁建雄
小白是單純?yōu)榕d趣而寫(xiě)作的獨(dú)立創(chuàng)作人，如果您喜歡小白的文章，歡迎關(guān)注、交流、分享（引用請(qǐng)鏈接到本文）。
從HTML到HTML5的演變
很久遠(yuǎn)的故事就不聊太多了，我們現(xiàn)在能接觸到的老版本的HTML標(biāo)準(zhǔn)，準(zhǔn)確來(lái)講應(yīng)該叫HTML 4。而HTML5呢可以認(rèn)為是革新版本的HTML 4，但是這個(gè)演變過(guò)程卻是十分坎坷的。
HTML 4標(biāo)準(zhǔn)是由W3C（萬(wàn)維網(wǎng)聯(lián)盟）建立的，他們熱衷于從理論角度構(gòu)建純凈的標(biāo)準(zhǔn)，卻無(wú)視Web設(shè)計(jì)人員的需求，他們接下來(lái)的方向是建立純粹的XHTML 2標(biāo)準(zhǔn)。來(lái)自 Opera、Apple 和 Mozilla 的代表對(duì)這種傾向非常反感，他們希望那些支持創(chuàng)建Web應(yīng)用的特性能夠得到更多的關(guān)注。
于是，心懷不滿的反抗者建立了自己的組織：Web Hypertext Application Technology Working Group（Web超文本應(yīng)用技術(shù)工作組），簡(jiǎn)稱WHATWG。
在后來(lái)的發(fā)展中，正如大家現(xiàn)在看到的，HTML5已經(jīng)強(qiáng)勢(shì)替代老版本的HTML標(biāo)準(zhǔn)，成為新興的網(wǎng)頁(yè)開(kāi)發(fā)標(biāo)準(zhǔn)。W3C也摒棄了XHTML 2標(biāo)準(zhǔn)，開(kāi)始在WHATWG的基礎(chǔ)上繼續(xù)進(jìn)行開(kāi)發(fā)設(shè)計(jì)，兩個(gè)組織再次聯(lián)手。只不過(guò)有個(gè)小細(xì)節(jié)，W3C開(kāi)發(fā)的是「 HTML 5 」（注意有個(gè)小空格）標(biāo)準(zhǔn)，而WHATWG開(kāi)發(fā)的是「 HTML5 」（沒(méi)有空格）標(biāo)準(zhǔn)。但是，筆者發(fā)現(xiàn)一個(gè)小細(xì)節(jié)，W3school 在HTML5教程中，題標(biāo)采用的是「 HTML 5 」教程，內(nèi)容卻寫(xiě)的是「 HTML5 」教程。哈哈，看來(lái)專業(yè)技術(shù)學(xué)院也沒(méi)有刻意區(qū)分這兩個(gè)的區(qū)別，而是選擇兼顧到兩者。所以嘛，我們用戶也不用刻意去區(qū)分，標(biāo)準(zhǔn)的東西，讓他們組織自己去協(xié)商吧，我們用就行啦！
對(duì)了，順便說(shuō)一句，經(jīng)歷了這么多年的發(fā)展，其實(shí)HTML5的標(biāo)準(zhǔn)還沒(méi)有完全建立起來(lái)（雖然有些大神的觀點(diǎn)認(rèn)為在2014年10月已經(jīng)徹底完成，其實(shí)，由于后期還是有些瀏覽器兼容性問(wèn)題，標(biāo)準(zhǔn)還在持續(xù)更新中），但是其強(qiáng)大的功能已經(jīng)使得其成為科技界的新寵！
好啦，是不是已經(jīng)迫不及待想要見(jiàn)見(jiàn)這個(gè)寵兒長(zhǎng)什么樣子呢？別急，喝口水，我們繼續(xù)~
HTML5的主體結(jié)構(gòu)
要想理清HTML5的主體結(jié)構(gòu)，我們先從上篇文章結(jié)尾的那個(gè)「 Hello，world 」聊起。
下面是「 Hello，world 」的代碼
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello, world</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>你好，世界！</h1>
<!--put your contents here-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
這個(gè)是基于 bootstrap 開(kāi)發(fā)的HTML5基本模版，下面筆者就跟大家來(lái)聊聊這一行一行的代碼究竟是個(gè)啥意思？
首先是
<!DOCTYPE html>
這個(gè)就是HTML5標(biāo)準(zhǔn)聲明，也就是說(shuō)，加上這一行，瀏覽器就知道你遵循的標(biāo)準(zhǔn)是HTML5標(biāo)準(zhǔn)。
接著
<html lang="zh-cn">
</html>
這個(gè)整體代表的是HTML框架，第一個(gè)標(biāo)簽 <html> 是開(kāi)始標(biāo)簽，第二個(gè)標(biāo)簽 </html> 代表的是結(jié)束標(biāo)簽，標(biāo)簽一般都是成對(duì)出現(xiàn)的。至于 lang="zh-cn" 是語(yǔ)言選擇中國(guó)大陸中文的意思。
注意哦，這邊筆者得告訴你一個(gè)小秘密， lang="zh-cn" 這行代碼其實(shí)對(duì)于網(wǎng)頁(yè)顯示來(lái)講并沒(méi)有什么實(shí)際的意義，但是它可以告訴瀏覽器、搜索引擎、一些處理HTML的程序等，對(duì)頁(yè)面語(yǔ)言內(nèi)容來(lái)做一些對(duì)應(yīng)的處理。比如翻譯、語(yǔ)法檢查、搜索引擎精確識(shí)別等工作。
head 標(biāo)簽
接下來(lái)的標(biāo)簽是
<head>
</head>
顧名思義，「 頭部 」是存放頭文件的地方，這個(gè)標(biāo)簽內(nèi)存放的文件一般來(lái)講都是一些標(biāo)準(zhǔn)說(shuō)明、鏈接關(guān)系的文件，基本不對(duì)網(wǎng)頁(yè)實(shí)際的內(nèi)容造成影響，而會(huì)影響網(wǎng)頁(yè)整體的格局和標(biāo)準(zhǔn)。
下面連續(xù)的三個(gè)相似的 <meta> 標(biāo)簽
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta> 標(biāo)簽一般位于文檔頭部，一般都是跟「 屬性 」連用的。
<meta charset="utf-8"> 這條代碼里面 charset 是「 屬性 」，utf-8 是「 值 」，而值是需要用 "" 包起來(lái)的。這條語(yǔ)句的意思是定義整個(gè)頁(yè)面字符編碼格式采用 utf-8 標(biāo)準(zhǔn)。
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 這條代碼里面 http-equiv 是通用的「 屬性名稱 」，他的「 值 」是 X-UA-Compatible ，而 content 是通用的「 值名稱 」，他的「 值 」是 IE=edge 。
是不是有點(diǎn)暈？別急，這條語(yǔ)句其實(shí)可以寫(xiě)成 X-UA-Compatible="IE=edge" 這樣是不是理解清楚了？對(duì)比上面的那條 charset="utf-8" 。哈哈，簡(jiǎn)單吧！這條語(yǔ)句的意思是告訴「 IE 」瀏覽器以當(dāng)前瀏覽器最高級(jí)標(biāo)準(zhǔn)模式渲染，簡(jiǎn)單的說(shuō)，就是什么版本「 IE 」就用什么版本的標(biāo)準(zhǔn)模式渲染，這樣可以避免版本升級(jí)造成的影響。
那要是沒(méi)有安裝「 IE 」咋辦呢？最佳的兼容模式方案，其實(shí)可以考慮這么寫(xiě) <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 這樣，當(dāng)使用不同瀏覽器時(shí)瀏覽器會(huì)優(yōu)先篩選出已經(jīng)安裝的渲染模式。當(dāng)然啦，親測(cè)下來(lái)，渲染模式什么的對(duì)網(wǎng)頁(yè)效果影響不大，對(duì)于各大主流瀏覽器基本不會(huì)出現(xiàn)大的問(wèn)題，但是在某些細(xì)節(jié)方面可能略有不同。
<meta name="viewport" content="width=device-width, initial-scale=1"> 這條語(yǔ)句的理解跟上面是類似的，這樣改寫(xiě)你就明白了 viewport="width=device-width, initial-scale=1"，是不是一目了然啦！這條語(yǔ)句的意思是「顯示窗口 」設(shè)定為「 設(shè)備寬度 」，顯示圖形與文字的「 初始比例 」是1。
好，接下來(lái)的標(biāo)簽是
<title>Hello, world</title>
這個(gè)東西有啥用呢？這個(gè)標(biāo)簽的作用是定義了網(wǎng)頁(yè)的名稱，你可以在網(wǎng)頁(yè)最上面看到網(wǎng)頁(yè)的名稱。
再來(lái)看下一個(gè)新的標(biāo)簽
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
首先，`` 這是一個(gè)注釋行，僅僅是為了人能看懂而寫(xiě)的解釋說(shuō)明，不對(duì)網(wǎng)頁(yè)顯示產(chǎn)生任何影響。
然后，第二行 <link> 標(biāo)簽定義文檔與外部資源的關(guān)系，href="css/bootstrap.min.css" 這句話規(guī)定了外部資源所處的文檔位置，rel="stylesheet" 這句話規(guī)定了外部資源與被鏈接文檔的關(guān)系是「 樣式表 」。簡(jiǎn)單地說(shuō)，這個(gè)標(biāo)簽將外部樣式表CCS文件鏈接到本HTML5文檔里面來(lái)了。
好的，至此，head 標(biāo)簽結(jié)束了！
body 標(biāo)簽
下面一個(gè)與 head 標(biāo)簽同等級(jí)的是 body 標(biāo)簽
<body>
</body>
看名字應(yīng)該很清楚了吧，這個(gè)是網(wǎng)頁(yè)的主體，整個(gè)網(wǎng)頁(yè)所顯示的具體內(nèi)容編輯都在這個(gè)里面完成。具體有哪些內(nèi)容呢？這個(gè)就比較多啦，在后續(xù)的文章里我們?cè)俾模?/p>
這里我們只留了「 你好，世界 」這一個(gè)內(nèi)容
<h1>你好，世界！</h1>
<h1></h1> 代表的是標(biāo)準(zhǔn)的標(biāo)題樣式，也就是說(shuō)，「 你好，世界 」這幾個(gè)字的樣式是由他的標(biāo)簽決定的。
接下來(lái)的注釋部分我們就不聊了，大家有點(diǎn)英語(yǔ)基礎(chǔ)的應(yīng)該能看懂吧，直接進(jìn)入標(biāo)簽
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script></script> 標(biāo)簽用于定義客戶端腳本，比如「 JavaScript 」，script 元素既可以包含腳本語(yǔ)句，也可以通過(guò) src 屬性指向外部腳本文件。
這里的用法就是指向了外部腳本文件，一個(gè)是互聯(lián)網(wǎng)上的 jQuery 文件，一個(gè)是本地腳本文件。
大家有沒(méi)有發(fā)現(xiàn)，這個(gè) <script></script> 標(biāo)簽其實(shí)是個(gè)說(shuō)明性質(zhì)的文件嘛！是不是不應(yīng)該在 body 里面，而應(yīng)該放到 head 里面去呢？大家的思考是完全正確的！對(duì)于初期的網(wǎng)頁(yè)設(shè)計(jì)者，我們的確是曾經(jīng)把他放在 head 里面的。只不過(guò)，后來(lái)大家發(fā)現(xiàn)，對(duì)于大型的腳本文件，如果放在頭部，加載起來(lái)會(huì)很費(fèi)時(shí)，嚴(yán)重影響網(wǎng)頁(yè)打開(kāi)的速度和用戶體驗(yàn)效果（你可以想象一下，刷了半天網(wǎng)頁(yè)，進(jìn)度條都快一半了，網(wǎng)頁(yè)還是空白一片的尷尬）。
所以，解決的方法就是，將 <script></script> 標(biāo)簽全部放到網(wǎng)頁(yè)的最后面加載。這樣，即使網(wǎng)頁(yè)沒(méi)有完全加載完畢，也可以快速優(yōu)先顯示網(wǎng)頁(yè)內(nèi)容，而不會(huì)造成上面提到的那種尷尬局面。這是一個(gè)小技巧，卻對(duì)用戶體驗(yàn)而言是決定性的。
所以啊，細(xì)節(jié)決定成敗，一個(gè)優(yōu)秀的設(shè)計(jì)師跟一個(gè)普通的設(shè)計(jì)師的差別或許不在于他們的主體知識(shí)掌握的多少，而在于他們對(duì)自己作品的細(xì)致打磨程度，以及一點(diǎn)點(diǎn)看似微不足道的經(jīng)驗(yàn)積累。久而久之，我們做出的產(chǎn)品便不再只是一般的產(chǎn)品，而會(huì)成為一種藝術(shù)品，一種我們會(huì)為之著迷上癮的美。只是因?yàn)椋覀兺度肓撕芏嘈难⑶沂怯米约旱牟湃A去設(shè)計(jì)，而不是單純?yōu)榱松嫒?qiáng)迫自己勞作。
好啦，至此，HTML5主體框架結(jié)構(gòu)的講解就完畢啦！基本上來(lái)講，現(xiàn)在大部分的網(wǎng)頁(yè)設(shè)計(jì)都是基于這個(gè)框架實(shí)現(xiàn)的，高效，實(shí)用。
在接下來(lái)的文章中，筆者會(huì)跟大家繼續(xù)深入探討HTML5中網(wǎng)頁(yè)設(shè)計(jì)的一些基礎(chǔ)的、有趣的、有些棘手的問(wèn)題。我們一步一個(gè)腳印，先把基礎(chǔ)打好，再去建造那些復(fù)雜的高級(jí)貨哈！敬請(qǐng)期待~
好啦，寫(xiě)了一下午了，來(lái)碗麻辣燙壓壓驚！
參考文獻(xiàn)
Bootstrap官方文檔
