翻譯-你必須知道的28個HTML5特徵、竅門和技術

時間 2019-12-04

標籤翻譯必須知道 html5 html 特徵竅門技術欄目 HTML5 简体版

原文原文鏈接

原文地址： http://net…html5-features-tips-and-techniques…/
原文做者： Jeffrey Way
翻譯小編：張鑫旭

//zxx:如下爲翻譯全文，本着語言生動和本土化之原則，內容有編輯javascript

注意：每週有那麼幾回，此列表會更新一些新的竅門，最終，本文會成爲超級有用的資源。
//zxx:醜話說在前頭，我可沒功夫更新，因此，即便到您女兒出嫁那天，本文仍是28項內容css

前端的發展如此之迅猛，一不留神，大俠你可能就會被遠遠地甩在後面了。若是你不想被HTML5的改變/更新攪得不知所措的話，能夠把本文的內容做爲必須瞭解的熱身課程。html

1、新的Doctype

//zxx:」doctype」中文意思指「文檔類型」

仍在使用麻煩的，不可能記得住的XHTML文檔類型？前端

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

若是是，爲何還在用呢？使用新的HTML5文檔類型代替吧。你會活得更久的——正如Douglas Quaid說的html5

<!DOCTYPE html>

我就琢磨着，爲了HTML5搞個這廝代碼，您可能會對這段代碼究竟靠不靠譜表示懷疑。不用擔憂，現在這是可行的，只有老的瀏覽器須要一個特定的 doctype（文檔類型）。瀏覽器若是不知道doctype，就會很簡單的以標準模式對包含的標籤進行渲染。因此，妹妹你大膽的向前衝，把當心謹慎都拋到九霄雲外，去擁抱新的HTML5文檔類型吧。java

2、圖形元素(The Figure Element )

看看下面給圖片添加的標示：react

<img src="path/to/image" alt="About image" /><p>Image of Mars. </p>

文字裹在p標籤裏，與img標籤各行其道，很難讓人聯想到這就是標題。HTML5經過採用<figure>元素對此進行了改正。當合<figcaption>元素組合使用時，咱們就能夠語義化地聯想到這就是圖片相對應的標題web

<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>能夠正確地包裹這些信息。ajax

small元素專指「小字」。正則表達式

4、腳本(scripts)和連接(links)無需type

您可能如今仍在給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。顧名思意，就是容許用戶編輯元素內容包含的任意文本，包括子元素。相似的用途還有不少，像是簡單的待辦事項清單應用程序，可大大利用其本地存儲的優點。

<ul contenteditable="true">
    <li>悼念遇難香港同胞 </li>
    <li>深圳特區30週年</li>
    <li>伊春空難</li>
</ul>

或者，根據前面所學到的一些技巧，咱們能夠把它寫成：

<ul contenteditable=true>

您能夠狠狠地點擊這裏：HTML5內容可編輯demo

7、Email輸入(Inputs)

若是咱們給表單輸入框應用名爲」email」的type屬性，咱們能夠命令瀏覽器只容許符合有效的電子郵件地址結構的字符串。沒錯，內置表單驗證即將到來，因爲一些顯而易見的緣由，咱們還不能100%依賴內置驗證，較舊的瀏覽器不認識這個」email」型，它們會簡單地退回到普通文本框。

<form action="" method="get">
    <label for="email">郵箱:</label><input id="email" name="email" type="email" />
    <button type="submit">肯定</button>
</form>

您能夠狠狠地點擊這裏：HTML5郵箱內置驗證demo

//zxx:經我小測了下，貌似僅在Chrome瀏覽器下有效果(xp系統)，當輸入內容不是合法郵箱格式，點擊「肯定」按鈕是沒有反應的；當輸入爲合法郵箱，點擊「肯定」按鈕纔會提交刷新頁面。

目前而言，咱們不能依賴瀏覽器驗證，客戶端/服務器驗證仍是必須的。

還應當指出，當談到哪些元素和屬性支持和不支持時，當前全部的瀏覽器都有點靠不住的。例如，Opera彷佛支持電子郵件驗證，但僅在name屬性被指定的時候。並且，它不支持佔位符屬性，這個咱們將會在後面學到。底線是不依賴於這種形式的驗證…但你仍然可使用它！

8、佔位符(Placeholders)

//zxx:此處內容非直譯，有刪改

Placeholders什麼意思呢，就是文本框/文本域空間默認會有個文字提示，得到焦點時，此提示文字消失；失去焦點時若是內容爲空，提示文字又出現。以下圖所示：

這些表單控件裏面顯示的些提示性的文字就是佔位符。按照以往的作法，咱們須要使用一點JavaScript代碼實現佔位符效果，例如我以前的「文本框/域文字提示自動顯示隱藏jQuery小插件」一文所展現的。固然，你須要設定一個初始的默認的value值，而後根據輸入內容進行判斷，從而決定文本框值的改變與否。若是您使用佔位符(placeholders)屬性，一切就輕鬆了。

<label for="email">郵箱:</label>
<input id="email" type="email" placeholder="zhangxinxu@zhangxinxu.com" size="26" />

根據個人測試，目前僅webkit核心的瀏覽器支持placeholders屬性，像是Chrome5，Safari4，結果以下所示：

您能夠狠狠地點擊這裏：HTML5佔位符Demo

9、本地存儲(Local Storage)

多虧了本地存儲(非正式的HTML5，本着方便概括的目的)，咱們可讓高級瀏覽器記住咱們的編輯後的內容，即便瀏覽器被關掉或是頁面刷新。

//zxx:根據視頻內容，我本身作了個demo，關於本地存儲的。

您能夠狠狠地點擊這裏：HTML5本地存儲Demo

IE8瀏覽器已經支持了本地存儲，以下截圖所示：

儘管顯然不支持全部的瀏覽器，咱們能夠在Internet Explorer8時，Safari 4和Firefox 3.5下期待此工做方式。請注意，爲了彌補舊的瀏覽器將沒法識別本地存儲，你應該先測試，以肯定window.localStorage是否存在。

10、語義的Header和Footer

那些過往的日子：

<div id="header">
	...
</div>

<div id="footer">
	...
</div>

div嘛，很天然的，沒有語義化的結構——即便在應用了id後。如今，經過HTML5，咱們可使用<header>和<footer>元素。以上的代碼能夠替換成：

<header>
	...
</header>

<footer>
	...
</footer>

它徹底適合您有多個頁眉和頁腳的項目。

儘可能不要混淆」header」和」footer」這些元素。他們只是指他們的容器。所以，將博客底部的，例如，元信息放在footer元素內部是說得通的。這一樣也適用於header。

11、更多HTML5表單特徵(More HTML5 Form Features )

經過下面視頻學習更多有用的HTML5表單特徵：

12、IE和HTML5(Internet Explorer and HTML5)

不幸的是，討厭的IE瀏覽器須要動點小手術才能理解新的HTML5元素。

全部元素，默認的，都有個inline的display

爲了確保全部新的HTML5元素能以block水平的元素正確地渲染，有必要對其作以下定義：

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

不幸的是，IE仍舊忽略這些樣式，由於它不知道這些標籤從哪裏來的，比如是header元素。幸運的是，有一個簡單的解決辦法：

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

奇怪的是，這段代碼彷佛觸發IE瀏覽器。爲了更簡單將此應用到每一個新的應用過程當中，雷米夏普(Remy Sharp)建立了一個腳本，一般稱爲HTML5 shiv。該腳本一樣修復了些顯示問題。

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

十3、文檔某一部分的信息(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>

十4、必要的屬性(Required Attribute )

表單容許新的必要屬性，用來指定是否須要特殊的input。這取決於你的代碼偏好，你能夠如下面兩種方式之一申明此屬性。

<input type="text" name="someInput" required>

或者，使用更結構化的方法：

<input type="text" name="someInput" required="required">

兩種方法都行。有了這個代碼，而且瀏覽器支持此屬性，若是「someInput」文本框是空白，則表單不會被提交。下面是一個簡單的例子，咱們還將添加佔位符屬性，由於沒有理由不這樣作。

<form action="" method="get">
    <label for="name">姓名:</label>
    <input id="name" name="name" type="text" placeholder="zhangxinxu" required="required" />
    <button type="submit">提交</button>
</form>

您能夠狠狠地點擊這裏：HTML5必要屬性Demo

若是input裏面內容是空白，則表單提交的時候，文本框會高亮顯示。//zxx:貌似僅在Chrome瀏覽器下有點小效果

十5、Autofocus屬性

一樣，HTML5的解決方案消除了對JavaScript的須要。若是一個特定的輸入應該是「選擇」，或有重點的，默認狀況下，咱們如今能夠利用自動獲取焦點屬性。

<input type="text" name="someInput" placeholder="zhangxinxu" required autofocus>

有趣的是，雖然我我的更傾向於喜歡XHTML的方法（用引號，等等），寫做「autofocus=autofocus」讓人感到有點怪。所以，咱們將堅持使用單一關鍵字的方法。

十6、Audio支持

咱們無需再依賴第三方插件區渲染音頻。HTML5提供了<audio>元素，嗯，至少，最終，咱們將沒必要擔憂這些插件。就目前，只有最近期的的瀏覽器提供HTML5音頻支持。在這個時候，它仍然是一個很好的作法提供一些向後兼容的形式。

<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會但願看到一個.ogg文件，而WebKit的瀏覽器支持.mp3擴展。這意味着，至少在如今，你應該建立兩個版本的音頻。

當Safari加載頁面時，它不會認可.ogg格式，會跳過它並移動到的MP3版本，所以。請注意IE，每往常同樣，不支持這些格式，Opera 10和以及如下版本只能使用.wav文件。

十7、Video支持

與<audio>元素很相似，在新的瀏覽器中也存在Video！事實上，就在最近，YouTube宣告了新的HTML5視頻嵌入，固然，是爲支持此功能瀏覽器。由於HTML5的規範沒有指定特定的視頻編解碼器，它留給了瀏覽器來決定。雖然Safari和Internet Explorer9能夠預期支持H.264格式的視頻（其中Flash播放器能夠播放），Firefox和Opera是堅持開源Theora 和Vorbis格式。所以，當顯示HTML5的視頻，您必須提供這兩種格式。

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

不管是」ogg」格式仍是」mp4″格式的視頻Chrome瀏覽器都能正確編碼

還有一個值得注意的一些事情：

咱們技術上不須要來設置type屬性，可是，若是咱們不這樣作，瀏覽器不得不本身去尋找類型。節省一些帶寬，仍是你本身聲明下吧。
不是全部的瀏覽器理解HTML5視頻。在資源元素的下面，咱們能夠提供一個下載連接，或嵌入視頻的Flash版本代替。這取決於你。
controls和preload屬性就會在下面說起。
有方法可讓全部的瀏覽器支持video標籤，具體參見我前面的「讓全部瀏覽器支持HTML5 video視頻標籤」一文。

十8、視頻預載(Preload Videos)

預載屬性不徹底是你想的那個樣子，雖然，你應該先決定是否要在瀏覽器預裝的視頻。是否有必要？或許吧。若是訪問者訪問一個專門展現了一個視頻的頁面，你必定要預載的視頻，節約參觀者等待的一部分時間。影片能夠經過設置 preload=」preload」或是簡單地添加preload進行預載。我更喜歡後者的解決方案，它少了一點多餘的東西。

<video preload>

十9、顯示控制條

若是你使用過上面的每個提到的技術點，你可能已經注意到，使用上面的代碼，視頻僅僅顯示的是張圖片，沒有控制條。爲了渲染出播放控制條，咱們必須在video元素內指定controls屬性。

<video preload controls>

請注意，不一樣瀏覽器渲染出來的進度條的模樣都是不同的。

二10、正則表達式

你發現本身多久匆匆編寫一些正則表達式驗證一個特定的文本。多虧了新的pattern屬性，咱們能夠在標籤處直接插入一個正則表達式。

<form action="" method="get">
    <label for="username">姓名:</label>
    <input id="username" name="username" type="text" placeholder="4-10個英文字母" pattern="[A-Za-z]{4,10}" required="required" autofocus />
    <button type="submit">提交</button>
</form>

若是你熟悉正則表達式，那麼應該清楚[A-Za-z]{4,10}表示接受4-10位不區分大小寫的英文字母。若是瀏覽器支持pattern屬性，則提交表單時，若是文本框中的內容不符合其正則表達式，文本框會高亮顯示。以下圖所示。

您能夠狠狠地點擊這裏：HTML5正則表達式Demo

//zxx:我本身小測了下，貌似目前只在Chrome下有效(win系統)

注意到，咱們已經開始組合使用這些很棒的屬性。

若是您對正則表達式概念模糊了，能夠參見這裏。

二11、屬性支持檢測

若是咱們沒有方法檢測瀏覽器是否支持這些屬性，這些就不能稱之爲好的屬性。恩，不錯的觀點，事實上咱們是有幾種方法的，這裏咱們討論2個。第一個是利用優秀的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。

二12、mark元素(Mark Element )

試想<mark>元素做爲高亮。此標籤包裹的字符串應該與用戶當前的行動相關聯。例如，我在一些博客上搜索「北川景子」，我就可使用一些JavaScript將當前的每一個結果字符串用mark標籤包裹。

<h3> 搜索結果 </h3>
<p> 我很喜歡《零秒出手》裏面那個拉小提琴的女孩，原來她叫作 <mark>北川景子</mark>。 </p>

二十3、何時使用div

咱們有些人開始質問到底什麼時候該使用div。如今咱們可使用header, article, section, 和footer，還有機會使用div…嗎？固然能夠。

div應該用在沒有更好的元素的時候。

例如，若是你發現你須要包裹一段代碼塊在對內容定位處理的包裝單元內。不過若是你是包裹一個博客文章，或者，多是，底部的連接列表，則需考慮分別使用<article>和<nav>元素，由於其更具語義。

二十4、什麼能夠開始當即使用

一直談論到如今的HTML5要到2022年才能所有完成，許多人徹底忽視它，這是個巨大的錯誤。事實上，有少許的HTML5的功能，咱們能夠在咱們全部的項目中使用！更簡單，更乾淨的代碼老是一件好事。在今天的視頻快速展現的技巧中，我將告訴你一些可用的選項。

二十5、哪些不是HTML5(What is Not HTML5)

那些僅憑本身的假設形象將JavaScript變少的過渡被所有歸爲HTML5的人是能夠理解的，嘿，甚至蘋果無心中推進這一想法。對於非開發人員，誰管這個呢，它是一個簡單的方法適用於現代網頁標準。不過，對於咱們來講，儘管它可能只是語義，重要的是要準確理解什麼不是HTML5。

SVG:不是HTML5，至少5歲了。
CSS3:不是HTML5，它是…CSS。
Geolocation:不是HTML5.//zxx:Geolocation（地理位置）：經過HTML 5，您應該可以使Web應用程序可肯定您的位置，併爲您提供更多的相關信息。
Client Storage(客戶端存儲):非HTML5，雖然說有一點切合，但被排除在規範以外，緣由在於，擔心其做爲一個總體，會變得過於複雜。它如今有本身的規範。
Web Sockets:不是HTML5，一樣的，有着本身的一套準則。

無論你需求有多大的區別，全部這些技術能夠歸爲現代網絡堆棧。事實上，很多這些分支規範的管理着仍是同一人。

二十6、data屬性(The Data Attribute)

咱們如今能夠很正式地讓全部的HTML元素支持自定義屬性。然而，之前，咱們可能會這樣：

<h1 id=someId customAttribute=value> 小樣，膽兒挺肥的呢 </h1>

…校驗器會小題大作！可是如今，只要咱們以」data」爲前綴定義咱們的自定義屬性，盜版屬性立馬變成正牌的了。若是你發現你曾經把一個重要的數據附加在諸如class的屬性上，可能爲了JavaScript之用，那麼，本屬性將大有幫助啊。

HTML片斷

<div id="myDiv" data-custom-attr="My Value"> 巴拉巴拉，lady 嘎嘎 </div>

檢索自定義屬性的價值

var theDiv = document.getElementById('myDiv');
var attr = theDiv.getAttribute('data-custom-attr');
alert(attr); // My Value

此屬性還能夠用在CSS中，例以下面這個有些傻里傻氣的CSS文字改變的例子：

CSS代碼： .data_custom { display:inline-block; position: relative; }
.data_custom:hover { color: transparent; }
.data_custom:hover:after {
    content: attr(data-hover-response);
    color: black;
    position: absolute;
    left: 0;
}

HTML代碼： <a class="data_custom" data-hover-response="我說過不要碰我！" href="#">不要碰我，雅蠛蝶~~</a>

若是你的瀏覽器支持after僞類，以及content的attr屬性，則能夠看到相似下面的效果(IE8不同)：

要查看上圖所示的效果，您能夠狠狠地點擊這裏：CSS與HTML5自定義屬性demo

還有，content屬性實際上是一個很是強大的屬性，因爲低版本的IE不支持，因此此屬性還沒有流行，關於content內容生成技術，能夠參見我以前的「CSS content內容生成技術以及應用」這篇文章。

二十7、Output元素

正如你可能預料到的，output元素被用來顯示部分計算，例如，若是你想顯示一個鼠標的位置，或者是一系列數字的總和座標，這個數據應被插入到output元素中。

舉個簡單的例子，當提交按鈕被按下，咱們用JavaScript將兩個數字相加值插入到空的output中。

<form action="" method="get">
    <p>
        10 + 5 = <output name="sum"></output>
    </p>
    <button type="submit">計算</button>
</form>

(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('你的瀏覽器還沒有準備好！');
    }
})();

本身測試了下，貌似如今只有在Opera瀏覽器下有上佳的效果：

若是您如今使用的是較新版本的Opera瀏覽器，您能夠狠狠地點擊這裏：HTML5結果輸出框demo

此元素也能夠接受一個屬性，它反映了輸出相關元素的名稱，相似label工做原理。

二十8、使用區域input建立滑塊(Create Sliders with the Range Input)

HTML5引進了range類型的input。

<input type="range">

最值得注意的是，它能夠接收 min, max, step, 和value 屬性，等等。雖然如今彷佛只有Opera瀏覽器充分支持這種輸入類型，可是當咱們能夠實際使用時，這將是美妙無比的！

參見下面的快速演示：

第一步：標籤

首先，建立標籤

<form method="post">
    <h4>音量控制</h4>
    <input type="range" name="range" min="0" max="10" step="1" value="" />
    <output name="result">  </output>
</form>

第二步：CSS

下面，咱們要使用一點點的樣式。咱們將使用:before和:after去告知用戶咱們制定的最大值和最小值。

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;
}

第三步：JavaScript

最後，咱們

檢測咱們的瀏覽器是否定識range input，若是不，顯示提示。
當用戶移動滑塊的時候，動態改變output的值。
監聽，當用戶離開滑塊，插入值，同時本地存儲。
而後，下次用戶刷新頁面的時候，選擇的區域和值會自動地設置成他們最後一次選擇。

(function() {
    var f = document.forms[0],
        range = f['range'],
        result = f['result'],
        cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5; 

    // 檢測瀏覽器是不是足夠酷     // 識別range input.     var o = document.createElement('input');
    o.type = 'range';
    if ( o.type === 'text' ) alert('很差意思，你的瀏覽器還不夠酷，試試最新的Opera瀏覽器吧。');

    // 設置初始值     // 不管是否本地存儲了，都設置值爲5     range.value = cachedRangeValue;
    result.value = cachedRangeValue;

    // 當用戶選擇了個值，更新本地存儲     range.addEventListener("mouseup", function() {
        alert("你選擇的值是：" + range.value + ". 我如今正在用本地存儲保存此值。在現代瀏覽器上刷新並檢測。");
        localStorage ? (localStorage.rangeValue = range.value) : alert("數據保存到了數據庫或是其餘什麼地方。");
    }, false);

    // 滑動時顯示選擇的值     range.addEventListener("change", function() {
        result.value = range.value;
    }, false);

})();

您能夠狠狠地點擊這裏：HTML5 range input炫酷效果demo

個人電腦是xp系統，默認主題，在滑塊鬆開後Opera下的效果以下圖所示，酷吧：