緣起
2014年10月29日，萬維網聯盟宣布，經過幾乎8年的艱辛努力，HTML5標准規范終於最終制定完成了，並已公開發布。
而HTML5的草稿版本在13年就已經放出。作為一個有追求的程序猿這次想趕一次潮流學習一下HTML5，並作一次筆記以便日后溫故。
基礎
“君子務本，本立而道生。”
啥是HTTP了？
超文本傳輸協議（HTTP，HyperText Transfer Protocol)是互聯網上應用最為廣泛的一種網絡協議。是基於TCP的一種協議。
定義有些晦澀，大家都知道這么說，其實很多程序員如果沒寫過socket對於這個定義是很難真正理解的。其實這個定義的關鍵所在是基於TCP，TCP里面傳輸的事二進制流。一般從這個流里可以得到起始標記、結束標記、頭、體等。HTTP是基於TCP的，一般也會有這些東西。下面這幅圖是用谷歌瀏覽器得到的HTTP的請求頭信息。
從圖片可以看到，頭部信息包含了請求地址，請求方法，請求頭等信息。如果想對http協議的請求頭有更深入的理解，可以看看這篇文章《HTTP請求頭詳解》。
那體是啥呢？體就是HTML文本了。
啥是HTML了？
HTML叫超文本標記語言，是標准通用標記語言里的一種，主要用於互聯網。程序員每天寫的頁面，不管是jsp還是php，最終都會拼裝成一個完整的HTML文本傳遞給瀏覽器，瀏覽器在根據HTML標准，對文本進行解析，然后在頁面里展現出華麗的內容。
接着我們看看HTML標准有哪些。
- 超文本標記語言（第一版）——在1993年6月作為互聯網工程工作小組（IETF）工作草案發布（並非標准）：
- HTML 2.0——1995年11月作為RFC 1866發布，在RFC 2854於2000年6月發布之后被宣布已經過時
- HTML 3.2——1997年1月14日，W3C推薦標准
- HTML 4.0——1997年12月18日，W3C推薦標准
- HTML 4.01（微小改進）——1999年12月24日，W3C推薦標准
- HTML 5——2014年10月28日，W3C推薦標准
HTML文本在編輯是必須要准許其中一個標准，否則瀏覽器解析會出問題。
HTML文本里面一般主要是內容，可以用CSS對這些內容做修飾以便在瀏覽器中展現華麗的效果。
啥是CSS了？
CSS即層疊樣式表（Cascading StyleSheet）。 在網頁制作時采用層疊樣式表技術，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制。
其實這是一種設計思想導致的結果，即內容與修飾分離。這樣就可以針對同一個內容，使用不同的修飾而達到不同的展現效果。CSS也是有標准的，類似HTML一樣，每一種標准都需要瀏覽器支持才能正確修飾內容來展現。最新的是CSS3。一般情況瀏覽器解析沒有CSS修飾的HTML文件是就會使用默認樣式修飾。
- CSS 1－－1996年12月17日，W3C推薦標准
- CSS 2-－1999年1月11日，W3C推薦標准
- CSS 3-－2001年5月21日
除了CSS可以對HTML文本進行修飾外，還有頁面腳本語言可以對HTML和CSS做動態修改，常見的腳本語言有javascript。
啥是JavaScript了？
JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，最早是在HTML（標准通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。JaveScript實現的一個框架Node.js就已經開始支持服務器端編程了。JaveScript也和前面的HTML一樣，需要瀏覽器支持，否則是運行不起來的。目前瀏覽器還廣泛支持的事JavaScript1.5版本。最新的JavaScript是1.8.5版本，火狐4、IE9和Opera11都已經支持。
- JavaScript 1.0 1996年3月
- JavaScript 1.1 1996年8月
- JavaScript 1.2 1997年6月
- JavaScript 1.3 1998年10月
- JavaScript 1.4
- JavaScript 1.5 2000年11月
- JavaScript 1.6 2005年11月
- JavaScript 1.7 2006年10月
- JavaScript 1.8 2008年6月
- JavaScript 1.8.1
- JavaScript 1.8.2 2009年6月22日
- JavaScript 1.8.5 2010年7月27日
HTML5頁面結構
寫了這么多，終於可以開始敲代碼了。
DOCTYPE聲明
DOCTYPE是document type的簡寫。主要用來說明你用的XHTML或者HTML是什么版本。瀏覽器根據你DOCTYPE定義的DTD(文檔類型定義)來解釋頁面代碼。html4的一般是這樣寫的
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
表示當前頁面是html4的過渡型頁面。過渡型的主要目的是兼容不支持層疊樣式表（CSS）的瀏覽器。與此相同的還有嚴格型和框架型的DOCTYPE聲明。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
如果您需要干凈的標記，免於表現層的混亂，請使用此嚴格型聲明。該類型需要與層疊樣式表（CSS）配合使用，而且一些老的瀏覽器可能無法渲染出你想要的效果，所以一般這種類型不使用。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
框架型主要用來使用frameset標簽等講頁面划分成不同的區域。這個聲明IE瀏覽器支持的比較好。java語言生成的javaDoc里的index.html文件就是這個聲明。
相對html4的DOCTYPE，html5的要簡單的多了，下面就是html5的DOCTYPE聲明。
1 <!DOCTYPE html>
太簡單了，簡單的連5都沒有，有種html不會出6的感覺。
字符編碼的聲明
以前html4是這樣的
1 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
現在html5中是這樣的
1 <meta charset="UTF-8">
用於布局的標簽
以前在html4中，我們一般都使用div來對頁面內容進行布局。在html5中，增加了一些專門用於布局的標簽。
section可以完全替代div，用來表示一個區域。
article用來標記一篇文章，評論。
aside用來標記一段旁注。
header用來標記頁面的頭部，比如logo的信息就在這一欄。
footer用來標記頁面的尾部，比如版權聲明就在這一欄。
hgroup一般在header后面使用，用來標記標題組，意思就是文章的主標題和副標題作為一個整體被標記。
nav用來標記網站的導航欄。
當然了，div在html5中還是支持的，不過使用新的結構標簽，可以對搜索引擎更友好，另外頁面開發人員也很容易看懂標簽的作用。下面讓我們看看一個使用這些標簽的完整例子。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>hello html5</title> 6 </head> 7 <body> 8 <header> 9 <h1>飛車兔</h1> 10 <hr> 11 </header> 12 <nav> 13 <a href="#">首頁</a>| 14 <a href="#">隨筆</a>| 15 <a href="#">新隨筆</a>| 16 <a href="#">聯系</a>| 17 <a href="#">訂閱</a>| 18 <a href="#">管理</a> 19 </nav> 20 <article> 21 <hgroup draggable="true"> 22 <h1>學習html5</h1> 23 <h3>頁面結構標簽</h3> 24 </hgroup> 25 <aside 26 style="font-size: larger; font-style: italic; color: blue; float: right; width: 120px;"> 27 這篇文章主要用來介紹html5的頁面結構和結構標簽</aside> 28 <section> 29 <p>2014年10月29日，萬維網聯盟宣布，經過幾乎8年的艱辛努力，HTML5標准規范終於最終制定完成了，並已公開發布。</p> 30 <p> 31 而HTML5的草稿版本在13年就已經放出。作為一個有追求的程序猿這次想趕一次潮流學習一下HTML5，並作一次筆記以便日后溫故。</p> 32 </section> 33 </article> 34 <footer> ©2015-飛車兔工作室版權所有</footer> 35 </body> 36 </html>
頁面效果如下圖
