必須知道的28個HTML5特性、技巧

c-xuan發表於2014-03-26
HTML
資訊科技瞬息萬變。如果你不關心這種變化，所掌握的技術很快就會被淘汰。所以，如果你對HTML5技術的變化感到很突然，就將這篇文章當做敲門磚吧。

1. New Doctype  你還在使用令人討厭的難記的XHTML文件型別宣告嗎？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
如果還在用，為什麼呢？如同Douglas Quaid所說，轉到新的HTML5這種文件型別吧，它會使你看起來更年輕。
    實際上，你當真知道XHTML的文件型別宣告在HTML5中不再是必須的嗎？然而現在在用並且舊的瀏覽器也需要這樣一種特殊的宣告。在標準模式下，不能識別這種文件型別宣告的瀏覽器將簡單地翻譯裡面包含的標籤。所以，不用擔心，去感受將憂慮拋入空氣中的輕鬆吧，去熱情擁抱HTML5的新文件型別宣告吧。

2.考慮一下下面為一張圖片所使用的標籤： 
  • 1.<img src="path/to/image" alt="About image" />
  •         2.<p>Image of Mars. </p>

非常不幸的是在包含圖片元素自身的一段標記中沒有任何簡單或者有含義的方法去結合圖片與它的說明文字。 HTML5採用了<figure>標籤修正了這個問題。現在標籤中包含了<figcaption>元素，我們就能夠將圖片和相關說明文字結合在一起。
  •   <figure>
  •     <img src="path/to/image" alt="About image" />
  •     <figcaption>
  •         <p>This is an image of something interesting. </p>
  •     </figcaption>
  •   </figure>

3、<small>的重定義
        不久以前，我使用<small>元素去建立與logo緊密相關的小標題。它是一個有用的直觀表現元素。然而，現在這種用法顯得不恰當。<small>元素已經被重定義了，更加適合去表現小字型。想象一下你的網頁頁尾的版權宣告，根據新的HTML5對這個元素的定義，<small>標籤更適合做這樣的事情。
        Small元素現在指的是”small print”。
4、Scripts 和 Links 不再用Types屬性
   你可能仍然向你的link和script標籤中新增type屬性。
  • <link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
  •           <script type="text/javascript" src="path/to/script.js"></script>

複製程式碼
現在不必了。這就意味著這兩個標籤分別指的就是樣式表和指令碼。如此，我們能夠一起去掉他們中的type屬性。
  • <link rel="stylesheet" href="path/to/stylesheet.css" />
  •         <script src="path/to/script.js"></script>

複製程式碼
5、用不用引號
        用不用引號成了一個問題，請記住，HTML5不是XHTML。如果你不願意，可以不必用引號把屬性值包裝起來。你不必去閉合你的元素。如果你覺得舒服，這種做法沒有任何錯誤。我覺得我自己贊同這樣做。
<p class=myClass id=someId> Start the reactor.  
        在這一問題上，仁者見仁智者見智。無論如何，如果你喜歡一種更結構化的文件，那麼就堅持用引號。
6、使你的內容可以編輯
新的瀏覽器擁有一個可以應用於元素中的漂亮的新屬性，這就是contenteditable。就像名字所表示的，它允許使用者去改變元素中包含的任何文字，包括它的子物件。這個屬性的用途很多，包括簡單的to-do list應用。
  • <!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>
  • <!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>

下面是把引號去掉的程式碼寫法
<ul contenteditable=true>  
7、郵件地址的輸入
有這樣一件事情：我們使用一個“email”型別去格式化輸入，就能夠告訴瀏覽器只允許有效郵件地址結構的字元輸入。HTML5能做到嗎？是的，內建的格式驗證器馬上實現了。當然，我們不能百分百的依賴於此，原因很明顯，在還不能解析email型別的舊瀏覽器中，他們將被簡單地當成普通文字框。
現在，我們不能依靠瀏覽器進行校驗，仍然要用伺服器/客戶端模式解決這個問題。
應該指出的是，現在所有的瀏覽器在對於他們是否支援某種元素和屬性的時候都不是十分確定。舉個例子，Opera似乎支援郵件地址驗證，僅僅需要指定name屬性。然而，它不支援我們將在下一條提到的placeholder屬性。
8、佔位符
以前，我們必須使用JavaScript來為文字框建立佔位符。當然，你可以初始化時給value屬性賦值。但是，一旦使用者刪除佔位的文字，這個輸入框就重新為空了。placeholder屬性彌補了這個問題。
  • <input name="email" type="email" placeholder="doug@givethesepeopleair.com" />

複製程式碼
現在不是所有瀏覽器版本都支援這個元素，但是它們一直在通過發行新版來提供支援，像Firefox和Opera現在不支援placeholder屬性，但是這樣用也沒有危害。
9、本地儲存
感謝本地儲存功能（不是HTML5官方釋出的，為了方便而加入的），我們能夠使瀏覽器“記住”我們的型別，即使瀏覽器被關閉或重新整理。
10、帶語義的Header和Footer
以前我們用<div id=”header”></div> ,即使被確定了id，divs也沒有語義。現在，HTML5中我們有了<header>和<footer>這兩個元素。上面的標籤可以被替換成：<header>  </header>
在專案中有多個header和footer是非常普遍的。要注意不要將這兩個元素與網站的“header”和“footer”混淆了。它們僅代表它們的容器。
11、更多的HTML5格式化特性
通過這個視訊，我們能夠了解更多有用的HTML5格式化特性
Subscribe to our YouTube page to watch all of the video tutorials! 
Internet Explorer and HTML5
12、IE瀏覽器與HTML5
不幸的是，為了解析新的HTML5元素，那個可惡的IE瀏覽器還有點麻煩。
為了確保新的HTMl5元素能夠正確的以塊級元素顯示，現階段必須使用下面的程式碼： 
  • header, footer, article, section, nav, menu, hgroup {
  •    display: block;
  • }

由於IE不知道這些元素，因此仍然會忽略這些格式，所以需要使用下面的程式碼解決這個問題： 
  • document.createElement("article");
  • document.createElement("footer");
  • document.createElement("header");
  • document.createElement("hgroup");
  • document.createElement("nav");
  • document.createElement("menu");
  • document.createElement("article");
  • document.createElement("footer");
  • document.createElement("header");
  • document.createElement("hgroup");
  • document.createElement("nav");
  • document.createElement("menu");

為了在開發的時候減少工作量，Remy Sharp建立了一個指令碼檔案，你可以使用下面的程式碼： 
  • <!--[if IE]>
  • <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  • <![endif]-->

13. hgroup 
想象一下網站的標題，網站名稱後面緊跟著一個副標題，我們分別用一個<h1>和<h2>標籤來標記。在HTML4中還沒有一種簡單的方法去描述兩者之間的語義關係。另外，當使用h2在頁面中顯示其它標題時，在層級方面問題就更多。而使用群組標題hgroup元素，我們可以將這些標題聚集在一起，而不影響文件的整個綱要。 
  • <header>
  •     <hgroup>
  •         <h1> Recall Fan Page </h1>
  •         <h2> Only for people who want the memory of a lifetime. </h2>
  •     </hgroup>
  • </header>

14、必填屬性
表單新加入一個屬性，就是require必填屬性。
根據你的編碼風格，你可以用下面兩種方法中的任何一個來宣告這個屬性： 
  • <input type=”text” name=”someInput” required>

或者用一個更結構化的： 
  • <input type="text" name="someInput" required="required">

使用上面的程式碼，並且瀏覽器支援這個屬性的話，如果這個輸入框為空則不能提交。這兒有個簡單的例子，我們也新增了placeholder這個屬性，因為這兩個屬性配合起來用時經常的事情。

如果輸入框為空白，並且表單被提交了，這個文字框就高亮顯示。

15、自動獲取焦點屬性
前面已經提到，HTML5新增了很多元素，以前用javas實現的功能現在用元素就可以簡單實現。在這裡，我們可以使用autofocus屬性使輸入欄位自動獲得焦點。 
  • <input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>

可以在程式碼中僅僅使用autofocus來標明本屬性，也可以使用autofocus=autofocus的形式。

16、聲音支援
我們不再一定要依賴第三方外掛才能使用聲音。HTML5現在提供<audio>元素。再也不用擔心那些外掛了。現如今，只有最新的瀏覽器才提供對HTML5聲音的支援。所以，在使用的時候採取恰當的相容措施很有必要。 
  • <audio autoplay="autoplay" controls="controls">
  •     <source src="file.ogg" />
  •     <source src="file.mp3" />
  •     <A href="http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/file.mp3">Download this file.</A>
  • </audio>

對於音訊格式，Mozilla 和 Webkit還沒有什麼進展。Firefox將關注.ogg型別的音訊，而Webkit將僅對普通mp3格式進行擴充套件。這就意味著，最起碼現在你應該使用兩個版本的音訊格式才能兼顧各種瀏覽器。
Safari在載入頁面時無法識別.ogg型別的音訊，會自動跳轉到mp3型別。但是要注意IE不支援這種操作，Opera10或更低版本僅支援.WAV格式的檔案。

17、視訊支援
就像<audio>元素，新瀏覽器也已經支援HTML5視訊了。事實上，YouTube剛剛宣佈他們為支援HTML5的瀏覽器做了新的HTML5技術的視訊。不幸的是，HTML標準沒有規定特定的視訊編碼，這就需要瀏覽器去決定是哪種格式了。Safari和Internet Explorer 9會支援H.264格式的視訊（Flash播放器也能夠播放），Firefox 和Opera堅持用開源的Theora 和 Vorbis格式。所以，在播放HTML5視訊時，你必須提供這兩種格式的codecs。 
  • <video controls preload>
  •     <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
  •     <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
  •     <p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>
  • </video>

Chrome能夠正確播放“ogg”和“mp4”格式編碼的視訊。
這兒有幾項需要注意的事情。
從技術上即講，沒有要求我們指定type屬性，但是，如果不指定的話，瀏覽器會自己去確定。就節省點頻寬，自己去宣告吧。
不是所有的瀏覽器支援HTML5視訊。為此我們可以提供一個下載連結，或者額外嵌入一個flash版本的視訊，這都無所謂，看你怎麼做了。
3.播放控制和預載入將在接下來的兩條探討。

18、視訊預載入
Preload屬性就像你猜的那樣。你首先應該決定什麼時候需要瀏覽器預載入視訊。預載入是很有必要的，如果訪問者讀取一個專門為播放視訊而做的頁面，你肯定會預載入視訊而為訪問者節省等待時間。通過設定preload=”preload”或者一個簡單的preload就可以使視訊被預載入。我比較喜歡後面的解決方案，因為它更精簡。 
  • <video preload>
  • <video preload>
  • <video preload controls>


19、播放控制
如果你的工作與這些技術密切相關，你可能已經知道了。如果你用上面的程式碼，視訊顯示的僅是像一幅圖片一樣，沒有任何控制而言。為了能夠解析播放控制功能，我們必須在video元素中指定controls屬性。
<video preload controls>
請注意的是每個瀏覽器對自己的播放器解析法都不同。（譯者：提醒我們多測試幾個瀏覽器啊）

20、正規表示式
曾幾何時，你自己草草寫了許多正規表示式來驗證一個特殊的文字框。感謝新的pattern屬性，我們能夠在我們的標記中直接插入一個正規表示式。 
  • <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>

如果你熟悉正規表示式，肯定知道這個表示式[A-Za-z]{4,10}僅接受最上層和最下層的字母。這個字串也必須包含最小四個字元，最多十個。
需要注意的是我們正在開始結合這些新的令人歎為觀止的屬性。
21、為屬性檢測支援
如果我們無法去檢測瀏覽器是否能解析這些屬性，那麼這些屬性還好嗎？恩，問得好，但是這兒有幾種方法來解決這個問題。我們來討論兩個。第一種選擇是利用優秀的Modernizr庫。另一個選擇，我們能夠建立和解析這些元素去確定什麼瀏覽器能夠解析。例如，在我們前一個例子中，如果我們想試驗瀏覽器能否實現pattern屬性，我們可以在頁面中加入一點JavaScript。 
  • alert( 'pattern' in document.createElement('input') ) // boolean;

實際上，這是一種檢測瀏覽器能力的流行方法。jQuery庫就是用了這個把戲。上面的程式碼，我們正在建立一個新的input元素，並且檢測pattern屬性是否被識別了。 
  • <script>
  • if (!'pattern' in document.createElement('input') ) {
  •     // do client/server side validation
  • }
  • </script>

時刻記住，上面的程式碼依賴於JavaScript。

22、Mark元素
將<mark>考慮為一個醒目的元素。包含在這個標記中的字串應該與使用者當前的行為有關。舉個例子，如果我在某個部落格中搜尋“Open your Mind”,就可以運用JavaScript將找到的每一處字元包裹起來。 
  • <h3> Search Results </h3>
  • <p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>

23、什麼時候使用<div>
有些人起初會對什麼時候用divs產生疑問。現在我們可以用headers，articles，sections和footers，那什麼時候用divs呢？當專案中沒有更好的元素可用的時候，就可以用divs了。
例如，如果為了給內容定位而想用wrapper元素包裹一個程式碼塊，用<div>標記更好些。然而，要是想包裹部落格文章、或者頁尾的連結列表，建議你分別使用 <article>和<nav>元素。

24、關於HTML5的這些討論直到2022年也未必能結束。很多人忽視這一點成為一個很大的錯誤。實際上，現在有一大把HTML5特性可以立即用到我們的專案中。簡單、清爽的程式碼永遠是一件好事情。在今天的視訊中，我將給你展示很多選擇。
Subscribe to our YouTube page to watch all of the video tutorials! 

25. What is Not HTML5
我們能夠原諒某些人認為JavaScript稍微改變一下就成了HTML5，甚至Apple也不謹慎地宣傳這個觀點。對於非開發者，他們不會在乎。因為這只是對新的web標準的簡單稱呼。然而對於我們來講，就需要明白哪些技術不是HTML5，儘管它們有相同的語義。
SVG：不是HTML5，它是五年前的技術了。
CSS3：不是HTML5. HTML5基於CSS。
Geolocation：不是HTML5.
Client Storage：不是HTML5.
Web Sockets：不是HTML5.

26. The Data Attribute
我們現在正式對所有的HTML元素提供自定義屬性的支援。然而，以前我們使用的方法是： 
  • <h1 id=someId customAttribute=value> Thank you, Tony. </h1>
  • <h1 id=someId customAttribute=value> Thank you, Tony. </h1>

這樣用的話，驗證器會出現問題。現在，我們在自定義屬性前面加上“data”後就可以正式使用這個方法。
HTML片段 
  • <div id="myDiv" data-custom-attr="My Value"> Bla Bla </div>
  • <div id="myDiv" data-custom-attr="My Value"> Bla Bla </div>

檢索自定義屬性的值 
  • var theDiv = document.getElementById('myDiv');
  • var attr = theDiv.getAttribute('data-custom-attr');
  • alert(attr); // My Val

它還可以用在CSS中。 
  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  •    <meta charset="utf-8">
  •    <title>Sort of Lame CSS Text Changing</title>
  • <style>
  • h1 { position: relative; }
  • h1:hover { color: transparent; }
  • h1:hover:after {
  •     content: attr(data-hover-response);
  •     color: black;
  •     position: absolute;
  •     left: 0;
  • }
  • </style>
  • </head>
  • <body>
  • <h1 data-hover-response="I Said Don't Touch Me!"> Don't Touch Me  </h1>
  • </body>
  • </html>

你可以到JSBIN上去看一下效果。

27、輸出元素
根據名字就能夠猜到，output元素是用來顯示某種計算結果的。例如，如果你想顯示滑鼠位置的座標，或者一些數字的和。
舉一個簡單的例子，用JavaScript求兩個數字的和，填充到一個空的output中。（譯者：下面的程式碼很簡單，我想連我都能看懂，就不必跟大家解釋了。） 
  • <form action="" method="get">
  •     <p>
  •         10 + 5 = <output name="sum"></output>
  •     </p>
  •     <button type="submit"> Calculate </button>
  • </form>
  • <script>
  • (function() {
  •     var f = document.forms[0];
  •     if ( typeof f['sum'] !== 'undefined' ) {
  •         f.addEventListener('submit', function(e) {
  •             f['sum'].value = 15;
  •             e.preventDefault();
  •         }, false);
  •     }
  •     else { alert('Your browser is not ready yet.'); }
  • })();
  • </script>
  • <form action="" method="get">
  •         <p>
  •                 10 + 5 = <output name="sum"></output>
  •         </p>
  •         <button type="submit"> Calculate </button>
  • </form>
  • <script>
  • (function() {
  •         var f = document.forms[0];
  •         if ( typeof f['sum'] !== 'undefined' ) {
  •                 f.addEventListener('submit', function(e) {
  •                         f['sum'].value = 15;
  •                         e.preventDefault();
  •                 }, false);
  •         }
  •         else { alert('Your browser is not ready yet.'); }
  • })();
  • </script>

要注意的是瀏覽器對output元素的支援仍然很弱。寫本文的時候，我也只是用Opera進行了測試。如果瀏覽器不能解析這個元素，上面的程式碼就會提示你。否則，提交之後會給名稱為“sum”的顯示框賦值15。

這個元素也能夠接受a作為一個屬性，顯示與這個顯示框相關的元素名稱，跟label的原理（方式）差不多。
28、建立帶範圍的滑動器輸入框
<input  type="range">
很顯然，它能夠接受min、max、step和value這些屬性。儘管好像只有Opera支援這種輸入方式，但是真正用起來的時候一定是蠻奇妙的。
為了馬上證明一下，我們建立一個標尺來允許使用者決定“Total Recall”是多麼“可怕”。我們不需要建立一個真實的滑動方法就可以非常簡單的實現這種效果。
Step 1: Mark-up 
首先建立 Mark-up 
  • <form method="post">
  •     <h1> Total Recall Awesomness Gauge </h1>
  •     <input type="range" name="range" min="0" max="10" step="1" value="">
  •     <output name="result">  </output>
  • </form>
  • <form method="post">
  •         <h1> Total Recall Awesomness Gauge </h1>
  •         <input type="range" name="range" min="0" max="10" step="1" value="">
  •         <output name="result">  </output>
  • </form>

上面的程式碼很簡單，接著往下看吧。
Step 2: CSS 
相比第一步，就是在滑動器的前後建立了為使用者指示最大、最小值。 
  • body {
  •     font-family: 'Myriad-Pro', 'myriad', helvetica, arial, sans-serif;
  •     text-align: center;
  • }
  • 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;
  • }
  • body {
  •         font-family: 'Myriad-Pro', 'myriad', helvetica, arial, sans-serif;
  •         text-align: center;
  • }
  • 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;
  • }

Step 3: The JavaScript 
最後一步： 
先確定當前使用的瀏覽器是否能夠解析range input，如果不能的話，將告知使用者這個示例不能展示。
當使用者滑動的時候，能動態的指示數值。
偵聽使用者滑鼠離開滑動器（事件），將獲取的值儲存到本地。
當使用者下次重新整理頁面，滑動器和輸出框將自動顯示上次選擇的值。 
  • (function() {
  •     var f = document.forms[0],
  •         range = f['range'],
  •         result = f['result'],
  •         cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5;
  •     // Determine if browser is one of the cool kids that
  •     // recognizes the range input.
  •     var o = document.createElement('input');
  •     o.type = 'range';
  •     if ( o.type === 'text' ) alert('Sorry. Your browser is not cool enough yet. Try the latest Opera.');
  •     // Set initial values of the input and ouput elements to
  •     // either what's stored locally, or the number 5.
  •     range.value = cachedRangeValue;
  •     result.value = cachedRangeValue;
  •     // When the user makes a selection, update local storage.
  •     range.addEventListener("mouseup", function() {
  •         alert("The selected value was " + range.value + ". I am using local storage to remember the value. Refresh and check on a modern browser.");
  •         localStorage ? (localStorage.rangeValue = range.value) : alert("Save data to database or something instead.");
  •     }, false);
  •     // Display chosen value when sliding.
  •     range.addEventListener("change", function() {
  •         result.value = range.value;
  •     }, false);
  • })();
  • (function() {
  •         var f = document.forms[0],
  •                 range = f['range'],
  •                 result = f['result'],
  •                 cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5;
  •         // Determine if browser is one of the cool kids that
  •         // recognizes the range input.
  •         var o = document.createElement('input');
  •         o.type = 'range';
  •         if ( o.type === 'text' ) alert('Sorry. Your browser is not cool enough yet. Try the latest Opera.');
  •         // Set initial values of the input and ouput elements to
  •         // either what's stored locally, or the number 5.
  •         range.value = cachedRangeValue;
  •         result.value = cachedRangeValue;
  •         // When the user makes a selection, update local storage.
  •         range.addEventListener("mouseup", function() {
  •                 alert("The selected value was " + range.value + ". I am using local storage to remember the value. Refresh and check on a modern browser.");
  •                 localStorage ? (localStorage.rangeValue = range.value) : alert("Save data to database or something instead.");
  •         }, false);
  •         // Display chosen value when sliding.
  •         range.addEventListener("change", function() {
  •                 result.value = range.value;
  •         }, false);
  • })();

HTML5準備好了嗎？也許還有點困難。但是如果有人準備玩HTML5的話，可以去下載原始碼，用Opera瀏覽器去試驗吧！
很感謝各位花費時間來看這篇文章，雖然文章介紹了28條，但可能僅僅只是HTML5的表面，希望對初學者有所幫助吧。

相關文章