HTML5網(wǎng)頁(yè)制作的22個(gè)實(shí)例說(shuō)明
2024-01-23 分類(lèi)： 網(wǎng)站建設(shè)
聯(lián)網(wǎng)科技發(fā)展的速度真可謂驚人的快，一個(gè)稍不留神，你就可能無(wú)法跟上它的步伐。HTML5的變化和更新也壓倒不少人，這篇文章將向大家介紹一些最基本也非常必要的HTML技巧。
1. 新的文檔類(lèi)型（Doctype）
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
你還在使用上面這個(gè)既麻煩又難記的XHTML文檔類(lèi)型嗎？ 如果還是這樣的話(huà)，現(xiàn)在該切換到新的HTML5文檔類(lèi)型了。
<!DOCTYPE html>
只要這么簡(jiǎn)單的15個(gè)字符就可以了。（注意：你的doctype的申明需要出現(xiàn)在你html文件的第一行。） 2. 圖形（Figure）元素 考慮用下面的代碼來(lái)標(biāo)記圖片？
<mg src=”path/to/image” alt=”About image” /> <p>Image of Mars. </p>
很不幸，它不能用簡(jiǎn)單、富有語(yǔ)義關(guān)聯(lián)的方式與圖形的標(biāo)題關(guān)聯(lián)，因?yàn)樗鼉H僅是用段落標(biāo)記以及圖片元素包裹著，而 HTML5通過(guò)引進(jìn)<figure>元素，改進(jìn)了這一點(diǎn)。當(dāng)結(jié)合 <figcaption> 元素使用時(shí)，我們就可以將圖形標(biāo)題與圖形配對(duì)起來(lái)。代碼如下：
<figure> <img src=”path/to/image” alt=”About image” /> <figcaption> <p>This is an image of something interesting. </p> </figcaption> </figure>
3. 重新定義<small> 原來(lái)你可以利用<small>元素來(lái)創(chuàng)建與logo密切相關(guān)的副標(biāo)題。不過(guò)，現(xiàn)在HTML5修改了這個(gè)用法，<small>元素被重新定義了，或者更恰當(dāng)?shù)卣f(shuō)，它現(xiàn)在用來(lái)代表小字或其他邊注（如，網(wǎng)站底部的版權(quán)聲明）。 4. 不再需要腳本、鏈接類(lèi)型 很可能你仍然像下面的代碼一樣給你的鏈接和腳本標(biāo)簽添加類(lèi)型的屬性。
<link rel=”stylesheet” href=”path/to/stylesheet.css” type=”text/css” /> <script type=”text/javascript” src=”path/to/script.js”></script>
在HTML5中，這已經(jīng)不再需要了。 意味著說(shuō)這兩個(gè)標(biāo)簽分別代表著樣式和腳本。因此，我們可以將它們的類(lèi)型屬性都刪除掉。代碼如下：
<link rel=”stylesheet” href=”path/to/stylesheet.css” /> <script src=”path/to/script.js”></script>
5. 使用還是不使用引號(hào) 記住，HTML5與XHTML不同，如果你不喜歡的話(huà)你不必用引號(hào)將屬性包裹起來(lái)。不過(guò)，要是你覺(jué)得用引號(hào)會(huì)讓你覺(jué)得更加舒服的話(huà)，當(dāng)然也不會(huì)有任何問(wèn)題。
<p id=someId> Start the reactor.
6. 使你的內(nèi)容可編輯 HTML5其中一個(gè)非常強(qiáng)大的功能就是“contenteditable”，顧名思義它將允許用戶(hù)編輯元素（包括他的子元素）內(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>
或者，按照第五條技巧所說(shuō)的，你也可以將第九行的代碼寫(xiě)成這樣（不用引號(hào)）：
<ul contenteditable=true>
7. 電子郵件輸入 如果我們應(yīng)用“電子郵件”類(lèi)型來(lái)指定輸入的形式，我們可以命令瀏覽器只允許符合有效電子郵件地址結(jié)構(gòu)的字符串輸入。雖然說(shuō)內(nèi)置的表單驗(yàn)證很快就會(huì)到來(lái)，但是我們也不能完全依靠這個(gè)。比較舊的瀏覽器不理解這種“電子郵件”類(lèi)型，它們只會(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>
在說(shuō)到瀏覽器所支持和不支持的元素以及屬性時(shí)，你必需知道當(dāng)前所有瀏覽器都不是那么可靠。例如，Opera只有在你指定name屬性時(shí)才支持電子郵件驗(yàn)證。不過(guò)，它不支持占位符屬性（下面即將要講到的）。最后，雖然你可以使用這種形式的驗(yàn)證，不過(guò)不要過(guò)分依賴(lài)它。
8. 占位符 此前，我們需要使用JavaScript來(lái)創(chuàng)建文本框的占位符。你可以初步設(shè)定值屬性來(lái)看是否合適，但是只要用戶(hù)刪除了該文本，輸入的內(nèi)容就會(huì)再次變成空的。占位符屬性有效地彌補(bǔ)了這一點(diǎn)。
<input name=”email” type=”email” placeholder=”doug@givethesepeopleair.com” />
9. 本地存儲(chǔ) 多虧了HTML5的 local storage ，我們可以讓高級(jí)瀏覽器“記住”我們輸入的內(nèi)容，就算后來(lái)瀏覽器關(guān)閉或者重新刷新也不受影響。盡管不是所有的瀏覽器都支持，但是最關(guān)鍵的 Internet Explorer 8, Safari 4, Firefox 3.5.都支持。 10. 語(yǔ)義性的Header和Footer
<div id=”header”> … </div> <div id=”footer”> … </div>
上面的代碼一去不復(fù)返。Divs從根本上來(lái)說(shuō)并沒(méi)有任何語(yǔ)義結(jié)構(gòu)，即使應(yīng)用上了ID還是如此。而在HTML5中，我們可以使用<header>和<footer>元素，上面的代碼就可以替換為：
<header> … </header> <footer> … </footer>
不過(guò)注意不要將這兩個(gè)元素與網(wǎng)站的頭部和腳部混淆起來(lái)。它們只是代表它們的容器。 11. IE和HTML5 IE理解新的HTML5元素需要費(fèi)一定的神，為了確保新的HTML5元素能夠以塊級(jí)元素正確顯示，有必要將它們用下面的代碼定義風(fēng)格：
header, footer, article, section, nav, menu, hgroup { display: block; }
就算如此，IE還是不知道這些元素究竟是什么，因而會(huì)無(wú)視這些格式，還需要用到下面的代碼來(lái)解決這個(gè)問(wèn)題：
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)站有名稱(chēng)、副標(biāo)題分別用<h1>、<h2>標(biāo)簽來(lái)標(biāo)記，在HTML4中還沒(méi)有一種能夠?qū)烧咧g的關(guān)系用很好的語(yǔ)義關(guān)系來(lái)描述的方法，此外，當(dāng)使用h2在頁(yè)面中顯示其它標(biāo)題時(shí)，在層級(jí)方面問(wèn)題就更多。而使用群組標(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ù)自己寫(xiě)代碼的偏好，用下面兩種不同方式來(lái)聲明這個(gè)屬性：
<input type=”text” name=”someInput” required>
或者，更嚴(yán)謹(jǐn)：
<input type=”text” name=”someInput” required=”required”>
上面兩行代碼都行得通。用了這行代碼之后，并且瀏覽器支持required屬性的話(huà)， 輸入空白的表單就不會(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>
如果輸入是空的，表單將無(wú)法提交，突出顯示文本框。 14. 自動(dòng)對(duì)焦（Autofocus）屬性 同樣地，有了HTML5就不再需要用JavaScript方案來(lái)解決自動(dòng)對(duì)焦的問(wèn)題。如果某個(gè)輸入應(yīng)該被”選擇“或被聚焦，我們現(xiàn)在可以使用HTML的自動(dòng)對(duì)焦autofocus屬性。
<input type=”text” name=”someInput” placeholder=”Douglas Quaid” required autofocus>
15. 音頻支持 我們?cè)僖膊恍枰揽康谌讲寮?lái)提供音頻了。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>
說(shuō)道音頻格式，Mozilla和Webkit都還沒(méi)有完全支持。Firefox希望看到一個(gè) .ogg文件，Webkit瀏覽器只支持最常見(jiàn)的.mp3擴(kuò)展名。這意味著說(shuō)，至少目前為止，你應(yīng)該創(chuàng)建兩個(gè)版本的音頻。當(dāng)Safari加載頁(yè)面時(shí)，它認(rèn)不出.ogg格式的文件，將會(huì)跳過(guò)并移到mp3版本上。請(qǐng)注意，IE并不支持它，Opera 10 或更低的版本只支持 .wav文件。 16. 視頻支持 音頻元素 <audio>非常像，在新的瀏覽器上也支持HTML5視頻。事實(shí)上，就在最近YouTube宣布了一項(xiàng)新的 HTML5視頻嵌入?？上У氖?，由于HTML5說(shuō)明文件并沒(méi)有為視頻指出某個(gè)特定的編碼器，所以都主要取決于瀏覽器來(lái)決定了。盡管Safari和IE9可以支持H.264 格式的視頻，F(xiàn)irefox 和Opera卻仍然堅(jiān)持Theora 和Vorbis格式。因此，顯示HTML5視頻的時(shí)候，你必須提供兩種格式。 17. 視頻預(yù)先加載 你首先需要決定是否需要瀏覽器來(lái)預(yù)先加載視頻。是否有需要？假設(shè)，一個(gè)訪(fǎng)客進(jìn)入某個(gè)專(zhuān)門(mén)用來(lái)顯示視頻的頁(yè)面，那么就非常有必要預(yù)先加載這個(gè)頁(yè)面節(jié)省一點(diǎn)等待的時(shí)間。你可以通過(guò)設(shè)置 preload=”preload”來(lái)預(yù)先加載視頻，或者之間添加preload也可以。
<video preload> … </video >
18. 顯示控件 你可能已經(jīng)注意到，用上面的代碼的話(huà)，視頻將只會(huì)顯示成一個(gè)圖片，而沒(méi)有任何可控制的元件。為了獲取這些播放控件，我們必需在視頻元素里指定這些控件屬性。
<video preload controls> … </video >
19. 正則表達(dá)式 對(duì)虧了新模式的屬性，我們可以直接在代碼中插入一個(gè)正則表達(dá)式。
<form method=post action=”"> <label for=”username”>create a username: </label> <input id=”username” type=”text” name=”username” placeholder=”4 <> 10″ required=”required” autofocus=”autofocus” pattern=”[A-Za-z]{4,10}”> <button type=”submit”>Go </button> </form>
如果你比較熟悉正則表達(dá)式的話(huà)就會(huì)注意到這個(gè)新模式: [A-Za-z]{4,10}只接受大小寫(xiě)字母。這個(gè)字符串最少必需有四個(gè)字符，最多是十個(gè)字符。 20. 檢測(cè)瀏覽器對(duì)屬性的支持 前面提到過(guò)并非所有的瀏覽器都支持這些屬性，那是否有什么方法能夠判斷瀏覽器是否能夠識(shí)別它們呢？這個(gè)問(wèn)題問(wèn)得非常好，這里給大家介紹兩種方式，第一個(gè)選擇是使用Modernizr來(lái)檢測(cè)，或者你也可以創(chuàng)建并剖析這些元素來(lái)看看瀏覽器都有什么能力。例如，在前面的例子里，如果我們要確定瀏覽器是否能夠執(zhí)行pattern屬性，就可以在頁(yè)面上添加JavaScript:
alert( ’pattern’ in document.createElement(‘input’) ) // boolean;
實(shí)際上，這是確定瀏覽器兼容性的一種非常常用的方法。jQuery庫(kù)利用了這個(gè)技巧。上面的代碼里，我們創(chuàng)建了一個(gè)新的輸入元素，并確認(rèn)pattern屬性是否能夠被識(shí)別。如果能夠識(shí)別的話(huà)，瀏覽器就支持這個(gè)功能，否則就不支持。
<script> if (!’pattern’ in document.createElement(‘input’) ) { // do client/server side validation } </script>
記住，這將需要依靠 JavaScript來(lái)實(shí)現(xiàn)！ 21. Mark元素 <mark> 元素的主要功能就是在頁(yè)面中高亮顯示那些需要在視覺(jué)上向用戶(hù)突出其重要性的文字。包裹在此標(biāo)簽里的字符串必須與用戶(hù)當(dāng)前的行為相關(guān)。例如，如果我在一些博客中搜索“Open your Mind” ，我可以使用在<mark>標(biāo)簽里使用JavaScript 來(lái)包裹每一次動(dòng)作。
<h3> search results </h3> <h6> They were interrupted, just after Quato said, <mark>”O(jiān)pen your Mind”</mark>. </h6>
22. 何時(shí)使用div 是否還需要使用<div>標(biāo)簽?zāi)?？?dāng)然需要。例如，如果你想在一個(gè)元素里將一段代碼包裹住，特別是為了內(nèi)容的定位，<div> 將會(huì)是非常理想的選擇。不過(guò)，如果不是上述情況而是要包裹博客文章、或者頁(yè)腳的鏈接列表，建議你分別使用 <article>和<nav>元素。
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
你還在使用上面這個(gè)既麻煩又難記的XHTML文檔類(lèi)型嗎？ 如果還是這樣的話(huà)，現(xiàn)在該切換到新的HTML5文檔類(lèi)型了。
<!DOCTYPE html>
只要這么簡(jiǎn)單的15個(gè)字符就可以了。（注意：你的doctype的申明需要出現(xiàn)在你html文件的第一行。） 2. 圖形（Figure）元素 考慮用下面的代碼來(lái)標(biāo)記圖片？
<mg src=”path/to/image” alt=”About image” /> <p>Image of Mars. </p>
很不幸，它不能用簡(jiǎn)單、富有語(yǔ)義關(guān)聯(lián)的方式與圖形的標(biāo)題關(guān)聯(lián)，因?yàn)樗鼉H僅是用段落標(biāo)記以及圖片元素包裹著，而 HTML5通過(guò)引進(jìn)<figure>元素，改進(jìn)了這一點(diǎn)。當(dāng)結(jié)合 <figcaption> 元素使用時(shí)，我們就可以將圖形標(biāo)題與圖形配對(duì)起來(lái)。代碼如下：
<figure> <img src=”path/to/image” alt=”About image” /> <figcaption> <p>This is an image of something interesting. </p> </figcaption> </figure>
3. 重新定義<small> 原來(lái)你可以利用<small>元素來(lái)創(chuàng)建與logo密切相關(guān)的副標(biāo)題。不過(guò)，現(xiàn)在HTML5修改了這個(gè)用法，<small>元素被重新定義了，或者更恰當(dāng)?shù)卣f(shuō)，它現(xiàn)在用來(lái)代表小字或其他邊注（如，網(wǎng)站底部的版權(quán)聲明）。 4. 不再需要腳本、鏈接類(lèi)型 很可能你仍然像下面的代碼一樣給你的鏈接和腳本標(biāo)簽添加類(lèi)型的屬性。
<link rel=”stylesheet” href=”path/to/stylesheet.css” type=”text/css” /> <script type=”text/javascript” src=”path/to/script.js”></script>
在HTML5中，這已經(jīng)不再需要了。 意味著說(shuō)這兩個(gè)標(biāo)簽分別代表著樣式和腳本。因此，我們可以將它們的類(lèi)型屬性都刪除掉。代碼如下：
<link rel=”stylesheet” href=”path/to/stylesheet.css” /> <script src=”path/to/script.js”></script>
5. 使用還是不使用引號(hào) 記住，HTML5與XHTML不同，如果你不喜歡的話(huà)你不必用引號(hào)將屬性包裹起來(lái)。不過(guò)，要是你覺(jué)得用引號(hào)會(huì)讓你覺(jué)得更加舒服的話(huà)，當(dāng)然也不會(huì)有任何問(wèn)題。
<p id=someId> Start the reactor.
6. 使你的內(nèi)容可編輯 HTML5其中一個(gè)非常強(qiáng)大的功能就是“contenteditable”，顧名思義它將允許用戶(hù)編輯元素（包括他的子元素）內(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>
或者，按照第五條技巧所說(shuō)的，你也可以將第九行的代碼寫(xiě)成這樣（不用引號(hào)）：
<ul contenteditable=true>
7. 電子郵件輸入 如果我們應(yīng)用“電子郵件”類(lèi)型來(lái)指定輸入的形式，我們可以命令瀏覽器只允許符合有效電子郵件地址結(jié)構(gòu)的字符串輸入。雖然說(shuō)內(nèi)置的表單驗(yàn)證很快就會(huì)到來(lái)，但是我們也不能完全依靠這個(gè)。比較舊的瀏覽器不理解這種“電子郵件”類(lèi)型，它們只會(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>
在說(shuō)到瀏覽器所支持和不支持的元素以及屬性時(shí)，你必需知道當(dāng)前所有瀏覽器都不是那么可靠。例如，Opera只有在你指定name屬性時(shí)才支持電子郵件驗(yàn)證。不過(guò)，它不支持占位符屬性（下面即將要講到的）。最后，雖然你可以使用這種形式的驗(yàn)證，不過(guò)不要過(guò)分依賴(lài)它。
8. 占位符 此前，我們需要使用JavaScript來(lái)創(chuàng)建文本框的占位符。你可以初步設(shè)定值屬性來(lái)看是否合適，但是只要用戶(hù)刪除了該文本，輸入的內(nèi)容就會(huì)再次變成空的。占位符屬性有效地彌補(bǔ)了這一點(diǎn)。
<input name=”email” type=”email” placeholder=”doug@givethesepeopleair.com” />
9. 本地存儲(chǔ) 多虧了HTML5的 local storage ，我們可以讓高級(jí)瀏覽器“記住”我們輸入的內(nèi)容，就算后來(lái)瀏覽器關(guān)閉或者重新刷新也不受影響。盡管不是所有的瀏覽器都支持，但是最關(guān)鍵的 Internet Explorer 8, Safari 4, Firefox 3.5.都支持。 10. 語(yǔ)義性的Header和Footer
<div id=”header”> … </div> <div id=”footer”> … </div>
上面的代碼一去不復(fù)返。Divs從根本上來(lái)說(shuō)并沒(méi)有任何語(yǔ)義結(jié)構(gòu)，即使應(yīng)用上了ID還是如此。而在HTML5中，我們可以使用<header>和<footer>元素，上面的代碼就可以替換為：
<header> … </header> <footer> … </footer>
不過(guò)注意不要將這兩個(gè)元素與網(wǎng)站的頭部和腳部混淆起來(lái)。它們只是代表它們的容器。 11. IE和HTML5 IE理解新的HTML5元素需要費(fèi)一定的神，為了確保新的HTML5元素能夠以塊級(jí)元素正確顯示，有必要將它們用下面的代碼定義風(fēng)格：
header, footer, article, section, nav, menu, hgroup { display: block; }
就算如此，IE還是不知道這些元素究竟是什么，因而會(huì)無(wú)視這些格式，還需要用到下面的代碼來(lái)解決這個(gè)問(wèn)題：
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)站有名稱(chēng)、副標(biāo)題分別用<h1>、<h2>標(biāo)簽來(lái)標(biāo)記，在HTML4中還沒(méi)有一種能夠?qū)烧咧g的關(guān)系用很好的語(yǔ)義關(guān)系來(lái)描述的方法，此外，當(dāng)使用h2在頁(yè)面中顯示其它標(biāo)題時(shí)，在層級(jí)方面問(wèn)題就更多。而使用群組標(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ù)自己寫(xiě)代碼的偏好，用下面兩種不同方式來(lái)聲明這個(gè)屬性：
<input type=”text” name=”someInput” required>
或者，更嚴(yán)謹(jǐn)：
<input type=”text” name=”someInput” required=”required”>
上面兩行代碼都行得通。用了這行代碼之后，并且瀏覽器支持required屬性的話(huà)， 輸入空白的表單就不會(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>
如果輸入是空的，表單將無(wú)法提交，突出顯示文本框。 14. 自動(dòng)對(duì)焦（Autofocus）屬性 同樣地，有了HTML5就不再需要用JavaScript方案來(lái)解決自動(dòng)對(duì)焦的問(wèn)題。如果某個(gè)輸入應(yīng)該被”選擇“或被聚焦，我們現(xiàn)在可以使用HTML的自動(dòng)對(duì)焦autofocus屬性。
<input type=”text” name=”someInput” placeholder=”Douglas Quaid” required autofocus>
15. 音頻支持 我們?cè)僖膊恍枰揽康谌讲寮?lái)提供音頻了。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>
說(shuō)道音頻格式，Mozilla和Webkit都還沒(méi)有完全支持。Firefox希望看到一個(gè) .ogg文件，Webkit瀏覽器只支持最常見(jiàn)的.mp3擴(kuò)展名。這意味著說(shuō)，至少目前為止，你應(yīng)該創(chuàng)建兩個(gè)版本的音頻。當(dāng)Safari加載頁(yè)面時(shí)，它認(rèn)不出.ogg格式的文件，將會(huì)跳過(guò)并移到mp3版本上。請(qǐng)注意，IE并不支持它，Opera 10 或更低的版本只支持 .wav文件。 16. 視頻支持 音頻元素 <audio>非常像，在新的瀏覽器上也支持HTML5視頻。事實(shí)上，就在最近YouTube宣布了一項(xiàng)新的 HTML5視頻嵌入?？上У氖?，由于HTML5說(shuō)明文件并沒(méi)有為視頻指出某個(gè)特定的編碼器，所以都主要取決于瀏覽器來(lái)決定了。盡管Safari和IE9可以支持H.264 格式的視頻，F(xiàn)irefox 和Opera卻仍然堅(jiān)持Theora 和Vorbis格式。因此，顯示HTML5視頻的時(shí)候，你必須提供兩種格式。 17. 視頻預(yù)先加載 你首先需要決定是否需要瀏覽器來(lái)預(yù)先加載視頻。是否有需要？假設(shè)，一個(gè)訪(fǎng)客進(jìn)入某個(gè)專(zhuān)門(mén)用來(lái)顯示視頻的頁(yè)面，那么就非常有必要預(yù)先加載這個(gè)頁(yè)面節(jié)省一點(diǎn)等待的時(shí)間。你可以通過(guò)設(shè)置 preload=”preload”來(lái)預(yù)先加載視頻，或者之間添加preload也可以。
<video preload> … </video >
18. 顯示控件 你可能已經(jīng)注意到，用上面的代碼的話(huà)，視頻將只會(huì)顯示成一個(gè)圖片，而沒(méi)有任何可控制的元件。為了獲取這些播放控件，我們必需在視頻元素里指定這些控件屬性。
<video preload controls> … </video >
19. 正則表達(dá)式 對(duì)虧了新模式的屬性，我們可以直接在代碼中插入一個(gè)正則表達(dá)式。
<form method=post action=”"> <label for=”username”>create a username: </label> <input id=”username” type=”text” name=”username” placeholder=”4 <> 10″ required=”required” autofocus=”autofocus” pattern=”[A-Za-z]{4,10}”> <button type=”submit”>Go </button> </form>
如果你比較熟悉正則表達(dá)式的話(huà)就會(huì)注意到這個(gè)新模式: [A-Za-z]{4,10}只接受大小寫(xiě)字母。這個(gè)字符串最少必需有四個(gè)字符，最多是十個(gè)字符。 20. 檢測(cè)瀏覽器對(duì)屬性的支持 前面提到過(guò)并非所有的瀏覽器都支持這些屬性，那是否有什么方法能夠判斷瀏覽器是否能夠識(shí)別它們呢？這個(gè)問(wèn)題問(wèn)得非常好，這里給大家介紹兩種方式，第一個(gè)選擇是使用Modernizr來(lái)檢測(cè)，或者你也可以創(chuàng)建并剖析這些元素來(lái)看看瀏覽器都有什么能力。例如，在前面的例子里，如果我們要確定瀏覽器是否能夠執(zhí)行pattern屬性，就可以在頁(yè)面上添加JavaScript:
alert( ’pattern’ in document.createElement(‘input’) ) // boolean;
實(shí)際上，這是確定瀏覽器兼容性的一種非常常用的方法。jQuery庫(kù)利用了這個(gè)技巧。上面的代碼里，我們創(chuàng)建了一個(gè)新的輸入元素，并確認(rèn)pattern屬性是否能夠被識(shí)別。如果能夠識(shí)別的話(huà)，瀏覽器就支持這個(gè)功能，否則就不支持。
<script> if (!’pattern’ in document.createElement(‘input’) ) { // do client/server side validation } </script>
記住，這將需要依靠 JavaScript來(lái)實(shí)現(xiàn)！ 21. Mark元素 <mark> 元素的主要功能就是在頁(yè)面中高亮顯示那些需要在視覺(jué)上向用戶(hù)突出其重要性的文字。包裹在此標(biāo)簽里的字符串必須與用戶(hù)當(dāng)前的行為相關(guān)。例如，如果我在一些博客中搜索“Open your Mind” ，我可以使用在<mark>標(biāo)簽里使用JavaScript 來(lái)包裹每一次動(dòng)作。
<h3> search results </h3> <h6> They were interrupted, just after Quato said, <mark>”O(jiān)pen your Mind”</mark>. </h6>
22. 何時(shí)使用div 是否還需要使用<div>標(biāo)簽?zāi)?？?dāng)然需要。例如，如果你想在一個(gè)元素里將一段代碼包裹住，特別是為了內(nèi)容的定位，<div> 將會(huì)是非常理想的選擇。不過(guò)，如果不是上述情況而是要包裹博客文章、或者頁(yè)腳的鏈接列表，建議你分別使用 <article>和<nav>元素。
當(dāng)前名稱(chēng)：HTML5網(wǎng)頁(yè)制作的22個(gè)實(shí)例說(shuō)明
當(dāng)前URL：http://m.rwnh.cn/news7/315007.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、微信小程序、關(guān)鍵詞優(yōu)化、標(biāo)簽優(yōu)化、服務(wù)器托管
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 如何成為一名高效的網(wǎng)絡(luò)營(yíng)銷(xiāo)人 2024-01-23
- 網(wǎng)絡(luò)推廣：在交換友情鏈接時(shí)應(yīng)該注意哪些問(wèn)題? 2024-01-23
- 虛擬專(zhuān)用服務(wù)器托管是什么意思？基于VPS托管的用途 2024-01-23
- 廈門(mén)外貿(mào)網(wǎng)站建設(shè)有限網(wǎng)絡(luò)公司 2024-01-23
- 果洛網(wǎng)站制作公司：這樣的網(wǎng)站更容易吸引潛在用戶(hù) 2024-01-23
- 站點(diǎn)究竟該如何優(yōu)化呢？ 2024-01-23
- 分享成都企業(yè)建站關(guān)于網(wǎng)頁(yè)制作需要遵循的四大原則！ 2024-01-23
- 網(wǎng)站制作時(shí)需要準(zhǔn)備哪些資料？ 2024-01-23
- 成都網(wǎng)站推廣告訴你好“馬”要吃回頭草 2024-01-23
- 聽(tīng)成都app開(kāi)發(fā)公司說(shuō)為什么要開(kāi)發(fā)智能門(mén)禁app?智能門(mén)禁APP開(kāi)發(fā)有哪些優(yōu)勢(shì)? 2024-01-23
- 網(wǎng)站制作完成為什么需要更新 2024-01-23
- 什么是AIOps？為什么選擇AIOps？ 2024-01-23
- 企業(yè)成都網(wǎng)站建設(shè)要點(diǎn)是什么？實(shí)現(xiàn)客戶(hù)不請(qǐng)自來(lái) 2024-01-23
- 了解從美國(guó)服務(wù)器虛擬化中受益的七個(gè)方式 2024-01-23
- 成都溫江網(wǎng)站建設(shè)哪家公司好，網(wǎng)站建設(shè)公司怎么找？ 2024-01-23
- 成都小程序需要面臨的問(wèn)題 2024-01-23
- 合理的網(wǎng)站優(yōu)化居然有這么多的講究 2024-01-23
- 抖音代運(yùn)營(yíng)的這些特點(diǎn)你知道了嗎 2024-01-23
- 深圳網(wǎng)站制作，網(wǎng)站建設(shè)如何做？ 2024-01-23