一、H5的新特性

1.新增語義化標籤

<header>、<nav>、<main>、<article>、<aside>、<section>、<footer>

作用：使程式碼更加結構化，利於SEO搜尋，方便讀者瀏覽

2.新增input型別

color、time、date、week、tel、email、number、search、url、range

3.新增input屬性

max、min、step、autofocus、required、placeholder（輸入為空時的提示）

4.新增audio、video元素

audio為音訊播放：支援格式有mp3 或 ogg

video為視訊播放：支援格式有ogg、mp4 或 webm

5.新增Canvas和SVG

Canvas：通過JS來繪製2D圖形，逐畫素進行渲染，依賴解析度，不支援事件處理器，適合遊戲應用

SVG：是使用XML描述2D圖形的語言，不依賴解析度，支援事件處理器，不適合遊戲應用

6.地理位置

檢測是否支援地理定位

如果支援，執行getCurrentPosition() 獲取地理位置，否則，向使用者顯示不支援的訊息

向引數showPosition中規定的函式返回一個coordinates物件

showPositon()函式獲得並顯示經度和緯度

7.拖放

把元素設為課拖放的：draggable=“true”

拖放的內容：ondragstart屬性規定拖動什麼資料，dataTransfer。setData()方法設定被拖動資料的資料型別和值

拖到何處: ondragover：event.preventDefault()阻止預設事件的發生

進行放置：ondrop,觸發

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

8.Web workers

Web worker 是執行在後臺的 JavaScript，獨立於其他指令碼，不會影響頁面的效能。您可以繼續做任何願意做的事情：點選、選取內容等等，而此時 web worker 執行在後臺

9.Web儲存

window.localStorage - 儲存沒有截止日期的資料(永久儲存)

window.sessionStorage - 針對一個 session 來儲存資料（當關閉瀏覽器標籤頁時資料會丟失）

10.應用快取 cache manifest

應用程式快取為應用帶來三個優勢：

離線瀏覽 - 使用者可在應用離線時使用它們

速度 - 已快取資源載入得更快

減少伺服器負載 - 瀏覽器將只從伺服器下載更新過或更改過的資源

二、行內元素和塊級元素統計

行內元素：
<span>、<i>、<em>、<input>、<textarea>、<select>、<a>、<sup>、<sub>、<u>（下劃線）

特性：

在一行內

寬高根據內容的寬高

不能設定寬高

塊級元素：
<div>、<p>、<h1>、<h2>、<h3>、<h4>、<h5>、<ul>、<ol>、<table>、<form>

特性：

獨佔一行

寬度預設100%

可以設定寬高