1 HTML5概述
html4.01和xhtml1.0的內容見這篇文章。如果完全不知html建議先去看看那篇文章。
我們先看看html5對比html4和xhtml1.0有哪些部分的增強。完整的文檔參考MDN。增強了下面幾大塊。
- HTML4.01、XHTML1.0中定義了很多語義的標籤，div、p、ul、ol等等。
HTML5增加了很多語義的標籤、表單標籤。具體見下一節。 - 連通性
web socket ， 服務器和瀏覽器之間能夠通過web socket（網絡套接字）來保持持久聯通了。
之前只能使用http協議通信，而http協議是無連接的。 - 離線 & 存儲：
離線：我們之前的網頁，一旦脫機（沒網）就不能訪問了。但是，我們急着上飛機，在空中沒有wifi，能 不能在機場提前把一個網站的所有網頁都離線保存呢？能不能在飛機上繼續閱讀剛纔保存的離線網站呢？HTML5給了我們新的API。
存儲：我們之前開發程序，所有的內容持久化都是通過MySQL數據庫，所謂的持久化指的就是電腦斷電、關機都不丟失的數據。之前我們是無法通過JS來操作數據庫的，但是HTML5中提供了JS能夠操作的迷你數據庫，叫做localStorage、session storage。 - 多媒體
音頻視頻標籤，audio、video 標籤。 - 3D, 圖像 & 效果
canvas、webgl、svg。
web遊戲的利器，可視化展示的基礎。 - 性能 & 集成
增加了web worker能夠讓js操作線程，之前JS是單線程的，不能操作多線程，HTML5誕生能夠讓JS操作線程了（現在瀏覽器支持極差，只有把玩的意義）
增加了新的JS的API：拖放API、全屏API等等 - 設備訪問
使用地理位置、攝像頭、觸控事件、檢測設備方向。都是給移動端提供的API - 樣式
CSS3
總結一下，HTML5是一個大概念，裏面包括了HTML的增強（標籤語義化、canvas）、CSS的增強（CSS3）、JS的增強（ECMAScript5、6）、瀏覽器的API增強（拖放、全屏、攝像頭）。
2 HTML5語義增強
2.1 HTML5新的骨架結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>湯姆貓的個人博客</title>
</head>
<body>
</body>
</html>
2.2 HTML5新的標籤
2.2.1 提綱標籤
在HTML4.01中，對於提綱的標籤，只有h1~h6。頁面如果有其他的“提綱”，需要用div加類名模擬：
<div class="header">
<div class="logo"></div>
<div class="nav"></div>
</div>
<div class="content">
<div class="aside"></div>
<div class="main"></div>
</div>
<div class="footer"></div>
HTML5中把所有常見的語義div，都提煉爲標籤了：
<section></section>
<article></article>
<nav></nav>
<header></header>
<footer></footer>
<aside></aside>
<hgroup></hgroup>
上面這些標籤，在語義上都比
大，也就是說它們能包裹div，但是div不能包裹它們。
它們都是塊級元素、沒有任何默認樣式、容器級標籤，可以包裹任何東西。
它們都是塊級元素、沒有任何默認樣式、容器級標籤，可以包裹任何東西。
2.2.2 新的語義標籤
圖和它的標題語義：
<figure>
<img src="images/1.jpg" alt="">
<figcaption>范冰冰和李晨結婚照</figcaption>
</figure>
進度條語義：
<progress value="60" max="100">60%</progress>
地址語義：
<address>北京市昌平區宏福大廈</address>
高亮語義：
我們一定要<mark>好好學習，天天向上</mark>
註釋語義，拼音語義：
<ruby>
漢 <rp>(</rp><rt>hàn</rt><rp>)</rp>
字 <rp>(</rp><rt>zì</rt><rp>)</rp>
</ruby>
2.2.3 新的表單元素
input元素多了一些type：
search 這個元素呈現爲一個搜索框。換行符會從輸入值中去掉，此外沒有其他的語法增強了。
tel 電話
url 網址
email 郵箱
number 數字
color 顏色
date 日期 time week
可以用pattern屬性來描述正則：
<input type="tel" pattern="^[\d]{11}$" />
3 音頻、視頻
3.1 視頻
插入視頻
<video autoplay controls width="500" height="300">
<source src="video/1.mp4"/>
<source src="video/2.mp4"/>
</video>
video標籤支持的格式是mp4和ogv。
autoplay屬性自動播放，controls屬性顯示控件，width寬度、height高度
裏面source就是播放列表。
也提供了JS的API。
事件：
onpause 暫停事件
onplay 播放事件
控制方法：
.pause()
.play()
3.2 音頻
audio標籤就是音頻，支持的格式是mp3和ogg
<audio src="All of Me.mp3" autoplay/>
其它部分就不多說啦，哈哈哈。