關於HTML5的22個初級技巧(圖文教學)_html5教學技巧-H5教程-PHP中文網

首頁

web前端

H5教程

關於HTML5的22個初級技巧(圖文教學)_html5教學技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:51 PM

Web技術的發展速度太快了，如果你不與時俱進，就會被淘汰。因此，為了回應即將到來的HTML5，本文總結了22個HTML5的初級技巧，希望能對你進一步學習好HTML5會有所幫助。
1. 新的Doctype聲明
XHTML的聲明太長了，我相信很少會有前端開發人員能手寫出這個Doctype聲明。

複製代碼

代碼如下:

br />

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

HTML5的Doctype聲明很短，看到這個聲明相信你馬上就能記住，不用浪費腦細胞去記那長的有點變態的XHTML的Doctype聲明了。 HTML5的簡短的DOCTYPE聲明是讓Firefox、Chrome等現代瀏覽器和IE6/7/8等瀏覽器都進入(準)標準模式，你可能會奇怪IE6/7居然也可以支援HTML5 Doctype，事實上，IE是只要doctype符合這種格式，都會進入標準模式。

2.
標籤
看看下面一段簡單的代碼：
複製代碼

代碼如下:

image of Mars.

遺憾的是，這裡的h6標籤和img標籤好像沒有什麼關係，語意不夠明確。 HTML5意識到了這一點，於是就採用了
標籤。當
結合
標籤的使用，可以讓h6標籤和img標籤組合起來，程式碼就更具語意化了。
複製程式碼

程式碼如下:

This is an image of something interesting.

3. 重新定義
不久前，我使用了標籤來建立與logo相關的副標題。但是在HTML5中重新定義了標籤，使之更能表現語義化，在的字號都會變小，想想如果這個標籤用於網站的底部的版權信息還是個不錯的做法。
4. 去掉了Javascript和CSS標籤的type屬性

通常你會在和<script>加上type屬性：<div class="msgheader"><div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode68'));"><u>複製程式碼<div class="msgborder" id="phpcode68">程式碼如下:<br /><br /><br /><link rel="stylesheet" type=text/css href="path/to/stylesheet .css"> <script type="text/javascript" src="path/to/script.js"></script>

在HTML5中，不再需要type屬性了，因為這顯得有點多餘，去掉之後可以讓程式碼更簡潔。
複製程式碼

程式碼如下:

5. 是否使用雙引號

這有點讓人糾結，HTML5不是XTHML，你可以省去標籤中的雙引號。相信大多數同志也包括我都習慣了加上雙引號，因為這讓代碼看起來會更標準。不過，這可以根據你的個人喜好來確定是到底要不要雙引號。
複製程式碼

程式碼如下:

start the reactor.

6. 讓網頁內容可以編輯

7. 電子郵件輸入框
HMTL5新增了一個輸入框的電子郵件屬性，可以偵測輸入的內容是否符合電子郵件的書寫格式，功能越來越強大了吧，在HTML5之前只能依靠JS來偵測。雖然內建的表單驗證功能很快就會成為現實，但這個屬性很多瀏覽器都還不支持，只會當作普通的文字輸入框來處理。

複製程式碼
程式碼如下:

email:

到目前為止，包括現代瀏覽器在內都不支援這個屬性，所以這個屬性暫時還是靠不住的。

8. 佔位符文字方塊中的佔位符（看看本博的搜尋框效果）有利於提升使用者體驗，之前，我們只能依靠JS來實現佔位元符的效果，在HTML5中新增了佔位符屬性placeholder。

複製程式碼程式碼如下:

同樣，目前的主流現代瀏覽器對此屬性的支援不大好，暫時只有Chrome和Safari支援該屬性， Firefox和Opera不支援該屬性。

9. 本地儲存HTML5的本地儲存功能，可以讓現代瀏覽器「記住」我們輸入的，就算瀏覽器關閉和刷新也不會受影響。雖然這個功能有些瀏覽器不支持，但IE8， Safari 4，還有 Firefox 3.5還是支援這個功能的，你可以測試下。

10. 更有語意的header和footer下面的程式碼在HTML5中將不復存在

複製程式碼程式碼如下:

...

...

通常我們都會為header和footer定義一個div，然後再增加一個id，但是在HTML5中可以直接使用
和
標籤，所以可以將上面的程式碼改寫成：

複製程式碼
複製程式碼

程式碼如下:

...

...

要注意不要將這兩個標籤和網站的頭部和頁腳混淆起來，它們只是代表它們的容器。

11. IE對HTML5的支援

IE瀏覽器目前對HTML5的支援並不好，也是阻礙HTML5的更快普及的一大絆腳石，不過，IE9對HTML5的支持度還是很不錯的。
IE把HTML5新增的標籤都解析成內嵌元素，但實際上它們是區塊級元素，所以有必要為它們定義一個樣式：

複製程式碼

程式碼如下:

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

儘管如此，IE還是無法解析這些新增的HTML5標籤，這時候就需要藉助Javascript來解決這個問題：
複製程式碼
程式碼如下:

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

你可以藉助這段Javascript程式碼來修復IE更好的解析HTML5

複製程式碼
程式碼如下:

程式碼如下:

12. 標題群( hgroup)
這個類似第二點技巧。如果用h1和h2標籤分別表示網站的名稱和副標題，但這會讓兩個本義上密切相關的標題並沒有關聯起來。這個時候可以使用標籤將它們組合起來，這樣程式碼會更有語意。
複製程式碼

程式碼如下:

Recall Fan Page

Only for people who want the memory of a lifetime.

13. 必填項屬性前端人員肯定做過不少表單驗證的項目，其中很重要的一點就是有些輸入框的內容是必須填寫的，這裡就需要使用Javascript來檢查。在HTML5中，新增了一個「必須填寫」的屬性：required。 required屬性有兩種使用方法，第二種方法顯得更有結構性，而第一種則較簡潔。

複製程式碼

程式碼如下:

有了這個屬性，讓表單的提交驗證變得更簡單了，看看下面簡單的例子：

複製代碼

代碼如下:

your name:

如果輸入框為空，表單將無法提交成功。
14. 自動取得焦點相同的，HTML5也不再需要Javascript來解決輸入框的自動取得焦點，如果某個輸入框應當被選擇或是取得到輸入焦點， HTML5新增了自動獲取焦點屬性autofocus：

複製代碼

代碼如下:

autofocus也同樣可以寫成”autofocus”，這樣看起來標準些，這個是根據自己的個人喜好而定。
15. 音訊播放的支援HTML5中提供了

複製程式碼

程式碼如下:

為什麼會有兩種格式的音訊檔案？因為Firefox和Webkit瀏覽器所支援的格式有差異，Firefox只能支援.ogg文件，而Webkit只支援.mp3的文件，解決的方法就是創建兩個版本的音訊文件，這樣就可以相容於Firefox和Webkit的瀏覽器了，要注意的是IE不支援該標籤。
16. 影片播放的支援
和