"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
 
 
 

 
 
 
 

  
  
  
  
ImageofMars.
 
 
 
 
 

 
 
 
 

  
  
  
  
 
  
  
  
  
 
  
  
  
  

  
  
  
  
Thisisanimageofsomethinginteresting.
 
  
  
  
  
 
 
 
 
 

 
 
 
 

  
  
  
  
Startthereactor. 
 
 
 
 

 
 
 
 

  
  
  
  
 
  
  
  
  
悼念遇難香港同胞
 
  
  
  
  
深圳特區(qū)30周年
 
  
  
  
  
伊春空難
 
 
 
 
 

 
 
 
 

  
  
  
  
 
  
  
  
  
     郵箱: 
  
  
  
  
      
  
  
  
  
     確定 
  
  
  
  
 
 
 
 
 

 
 
 
 

  
  
  
  
郵箱: 
  
  
  
  
 
 
 
 
 

 
 
 
 

  
  
  
  
 
  
  
  
  
...  
  
  
  
  

這就是div，很自然的，沒有語義化的結(jié)構(gòu)——即使在應(yīng)用了id后?，F(xiàn)在，通過HTML 5，我們可以使用

#p#

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

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

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

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

 
 
 
 

  
  
  
  
 
  
  
  
  
姓名: 
  
  
  
  
 
  
  
  
  
提交 
 
 
 
 

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

十五、Autofocus屬性

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

十六、Audio支持

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

 
 
 
 

  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
Downloadthisfile. 
  
  
  
  
 
 
 
 
 

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

當(dāng)Safari加載頁面時(shí)，它不會(huì)承認(rèn).ogg格式，會(huì)跳過它并移動(dòng)到的MP3版本，因此。請(qǐng)注意IE，每往常一樣，不支持這些格式，Opera10和以及以下版本只能使用.wav文件。

十七、Video支持

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

 
 
 
 

  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
Yourbrowserisold.Downloadthisvideoinstead.
 
  
  
  
  
 
 
 
 
 

還有一個(gè)值得注意的一些事情：

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

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

3.controls和preload屬性就會(huì)在下面提及。

4.有方法可以讓所有的瀏覽器支持video標(biāo)簽。

#p#

十八、視頻預(yù)載(Preload Videos)

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

十九、顯示控制條

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

請(qǐng)注意，不同瀏覽器渲染出來的進(jìn)度條的模樣都是不一樣的。

二十、正則表達(dá)式

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

 
 
 
 

  
  
  
  
 
  
  
  
  
姓名: 
  
  
  
  
 
  
  
  
  
提交 
  
  
  
  
 
 
 
 
 

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

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

二十一、屬性支持檢測(cè)

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

 
 
 
 

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

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

謹(jǐn)記此方法依賴于JavaScript。

二十二、mark元素(MarkElement)

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

 
 
 
 

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

二十三、什么時(shí)候使用div

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

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

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

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

二十五、哪些不是HTML 5？

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

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

#p#

二十六、data屬性(TheDataAttribute)

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

 
 
 
 

  
  
  
  
小樣，膽兒挺肥的呢 
 
 
 
 

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

二十七、Output元素

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

 
 
 
 

  
  
  
  
 
  
  
  
  
10+5=
 
  
  
  
  
計(jì)算(function()  
  
  
  
  
{varf=document.forms[0];if(typeoff['sum']!=='undefined')  
  
  
  
  
{f.addEventListener('submit',function(e){f['sum'].value=15;e.preventDefault();  
  
  
  
  
},false);  
  
  
  
  
}  
  
  
  
  
else  
  
  
  
  
{alert('你的瀏覽器尚未準(zhǔn)備好！');  
  
  
  
  
}  
  
  
  
  
}  
  
  
  
  
)  
  
  
  
  
(); 
 
 
 
 

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

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

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

HTML 5引進(jìn)了range類型的input。

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

第一步：標(biāo)簽

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

 
 
 
 

  
  
  
  
 
  
  
  
  
音量控制
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
 
 
 
 

第二步：CSS

下面，我們要使用一點(diǎn)點(diǎn)的樣式。我們將使用: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

◆檢測(cè)我們的瀏覽器是否認(rèn)識(shí)rangeinput，如果不，顯示提示。

◆當(dāng)用戶移動(dòng)滑塊的時(shí)候，動(dòng)態(tài)改變output的值。

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

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

 
 
 
 

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

【編輯推薦】

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