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