關(guān)于HTML5的技巧有哪些
本篇文章為大家展示了關(guān)于HTML5的技巧有哪些，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。
創(chuàng)新互聯(lián)公司是一家朝氣蓬勃的網(wǎng)站建設(shè)公司。公司專注于為企業(yè)提供信息化建設(shè)解決方案。從事網(wǎng)站開發(fā)，網(wǎng)站制作，網(wǎng)站設(shè)計，網(wǎng)站模板，微信公眾號開發(fā)，軟件開發(fā)，成都小程序開發(fā)，十載建站對建筑動畫等多個領(lǐng)域，擁有豐富的網(wǎng)站推廣經(jīng)驗。
Web技術(shù)的發(fā)展速度太快了，如果你不與時俱進(jìn)，就會被淘汰。因此，為了應(yīng)對即將到來的HTML5，本文總結(jié)了22個HTML5的初級技巧，希望能對你進(jìn)一步學(xué)習(xí)好HTML5會有所幫助。
1. 新的Doctype聲明
XHTML的聲明太長了，我相信很少會有前端開發(fā)人員能手寫出這個Doctype聲明。
代碼如下:
HTML5的Doctype聲明很短，看到這個聲明相信你馬上就能記住，不用浪費(fèi)腦細(xì)胞去記那長的有點(diǎn)變態(tài)的XHTML的Doctype聲明了。
HTML5的簡短的DOCTYPE聲明是讓Firefox、Chrome等現(xiàn)代瀏覽器和IE6/7/8等瀏覽器都進(jìn)入(準(zhǔn))標(biāo)準(zhǔn)模式，你可能會奇怪IE6/7居然也可以支持HTML5 Doctype，事實上，IE是只要doctype符合 這種格式，都會進(jìn)入標(biāo)準(zhǔn)模式。
2. 標(biāo)簽
看看下面一段簡單的代碼：
代碼如下:
image of Mars.
遺憾的是，這里的h7標(biāo)簽和img標(biāo)簽好像沒有什么關(guān)系，語義不夠明確。HTML5意識到了這一點(diǎn)，于是就采用了標(biāo)簽。當(dāng)結(jié)合標(biāo)簽的使用，可以讓h7標(biāo)簽和img標(biāo)簽組合起來，代碼就更具語義化了。
代碼如下:
This is an image of something interesting.
3. 重新定義
不久前，我使用了標(biāo)簽來創(chuàng)建與logo相關(guān)的副標(biāo)題。但是在HTML5中重新定義了標(biāo)簽，使之更能表現(xiàn)語義化，在的字號都會變小，想想如果這個標(biāo)簽用于網(wǎng)站的底部的版權(quán)信息還是個不錯的做法。
4. 去掉了Javascript和CSS標(biāo)簽的type屬性
通常你會在和
在HTML5中，不再需要type屬性了，因為這顯得有點(diǎn)多余，去掉之后可以讓代碼更為簡潔。
代碼如下:
5. 是否使用雙引號
這有點(diǎn)讓人糾結(jié)，HTML5并不是XTHML，你可以省去標(biāo)簽中的雙引號。相信大多數(shù)同志也包括我都習(xí)慣了加上雙引號，因為這讓代碼看起來會更標(biāo)準(zhǔn)。不過，這可以根據(jù)你的個人喜好來確定是到底要不要雙引號。
代碼如下:
start the reactor.
6. 使網(wǎng)頁內(nèi)容可以編輯
7. 電子郵件輸入框
HMTL5中新增了一個輸入框的電子郵件屬性，可以檢測輸入的內(nèi)容是否符合電子郵件的書寫格式，功能越來越強(qiáng)大了吧，在HTML5之前只能依靠JS來檢測。雖然內(nèi)置的表單驗證功能很快就會成為現(xiàn)實，但這個屬性很多瀏覽器都還不支持，只會當(dāng)作普通的文本輸入框來處理。
代碼如下:
email: submit form
到目前為止，包括現(xiàn)代瀏覽器在內(nèi)都不支持該屬性，所以這個屬性暫時還是靠不住的。
8. 占位符
文本框中的占位符（看看本博的搜索框效果）有利于提升用戶體驗，之前，我們只能依靠JS來實現(xiàn)占位符的效果，在HTML5中新增了占位符屬性placeholder。
代碼如下:
同樣，目前的主流現(xiàn)代瀏覽器對該屬性的支持不大好，暫時只有Chrome和Safari支持該屬性，F(xiàn)irefox和Opera不支持該屬性。
9. 本地存儲
HTML5的本地存儲功能，可以讓現(xiàn)代瀏覽器“記住”我們輸入的，就算瀏覽器關(guān)閉和刷新也不會受影響。雖然這個功能有些瀏覽器不支持，但是IE8， Safari 4， 還有 Firefox 3.5還是支持這個功能的，你可以測試下。
10. 更有語義的header和footer
下面的代碼在HTML5中將不復(fù)存在
代碼如下:
...
...
通常我們都會給header和footer定義一個div，然后再添加一個id，但是在HTML5中可以直接使用
代碼如下:
要注意不要將這兩個標(biāo)簽和網(wǎng)站的頭部和頁腳混淆起來，它們只是代表它們的容器。
11. IE對HTML5的支持
IE瀏覽器目前對HTML5的支持并不好，也是阻礙HTML5的更快普及的一大絆腳石，不過，IE9對HTML5的支持度還是很不錯的。
IE把HTML5新增的標(biāo)簽都解析成內(nèi)聯(lián)元素，而實際上它們是塊級元素，所以有必要為它們定義一個樣式：
代碼如下:
header, footer, article, section, nav, menu, hgroup { display: block;}
盡管如此，IE還是不能解析這些新增的HTML5標(biāo)簽，這個時候就需要借助Javascript來解決這個問題：
代碼如下:
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");
你可以借助這一段Javascript代碼來修復(fù)IE更好的解析HTML5
代碼如下:
12. 標(biāo)題群( hgroup)
這個類似于第二點(diǎn)技巧。如果用h2和h3標(biāo)簽分別表示網(wǎng)站的名稱和副標(biāo)題，但這會讓兩個本義上密切相關(guān)的標(biāo)題并沒有關(guān)聯(lián)起來。這個時候可以使用標(biāo)簽將它們組合起來，這樣代碼會更有語義。
代碼如下:
Recall Fan Page
Only for people who want the memory of a lifetime.
13. 必填項屬性
前端人員肯定做過不少表單驗證的項目，其中很重要的一點(diǎn)就是有些輸入框的內(nèi)容是必須填寫的，這里就需要使用Javascript來檢查。在HTML5中，新增了一個“必須填寫”的屬性：required。required屬性有兩種使用方法，第二種方法顯得更有結(jié)構(gòu)性，而第一種更簡潔。
代碼如下:
有了這個屬性，使表單的提交驗證變得更簡單了，看看下面簡單的例子：
代碼如下:
your name:
Go
如果輸入框為空，表單將無法提交成功。
14. 自動獲取焦點(diǎn)
同樣的，HTML5也不再需要Javascript來解決輸入框的自動獲取焦點(diǎn)，如果某個輸入框應(yīng)當(dāng)被選擇或是獲取到輸入焦點(diǎn)，HTML5新增了自動獲取焦點(diǎn)屬性autofocus：
代碼如下:
autofocus也同樣可以寫成”autofocus=autofocus”，這樣看起來標(biāo)準(zhǔn)些，這個根據(jù)自己的個人喜好而定。
15. 音頻播放的支持
HTML5中提供了
代碼如下:
Download this file.
為什么會有兩種格式的音頻文件？因為Firefox和Webkit瀏覽器所支持的格式存在差異，F(xiàn)irefox只能支持.ogg文件，而Webkit只支持.mp3的文件，解決的辦法就是創(chuàng)建兩個版本的音頻文件，這樣就可以兼容Firefox和Webkit的瀏覽器了，需要注意的是IE不支持該標(biāo)簽。
16. 視頻播放的支持
和
代碼如下:
your browser is old.
download this video instead.
需要注意的是，type屬性雖然可以省略掉，但是如果加上的話，瀏覽器就可以更快的準(zhǔn)確的解析該視頻文件。并不是所有的瀏覽器都支持HTML5的視頻，所以得做好使用Flash版本來代替，當(dāng)然，這個決定權(quán)在于你。
17. 預(yù)加載視頻
預(yù)加載屬性：preload，首先要確定是否需要預(yù)先加載視頻，假如，訪客在訪問一個有很多視頻展示的頁面，那么就有必要預(yù)先加載一段視頻，這樣可以節(jié)省訪客的等待時間，提高用戶體驗。你可以給
...
[/code]
18. 顯示控件
顯示控件屬性可以給視頻添加一個播放暫停的控件，需要注意的是每個瀏覽器顯示的效果可能會有些差異。
代碼如下:
...
19. 使用正則表達(dá)式
在HTML5中，我們可以直接使用正則表達(dá)式。
create a username:
10" required="required" autofocus="autofocus" pattern="[A-Za-z]{4,10}">
Go
20. 檢測瀏覽器對HTML5屬性的支持
由于各瀏覽器對HTML5屬性的支持度不同，這就造成了一些兼容問題。但是可以使用方法來檢測該瀏覽器是否支持這些屬性，上例中的代碼如果要檢測pattern屬性是否被瀏覽器識別，可以使用Javascript代碼來檢測。
代碼如下:
alert( 'pattern' in document.createElement('input') ) // boolean;
其實這是確定瀏覽器兼容常用的方法，jQuery庫就經(jīng)常使用這種方法。上面的代碼中創(chuàng)建了一個input標(biāo)簽，并檢測pattern屬性是否被瀏覽器支持，如果能支持的話，瀏覽器就支持這個功能，否則就不支持。
代碼如下:
21. Mark標(biāo)簽
標(biāo)簽用于高亮顯示那些需要在視覺上向用戶突出其重要性的文字，包裹在此標(biāo)簽里的字符串必須與用戶當(dāng)前的行為相關(guān)。例如，如果我在一些博客中搜索“Open your Mind” ，我可以使用在標(biāo)簽里使用JavaScript 來包裹每一次動作。
代碼如下:
search results
They were interrupted, just after Quato said, "Open your Mind".
22. 該如何正確的使用div標(biāo)簽
有些人可能會有疑問，有了
重慶分公司
重慶分公司
