HTML5新特性

• HTML：超文本標記語言
• XHTML：更加嚴謹的HTML
• HTML5：新一代HTML規範（適配移動端設備）

標籤語義化

標籤語義化：合理的標籤作合適的事情

優勢：有利於SEO搜索引擎優化推廣

1、HTML5新特性

1. 語義化標籤：header、footer、section、nav、aside、article
2. 加強型表單：input 的多個 type
3. 新增表單元素：datalist、keygen、output
4. 新增表單屬性：placehoder、required、min 和 max
5. 音頻視頻：audio、video
6. canvas
7. 地理定位
8. 拖拽
9. SVG
10. 本地存儲：localStorage - 沒有時間限制的數據存儲；sessionStorage - 針對一個 session 的數據存儲，當用戶關閉瀏覽器窗口後，數據會被刪除
11. 新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
12. WebSocket：單個 TCP 鏈接上進行全雙工通信的協議
13. HTML5 離線Web應用（應用程序緩存
14. HTML5 Web Workers
15. HTML5 SSE

1.語義化標籤

• 塊級標籤：header、main 、footer、article、nav 、figure 、figcaption、aside 、section
• 行內標籤：mark 、time
• 處理兼容（IE6~8）只須要導入一個JS：html5.min.js

標籤	描述
header	定義了文檔的頭部區域
main	主體
article	文章
nav	導航
figure	配圖
figcaption	配圖說明
aside	與主體內容無關（通常應用於側邊欄）
section	普通區域
footer	尾部
detailes	用於描述文檔或文檔某個部分的細節
summary	標籤包含 details 元素的標題
dialog	定義對話框，好比提示框
bdi	容許您設置一段文本，使其脫離其父元素的文本方向設置
command	定義命令按鈕，好比單選按鈕、複選框或按鈕
mark	定義帶有記號的文本
meter	定義度量衡，僅用於已知最大和最小值的度量
progress	定義任何類型的任務的進度
ruby	定義 ruby 註釋（中文註音或字符）
rp	在 ruby 註釋中使用，定義不支持 ruby 元素的瀏覽器所顯示的內容
time	定義日期或時間
wbr	規定在文本中的何處適合添加換行符

2.加強型表單

HTML5 擁有多個新的表單 Input 輸入類型，這些新特性提供了更好的輸入控制和驗證

input 的 type	描述
color	主要用於選取顏色
date	從一個日期選擇器選擇一個日期
datetime	選擇一個日期（UTC 時間）
datetime-local	用本地時間顯示
email	包含 e-mail 地址的輸入域
month	選擇一個月份
number	數值的輸入域
range	必定範圍內數字值的輸入域
search	用於搜索域
tel	定義輸入電話號碼字段
time	選擇一個時間
url	URL 地址的輸入域
week	選擇周和年

3. 新增表單元素

表單元素	描述
datalist	元素規定輸入域的選項列表，使用 input 元素的 list 屬性與 datalist 元素的 id 綁定
keygen	提供一種驗證用戶的可靠方法，標籤規定用於表單的密鑰對生成器字段
output	用於不一樣類型的輸出，好比計算或腳本輸出

4.新增表單屬性

表單屬性	描述
placehoder	簡短的提示在用戶輸入值前會顯示在輸入域上。即咱們常見的輸入框默認提示，在用戶輸入後消失
required	是一個 boolean 屬性。要求填寫的輸入域不能爲空
pattern	描述了一個正則表達式用於驗證 input 元素的值
min 和 max	設置元素最小值與最大值
step	爲輸入域規定合法的數字間隔
height 和 width	用於 image 類型的 input 標籤的圖像高度和寬度
autofocus	是一個 boolean 屬性。規定在頁面加載時，域自動地得到焦點
multiple	是一個 boolean 屬性。規定 input 元素中可選擇多個值
pattern	規定用於驗證 input 域的模式（pattern 是正則表達式)
novalidate	在提交表單時不該該驗證 form 或 input 域
multiple	規定輸入域中可選擇多個值,適用於email 和 file
list	list 屬性規定輸入域的 datalist
autocomplete	規定 form 或 input 域應該擁有自動完成功能

5.音頻視頻

1> Audio/Video 方法

方法	描述
addTextTrack()	向音頻/視頻添加新的文本軌道
canPlayType()	檢測瀏覽器是否能播放指定的音頻/視頻類型
load()	從新加載音頻/視頻元素
play()	開始播放音頻/視頻
pause()	暫停當前播放的音頻/視頻

2> Audio/Video 屬性

屬性	描述
audioTracks	返回表示可用音軌的 AudioTrackList 對象
autoplay	設置或返回是否在加載完成後隨即播放音頻/視頻
buffered	返回表示音頻/視頻已緩衝部分的 TimeRanges 對象
controller	返回表示音頻/視頻當前媒體控制器的 MediaController 對象
controls	設置或返回音頻/視頻是否顯示控件（好比播放/暫停等）
crossOrigin	設置或返回音頻/視頻的 CORS 設置
currentSrc	返回當前音頻/視頻的 URL
currentTime	設置或返回音頻/視頻中的當前播放位置（以秒計）
defaultMuted	設置或返回音頻/視頻默認是否靜音
defaultPlaybackRate	設置或返回音頻/視頻的默認播放速度
duration	返回當前音頻/視頻的長度（以秒計）
ended	返回音頻/視頻的播放是否已結束
error	返回表示音頻/視頻錯誤狀態的 MediaError 對象
loop	設置或返回音頻/視頻是否應在結束時從新播放
mediaGroup	設置或返回音頻/視頻所屬的組合（用於鏈接多個音頻/視頻元素）
muted	設置或返回音頻/視頻是否靜音
networkState	返回音頻/視頻的當前網絡狀態
paused	設置或返回音頻/視頻是否暫停
playbackRate	設置或返回音頻/視頻播放的速度
played	返回表示音頻/視頻已播放部分的 TimeRanges 對象
preload	設置或返回音頻/視頻是否應該在頁面加載後進行加載
readyState	返回音頻/視頻當前的就緒狀態
seekable	返回表示音頻/視頻可尋址部分的 TimeRanges 對象
seeking	返回用戶是否正在音頻/視頻中進行查找
src	設置或返回音頻/視頻元素的當前來源
startDate	返回表示當前時間偏移的 Date 對象
textTracks	返回表示可用文本軌道的 TextTrackList 對象
videoTracks	返回表示可用視頻軌道的 VideoTrackList 對象
volume	設置或返回音頻/視頻的音量

3> Audio/Video 事件

事件	描述
abort	當音頻/視頻的加載已放棄時
canplay	當瀏覽器能夠播放音頻/視頻時
canplaythrough	當瀏覽器可在不因緩衝而停頓的狀況下進行播放時
durationchange	當音頻/視頻的時長已更改時
emptied	當目前的播放列表爲空時
ended	當目前的播放列表已結束時
error	當在音頻/視頻加載期間發生錯誤時
loadeddata	當瀏覽器已加載音頻/視頻的當前幀時
loadedmetadata	當瀏覽器已加載音頻/視頻的元數據時
loadstart	當瀏覽器開始查找音頻/視頻時
pause	當音頻/視頻已暫停時
play	當音頻/視頻已開始或再也不暫停時
playing	當音頻/視頻在已因緩衝而暫停或中止後已就緒時
progress	當瀏覽器正在下載音頻/視頻時
ratechange	當音頻/視頻的播放速度已更改時
seeked	當用戶已移動/跳躍到音頻/視頻中的新位置時
seeking	當用戶開始移動/跳躍到音頻/視頻中的新位置時
stalled	當瀏覽器嘗試獲取媒體數據，但數據不可用時
suspend	當瀏覽器刻意不獲取媒體數據時
timeupdate	當目前的播放位置已更改時
volumechange	當音量已更改時
waiting	當視頻因爲須要緩衝下一幀而中止

6. canvas

建立 Canvas 元素 HTML5 <canvas> 元素用於圖形的繪製，經過腳本 (一般是JavaScript)來完成

<canvas> 標籤只是圖形容器，您必須使用腳原本繪製圖形。 簡單實例：

<canvas id="myCanvas" width="200" height="100"></canvas>
複製代碼

經過 JavaScript 來繪製

<script type="text/javascript">
var c=document.getElementById("myCanvas");
//建立 context 對象
//getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。
var cxt=c.getContext("2d");
//繪製一個紅色的矩形,
//fillStyle 方法將其染成紅色，
//fillRect 方法規定了形狀、位置和尺寸
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
複製代碼

7.地理定位

HTML5 Geolocation API 用於得到用戶的地理位置。

鑑於該特性可能侵犯用戶的隱私，除非用戶贊成，不然用戶位置信息是不可用的。

下例是一個簡單的地理定位實例，可返回用戶位置的經度和緯度。

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>
複製代碼

8.拖拽

HTML5中DRAG事件：能夠把一個元素從當前位置拖拽到指定的容器中 dragstart、drag、dragend、dragover、drop

1. 給要拖拽的元素設置可被拖拽屬性draggable="true"
2. 在拖拽開始的時候，記錄一些信息

• 拖動什麼 - ondragstart 和 setData()
• 放到何處 - ondragover
• 進行放置 - ondrop

9.SVG

1. 什麼是SVG？

• SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
• SVG 用於定義用於網絡的基於矢量的圖形
• SVG 使用 XML 格式定義圖形
• SVG 圖像在放大或改變尺寸的狀況下其圖形質量不會有損失
• SVG 是萬維網聯盟的標準

2. 優點

• SVG 圖像可經過文本編輯器來建立和修改
• SVG 圖像可被搜索、索引、腳本化或壓縮
• SVG 是可伸縮的
• SVG 圖像可在任何的分辨率下被高質量地打印
• SVG 可在圖像質量不降低的狀況下被放大

在 HTML5 中，夠將 SVG 元素直接嵌入 HTML 頁面中：

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>
複製代碼

10.數據存儲

• localStorage - 沒有時間限制的數據存儲
• sessionStorage - 針對一個 session 的數據存儲 以前，這些都是由 cookie 完成的。可是 cookie 不適合大量數據的存儲

1. localStorage localStorage 方法存儲的數據沒有時間限制。次日、第二週或下一年以後，數據依然可用

• 如何建立和訪問 localStorage：

<script type="text/javascript">
//建立
localStorage.lastname="Smith";
document.write(localStorage.lastname);
//對用戶訪問頁面的次數進行計數
if (localStorage.pagecount)
  {
  localStorage.pagecount=Number(localStorage.pagecount) +1;
  }
else
  {
  localStorage.pagecount=1;
  }
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>
複製代碼

2. sessionStorage sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口後，數據會被刪除

• 如何建立和訪問 localStorage

<script type="text/javascript">
//建立：
localStorage.lastname="Smith";
document.write(localStorage.lastname);
//對用戶在當前 session 中訪問頁面的次數進行計數：
if (sessionStorage.pagecount)
  {
  sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
  }
else
  {
  sessionStorage.pagecount=1;
  }
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>
複製代碼

11.新事件

事件	描述
onresize	當調整窗口大小時運行腳本
ondrag	當拖動元素時運行腳本
onscroll	當滾動元素滾動元素的滾動條時運行腳本
onmousewheel	當轉動鼠標滾輪時運行腳本
onerror	當錯誤發生時運行腳本
onplay	當媒介數據將要開始播放時運行腳本
onpause	當媒介數據暫停時運行腳本
onerror	在錯誤發生時運行的腳本
onload	頁面結束加載以後觸發
onmessage	在消息被觸發時運行的腳本
ononline	當文檔上線時運行的腳本
onoffline	當文檔離線時運行的腳本
onunload	一旦頁面已下載時觸發（或者瀏覽器窗口已被關閉）
onstorage	在 Web Storage 區域更新後運行的腳本
onchange	在元素值被改變時運行的腳本
onfocus	當元素得到焦點時運行的腳本
onkeydown	在用戶按下按鍵時觸發
onkeypress	在用戶敲擊按鈕時觸發
onkeyup	當用戶釋放按鍵時觸發

12. HTML5 WebSocket

WebSocket是HTML5開始提供的一種在單個 TCP鏈接上進行全雙工通信的協議。

在WebSocket API中，瀏覽器和服務器只須要作一個握手的動做，而後，瀏覽器和服務器之間就造成了一條快速通道。二者之間就直接能夠數據互相傳送。瀏覽器經過 JavaScript 向服務器發出創建 WebSocket 鏈接的請求，鏈接創建之後，客戶端和服務器端就能夠經過 TCP 鏈接直接交換數據。

當你獲取 Web Socket 鏈接後，你能夠經過 send() 方法來向服務器發送數據，並經過 onmessage 事件來接收服務器返回的數據。如下 API 用於建立 WebSocket 對象。

13.HTML5 離線Web應用（應用程序緩存）

HTML5 引入了應用程序緩存，這意味着web應用可進行緩存，並可在沒有因特網鏈接時進行訪問。

應用程序緩存爲應用帶來三個優點：

• 離線瀏覽 - 用戶可在應用離線時使用它們
• 速度 - 已緩存資源加載得更快
• 減小服務器負載 - 瀏覽器將只從服務器下載更新過或更改過的資源。

HTML5 Cache Manifest 實例

下面的例子展現了帶有 cache manifest 的 HTML 文檔（供離線瀏覽）：

<!DOCTYPE HTML>
<htmlmanifest="demo.appcache">
<body>
The content of the document......
</body>
</html>
複製代碼

Manifest 文件

manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。

manifest 文件可分爲三個部分：

• CACHE MANIFEST - 在此標題下列出的文件將在首次下載後進行緩存
• NETWORK - 在此標題下列出的文件須要與服務器的鏈接，且不會被緩存
• FALLBACK - 在此標題下列出的文件規定當頁面沒法訪問時的回退頁面（好比 404 頁面)

14.HTML5 Web Workers

當在 HTML 頁面中執行腳本時，頁面的狀態是不可響應的，直到腳本已完成。

web worker 是運行在後臺的JavaScript，獨立於其餘腳本，不會影響頁面的性能。您能夠繼續作任何願意作的事情：點擊、選取內容等等，而此時 web worker在後臺運行。（至關於實現多線程併發）

15.HTML5 SSE

Server-Sent 事件指的是網頁自動獲取來自服務器的更新。

之前也可能作到這一點，前提是網頁不得不詢問是否有可用的更新。經過服務器發送事件，更新可以自動到達。

例子：Facebook/Twitter 更新、估價更新、新的博文、賽事結果等。

EventSource 對象用於接收服務器發送事件通知：

var source=newEventSource("demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data +"<br>";
};
複製代碼

爲了讓上面的例子能夠運行，您還須要可以發送數據更新的服務器（好比 PHP 和 ASP）。

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}nn";
flush();
?>
複製代碼