THML5新增功能

HTML5新增功能

1.語義化標記：

  1）article：article標籤裝載顯示一個獨立的文章內容。例如一篇完整的論壇帖子，一則網站新聞，一篇博客文章等等，一個用戶評論等等 artilce能夠嵌套，則內層的artilce對外層的article標籤有隸屬的關係。例如，一個博客文章，能夠用article顯示，而後一 些評論能夠以article的形式嵌入其中。

  2）section：section 標籤訂義文檔中的節（section、區段）。好比章節、頁眉、頁腳或文檔中的其餘部分。

  3）aside：用來裝載非正文類的內容。例如廣告，成組的連接，側邊欄等等。

  4）hgroup：標籤用於對網頁或區段的標題元素（h1-h6）進行組合。例如，在一個區段中你有連續的h系列的標籤元素，則能夠用hgroup將他們括起來。

  5）header：header 標籤訂義文檔的頁面組合，一般是一些引導和導航信息。

    eg:<header>

       <p>this is the page Logo</p>

       <nav>this is page navigation</nav>

       </header>

 6)footer:footer 標籤訂義 section 或 document 的頁腳。在典型狀況下，該元素會包含創做者的姓名、文檔的創做日期以及/或者聯繫信息。

 7)nav:標籤訂義顯示導航連接不是全部的成組的超級連接都須要放在nav標籤裏。nav標籤裏應該放入一些當前頁面的主要導航連接。例如在頁腳顯示一個站點的導航連接（如首頁，服務信息頁面，版權信息頁面等等），就可使用nav標籤，固然，這不是必須的。

 8)time: 標籤訂義公曆的時間（24 小時制）或日期，時間和時區偏移是可選的。該元素可以以機器可讀的方式對日期和時間進行編碼，這樣，舉例說，用戶代理可以把生日提醒或排定的事件添加到用戶日程表中，搜索引擎也可以生成更智能的搜索結果。

   eg:<p>咱們在天天早上<time>9:00</time> 開始營業。</p>

      <p>我在 <timedatetime="2008-02-14">情人節</time> 有個約會。</p>

 9)mark:標籤訂義帶有記號的文本。請在須要突出顯示文本時使用 <mark> 標籤。

 10)figure:figure標籤規定獨立的流內容（圖像、圖表、照片、代碼等等）。figure 元素的內容應該與主內容相關，但若是被刪除，則不該對文檔流產生影響。

 11)figcaption:figcaption 標籤訂義 figure 元素的標題（caption）。"figcaption"元素應該被置於 "figure" 元素的第一個或最後一個子元素的位置。

    eg:<figure> <figcaption>黃浦江上的的盧浦大橋</figcaption> <img src="shanghai_lupu_bridge.jpg"width="350" height="234" /> </figure>

2.表單加強功能

  1）email：此類型要求輸入格式正確的email地址,不然瀏覽器是不容許提交的,並會有一個錯誤信息提示.此類型在Opera中必須指定name值,不然無效果，eg:<input type=email >;

  2）url:要求輸入格式正確的URL地址,Opera中會自動在開始處添加http://.,eg:<inputtype=url >;

 3)number:要求輸入格式數字，默認會有上下兩個按鈕，opera支持更好,eg:<input type=number >;

 4)tel:此類型要求輸入一個電話號碼,但實際上它並無特殊的驗證,與text類型沒什麼區別,eg:<input type=tel>;

 5)range:此類型將顯示一個可拖動的滑塊條,並可經過設定max/min/step值限定拖動範圍.拖動時會反饋給value一個值.

   eg:<input type=range min=20 max=100 step=2 >;

 6)color:此類型表單,可以讓用戶經過顏色選擇器選擇一個顏色值,並反饋到value中,能夠設置默認值;

   eg:<input type=color value=#ff0000 >

 7)date, time, datetime, datetime-local, month, week:這一系列是很酷的一個類型,徹底解決了煩瑣的JS日曆控件問題.但目前MS只有Opera/Chrome新版本支持,且展現效果也不同.

 8)search:此類型表示輸入的將是一個搜索關鍵字,經過results=s 或者x-webkit-speech 可顯示一個搜索小圖標. [在chrome下才能看得見];

   eg:<input type=search results=s;

 9)required:pattern類型爲正則驗證,能夠完成各類複雜的驗證.這兩種類型在Opera中必須指定name值,不然無效果.

 10)placeholder:<input type=text placeholder="your message">;

 11)autofocus:默認聚焦屬性,可在頁面加載時聚焦到一個表單控件,相似於JS的focus().;

 12)list:該屬性須要與datalist屬性共用,datalist是對選擇框的記憶,而list屬性能夠爲選擇框自定義記憶的內容.;

    <input type="text" list="ilist">

     <datalist id="ilist">

     <option label="a"value="a">aaaaa</option>

     <option label="b"value="b">bbbbb</option>

     <option label="c" value="c">ccccc</option>

     </datalist>

 13)output:標籤訂義不一樣類型的輸出，好比腳本的輸出;

 14)meter:標籤訂義度量衡。僅用於已知最大和最小值的度量。

 15)progress:標籤訂義運行中的進度（進程）。可使用 progress 標籤來顯示 JavaScript中耗費時間的函數的進度。;

 16)contenteditable:此屬性可讓某個元素裏面的文本節點或值變爲可編輯,eg:<p contenteditable="true" >能夠編輯的內容</p>;

3.音頻/視頻

 HTML5 對視頻和音頻特性規範文檔的制定是被討論最多的。除瀏覽器自帶支持的明顯好處外，評論點集中在瀏覽器提供商對音頻/視頻格式 的不一樣選擇；

  音頻: ogg (ogg, oga), mp3, wav, AAC

  視頻: ogg (ogv), H.264 (mp4)

  備註： Safari 來檢測 HTML5 的音頻/視頻支持，須要安裝 QuickTimePlayer；

1）常見H5音頻格式：

 ogg[ogg, oga]：Ogg全稱應該是OGGVobis(oggVorbis)是一種新的音頻壓縮格式，相似於MP3等的音樂格式。Ogg是徹底免費、開放和沒 有專利限制的。OggVorbis文件的擴展名是.OGG。Ogg文件格式能夠不斷地進行大小和音質的改良，而不影響舊有的編碼器或播放器。

  mp3：MP3是一種音頻壓縮技術，其全稱是 動態影像專家壓縮標準音頻層面3（Moving Picture ExpertsGroup Audio Layer III），簡稱爲MP3。它被設計用來大幅度地下降音頻數據量。利用 MPEG Audio Layer 3 的技術，將音樂以1:10 甚至 1:12 的壓縮率，壓縮成容量較小的文件，而對於大多數用戶來講重放的音質與最初的不壓縮音頻相比沒有明顯的降低；

  wav：WAV爲微軟公司(Microsoft)開發的一種聲音文件格式，它符合RIFF(Resource Interchange File Format)文件規範，用於保存Windows平臺的音 頻信息資源，被Windows平臺及其應用程序所普遍支持，該格式也支持MSADPCM，CCITT A LAW等多種壓縮運算法，支持多種音頻數字，取樣頻率和聲道，標準格式化的WAV文件和CD格式同樣，也是44.1K的取樣頻率，16位量化數字，所以在聲音文件質量和CD相差無幾！ WAV打開工具是WINDOWS 的媒體播放器。

  AAC：中文稱爲「高級音頻編碼」，出現於1997年，基於 MPEG-2的音頻編碼技術。由Fraunhofer IIS、杜比實驗室 、AT&T、Sony（索尼）等公司共同開發，目的是取代MP3格式。

2）音頻常見控件：

 controls：若是出現該屬性，則向用戶顯示控件，好比播放按鈕；

 autoplay:若是出現該屬性，則音頻在就緒後立刻播放。;

 loop:若是出現該屬性，則每當音頻結束時從新開始播放。

 preload:若是出現該屬性，則音頻在頁面加載時進行加載，並預備播放。若是使用 "autoplay"，則忽略該屬性。

 audio src：要播放的音頻的 URL。

3）常見視頻H5格式：

 ogg[oga]：ogv影片格式須要由ogg容器格式提及，Ogg是一個自由且開放標準的容器格式，由Xiph Org 基金會所維護。Ogg格式並不受到軟體專利的限制，並設計用於有效率地串流媒體和處理高品質的數位多媒體。

 H.264[mp4]：H.264，同時也是MPEG-4第十部分，是由ITU-T視頻編碼專家組（VCEG）和ISO/IEC動態圖像專家組（MPEG）聯合組成的聯合視頻組（JVT，Joint Video Team）提出的高度壓縮數字視頻編解碼器標準。

4）視頻常見控件：

 video controls：若是出現該屬性，則向用戶顯示控件，好比播放按鈕；

 video preload：若是出現該屬性，則向用戶顯示控件，好比播放按鈕；

 poster：若是出現該屬性，則向用戶顯示視頻封面圖片；

 width：設置視頻播放器的寬度。

 height：設置視頻播放器的高度。

 video src：要播放的視頻的 URL。

 video loop：若是出現該屬性，則當媒介文件完成播放後再次開始播放。

 video autoplay：若是出現該屬性，則視頻在就緒後立刻播放。

4.畫布(canvas):在你的頁面中插入 canvas 就像插入其餘標記同樣日常，但你將須要一些編程 的經驗來繪製形狀、圖表、動畫、遊戲、圖片做品等。

  兼容性：在除 IE 外的全部現代瀏覽器（Firefox 3,Safari 3.1, Chrome 2, and Opera 9.6）都支持 Canvas。你可使用ExplorerCanvas 這個 Javascript 解決方案來爲 IE 添加這個新特性。

 canvas 標籤只是圖形容器，您必須使用腳原本繪製圖形。

 width：設置 canvas 的寬度。

  設置 canvas 的高度。

 注意事項：a.前後順序[就像ps裏面的圖層]

          b.模塊化編寫代碼或者是組件式

          c.注意繪製圖形的開始和結尾

          d.設置canvas的寬高要在行內設置；若是在樣式裏面設置，畫布會根據樣式裏面的寬高等比例縮放，而不是真正的寬高【canvas默認寬高：300*150】

5.可編輯內容：

  這個屬性是 HTML5 的一部分，且它幾乎被全部主流瀏覽器支持（Internet Explorer 5.5+, Firefox 3+, Safari 3.1+, Chrome 2+, andOpera 9.6+）。 這個屬性很強大，惋惜的是不多有人知道。如今全部的網頁編輯器都用了這個屬性。

6.拖放：

 HTML5 的拖放將會把與用戶交互帶向別一個等級，並將會對你如何設計用戶交互產生重大影響。現今，Firefox 3.5+ 已經對此特性提供了最大 化的支持，其餘瀏覽還只是保守地支持了一小部分（Opera 徹底不支持）。不幸的是根據現階段瀏覽器提供商的執行情況，你將須要依賴大量的 Javascript 和 CSS 來讓作跨瀏覽器支持。

7.本地存儲：

 localStorage 用以存儲週期較長、多頁面，以及多瀏覽器 session 的內數據。甚至持續到你重起瀏覽器或者電腦。 本地存儲特性被以下瀏覽器所支持：IE8+, Firefox 3.5+, Safari 4.0+,Chrome 2.0+ and Opera 10.5+。

8.代碼舉例：

<form action=""method="post" id="html5_form">

<p>

         <labelfor="isearch">搜索</label>

         <inputtype="search" name="isearch" id="isearch"placeholder="search..." required autofocus x-webkit-speech />

         <small>請輸入搜索內容</small>

</p>

<p>

          <label for="keygenx">加密強度</label>

          <keygen name="keygen"id="keygenx" />

</p>

<p>

          <label for="name">用戶名</label>

          <input type="text"name="name" id="name" placeholder="請輸入您的名字" required />

</p>

<p>

         <labelfor="mail">Email</label>

<input type="text" name="mail"id="mail" placeholder="example@domain.com"pattern="\w+@[a-z0-9]+\.[a-z]+" requiredtitle="example@domain.com" />

</p>

<p>

         <labelfor="pass">密碼</label>

         <inputtype="password" name="pass" id="pass"placeholder="請填寫密碼"required />

</p>

<p>

         <labelfor="age">年齡</label>

         <inputtype="range" name="age" id="age"min="18" max="60" value="30" required />

</p>

<p>

         <labelfor="height">身高</label>

         <inputtype="number" name="height" id="height"value="170" required />

</p>

<p>

         <labelfor="time">生日</label>

         <inputtype="date" name="time" id="time" required />

</p>

<p>

         <labelfor="color">顏色</label>

         <inputtype="color" name="color" id="color"value="#c8bfe7" required />

</p>

<p>

         <labelfor="search">搜索引擎</label>

         <inputtype="url" name="search" id="search"list="searchlist" autocomplete="on"pattern="https?://.+" />

         <datalistid="searchlist">

          <optionvalue="http://www.baidu.com/">

          <optionvalue="http://www.google.com/">

         <optionvalue="http://www.sogou.com/">

         </datalist>

</p>

         <pclass="btn"><input type="submit" value="點一下瞧瞧" class="sbt" /></p>

</form>

 DEMO: