互聯(lián)網(wǎng)科技發(fā)展的速度真可謂驚人的快，一個(gè)稍不留神，你就可能無法跟上它的步伐。HTML5的變化和更新也壓倒不少人，這篇文章將向大家介紹一些最基本也非常必要的HTML技巧。
1. 新的文檔類型（Doctype）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
你還在使用上面這個(gè)既麻煩又難記的XHTML文檔類型嗎？ 如果還是這樣的話，現(xiàn)在該切換到新的HTML5文檔類型了。
<!DOCTYPE html>
只要這么簡(jiǎn)單的15個(gè)字符就可以了。（注意：你的doctype的申明需要出現(xiàn)在你html文件的第一行。）
2. 圖形（Figure）元素
考慮用下面的代碼來標(biāo)記圖片？
<mg src="path/to/image" alt="About image" />
<p>Image of Mars. </p>
很不幸，它不能用簡(jiǎn)單、富有語義關(guān)聯(lián)的方式與圖形的標(biāo)題關(guān)聯(lián)，因?yàn)樗鼉H僅是用段落標(biāo)記以及圖片元素包裹著，而HTML5通過引進(jìn)<figure>元素，改進(jìn)了這一點(diǎn)。當(dāng)結(jié)合 <figcaption> 元素使用時(shí)，我們就可以將圖形標(biāo)題與圖形配對(duì)起來。代碼如下：
<figure>
<img src="path/to/image" alt="About image" />
<figcaption>
<p>This is an image of something interesting. </p>
</figcaption>
</figure>
3. 重新定義<small>
原來你可以利用<small>元素來創(chuàng)建與logo密切相關(guān)的副標(biāo)題。不過，現(xiàn)在HTML5修改了這個(gè)用法，<small>元素被重新定義了，或者更恰當(dāng)?shù)卣f，它現(xiàn)在用來代表小字或其他邊注（如，網(wǎng)站底部的版權(quán)聲明）。
4. 不再需要腳本、鏈接類型
很可能你仍然像下面的代碼一樣給你的鏈接和腳本標(biāo)簽添加類型的屬性。
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>
在HTML5中，這已經(jīng)不再需要了。 意味著說這兩個(gè)標(biāo)簽分別代表著樣式和腳本。因此，我們可以將它們的類型屬性都刪除掉。代碼如下：
<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>
5. 使用還是不使用引號(hào)
記住，HTML5與XHTML不同，如果你不喜歡的話你不必用引號(hào)將屬性包裹起來。不過，要是你覺得用引號(hào)會(huì)讓你覺得更加舒服的話，當(dāng)然也不會(huì)有任何問題。
<p class=myClass id=someId> Start the reactor.
在這點(diǎn)上，你可以自己決定。如果你想要一個(gè)結(jié)構(gòu)非常清楚的文檔的話，堅(jiān)持使用引號(hào)也挺好的。
6. 使你的內(nèi)容可編輯
HTML5其中一個(gè)非常強(qiáng)大的功能就是"contenteditable"，顧名思義它將允許用戶編輯元素（包括他的子元素）內(nèi)包含的任何文本內(nèi)容。它的用途非常廣，如，簡(jiǎn)單的任務(wù)清單或是基于wiki的站點(diǎn)也非常實(shí)用，此外，它還有一個(gè)優(yōu)勢(shì)就是利用了本地的存儲(chǔ)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
</head>
<body>
<h2> To-Do List </h2>
<ul contenteditable="true">
<li> Break mechanical cab driver. </li>
<li> Drive to abandoned factory
<li> Watch video of self </li>
</ul>
</body>
</html>
或者，按照第五條技巧所說的，你也可以將第九行的代碼寫成這樣（不用引號(hào)）：
<ul contenteditable=true>
7. 電子郵件輸入
如果我們應(yīng)用"電子郵件"類型來指定輸入的形式，我們可以命令瀏覽器只允許符合有效電子郵件地址結(jié)構(gòu)的字符串輸入。雖然說內(nèi)置的表單驗(yàn)證很快就會(huì)到來，但是我們也不能完全依靠這個(gè)。比較舊的瀏覽器不理解這種"電子郵件"類型，它們只會(huì)簡(jiǎn)單地返回到普通的文本框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>untitled</title>
</head>
<body>
<form action="" method="get">
<label for="email">Email:</label>
<input id="email" name="email" type="email" />
<button type="submit"> Submit Form </button>
</form>
</body>
</html>
在說到瀏覽器所支持和不支持的元素以及屬性時(shí)，你必需知道當(dāng)前所有瀏覽器都不是那么可靠。例如，Opera只有在你指定name屬性時(shí)才支持電子郵件驗(yàn)證。不過，它不支持占位符屬性（下面即將要講到的）。最后，雖然你可以使用這種形式的驗(yàn)證，不過不要過分依賴它。
8. 占位符
此前，我們需要使用JavaScript來創(chuàng)建文本框的占位符。你可以初步設(shè)定值屬性來看是否合適，但是只要用戶刪除了該文本，輸入的內(nèi)容就會(huì)再次變成空的。占位符屬性有效地彌補(bǔ)了這一點(diǎn)。
<input name="email" type="email" placeholder="doug@givethesepeopleair.com" />
9. 本地存儲(chǔ)
多虧了HTML5的 local storage ，我們可以讓高級(jí)瀏覽器"記住"我們輸入的內(nèi)容，就算后來瀏覽器關(guān)閉或者重新刷新也不受影響。盡管不是所有的瀏覽器都支持，但是最關(guān)鍵的 Internet Explorer 8， Safari 4， Firefox 3.5.都支持。
10. 語義性的Header和Footer
<div id="header">
...
</div>
<div id="footer">
...
</div>
上面的代碼一去不復(fù)返。Divs從根本上來說并沒有任何語義結(jié)構(gòu)，即使應(yīng)用上了ID還是如此。
而在HTML5中，我們可以使用<header>和<footer>元素，上面的代碼就可以替換為：
<header>
...
</header>
<footer>
...
</footer>
不過注意不要將這兩個(gè)元素與網(wǎng)站的頭部和腳部混淆起來。它們只是代表它們的容器。
11. IE和HTML5
IE理解新的HTML5元素需要費(fèi)一定的神，為了確保新的HTML5元素能夠以塊級(jí)元素正確顯示，有必要將它們用下面的代碼定義風(fēng)格：
header, footer, article, section, nav, menu, hgroup {
display: block;
}
就算如此，IE還是不知道這些元素究竟是什么，因而會(huì)無視這些格式，還需要用到下面的代碼來解決這個(gè)問題：
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");
12. 群組標(biāo)題（hgroup）
假設(shè)一個(gè)網(wǎng)站有名稱、副標(biāo)題分別用<h1>、<h2>標(biāo)簽來標(biāo)記，在HTML4中還沒有一種能夠?qū)烧咧g的關(guān)系用很好的語義關(guān)系來描述的方法，此外，當(dāng)使用h2在頁(yè)面中顯示其它標(biāo)題時(shí)，在層級(jí)方面問題就更多。而使用群組標(biāo)題hgroup元素，我們可以將這些標(biāo)題聚集在一起，而不影響文檔的整個(gè)綱要。
<header>
<hgroup>
<h1> Recall Fan Page </h1>
<h2> Only for people who want the memory of a lifetime. </h2>
</hgroup>
</header>
13.必要（Required）屬性
表單允許新的必要屬性，規(guī)定是否某個(gè)特定的輸入是必要的。你可以依據(jù)自己寫代碼的偏好，用下面兩種不同方式來聲明這個(gè)屬性：
<input type="text" name="someInput" required>
或者，更嚴(yán)謹(jǐn)：
<input type="text" name="someInput" required="required">
上面兩行代碼都行得通。用了這行代碼之后，并且瀏覽器支持required屬性的話， 輸入空白的表單就不會(huì)被提交。下面是一個(gè)簡(jiǎn)單的例子，同時(shí)我們也添加了占位符屬性：
<form method="post" action="">
<label for="someInput"> Your Name: </label>
<input type="text" id="someInput" name="someInput" placeholder="Douglas Quaid" required>
<button type="submit">Go</button>
</form>
如果輸入是空的，表單將無法提交，突出顯示文本框。
14. 自動(dòng)對(duì)焦（Autofocus）屬性
同樣地，有了HTML5就不再需要用JavaScript方案來解決自動(dòng)對(duì)焦的問題。如果某個(gè)輸入應(yīng)該被"選擇"或被聚焦，我們現(xiàn)在可以使用HTML的自動(dòng)對(duì)焦autofocus屬性。
<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>
15. 音頻支持
我們?cè)僖膊恍枰揽康谌讲寮硖峁┮纛l了。HTML5提供了音頻元素<audio>。目前，只有最新的瀏覽器支持HTML5音頻。 此時(shí)，最好還是提供一些向后兼容性。
<audio autoplay="autoplay" controls="controls">
<source src="file.ogg" />
<source src="file.mp3" />
<a href="file.mp3">Download this file.</a>
</audio>
說道音頻格式，Mozilla和Webkit都還沒有完全支持。Firefox希望看到一個(gè) .ogg文件，Webkit瀏覽器只支持最常見的.mp3擴(kuò)展名。這意味著說，至少目前為止，你應(yīng)該創(chuàng)建兩個(gè)版本的音頻。當(dāng)Safari加載頁(yè)面時(shí)，它認(rèn)不出.ogg格式的文件，將會(huì)跳過并移到mp3版本上。請(qǐng)注意，IE并不支持它，Opera 10 或更低的版本只支持 .wav文件。
16. 視頻支持
與音頻元素 <audio>非常像，在新的瀏覽器上也支持HTML5視頻。事實(shí)上，就在最近YouTube宣布了一項(xiàng)新的 HTML5視頻嵌入?？上У氖牵捎贖TML5說明文件并沒有為視頻指出某個(gè)特定的編碼器，所以都主要取決于瀏覽器來決定了。盡管Safari和IE9可以支持H.264 格式的視頻，F(xiàn)irefox 和Opera卻仍然堅(jiān)持Theora 和Vorbis格式。因此，顯示HTML5視頻的時(shí)候，你必須提供兩種格式。
17. 視頻預(yù)先加載
你首先需要決定是否需要瀏覽器來預(yù)先加載視頻。是否有需要？假設(shè)，一個(gè)訪客進(jìn)入某個(gè)專門用來顯示視頻的頁(yè)面，那么就非常有必要預(yù)先加載這個(gè)頁(yè)面節(jié)省一點(diǎn)等待的時(shí)間。你可以通過設(shè)置 preload="preload"來預(yù)先加載視頻，或者之間添加preload也可以。
<video preload>
18. 顯示控件
你可能已經(jīng)注意到，用上面的代碼的話，視頻將只會(huì)顯示成一個(gè)圖片，而沒有任何可控制的元件。為了獲取這些播放控件，我們必需在視頻元素里指定這些控件屬性。
<video preload controls>
19. 正則表達(dá)式
對(duì)虧了新模式的屬性，我們可以直接在代碼中插入一個(gè)正則表達(dá)式。
<form action="" method="post">
<label for="username">Create a Username: </label>
<input type="text"
name="username"
id="username"
placeholder="4 <> 10"
pattern="[A-Za-z]{4,10}"
autofocus
required>
<button type="submit">Go </button>
</form>
如果你比較熟悉正則表達(dá)式的話就會(huì)注意到這個(gè)新模式： ［A-Za-z］{4，10}只接受大小寫字母。這個(gè)字符串最少必需有四個(gè)字符，最多是十個(gè)字符。
20. 檢測(cè)瀏覽器對(duì)屬性的支持
前面提到過并非所有的瀏覽器都支持這些屬性，那是否有什么方法能夠判斷瀏覽器是否能夠識(shí)別它們呢？這個(gè)問題問得非常好，這里給大家介紹兩種方式，第一個(gè)選擇是使用Modernizr來檢測(cè)，或者你也可以創(chuàng)建并剖析這些元素來看看瀏覽器都有什么能力。例如，在前面的例子里，如果我們要確定瀏覽器是否能夠執(zhí)行pattern屬性，就可以在頁(yè)面上添加JavaScript：
alert( 'pattern' in document.createElement('input') ) // boolean;
實(shí)際上，這是確定瀏覽器兼容性的一種非常常用的方法。jQuery庫(kù)利用了這個(gè)技巧。上面的代碼里，我們創(chuàng)建了一個(gè)新的輸入元素，并確認(rèn)pattern屬性是否能夠被識(shí)別。如果能夠識(shí)別的話，瀏覽器就支持這個(gè)功能，否則就不支持。
<script>
if (!'pattern' in document.createElement('input') ) {
// do client/server side validation
}
</script>
記住，這將需要依靠 JavaScript來實(shí)現(xiàn)！
21. Mark元素
<mark>元素的主要功能就是在頁(yè)面中高亮顯示那些需要在視覺上向用戶突出其重要性的文字。包裹在此標(biāo)簽里的字符串必須與用戶當(dāng)前的行為相關(guān)。例如，如果我在一些博客中搜索"Open your Mind" ，我可以使用在<mark>標(biāo)簽里使用JavaScript 來包裹每一次動(dòng)作。
<h3> Search Results </h3>
<p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>
22. 何時(shí)使用<div>
是否還需要使用<div>標(biāo)簽?zāi)?？?dāng)然需要。例如，如果你想在一個(gè)元素里將一段代碼包裹住，特別是為了內(nèi)容的定位，<div> 將會(huì)是非常理想的選擇。不過，如果不是上述情況而是要包裹博客文章、或者頁(yè)腳的鏈接列表，建議你分別使用 <article>和<nav>元素。
聯(lián)系客服
