html5新特性

3.視頻與音頻

3.1Video

 Ogg是帶有Theora視頻編碼和Vorbis音頻編碼的文件;javascript

MPEG4是帶有H.264視頻編碼和AAC音頻編碼的MPEG4文件;css

WebM是VP8視頻編碼和Vorbis音頻編碼的文件;html

HTML5的規範沒有指定特定的視頻編解碼器,它留給了瀏覽器來決定。html5

Safari和IE9預期支持H.264格式的視頻,Firefox和Opera堅持開源的Theora和Vorbis格式,因此須要提供兩種格式。java

Video支持三種視頻格式:Ogg,MPEG4,WebM。mysql

例:react

<video controls=」preload」>web

//此屬性表示視頻在頁面加載時進行加載,預備播放。若是設置爲」autoplay」,就忽略該屬性。正則表達式

//controls用於顯示如播放按鈕的控件sql

<source src=」cohagenPhoneCall.ogv」 type=」video/ogg;codecs=’vorbis,theora’」/>

<source src=」cohagenPhoneCall.mp4」

type=」vide0/mp4; codecs=’avc1.42E01E,mp4a.40.2’」/>

<p>你的瀏覽器太舊了。<a href=」cohagenPhoneCall.mp4」>下載這個視頻。</a></p>

</video>

注:

·        技術上是不須要設置type屬性的,可是不這樣作的話,瀏覽器就會本身去尋找類型,爲了節省一些帶寬,最好仍是聲明下。

·        不是全部的瀏覽器都支持Html5,因此在資源元素的下面,能夠提供一個下載連接或者嵌入視頻的flash版本替代,這取決於我的。

·        若是想要全部的瀏覽器都支持HTML5標籤,只要連接一個js文件就能夠。在頁面的頭部或底部寫上:
<script src=」http://html5media.googlecode.com/svn/trunk/src/html5media.min.js」>
</script>

對於HTML部分,使用:

<video src=」video.mp4」 width=」320」 height=」240」controls=」autobuffer」>

</video>

3.2Audio

無需再依賴第三方產檢區渲染音頻了,由於HTML5提供了<audio>元素。

以MOozilla核心的Firefox瀏覽器只支持.ogg文件,webkit核心的瀏覽器支持.mp3擴展,safari不認可.ogg,它會跳過並移到MP3版本。因此須要建立兩個版本的音頻。

Audio支持三種音頻格式:Ogg Vorbis,MP3,Wav。

例:

<audio autoplay=」autoplay」 controls=」controls」>

<source src=」file.ogg」/>

<source src=」file.mp3」/>

</audio>

//標籤的屬性與video相同。沒有height與width。

4.Web存儲

 4.1localStorage

 localStorage能夠長期存儲數據而沒有時間限制。

4.2sessionStorage

 SessionStorage不能長期存儲數據,數據會隨着瀏覽器的關閉而刪除。

5.HTML5的特徵

 

5.1.1新的Doctype

 

<!DOCTYPE html>

5.1.2圖形元素

 

<img src=」path/to/image」 alt=」About image」>

<p>Image of Mars</p>

文字裹在p的標籤中,與img標籤各行其道,讓人很難聯想到這就是標題。HTML5經過採用figure元素進行改正。當和figcaption組合使用時,就可以語義化的聯想到這就是圖片相對應的標題。

<figure>

<img src=」path/to/image」 alt=」About image」/>

<figcaption>

<p>This is an image of somethinginteresting</p>

</figcaption>

</figure>

5.1.3<small>從新定義

<small>元素再也不被用來建立靠近logo且相關的副標題。在html5中,<small>被從新定義,指小字。

5.1.4腳本(scripts)和連接(links)無需type

<link rel=」stylesheet」 href=」path/to/stylesheet.css」type=」text/css」/>

<script type=」text/JavaScript」src=」path/to/script.js」></script>

在html5中:

<link rel=」stylesheet」href=」path/to/stylesheet.css」>

<script src=」path/to/script.js」></script>

5.1.5引號問題

Html5不是XHTML,因此能夠不須要引號。

<p class="myclass" id=someID>Startthe reactor

可是若是傾向結構化,仍是須要把引號加上的。

5.1.6內容能夠編輯

contenteditable元素顧名思義就是容許用戶能夠編輯元素內容包含的任意文本。

 

[html]  view plain  copy
 
  1. <ul contenteditable=」true」>  
  2. <li>hello</li>  
  3. <li>Beijing</li>  
  4. <li>trs</li>  
  5. </ul>  

 

5.1.7email輸入(input)

在表單輸入框應用名爲」email」的type屬性能夠命令瀏覽器只容許符合有效的電子郵件地址結構的字符串。可是較舊的瀏覽器不識別,它們會簡單的退回到普通文本框。

 

[html]  view plain  copy
 
  1. <form action=」」 method=」get」>  
  2. <label for=」email」>郵箱:</label><input id=」email」name=」email」 type=」email」/>  
  3. <button type=」submit」>肯定</button>  
  4. </form>  

 

5.1.8佔位符(placeholders)

placeholders意爲文本框/文本域空間默認會有個文字提示,得到焦點時,此提示文字就會消失;失去焦點時若是內容爲空,提示文字又出現。在表單控件裏面顯示的提示性文字就是佔位符。

若是是之前須要一些javascript代碼實現佔位符的操做,而html5卻使得其很是輕鬆:

<label for=」email」>郵箱:</label>

<input id=」email」 type=」email」 placeholder=」trs@trs.com」size=」26」/>

通常webkit核心的瀏覽器支持此特性,如chrome、safari。

5.1.9本地存儲(localStorage)

傳統的HTML使用的是衆所周知的cookie,各類瀏覽器都支持,直接用js就能夠調用,很方便。可是傳統的cookie也有它自己的缺陷和不足。好比存儲空間小,每一個站點大小限制在4kb左右,又有時間期限,並且在請求網頁的時候cookie會被附在每一個HTTP請求的header中,因此無形中增長了流量。HTTP請求中cookie是明文傳遞的,因此存有安全性問題,入股用SSL(Secure Sockets Layer 安全套接層;是爲網絡通訊提供安全及數據完整性的一種安全協議)通道另當別論。cookie也很容易受到跨站較穩的攻擊。在一個連接後面加上」?cookie=document.cookie」就能夠輕易得到用戶的cookie信息。HTML5的本地存儲也可能會有跨站腳本攻擊XSS(cross site script,跨站腳本攻擊。惡意攻擊者往Web中插入惡意html代碼,當用戶瀏覽該頁時,嵌入其中web裏面的html代碼會被執行。)的問題。

HTML5的本地存儲能夠存儲5M大小的數據,甚至還多。它主要有四種:localStorage,sessionStorage,webSQL,indexDB

例子:

 

[html]  view plain  copy
 
  1. <ul id="edit" contenteditable="true">  
  2. <li><li>  
  3. </ul>  
  4. <script language="javascript">  
  5. <!--  
  6.     var edit=document.getElementById(edit);  
  7.     edit.onblur=function(){  
  8.         localStorage.setItem("tododata",this.innerHtml);  
  9.     };  
  10.     if(localStorage.getItem("tododata")){  
  11.         Edit.innerHTML = localStorage.getItem("tododata");  
  12.     }  
  13. //-->  
  14. </script>  

 

 

5.2.0語義的Header和Footer

以往:

<div id=」header」>

 …

</div>

<div id=」footer」>

</div>

有了HTML5,可直接替換成;

<header>

 …

</header.

<footer>

</footer>

5.2.1IE和HTML5

全部元素有個默認的inline的display。爲了確保全部新的元素都以block正確的渲染,須要這樣定義:

header,footer,article,section,nav,menu,hgroup{

display:block;

}

可是因爲IE不識別某些標籤,如header,就會忽略這些樣式,因此須要建立元素:

document.creatElement(「artical」);

document.creatElement(「footer」);

document.creatElement(「header」);

document.creatElement(「nav」);

document.creatElement(「menu」);

document.creatElement(「hgroup」);

另解:

<!—[if IE]>

<script src=」http://html5shim.googlecode.com/svn/trunk/html5.js」></script>

<![endif]-->

5.2.2文檔某一部分的信息(hgroup)

使用hgroup元素能夠將標題組合在一塊兒。

<header>

<hgroup>

<h1>recall fan page</h1>

<h2>only for people whowant the memory of a lifetime.</h2>

</hgroup>

</header>

5.2.3必要的屬性(required attribute)

<input type=」text」 name=」someInput」 required>

或者使用更結構化的方法:

<input type=」text」 name=」someInput」required=」required」>

若是」someInput」文本框是空白,表單就不會被提交。

<form action=」」 method=」get」>

<lable for=」name」>姓名:</label>

<input id=」name」 name=」name」 type=」text」placeholder=」trs」 required=」required」/>

<button type=」submit」>提交<button>

</form>

若是input裏面內容是空白,在表單提交的時候,文本框的框會高亮顯示,可是好像只是在chrome裏有此效果。

5.2.4autocomplete屬性

autocomplete屬性規定form或者input域應該擁有自動完成的功能。

它使用於<form>標籤,以及如下類型的<input>標籤:text,search,url,telephone,email,password,datapickers,range以及color。

<form action=」」 method=」get」 autocomplete=」on」>

<label for=」email」>郵箱:</label>

<input type=」email」 name=」email」autocomplete=」off」/>

</form>

5.2.5正則表達式

使用正則表達式可以輕鬆的驗證一個特定的文本。

<form action=」」 method=」get」>

<label for=」username」>姓名:</label>

<input id=」username 」 name=」username」 type=」text」placeholder=」4-10個英文字母」

Pattern=」[A-Za-z]{4,10}」required=」required」 autofocus/>

<button type=」submit」>提交</button>

</form>

在[A-Za-z]{4,10}表示接受4-10位不區分大小寫的英文字母。此特性好像只在chrome瀏覽器中支持。

5.2.6屬性支持檢測

利用優秀的Modernizr庫(http://www.modernizr.com/能夠檢測瀏覽器是否支持某些屬性。

只要建立和分析這些元素,就能夠肯定瀏覽器的能力。事實上,這是一種肯定瀏覽器兼容的經常使用方法。好比肯定pattern屬性,在javascrip中添加一小段代碼:

alert(‘pattern’ in document.creatElement(‘input’));//Boolean

//建立了一個新的input元素,並肯定了裏面的pattern屬性瀏覽器是否支持。

也能夠:

<script>

If(!’pattern’ in document.creatElement(‘input’)){

 //作操做

}

</script>

 

5.2.7mark元素(Mark Element)

<mark>元素做爲高亮。此標籤包裹的字符串應該與用戶當前的行動相關聯。

5.2.8div

div應該用在沒有更好的元素的時候。好比須要包裹一段代碼塊在對內容定位處理的包裝單元內。可是若是是文章,最好用<artical>,若是是連接列表,就用<nav>。

5.2.9小知識

·        SVG(scalable vector graphics)不是HTML5,它是基於可擴展標記語言(XML),用於描述二維矢量圖的一種圖形格式。

·        Geolocation不是HTML5,它意味地理位置,經過HTML5可以使web應用程序肯定位置並提供更多相關信息。

·        檢索自定義屬性的價值:

5.3.0data屬性

Html代碼部分:<div id=」myDiv」data-custom-attr=」My Value」>lady嘎嘎</div>

檢索:

var theDiv = document.getElementById(「myDiv」);

var attr = theDiv.getAttribute(「data-custom-attr」);

alert(attr);//My Value

·        此屬性在CSS中的應用

CSS代碼:

.data_custom{display:inline-block;position:relative;}

.data_custom:hover{color:ransparent;}

.data_custom:hover:after{

content:attr(data-hover-response);

color:black;

position:absolute;

left:0;

}

HTML代碼:

<a class=」data_custom」data-hover-response=」我說過不要碰我!」href=」#」>不要碰我,嘎嘎</a>

注:瀏覽器支持僞類after一季content的attr的前提下。

5.3.1使用區域input建立滑塊

HTML5引進了range類型的input。

<input type=」range」>,它能夠接收min,max,step和value屬性等。

·        標籤
<form method=」post」>
<h4>音量控制</h4>
<input type=」range」 name=」range」 min=」0」 max=」10」 step=」1」value=」」/>
<output name=」result」></output>
</form>

·        CSS

使用:before和:after告知用戶指定的最大值和最小值

input {font-size:14px;font-weight:bold;}

input[type=range]:before{content:attr(min):padding-right:5px;}

input[type=range]:after{content:attr(max):padding-left:5px}

output{

 display:block;

 font-size:5.5em;

 font-weight:bold;

}

·        JavaScript

l  檢測瀏覽器是否可以識別rangeinput,若是不識別就顯示提示信息;

l  當用戶移動滑塊的時候,動態的改變output的值;

l  監聽,當用戶離開滑塊的時候,就插入值,同時本地存儲;

l  而後當刷新頁面的時候,選擇的區域和值會自動地設置成最後一次的選擇。

(function(){

    var f =document.forms[0],//返回對象中對全部文檔的引用

    range=f[‘range’],

    result=f[‘result’],

    cachedRangeValue=localStorage.rangeValue?localStorage.rangeValue:5;

    //檢測瀏覽器是否足夠酷

    //識別range input

    var o =document.creatElement(‘input’);

    o.type=’range’;

    if(o.type==’text’)

        alert(‘很差意思,你的瀏覽器還不夠酷,試試最新的chrome瀏覽器吧!’);

  //設置初始值

  //不管是否本地存儲了,都設置爲5

   range.value=cachedRangeValue;

   result.value=cachedRangeValue;

  //當用戶選擇了一個值,更新本地存儲

   range.addEventListener(「mouseup」,function(){

       alert(「你的選擇是:」+range.value+」我如今正在用本地存儲保存此值。在瀏覽器上刷新驗證。」);

       localStorage?(localStorage.rangeValue=range.value):alert(「數據保存到了數據庫或是其它地方。」);

     },false);

   //滑動顯示選擇的值

   range.addEventListner(「change」,function(){

   result.value=range.value;

  },false);

})();

相關文章
相關標籤/搜索