二十八個 HTML5 特性與技巧

時間 2019-11-16

原文原文鏈接

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.考慮一下下面爲一張圖片所使用的標籤：
<img src="path/to/image" alt="About image" />
<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>

三、<small>的重定義
不久之前，我使用<small>元素去創建與logo緊密相關的小標題。它是一個有用的直觀表現元素。然而，如今這種用法顯得不恰當。<small>元素已經被重定義了，更加適合去表現小字體。想象一下你的網頁頁腳的版權聲明，根據新的HTML5對這個元素的定義，<small>標籤更適合作這樣的事情。Small元素如今指的是」small print」。

四、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>

五、用不用引號
用不用引號成了一個問題，請記住，HTML5不是XHTML。若是你不肯意，能夠沒必要用引號把屬性值包裝起來。你沒必要去閉合你的元素。若是你以爲舒服，這種作法沒有任何錯誤。我以爲我本身贊同這樣作。
<p class="myClass" id=someId> Start the reactor.
在這一問題上，仁者見仁智者見智。不管如何，若是你喜歡一種更結構化的文檔，那麼就堅持用引號。

六、使你的內容能夠編輯
新的瀏覽器擁有一個能夠應用於元素中的漂亮的新屬性，這就是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>
下面是把引號去掉的代碼寫法<ul contenteditable=true>

七、郵件地址的輸入
有這樣一件事情：咱們使用一個「email」類型去格式化輸入，就可以告訴瀏覽器只容許有效郵件地址結構的字符輸入。HTML5能作到嗎？是的，內置的格式驗證器立刻實現了。固然，咱們不能百分百的依賴於此，緣由很明顯，在還不能解析email類型的舊瀏覽器中，他們將被簡單地當成普通文本框。如今，咱們不能依靠瀏覽器進行校驗，仍然要用服務器/客戶端模式解決這個問題。應該指出的是，如今全部的瀏覽器在對於他們是否支持某種元素和屬性的時候都不是十分肯定。舉個例子，Opera彷佛支持郵件地址驗證，僅僅須要指定name屬性。然而，它不支持咱們將在下一條提到的placeholder屬性。

八、佔位符
之前，咱們必須使用JavaScript來爲文字框創建佔位符。固然，你能夠初始化時給value屬性賦值。可是，一旦用戶刪除佔位的文字，這個輸入框就從新爲空了。placeholder屬性彌補了這個問題。
<input name="email" type="email" placeholder="doug@givethesepeopleair.com" />
如今不是全部瀏覽器版本都支持這個元素，可是它們一直在經過發行新版來提供支持，像Firefox和Opera如今不支持placeholder屬性，可是這樣用也沒有危害。

九、本地存儲
感謝本地存儲功能（不是HTML5官方發佈的，爲了方便而加入的），咱們可以使瀏覽器「記住」咱們的類型，即便瀏覽器被關閉或刷新。

十、帶語義的Header和Footer
之前咱們用<div id=」header」></div> ,即便被肯定了id，divs也沒有語義。如今，HTML5中咱們有了<header>和<footer>這兩個元素。上面的標籤能夠被替換成：<header></header>
在項目中有多個header和footer是很是廣泛的。要注意不要將這兩個元素與網站的「header」和「footer」混淆了。它們僅表明它們的容器。

十一、更多的HTML5格式化特性
經過這個視頻，咱們可以瞭解更多有用的HTML5格式化特性：Subscribe to our YouTube page to watch all of the video tutorials!

十二、IE瀏覽器與HTML5
不幸的是，爲了解析新的HTML5元素，那個可惡的IE瀏覽器還有點麻煩。
爲了確保新的HTMl5元素可以正確的以塊級元素顯示，現階段必須使用下面的代碼：
header, footer, article, section, nav, menu, hgroup {
display: block;
}
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創建了一個腳本文件，你可使用下面的代碼：



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>

1四、必填屬性
表單新加入一個屬性，就是require必填屬性。根據你的編碼風格，你能夠用下面兩種方法中的任何一個來聲明這個屬性：
<input type=」text」 name=」someInput」 required>
或者用一個更結構化的：
<input type="text" name="someInput" required="required">
使用上面的代碼，而且瀏覽器支持這個屬性的話，若是這個輸入框爲空則不能提交。這兒有個簡單的例子，咱們也添加了placeholder這個屬性，由於這兩個屬性配合起來用時常常的事情。若是輸入框爲空白，而且表單被提交了，這個文字框就高亮顯示。

1五、自動獲取焦點屬性
前面已經提到，HTML5新增了不少元素，之前用javas實現的功能如今用元素就能夠簡單實現。在這裏，咱們可使用autofocus屬性使輸入字段自動得到焦點。
<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>
能夠在代碼中僅僅使用autofocus來標明本屬性，也可使用autofocus=autofocus的形式。

1六、聲音支持
咱們再也不必定要依賴第三方插件才能使用聲音。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格式的文件。

1七、視頻支持
就像<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版本的視頻，這都無所謂，看你怎麼作了。

1八、視頻預加載
Preload屬性就像你猜的那樣。你首先應該決定何時須要瀏覽器預加載視頻。預加載是頗有必要的，若是訪問者讀取一個專門爲播放視頻而作的頁面，你確定會預加載視頻而爲訪問者節省等待時間。經過設定preload=」preload」或者一個簡單的preload就可使視頻被預加載。我比較喜歡後面的解決方案，由於它更精簡。
<video preload>
<video preload>
<video preload controls>

1九、播放控制
若是你的工做與這些技術密切相關，你可能已經知道了。若是你用上面的代碼，視頻顯示的僅是像一幅圖片同樣，沒有任何控制而言。爲了可以解析播放控制功能，咱們必須在video元素中指定controls屬性。
<video preload controls>
請注意的是每一個瀏覽器對本身的播放器解析法都不一樣。（譯者：提醒咱們多測試幾個瀏覽器啊）javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。