雖然HTML 5標準現(xiàn)在仍然是個草案，但其重要的部分已經(jīng)被許多現(xiàn)代的瀏覽器實現(xiàn)了。在《現(xiàn)在如何在你的站點上使用HTML 5》一文中我們介紹了如何使用HTML 5，本文將總結(jié)出HTML 5在功能上的主要變化及使用實例。

51CTO推薦專題：HTML 5 下一代Web開發(fā)標準詳解

一、新的Doctype

你還在使用麻煩的，不可能記得住的XHTML文檔類型嗎？

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 

如果是，為什么還在用呢?使用新的HTML 5文檔類型代替吧。

<!DOCTYPEhtml> 

我就琢磨著，為了HTML5搞個這廝代碼，您可能會對這段代碼究竟靠不靠譜表示懷疑。不用擔心，如今這是可行的，只有老的瀏覽器需要一個特定的doctype(文檔類型)。瀏覽器如果不知道doctype，就會很簡單的以標準模式對包含的標簽進行渲染。所以，妹妹你大膽的向前沖，把小心謹慎都拋到九霄云外，去擁抱新的HTML5文檔類型吧。

二、圖形元素(TheFigureElement)

看看下面給圖片添加的標示：

<imgsrcimgsrc="path/to/image"alt="Aboutimage"/><p>ImageofMars.</p> 

文字裹在P標簽里，與IMG標簽各行其道，很難讓人聯(lián)想到這就是標題。HTML 5通過采用元素對此進行了改正。當合元素組合使用時，我們就可以語義化地聯(lián)想到這就是圖片相對應的標題。

<figure> 
<imgsrcimgsrc="path/to/image"alt="Aboutimage"/> 
<figcaption> 
<p>Thisisanimageofsomethinginteresting.</p> 
</figcaption></figure> 

三、重新定義

還在不久前，元素被用來創(chuàng)建靠近logo且相關的副標題。這是個很有用的表現(xiàn)元素，但是，現(xiàn)在，這種用法可能就不正確了。元素已經(jīng)被重新定義了，指小字，因而更具可用性。試想下你網(wǎng)站底部的版權狀態(tài)，根據(jù)對此元素新的HTML5定義，可以正確地包裹這些信息。

四、腳本(scripts)和鏈接(links)無需type

您可能現(xiàn)在仍在給link和script標簽增加type屬性。

<linkrellinkrel="stylesheet"href="path/to/stylesheet.css"type="text/css"/> 
<scripttypescripttype="text/javascript"src="path/to/script.js"></script> 

這意味著，這些標簽都各自指向樣式表和腳本。因此，我們可以把type屬性一起干掉。

<linkrellinkrel="stylesheet"href="path/to/stylesheet.css"/> 
<scriptsrcscriptsrc="path/to/script.js"></script> 

#p#

五、引號還是不要引號

這確實是個問題。記住，HTML 5不是XHTML，要是你不愿意，你沒有必要非得用引號標記包裹你的屬性，沒有必要非得閉合元素。換句話說，只要你自己覺得舒服，就沒有什么對錯之分。對于我自己來說就是如此。

<pclasspclass=myClassid=someId>Startthereactor. 

對此取舍你還得自己拿主意。如果你更傾向于結(jié)構化的文檔，就算天塌下來，也要把引號牢牢拽在懷里。

六、內(nèi)容可編輯

 

最新的瀏覽器有個很贊的新屬性可以應用到元素上，叫做contenteditable。顧名思意，就是允許用戶編輯元素內(nèi)容包含的任意文本，包括子元素。類似的用途還有很多，像是簡單的待辦事項清單應用程序，可大大利用其本地存儲的優(yōu)勢。

<ulcontenteditableulcontenteditable="true"> 
<li>悼念遇難香港同胞</li> 
<li>深圳特區(qū)30周年</li> 
<li>伊春空難</li></ul> 

或者，根據(jù)前面所學到的一些技巧，我們可以把它寫成：

<ulcontenteditableulcontenteditable=true> 

七、Email輸入(Inputs)

如果我們給表單輸入框應用名為”email”的type屬性，我們可以命令瀏覽器只允許符合有效的電子郵件地址結(jié)構的字符串。沒錯，內(nèi)置表單驗證即將到來，由于一些顯而易見的原因，我們還不能100%依賴內(nèi)置驗證，較舊的瀏覽器不認識這個”email”型，它們會簡單地退回到普通文本框。

<formactionformaction=""method="get"> 
     <labelforlabelfor="email">郵箱:</label> 
     <inputidinputid="email"name="email"type="email"/> 
     <buttontypebuttontype="submit">確定</button> 
</form> 

還應當指出，當談到哪些元素和屬性支持和不支持時，當前所有的瀏覽器都有點靠不住的。例如，Opera似乎支持電子郵件驗證，但僅在name屬性被指定的時候。而且，它不支持占位符屬性，這個我們將會在后面學到。底線是不依賴于這種形式的驗證…但你仍然可以使用它!

八、占位符(Placeholders)

Placeholders的意思，就是文本框/文本域空間默認會有個文字提示，獲得焦點時，此提示文字消失;失去焦點時如果內(nèi)容為空，提示文字又出現(xiàn)。如下圖所示：

這些表單控件里面顯示的些提示性的文字就是占位符。按照以往的做法，我們需要使用一點JavaScript代碼實現(xiàn)占位符效果，例如我之前的“文本框/域文字提示自動顯示隱藏jQuery小插件”一文所展示的。當然，你需要設定一個初始的默認的value值，然后根據(jù)輸入內(nèi)容進行判斷，從而決定文本框值的改變與否。如果您使用占位符(placeholders)屬性，一切就輕松了。

<labelforlabelfor="email">郵箱:</label> 
<inputidinputid="email"type="email"placeholder="zhangxinxu@zhangxinxu.com"size="26"/> 

#p#

九、本地存儲(LocalStorage)

多虧了本地存儲(非正式的HTML5，本著方便歸納的目的)，我們可以讓高級瀏覽器記住我們的編輯后的內(nèi)容，即使瀏覽器被關掉或是頁面刷新。

IE8瀏覽器已經(jīng)支持了本地存儲，如下截圖所示：

盡管顯然不支持所有的瀏覽器，我們可以在InternetExplorer8時，Safari4和Firefox3.5下期待此工作方式。請注意，為了彌補舊的瀏覽器將無法識別本地存儲，你應該先測試，以確定window.localStorage是否存在。

十、語義的Header和Footer

那些過往的日子：

<dividdivid="header"> 
...  
</div> 
<dividdivid="footer"> 
...  
</div> 

這就是div，很自然的，沒有語義化的結(jié)構——即使在應用了id后。現(xiàn)在，通過HTML 5，我們可以使用<header>和<footer>元素。以上的代碼可以替換成：

<header>...</header> 
<footer>...</footer> 

盡量不要混淆”header”和”footer”這些元素。他們只是指他們的容器。因此，將博客底部的，例如，元信息放在footer元素內(nèi)部是說得通的。這同樣也適用于header。

十一、更多HTML5表單特征(MoreHTML5FormFeatures)

您可以通過下面視頻學習更多有用的HTML 5表單特征：

十二、IE和HTML 5(InternetExplorer and HTML 5)

不幸的是，討厭的IE瀏覽器需要動點小手術才能理解新的HTML5元素。為了確保所有新的HTML5元素能以block水平的元素正確地渲染，有必要對其做如下定義：

header,footer,article,section,nav,menu,hgroup{  
       display:block;  
} 

不幸的是，IE仍舊忽略這些樣式，因為它不知道這些標簽從哪里來的，好比是header元素。幸運的是，有一個簡單的解決辦法：

document.createElement("article");  
document.createElement("footer");  
document.createElement("header");  
document.createElement("hgroup");  
document.createElement("nav");  
document.createElement("menu"); 

奇怪的是，這段代碼似乎觸發(fā)IE瀏覽器。為了更簡單將此應用到每個新的應用過程中，雷米夏普(Remy Sharp)創(chuàng)建了一個腳本，通常稱為HTML 5 shiv。該腳本同樣修復了些顯示問題。

十三、文檔某一部分的信息(hgroup)

想象一下，在我的網(wǎng)站的標題，我有我的站點的名稱，隨后立即由一個副標題。雖然我們可以使用一個<h1>和<h2>標簽，為其分別創(chuàng)造標記，但是依舊沒有(因為HTML 4)一個簡單的方法來語義上說明了兩者之間的關系。此外，一個h2標記的使用提出了更多的問題，在層次結(jié)構上，當涉及到其他網(wǎng)頁上顯示的標題時。通過使用不影響文檔的大綱流hgroup元素，我們可以將這些標題組合在一起。

<header> 
<hgroup> 
<h1>RecallFanPage</h1> 
<h2>Onlyforpeoplewhowantthememoryofalifetime.</h2> 
</hgroup> 
</header> 

#p#

十四、必要的屬性(Required Attribute)

表單允許新的必要屬性，用來指定是否需要特殊的input。這取決于你的代碼偏好，你可以以下面兩種方式之一申明此屬性。

<inputtypeinputtype="text"name="someInput"required> 

或者，使用更結(jié)構化的方法：

<inputtypeinputtype="text"name="someInput"required="required"> 

兩種方法都行。有了這個代碼，并且瀏覽器支持此屬性，如果“someInput”文本框是空白，則表單不會被提交。下面是一個簡單的例子，我們還將添加占位符屬性，因為沒有理由不這樣做。

<formactionformaction=""method="get"> 
<labelforlabelfor="name">姓名:</label> 
<inputidinputid="name"name="name"type="text"placeholder="zhangxinxu"required="required"/> 
<buttontypebuttontype="submit">提交</button></form> 

如果input里面內(nèi)容是空白，則表單提交的時候，文本框會高亮顯示。

十五、Autofocus屬性

同樣，HTML 5的解決方案消除了對JavaScript的需要。如果一個特定的輸入應該是“選擇”，或有重點的，默認情況下，我們現(xiàn)在可以利用自動獲取焦點屬性。

<inputtypeinputtype="text"name="someInput"placeholder="zhangxinxu"requiredautofocus> 

十六、Audio支持

我們無需再依賴第三方插件區(qū)渲染音頻。HTML 5提供了元素，我們將不必擔心這些插件。就目前，只有最近期的的瀏覽器提供HTML 5音頻支持。在這個時候，它仍然是一個很好的做法提供一些向后兼容的形式。

<audioautoplayaudioautoplay="autoplay"controls="controls"> 
<sourcesrcsourcesrc="file.ogg"/> 
<sourcesrcsourcesrc="file.mp3"/> 
<ahrefahref="file.mp3">Downloadthisfile.</a> 
</audio> 

Mozilla和WebKit的還沒有完全相處，當涉及到音頻格式，F(xiàn)irefox會希望看到一個.ogg文件，而WebKit的瀏覽器支持.mp3擴展。這意味著，至少在現(xiàn)在，你應該創(chuàng)建兩個版本的音頻。

當Safari加載頁面時，它不會承認.ogg格式，會跳過它并移動到的MP3版本，因此。請注意IE，每往常一樣，不支持這些格式，Opera10和以及以下版本只能使用.wav文件。

十七、Video支持

與元素很類似，在新的瀏覽器中也存在Video!事實上，就在最近，YouTube宣告了新的HTML 5視頻嵌入，當然，是為支持此功能瀏覽器。因為HTML5的規(guī)范沒有指定特定的視頻編解碼器，它留給了瀏覽器來決定。雖然Safari和InternetExplorer9可以預期支持H.264格式的視頻(其中Flash播放器可以播放)，F(xiàn)irefox和Opera是堅持開源Theora和Vorbis格式。因此，當顯示HTML 5的視頻，您必須提供這兩種格式。

<videocontrolspreload> 
<sourcesrcsourcesrc="cohagenPhoneCall.ogv"type="video/ogg;codecs='vorbis,theora'"/> 
<sourcesrcsourcesrc="cohagenPhoneCall.mp4"type="video/mp4;'codecs='avc1.42E01E,mp4a.40.2'"/> 
<p>Yourbrowserisold.<ahrefahref="cohagenPhoneCall.mp4">Downloadthisvideoinstead.</a></p> 
</video> 

還有一個值得注意的一些事情：

1.我們技術上不需要來設置type屬性，但是，如果我們不這樣做，瀏覽器不得不自己去尋找類型。

2.不是所有的瀏覽器理解HTML5視頻。在資源元素的下面，我們可以提供一個下載鏈接，或嵌入視頻的Flash版本代替。

3.controls和preload屬性就會在下面提及。

4.有方法可以讓所有的瀏覽器支持video標簽。

#p#

十八、視頻預載(Preload Videos)

預載屬性不完全是你想的那個樣子，雖然，你應該先決定是否要在瀏覽器預裝的視頻。是否有必要?或許吧。如果訪問者訪問一個專門展示了一個視頻的頁面，你一定要預載的視頻，節(jié)約參觀者等待的一部分時間。影片可以通過設置preload=”preload”或是簡單地添加preload進行預載。我更喜歡后者的解決方案，它少了一點多余的東西。

<videopreload> 

十九、顯示控制條

如果你使用過上面的每一個提到的技術點，你可能已經(jīng)注意到，使用上面的代碼，視頻僅僅顯示的是張圖片，沒有控制條。為了渲染出播放控制條，我們必須在video元素內(nèi)指定controls屬性。

<video preload controls> 

請注意，不同瀏覽器渲染出來的進度條的模樣都是不一樣的。

二十、正則表達式

你發(fā)現(xiàn)自己多久匆匆編寫一些正則表達式驗證一個特定的文本。多虧了新的pattern屬性，我們可以在標簽處直接插入一個正則表達式。

<formactionformaction=""method="get"> 
<labelforlabelfor="username">姓名:</label> 
<inputidinputid="username"name="username"type="text"placeholder="4-10個英文字母"pattern="[A-Za-z]{4,10}"required="required"autofocus/> 
<buttontypebuttontype="submit">提交</button> 
</form> 

如果你熟悉正則表達式，那么應該清楚[A-Za-z]{4,10}表示接受4-10位不區(qū)分大小寫的英文字母。如果瀏覽器支持pattern屬性，則提交表單時，如果文本框中的內(nèi)容不符合其正則表達式，文本框會高亮顯示。如下圖所示。

注意到，我們已經(jīng)開始組合使用這些很棒的屬性。

二十一、屬性支持檢測

如果我們沒有方法檢測瀏覽器是否支持這些屬性，這些就不能稱之為好的屬性。第一個是利用優(yōu)秀的Modernizr庫，或者，我們可以創(chuàng)建和分析這些元素，以確定瀏覽器的能力。例如，在我們前面的例子，如果我們要確定瀏覽器是否能使用pattern的屬性，我們可以添加一小段JavaScript到我們的頁面上：

alert('pattern'indocument.createElement('input'));//boolean 

事實上，這是一種確定瀏覽器兼容的常用方法。jQuery庫了利用這種伎倆。在上面，我們創(chuàng)建了一個新的input元素，并確定了里面的pattern屬性瀏覽器是否認得。如果是，瀏覽器則支持此功能。否則，當然就不支持了。

<script>if(!'pattern'indocument.createElement('input')){//doclient/serversidevalidation}  
</script> 

謹記此方法依賴于JavaScript。

二十二、mark元素(MarkElement)

試想元素作為高亮。此標簽包裹的字符串應該與用戶當前的行動相關聯(lián)。例如，我在一些博客上搜索“北川景子”，我就可以使用一些JavaScript將當前的每個結(jié)果字符串用mark標簽包裹。

<h3>搜索結(jié)果</h3> 
<p>我很喜歡《零秒出手》里面那個拉小提琴的女孩，原來她叫做<mark>北川景子</mark>。  
</p> 

二十三、什么時候使用div

我們有些人開始質(zhì)問到底何時該使用div?，F(xiàn)在我們可以使用header,article,section,和footer，還有機會使用div嗎?當然可以。

例如，如果你發(fā)現(xiàn)你需要包裹一段代碼塊在對內(nèi)容定位處理的包裝單元內(nèi)。不過如果你是包裹一個博客文章，或者，可能是，底部的鏈接列表，則需考慮分別使用和元素，因為其更具語義。

二十四、什么可以開始立即使用

一直談論到現(xiàn)在的HTML5要到2022年才能全部完成，許多人完全忽視它，這是個巨大的錯誤。事實上，有少量的HTML5的功能，我們可以在我們所有的項目中使用!更簡單，更干凈的代碼總是一件好事。在今天的視頻快速展示的技巧中，我將告訴你一些可用的選項。

二十五、哪些不是HTML 5？

那些僅憑自己的假設形象將JavaScript變少的過渡被全部歸為HTML 5的人是可以理解的，甚至蘋果無意中推動這一想法。對于非開發(fā)人員，誰管這個呢，它是一個簡單的方法適用于現(xiàn)代網(wǎng)頁標準。不過，對于我們來說，盡管它可能只是語義，重要的是要準確理解什么不是HTML 5。

不管你需求有多大的區(qū)別，所有這些技術可以歸為現(xiàn)代網(wǎng)絡堆棧。事實上，不少這些分支規(guī)范的管理著還是同一人。

#p#

二十六、data屬性(TheDataAttribute)

我們現(xiàn)在可以很正式地讓所有的HTML元素支持自定義屬性。然而，以前，我們可能會這樣：

<h1idh1id=someIdcustomAttribute=value>小樣，膽兒挺肥的呢</h1> 

校驗器會小題大做!但是現(xiàn)在，只要我們以”data”為前綴定義我們的自定義屬性，盜版屬性立馬變成正牌的了。如果你發(fā)現(xiàn)你曾經(jīng)把一個重要的數(shù)據(jù)附加在諸如class的屬性上，可能為了JavaScript之用，那么，本屬性將大有幫助。

二十七、Output元素

正如你可能預料到的，output元素被用來顯示部分計算，例如，如果你想顯示一個鼠標的位置，或者是一系列數(shù)字的總和坐標，這個數(shù)據(jù)應被插入到output元素中。舉個簡單的例子，當提交按鈕被按下，我們用JavaScript將兩個數(shù)字相加值插入到空的output中。

<formactionformaction=""method="get"> 
<p>10+5=<outputnameoutputname="sum"></output></p> 
<buttontypebuttontype="submit">計算</button></form>(function()  
{varf=document.forms[0];if(typeoff['sum']!=='undefined')  
{f.addEventListener('submit',function(e){f['sum'].value=15;e.preventDefault();  
},false);  
}  
else  
{alert('你的瀏覽器尚未準備好！');  
}  
}  
)  
(); 

自己測試了下，貌似現(xiàn)在只有在Opera瀏覽器下有上佳的效果：

如果您現(xiàn)在使用的是較新版本的Opera瀏覽器，您可以狠狠地點擊這里：HTML 5結(jié)果輸出框demo。此元素也可以接受一個屬性，它反映了輸出相關元素的名稱，類似label工作原理。

二十八、使用區(qū)域input創(chuàng)建滑塊

HTML 5引進了range類型的input。

<inputtypeinputtype="range"> 

最值得注意的是，它可以接收min,max,step,和value屬性，等等。雖然現(xiàn)在似乎只有Opera瀏覽器充分支持這種輸入類型，但是當我們可以實際使用時，這將是美妙無比的!

第一步：標簽

首先，創(chuàng)建標簽

<formmethodformmethod="post"> 
<h4>音量控制</h4> 
<inputtypeinputtype="range"name="range"min="0"max="10"step="1"value=""/> 
<outputnameoutputname="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

◆檢測我們的瀏覽器是否認識rangeinput，如果不，顯示提示。

◆當用戶移動滑塊的時候，動態(tài)改變output的值。

◆監(jiān)聽，當用戶離開滑塊，插入值，同時本地存儲。

◆然后，下次用戶刷新頁面的時候，選擇的區(qū)域和值會自動地設置成他們最后一次選擇。

(function(){  
    var  f=document.forms[0],  
    range=f['range'],  
    result=f['result'],  
    cachedRangeValue=localStorage.rangeValue?localStorage.rangeValue:5;  
    //檢測瀏覽器是否是足夠酷  
    //識別range input.  
    var o=document.createElement('input');  
    o.type='range';  
    if(o.type==='text')alert('不好意思，你的瀏覽器還不夠酷，試試最新的Opera瀏覽器吧。');   
 
    //設置初始值  
    //無論是否本地存儲了，都設置值為5  
    range.value=cachedRangeValue;  
    result.value=cachedRangeValue;  
    //當用戶選擇了個值，更新本地存儲  
    range.addEventListener("mouseup",function(){  
  alert("你選擇的值是："+range.value+".我現(xiàn)在正在用本地存儲保存此值。在現(xiàn)代瀏覽器上刷新并檢測。");  
  localStorage?(localStorage.rangeValue=range.value):alert("數(shù)據(jù)保存到了數(shù)據(jù)庫或是其他什么地方。");  
    },false);  
    //滑動時顯示選擇的值  
    range.addEventListener("change",function(){  
          result.value=range.value;  
    },false);  
})();  

【編輯推薦】

1. 現(xiàn)在如何在你的站點上使用HTML 5
2. HTML 5視頻標簽全屬性詳解
3. 為網(wǎng)站提速 探秘HTML 5鏈接預取功能
4. 主流瀏覽器CSS 3和HTML 5兼容清單
5. 從零開始構建HTML 5 Web頁面