標籤：inpu pts 開發人員 orb 音量控制 tutorial absolute mail soc
翻譯-你必須知道的28個HTML5特徵、竅門和技術by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=1058
//zxx:以下為翻譯全文，本著語言生動和本土化之原則，內容有編輯
注意：每周有那麼幾次，此列表會更新一些新的竅門，最終，本文會成為超級有用的資源。
//zxx:醜話說在前頭，我可沒功夫更新，所以，即使到您女兒出嫁那天，本文還是28項內容
前端的發展如此之迅猛，一不留神，大俠你可能就會被遠遠地甩在後面了。如果你不想被HTML5的改變/更新攪得不知所措的話，可以把本文的內容作為必須瞭解的熱身課程。
一、新的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說的
<!DOCTYPE html>
我就琢磨著，為了HTML5搞個這廝代碼，您可能會對這段代碼究竟靠不靠譜表示懷疑。不用擔心，如今這是可行的，只有老的瀏覽器需要一個特定的doctype（文件類型）。瀏覽器如果不知道doctype，就會很簡單的以標準模式對包含的標籤進行渲染。所以，妹妹你大膽的向前沖，把小心謹慎都拋到九霄雲外，去擁抱新的HTML5文件類型吧。
二、圖形元素(The Figure Element )看看下面給圖片添加的標示：
<img src="path/to/image" alt="About image" /><p>Image of Mars. </p>
文字裹在p標籤裡，與img標籤各行其道，很難讓人聯想到這就是標題。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>可以正確地包裹這些資訊。
四、指令碼(scripts)和連結(links)無需typesmall元素專指“小字”。
您可能現在仍在給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。顧名思意，就是允許使用者編輯元素內容包含的任意文本，包括子項目。類似的用途還有很多，像是簡單的待辦事項清單應用程式，可大大利用其本機存放區的優勢。
<ul contenteditable="true"> <li>悼念遇難香港同胞 </li> <li>深圳特區30周年</li> <li>伊春空難</li></ul>
或者，根據前面所學到的一些技巧，我們可以把它寫成：
<ul contenteditable=true>
您可以狠狠地點擊這裡：HTML5內容可編輯demo
七、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屬性被指定的時候。而且，它不支援預留位置屬性，這個我們將會在後面學到。底線是不依賴於這種形式的驗證…但你仍然可以使用它！
八、預留位置(Placeholders)//zxx:此處內容非直譯，有刪改Placeholders什麼意思呢，就是文字框/文本域空間預設會有個文字提示，獲得焦點時，此提示文字消失；失去焦點時如果內容為空白，提示文字又出現。如所示：
這些表單控制項裡面顯示的些提示性的文字就是預留位置。按照以往的做法，我們需要使用一點JavaScript代碼實現預留位置效果，例如我之前的“文字框/域文字提示自動顯示隱藏jQuery小外掛程式”一文所展示的。當然，你需要設定一個初始的預設的value值，然後根據輸入內容進行判斷，從而決定文字框值的改變與否。如果您使用預留位置(placeholders)屬性，一切就輕鬆了。
<label for="email">郵箱:</label><input id="email" type="email" placeholder="[email protected]" size="26" />
根據我的測試，目前僅webkit核心的瀏覽器支援placeholders屬性，像是Chrome5，Safari4，結果如下所示：
您可以狠狠地點擊這裡：HTML5預留位置Demo
九、本機存放區(Local Storage)多虧了本機存放區(非正式的HTML5，本著方便歸納的目的)，我們可以讓進階瀏覽器記住我們的編輯後的內容，即使瀏覽器被關掉或是頁面重新整理。//zxx:原視頻預設展示的是YouTube視頻，不FQ看不了，所以，這裡展示來自另外一個網站的video。建議全屏觀看，以看清其中的HTML與JavaScript代碼
//zxx:根據視頻內容，我自己做了個demo，關於本機存放區的。
您可以狠狠地點擊這裡：HTML5本機存放區Demo
IE8瀏覽器已經支援了本機存放區，如下所示：
儘管顯然不支援所有的瀏覽器，我們可以在Internet Explorer8時，Safari 4和Firefox 3.5下期待此工作方式。請注意，為了彌補舊的瀏覽器將無法識別本機存放區，你應該先測試，以確定window.localStorage是否存在。
十、語義的Header和Footer那些過往的日子：
<div id="header">...</div><div id="footer">...</div>
div嘛，很自然的，沒有語義化的結構——即使在應用了id後。現在，通過HTML5，我們可以使用<header>和<footer>元素。以上的代碼可以替換成：
<header>...</header><footer>...</footer>
它完全適合您有多個頁首和頁尾的項目。
盡量不要混淆”header”和”footer”這些元素。他們只是指他們的容器。因此，將部落格底部的，例如，元資訊放在footer元素內部是說得通的。這同樣也適用於header。
十一、更多HTML5表單特徵(More HTML5 Form Features )通過下面視頻學習更多有用的HTML5表單特徵：//zxx:TouTuBe視頻，需要FQ
十二、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]-->十三、文檔某一部分的資訊(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>十四、必要的屬性(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瀏覽器下有點小效果
十五、Autofocus屬性同樣，HTML5的解決方案消除了對JavaScript的需要。如果一個特定的輸入應該是“選擇”，或有重點的，預設情況下，我們現在可以利用自動擷取焦點屬性。
<input type="text" name="someInput" placeholder="zhangxinxu" required autofocus>
有趣的是，雖然我個人更傾向於喜歡XHTML的方法（用引號，等等），寫作“autofocus=autofocus”讓人感到有點怪。因此，我們將堅持使用單一關鍵字的方法。
十六、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檔案。
十七、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瀏覽器都能正確編碼
還有一個值得注意的一些事情：
預載屬性不完全是你想的那個樣子，雖然，你應該先決定是否要在瀏覽器預裝的視頻。是否有必要？或許吧。如果訪問者訪問一個專門展示了一個視頻的頁面，你一定要預載的視頻，節約參觀者等待的一部分時間。影片可以通過設定 preload=”preload”或是簡單地添加preload進行預載。我更喜歡後者的解決方案，它少了一點多餘的東西。
<video preload>十九、顯示控制條
如果你使用過上面的每一個提到的技術點，你可能已經注意到，使用上面的代碼，視頻僅僅顯示的是張圖片，沒有控制條。為了渲染出播放控制條，我們必須在video元素內指定controls屬性。
<video preload controls>
請注意，不同瀏覽器渲染出來的進度條的模樣都是不一樣的。
二十、Regex你發現自己多久匆匆編寫一些Regex驗證一個特定的文本。多虧了新的pattern屬性，我們可以在標籤處直接插入一個Regex。
<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>
如果你熟悉Regex，那麼應該清楚[A-Za-z]{4,10}表示接受4-10位不區分大小寫英文字母。如果瀏覽器支援pattern屬性，則提交表單時，如果文字框中的內容不符合其Regex，文字框會高亮顯示。如所示。
您可以狠狠地點擊這裡：HTML5RegexDemo
//zxx:我自己小測了下，貌似目前只在Chrome下有效(win系統)
注意到，我們已經開始組合使用這些很棒的屬性。
如果您對Regex概念模糊了，可以參見這裡。
二十一、屬性支援檢測如果我們沒有方法檢測瀏覽器是否支援這些屬性，這些就不能稱之為好的屬性。恩，不錯的觀點，事實上我們是有幾種方法的，這裡我們討論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。
二十二、mark元素(Mark Element )試想<mark>元素作為高亮。此標籤包裹的字串應該與使用者當前的行動相關聯。例如，我在一些部落格上搜尋“北川景子”，我就可以使用一些JavaScript將當前的每個結果字串用mark標籤包裹。
<h3> 搜尋結果 </h3><p> 我很喜歡《零秒出手》裡面那個拉小提琴的女孩，原來她叫做 <mark>北川景子</mark>。 </p>二十三、什麼時候使用div
我們有些人開始質問到底何時該使用div。現在我們可以使用header, article, section, 和footer，還有機會使用div…嗎？當然可以。
div應該用在沒有更好的元素的時候。
例如，如果你發現你需要包裹一段代碼塊在對內容定位處理的封裝單元內。不過如果你是包裹一個部落格文章，或者，可能是，底部的連結清單，則需考慮分別使用<article>和<nav>元素，因為其更具語義。
二十四、什麼可以開始立即使用
一直談論到現在的HTML5要到2022年才能全部完成，許多人完全忽視它，這是個巨大的錯誤。事實上，有少量的HTML5的功能，我們可以在我們所有的項目中使用！更簡單，更乾淨的代碼總是一件好事。在今天的視頻快速展示的技巧中，我將告訴你一些可用的選項。
//zxx:YouTuBe視頻，需要FQ。
二十五、哪些不是HTML5(What is Not HTML5)那些僅憑自己的假設形象將JavaScript變少的過渡被全部歸為HTML5的人是可以理解的，嘿，甚至蘋果無意中推動這一想法。對於非開發人員，誰管這個呢，它是一個簡單的方法適用於現代網頁標準。不過，對於我們來說，儘管它可能只是語義，重要的是要準確理解什麼不是HTML5。
不管你需求有多大的區別，所有這些技術可以歸為現代網路堆棧。事實上，不少這些分支規範的管理著還是同一人。
二十六、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內容產生技術以及應用”這篇文章。
二十七、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工作原理。
二十八、使用地區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最後，我們
(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);})();
你必須知道的28個HTML5特徵、竅門和技術
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
