html5整理（一）

對於html5雖然用得多，但仍是有一些知識點比較混亂，記得不清，因此想專門整理一下

HTML5瀏覽器支持

最新版本的Safari、Chrome、Firefox、Opera支持某些HTML5特性，IE9將支持某些HTML5特性

此外，全部瀏覽器，包括舊的新的，對沒法識別的元素會做爲內聯元素自動處理。

IE9如下版本瀏覽器兼容HTML5的方法，使用靜態資源的html5shiv包

<!--[if lt IE 9]> 
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script> 
<![endif]-->

或者直接將腳本文件代碼展現出來

<!--[if lt IE9]>
<script>
    (function(){
        if(!*@cc_on!@*/0) return;
        var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,event,source,figure,footer,header,hgroup,mark,menu,nav,outputmprogress,section,time,video".split('.'),
            i = e.length;
        while(i--){
            document.createElement(e[i])
        }
    })
</script>
<![endif]-->

也能夠將這段代碼單獨放在html5.js中，同時須要把這一部分放在head裏面
載入後，初始化新標籤的CSS

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block;}

HTML5 新元素

<canvas>

canvas經過腳原本繪製圖形

實例

<canvas id="myCanvas"></canvas>

<script type="text/javascript">
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle="#ff0000";
    ctx.fillRect(0,0,80,100);
</script>

新多媒體元素

• <audio>

• <video>

• <source>

• <embed>

• <track>

<audio>

audio定義音頻內容
屬性：
autoplay 若是出現該屬性，則音頻在就緒後立刻播放
control 若是出現該屬性，則向用戶顯示音頻控件（好比播放/暫停按鈕）
loop 若是出現該屬性，則每當音頻結束時從新播放
muted 若是出現該屬性，則音頻輸出爲靜音
preload 值有auto,metadata,none,規定當網頁加載時，音頻是否默認被加載以及如何被加載
src 規定音頻文件的url

實例

<audio control>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    您的瀏覽器不支持audio元素
</audio>

<video>

video標籤訂義視頻，好比電影片斷或其餘視頻流
支持三種視頻格式：MP四、WebM、Ogg
屬性：
除了擁有audio的所有屬性，同時還增長了width,height兩個屬性

實例

<video control>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的瀏覽器不支持video標籤
</video>

<embed>

定義了一個容器，用來嵌入外部應用或者互動程序（插件）
屬性：
height,
src,
type 規定嵌入內容的MIME類型,
width

實例

<embed src="helloworld.swf">

<track>

爲諸如<video>和<audio>元素之類的媒介規定外部文本軌道

新表單元素

• <datalist>

• <keygen>

• <output>

<datalist>

定義選項列表

IE 9 和更早版本的 IE 瀏覽器 以及 Safari 不支持 <datalist> 標籤。

實例

<input list="browsers">

<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>

<keygen>

規定用於表單的密鑰對生成器字段。
當提交表單時，私鑰存儲在本地，公鑰發送到服務器。

IE不支持該元素

屬性：
autofocus 是<keygen>字段在頁面加載時得到焦點.
challenge 若是使用，則將keygen的值設置爲在提交時詢問
disabled 禁用keygen字段
form 定義該<keygen>字段所屬的一個或多個表單
keytype 值包括rsa,dsa,ec,定義密鑰的安全算法
name 定義<keygen>元素的惟一名稱，name屬性用於雜提交表單時蒐集字段的值

實例

<form action="demo_keygen.asp" method="get">
  用戶名: <input type="text" name="usr_name">
  加密: <keygen name="security">
  <input type="submit">
</form>

<output>

做爲計算結果輸出顯示(好比執行腳本的輸出)

IE不支持

屬性：
`for' 描述計算中使用的元素與計算結果之間的關係
form 定義輸入字段所屬的一個或多個表單
name 定義對象的惟一名稱（表單提交時使用）

實例

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
    <input type="range" id="a" value="50">100
    +<input type="number" id="b" value="50">
    =<output name="x" for="a b"></output>
</form>

新的語義和結構元素

• <article>

• <aside>

• <bdi> 容許您設置一段文本，使其脫離其父元素的文本方向

• <command> 定義命令按鈕，好比單選按鈕、複選框或按鈕,只有IE9支持

• <details>

• <dialog>

• <summary>

• <figure>

• <figcaption>

• <footer>

• <header>

• <mark>

• <meter> 定義度量衡。僅用於已知最大和最小值的度量

• <nav>

• <progress>

• <ruby> 定義ruby註釋（中文註音或字符）

• <rt> 定義字符（中文註音或字符）的解釋或發音

• <section>

• <time>

• <wbr> 規定在文本中的何處適合添加換行符

實例

<bdi>
目前只有 Firefox 和 Chrome 支持 <bdi> 標籤。

<ul>
<li>Username <bdi>Bill</bdi>:80 points</li>
<li>Username <bdi>Steve</bdi>: 78 points</li>
</ul>
將用戶名從周圍的文本方向設置中隔離出來

<summary>
爲<details>元素定義一個可見的標題。當用戶點擊標題時會顯示出詳細信息。

<details>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

<progress>
定義運行中的任務進度（顯示進度條）

<progress value="22" max="100"></progress>

<wbr>
若是單詞太長，或者您擔憂瀏覽器會在錯誤的位置換行，那麼您可使用 <wbr> 元素來添加 Word Break Opportunity（單詞換行時機）。

<p>學習 AJAX ,您必須熟悉 <wbr>Http<wbr>Request 對象。</p>