1.將 HTML5 元素定義為塊元素
HTML5 定了 8 個新的 HTML 語義（semantic） 元素炸裆。所有這些元素都是 塊級 元素宁玫。
為了能讓舊版本的瀏覽器正確顯示這些元素耸三，你可以設(shè)置 CSS 的 display 屬性值為 block:
header, section, footer, aside, nav, main, article, figure {
display: block;
}
2.為 HTML 添加新元素(自定義元素弯囊，這個牛)
你可以為 HTML 添加新的元素惑畴。
該實例向 HTML 添加的新的元素行剂，并為該元素定義樣式，元素名為 <myHero> ：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>為 HTML 添加新元素</title>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>我的第一個標(biāo)題</h1>
<p>我的第一個段落牍蜂。</p>
<myHero>我的第一個新元素</myHero>
</body>
</html>
3.什么是 Canvas?
HTML5 <canvas> 元素用于圖形的繪制漾根，通過腳本 (通常是JavaScript)來完成.
<canvas> 標(biāo)簽只是圖形容器，您必須使用腳本來繪制圖形鲫竞。
你可以通過多種方法使用Canva繪制路徑,盒辐怕、圓、字符以及添加圖像从绘。
一個畫布在網(wǎng)頁中是一個矩形框寄疏，通過 <canvas> 元素來繪制.
注意: 默認(rèn)情況下 <canvas> 元素沒有邊框和內(nèi)容是牢。
canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內(nèi)部完成.
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
您的瀏覽器不支持 HTML5 canvas 標(biāo)簽陕截。
</canvas>
<script>
var c=document.getElementById("myCanvas");//得到元素
var ctx=c.getContext("2d");//得到畫筆
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
4.SVG優(yōu)勢
與其他圖像格式相比（比如 JPEG 和 GIF）驳棱，使用 SVG 的優(yōu)勢在于：
SVG 圖像可通過文本編輯器來創(chuàng)建和修改
SVG 圖像可被搜索、索引农曲、腳本化或壓縮
SVG 是可伸縮的
SVG 圖像可在任何的分辨率下被高質(zhì)量地打印
SVG 可在圖像質(zhì)量不下降的情況下被放大
實際例子
<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>
SVG 與 Canvas兩者間的區(qū)別
SVG 是一種使用 XML 描述 2D 圖形的語言社搅。
Canvas 通過 JavaScript 來繪制 2D 圖形。
SVG 基于 XML乳规，這意味著 SVG DOM 中的每個元素都是可用的形葬。您可以為某個元素附加 JavaScript 事件處理器。
在 SVG 中暮的，每個被繪制的圖形均被視為對象笙以。如果 SVG 對象的屬性發(fā)生變化，那么瀏覽器能夠自動重現(xiàn)圖形青扔。
Canvas 是逐像素進行渲染的源织。在 canvas 中，一旦圖形被繪制完成微猖，它就不會繼續(xù)得到瀏覽器的關(guān)注谈息。如果其位置發(fā)生變化，那么整個場景也需要重新繪制凛剥，包括任何或許已被圖形覆蓋的對象侠仇。
Canvas 最適合圖像密集型的游戲，其中的許多對象會被頻繁重繪
SVG不適合游戲應(yīng)用
5.HTML5 MathML顯示數(shù)學(xué)公式犁珠，估計實際用處不大逻炊，除非學(xué)校和科研機構(gòu)
HTML5 可以在文檔中使用 MathML 元素，對應(yīng)的標(biāo)簽是 <math>...</math> 犁享。
MathML 是數(shù)學(xué)標(biāo)記語言余素，是一種基于XML（標(biāo)準(zhǔn)通用標(biāo)記語言的子集）的標(biāo)準(zhǔn)，用來在互聯(lián)網(wǎng)上書寫數(shù)學(xué)符號和公式的置標(biāo)語言炊昆。
可惜桨吊，chrome和ie不支持，要使用別的庫來支持了凤巨，下面是兼容的：
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<msup><mi>a</mi><mn>2</mn></msup>
<mo>+</mo>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>=</mo>
<msup><mi>c</mi><mn>2</mn></msup>
</mrow>
</math>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
6.拖放
拖放是一種常見的特性视乐，即抓取對象以后拖到另一個位置。
在 HTML5 中敢茁，拖放是標(biāo)準(zhǔn)的一部分佑淀，任何元素都能夠拖放。
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
//在默認(rèn)情況下彰檬，
// 一個元素是不能放置到另一個元素里的伸刃，
// 如果要實現(xiàn)拖放的功能谎砾，則需要在ondragover事件中需要加上event.preventDefault()
//阻止默認(rèn)行為，否則ondrop就不會執(zhí)行了
}
function drag(ev)
{
//將元素的數(shù)據(jù)暫存于"Hello"字典中
ev.dataTransfer.setData("Hello",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
//調(diào)用 preventDefault() 來避免瀏覽器對數(shù)據(jù)的默認(rèn)處理
//（drop 事件的默認(rèn)行為是以鏈接形式打開）
var data=ev.dataTransfer.getData("Hello");//獲取數(shù)據(jù)
ev.target.appendChild(document.getElementById(data));//添加一個子元素
}
</script>
<p draggable="true" id="test" ondragstart="drag(event)">拖動 RUNOOB.COM 圖片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="./voice_rcd_btn_nor.9.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
被拖動的元素:
需要三個條件draggable="true" ---允許被拖動
id="test"--設(shè)置一個ID號 ondragstart="drag(event)"--開始拖動的時候捧颅，把數(shù)據(jù)暫存
7.HTML5 - 使用地理定位也要借用javascript的
請使用 getCurrentPosition() 方法來獲得用戶的位置棺榔。
實際的例子：
<p id="demo">點擊按鈕獲取您當(dāng)前坐標(biāo)（可能需要比較長的時間獲取）：</p>
<button onclick="getLocation()">點我</button>
<script>
window.onload=function()//是window而不是document
{
window.x=document.getElementById("demo");
//如果使用var x的話隘道，在外面函數(shù)無法訪問x的
}
function getLocation()
{
if (navigator.geolocation)
{
//注意，是異步的調(diào)用的
navigator.geolocation.getCurrentPosition(showPosition);
}
else
{
x.innerHTML="該瀏覽器不支持獲取地理位置郎笆。";
}
}
function showPosition(position)
{
x.innerHTML="緯度: " + position.coords.latitude +
"<br>經(jīng)度: " + position.coords.longitude;
}
</script>
擴展是在百度地圖google地圖顯示具體位置谭梗，這個需要去看它們的接口文檔了。
8.視頻播放宛蚓，太簡單了吧
<video width="320" height="240" controls>//這里寫了controls才會有控制按鍵激捏，不寫沒有按鍵的
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的瀏覽器不支持 HTML5 video 標(biāo)簽。
</video>
HTML5 <video> - 使用 DOM 進行控制
HTML5 <video> 和 <audio> 元素同樣擁有方法凄吏、屬性和事件远舅。
<video> 和 <audio>元素的方法、屬性和事件可以使用JavaScript進行控制.
其中的方法有用于播放痕钢、暫停以及加載等图柏。其中的屬性（比如時長、音量等）可以被讀取或設(shè)置任连。其中的 DOM 事件能夠通知您蚤吹，比方說，<video> 元素開始播放随抠、已暫停裁着，已停止，等等拱她。
9.HTML5 新的表單屬性
HTML5 的 <form> 和 <input>標(biāo)簽添加了幾個新屬性.
<form>新屬性：
autocomplete//自動完成
novalidate//不驗證正確性
<input>新屬性：
autocomplete//自動完成
autofocus//自動獲取焦點
form//form 屬性規(guī)定輸入域所屬的一個或多個表單二驰，但是多個好像并不支持
formaction//屬性用于描述表單提交的URL地址,屬性會覆蓋<form> 元素中的action屬性.
formenctype//屬性描述了表單提交到服務(wù)器的數(shù)據(jù)編碼 (只對form表單中 method="post" 表單)
formmethod//屬性覆蓋了 <form> 元素的的method 屬性
formnovalidate//屬性是一個 boolean 屬性,屬性描述了 <input> 元素在表單提交時無需被驗證
formtarget
height 與 width
list
min 與 max
multiple//屬性是一個 boolean 屬性,屬性適用于以下類型的 <input> 標(biāo)簽：email 和 file,屬性規(guī)定<input> 元素中可選擇多個值
pattern (regexp)//屬性描述了一個正則表達式用于驗證 <input> 元素的值
placeholder//屬性提供一種提示（hint），描述輸入域所期待的值
required//屬性規(guī)定必須在提交之前填寫輸入域（不能為空）
step
//step 屬性為輸入域規(guī)定合法的數(shù)字間隔秉沼。
//如果 step="3"桶雀，則合法的數(shù)是 -3,0,3,6 等
//提示： step 屬性可以與 max 和 min 屬性創(chuàng)建一個區(qū)域值.
10.HTML5中新的語義元素
許多現(xiàn)有網(wǎng)站都包含以下HTML代碼： <div id="nav">, <div class="header">, 或者 <div id="footer">, 來指明導(dǎo)航鏈接, 頭部, 以及尾部.
HTML5提供了新的語義元素來明確一個Web頁面的不同部分:
- <header>
- <nav>
- <section>
- <article>
- <aside>
- <figcaption>//圖片的標(biāo)題而已
- <figure>//代替image而已
-
<footer>
img_sem_elements.gif
<figure>
<figcaption>黃浦江上的的盧浦大橋</figcaption>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
11.什么是 HTML5 Web 存儲?
使用HTML5可以在本地存儲用戶的瀏覽數(shù)據(jù)。
早些時候,本地存儲使用的是 cookie氧猬。但是Web 存儲需要更加的安全與快速. 這些數(shù)據(jù)不會被保存在服務(wù)器上背犯，但是這些數(shù)據(jù)只用于用戶請求網(wǎng)站數(shù)據(jù)上.它也可以存儲大量的數(shù)據(jù)，而不影響網(wǎng)站的性能.
數(shù)據(jù)以 鍵/值 對存在, web網(wǎng)頁的數(shù)據(jù)只允許該網(wǎng)頁訪問使用盅抚。
客戶端存儲數(shù)據(jù)的兩個對象為：
localStorage - 沒有時間限制的數(shù)據(jù)存儲,第二天漠魏、第二周或下一年之后，數(shù)據(jù)依然可用
sessionStorage - 針對一個 session 的數(shù)據(jù)存儲
不管是 localStorage妄均，還是 sessionStorage柱锹，可使用的API都相同哪自，常用的有如下幾個（以localStorage為例）：
保存數(shù)據(jù)：localStorage.setItem(key,value);
讀取數(shù)據(jù)：localStorage.getItem(key);
刪除單個數(shù)據(jù)：localStorage.removeItem(key);
刪除所有數(shù)據(jù)：localStorage.clear();
得到某個索引的key：localStorage.key(index);
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
if (localStorage.clickwwcount)
{
//無需使用set也行，直接賦值
localStorage.clickwwcount=Number(localStorage.clickwwcount)+1;
}
else
{
localStorage.clickwwcount=1;
}
document.getElementById("result").innerHTML=" 你已經(jīng)點擊了按鈕 " + localStorage.clickwwcount + " 次 ";
}
else
{
document.getElementById("result").innerHTML="對不起禁熏，您的瀏覽器不支持 web 存儲壤巷。";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">點我！</button></p>
<div id="result"></div>
<p>點擊</p>
<p>關(guān)閉瀏覽器選項卡(或窗口),重新打開此頁面,計數(shù)器將繼續(xù)計數(shù)(不是重置)瞧毙。</p>
12.什么是 Web Worker胧华？
當(dāng)在 HTML 頁面中執(zhí)行腳本時，頁面的狀態(tài)是不可響應(yīng)的宙彪，直到腳本已完成矩动。
web worker 是運行在后臺的 JavaScript，獨立于其他腳本释漆，不會影響頁面的性能悲没。您可以繼續(xù)做任何愿意做的事情：點擊、選取內(nèi)容等等男图，而此時 web worker 在后臺運行示姿。
例子
