本文轉自：http://chinazblz.blog.163.com/blog/static/93939173201052345454338/
HTML5追加的新標籤
新千年以來，超文本標記語言（HTML）5 第一次向 HTML 中引入新的元素。
新的結構元素包括 aside、figure 和 section。
新的內聯元素包括 time、meter 和 progress。
新的內嵌元素有 video 和 audio。新的交互元素有 details、datagrid 和 command。
■HTML5的結構
- section：這可以是書中的一章或一節，實際上可以是在 HTML 4 中有自己的標題的任何東西
- header：頁面上顯示的頁眉；與 head 元素不一樣
- footer：頁腳；可以顯示電子郵件中的簽名
- nav：指向其他頁面的一組鏈接
- article：blog、雜誌、文章彙編等中的一篇文章
必須分析標題的級別，才能看出各個部分的劃分方式。邊欄、頁腳、頁眉、導航條、主內容區和各篇文章都由通用的 div 元素來表示
HTML 5 增加的塊級元素：
除了結構性元素之外，HTML 5 還增加了一些純語義性的塊級元素：
- aside
- figure
- dialog
aside 元素代表說明、提示、邊欄、引用、附加註釋等，也就是敘述主線之外的內容。
figure 元素代表一個塊級圖像，還可以包含說明。figure 元素不只可以顯示圖片。還可以使用它給 audio、video、iframe、object 和 embed 元素加說明。
dialog 元素表示幾個人之間的對話。HTML 5 dt 元素可以表示講話者，HTML 5 dd 元素可以表示講話內容。所以，在老式瀏覽器中也可以以合理的方式顯示對話。
HTML 5 增加的語義性內聯元素
HTML 4 用 5 個不同的內聯元素表示略有差異的計算機代碼：var、code、kbd、tt 和 samp。但是，它無法表示時間、數字等基本數值。HTML 5 提供了幾個新的內聯元素來滿足非技術作者的需求。
m
m 元素表示文本被 “加上標誌”，但是不一定要強調。可以把它想像成書中突出顯示的一節。Google 的緩存頁面就是典型的用例。如果鏈接到一個緩存的副本，搜索詞就被加上標誌。例如，如果搜索 “Egret”，那麼緩存的 Google 頁面可能像下面這樣：
HTMl源代碼
<bThe Great <m>Egret</m> (also known as the American <m>Egret</m>) is a large white wading bird found worldwide. The Great <m>Egret</m> flies with slow wing beats. The scientific name of the Great <m>Egret</m> is <i>Casmerodius albus</i>.time
time 元素表示一個時間值，比如 5:35 P.M., EST, April 23, 2007。例如：
HTMl源代碼
<p>I am writing this example at <time>5:35 P.M. on April 23rd</time>. </p>
HTMl源代碼
<p>I am writing this example at <time datetime="2007-04-23T17:35:00-05:00">5:35 P.M. on April 23rd</time>. </p>meter
meter 元素表示指定範圍內的數字值。例如，可以用它表示薪水、投票給 Le Pen 的法國選民的百分比或考試分數。在這裏，我使用 meter 標出 Software Development 2007 上一位 Google 程序員提供的數據：
HTMl源代碼
<p>An entry level programmer in Silicon Valley can expect to start around <meter>$90,000</meter> per year. </p>meter 元素幫助瀏覽器和其他客戶機識別 HTML 頁面中的數量。它不要求對元素內容應用任何特定的格式。但是，每個 meter 元素可以有最多 6 個屬性，它們按照更適合機器識別的形式表示這個數量：
- value
- min
- low
- high
- max
- optimum
這些屬性都應該包含一個十進制數字。例如，期末考試的分數可以寫成下面這樣：
HTMl源代碼
<p>Your score was <meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+</meter>. </p>progress
progress 元素表示一個正在進行的過程的狀態，就像圖形用戶界面（GUI）應用程序中的進度條。例如，可以用它表示一個文件已經下載的百分比或者播放電影時的當前位置。下面這個進度控件表示下載已經完成了 33%：
HTMl源代碼
<p>Downloaded: <progress value="1534602" max="4603807">33%</progress> </p>HTML5新增的內嵌的媒體
引入一個新的 video 元素，用來嵌入任意視頻格式.例如，可以用以下代碼嵌入QuickTime 電影 “a Sora in Prospect Park”：
HTMl源代碼
<video src="http://www.cafeaulait.org/birds/sora.mov" />
引入 audio 元素。例如，可以使用以下代碼給 Web 頁面加上背景音樂：
HTMl源代碼
<audio src="spacemusic.mp3" autoplay="autoplay" loop="20000" />
autoplay 屬性指示瀏覽器在裝載頁面後立即開始播放，而不等待明確的用戶請求
引入了img元素，用來支持所有圖片格式 。
HTML5新增加的交互元素
HTML 5 也被稱爲 Web Applications 1.0。爲了實現這個目標，增加了幾個爲 Web 頁面提供交互體驗的新元素：
- details
- datagrid
- menu
- command
這些元素都可以根據用戶的操作和選擇改變顯示的內容，而不需要從服務器裝載新頁面。
details
details 元素表示在默認情況下可能不顯示的詳細信息。可選的 legend 元素可以提供詳細信息的摘要。details 元素的用途之一是提供腳註和尾註。例如：
HTMl源代碼
The bill of a Craveri's Murrelet is about 10% thinner than the bill of a Xantus's Murrelet. <details> <legend>[Sibley, 2000]</legend> <p>Sibley, David Allen, The Sibley Guide to Birds, (New York: Chanticleer Press, 2000) p. 247 </p> </details>沒有指定具體的顯示方式。瀏覽器可以選用腳註、尾註和工具提示等方式。
每個 details 元素可以有一個 open 屬性。如果設置了這個屬性，那麼詳細信息在最初就顯示出來。如果沒有設置這個屬性，那麼會隱藏它們，直到用戶要求顯示它們。無論是哪種情況，用戶都可以通過單擊一個圖標或其他控件來顯示或隱藏詳細信息。
datagrid
datagrid 元素提供一個網格控件。可以用它顯示樹、列表和表格，用戶和腳本可以更新這些界面元素。與之相反，傳統的表格主要用來顯示靜態數據。
datagrid 從它的內容（一個 table、select 或其他 HTML 元素）獲得初始數據。
這個元素與常規表格的區別在於，用戶可以選擇行、列和單元格；把行、列和單元格摺疊起來；編輯單元格；刪除行、列和單元格；對網格排序；以及在客戶機瀏覽器中直接進行其他數據操作。可以用 JavaScript 代碼監視更新。Document Object Model（DOM）中增加了 HTMLDataGridElement 接口以支持這個元素（清單 10）。
menu和command
menu 元素實際上在 HTML 2 中就出現了。在 HTML 4 中廢棄了它，但是 HTML 5 又恢復了它並指定了新的意義。在 HTML 5 中，menu 包含 command 元素，每個 command 元素引發一個操作。例如一個彈出警告框的菜單。
HTMl源代碼
<menu> <command οnclick="alert('first command')" label="Do 1st Command"/> <command οnclick="alert('second command')" label="Do 2nd Command"/> <command οnclick="alert('third command')" label="Do 3rd Command"/> </menu>還可以用 checked="checked" 屬性將命令轉換爲複選框。通過指定 radiogroup 屬性，可以將複選框轉換爲單選按鈕，這個屬性的值是互相排斥的按鈕的組名。
除了簡單的命令列表之外，還可以使用 menu 元素創建工具欄或彈出式上下文菜單，這需要將 type 屬性設置爲 toolbar 或 popup。
label 屬性提供菜單的標題。例如，清單 14 顯示一個 Edit 菜單。
■HTML5中增加的標籤元素
<article>
…… 定義外部的內容，一般是文章類
<aside> ………
定義 article 以外的內容,應該與 article 的內容相關。
<audio> ………
定義聲音，比如音樂或其他音頻流。
<canvas>
…… 定義圖形，比如圖表和其他圖像。
<command>
… 命令按鈕，比如單選按鈕、複選框或按鈕。
<datalist>
…… 定義可選數據的列表。與 input 元素配合使用，就可以製作出輸入值的下拉列表。
<details>
…… 定義元素的細節，用戶可進行查看，或通過點擊進行隱藏。
<embed> ……
定義嵌入的內容，比如插件。
<figcaption>
……表示圖表的字幕
<figure>
……… 表示圖表的時候使用
<footer>
…… 定義 section 或 document 的頁腳
<header>
……定義 section 或 document 的頁眉。
<hgroup>
…… 歸結表示項的標題
<keygen>
…… 定義生成密鑰
<mark> ………
用高光突出文檔裏相符合的文本
<menu> ………
定義菜單列表。當希望列出表單控件時使用該標籤。
<meter>
…… 定義度量（單位）。僅用於已知最大和最小值的度量。
<nav> …………
定義導航鏈接的部分。
<output>
…… 定義不同類型的輸出，比如腳本的輸出。
<progress>
… 運行中的進程。可以使用 <progress> 標籤來顯示 JavaScript 中耗費時間的函數的進程。
<section>
…… 定義文檔中的節（section）。比如章節、頁眉、頁腳或文檔中的其他部分。
<source>
…… 爲媒介元素（比如 <video> 和 <audio>）定義媒介資源。
<summary>
…… 在<details>指定相關內容的文本
<time> ………
定義日期或時間，或者兩者。
<video>
…… 定義視頻，比如電影片段或其他視頻流。
■HTML5中將會禁止使用的標籤元素
<acronym>
……
<applet>
………
<basefont>
……
<bgsound>
……
<big>
…………
<blink>
………
<center>
……
<dir>
…………
<font>
………
<frame>
……
<frameset>
…
<isindex>
……
<listing>
………
<marquee>
……
<nobr>
………
<noembed>
…
<noframes>
…
<plaintext>
…
<s> …………
<spacer>
……
<strike>
……
<tt> …………
<u> …………
<wbr>
………
<xmp>
………
原文轉自：http://www.htmling.cn/html5/002.html
CSS部分，以下內容從書上參考：
超越CSS，p311至p312。
CSS3中各個新增的模塊！
1：選擇符模塊
2：印刷出版的分頁媒體模塊
3：背景和邊框模塊
4：多列布局模塊
5：高級佈局模塊
6：媒體查詢模塊
對於現在來說，最好也最有用的是1和3。
對於1來說：我們經常做的斑馬線表格，都是用
style="line-height: normal; word-wrap:
break-word">在CSS3中，選擇符變得格外強大，比如，製作斑馬線表格只需要用CSS就可以了。
tr:nth-child(10n-1)
td{background:red;}/*第10行，20行，30行...的tb背景爲紅色！*/
table
tr:nth-child(2n-2){background:#eee;}/*偶數行變色*/
對於3來說：我們就不必爲製作一個圓角矩形的容器而煩惱了，在css2中，一個容器只能定義一副背景圖片，而css3中，可以定義多幅背景圖片，製作圓角矩形變得格外簡單。