你必须知道的28个HTML5特征、窍门和技术
生活随笔
收集整理的這篇文章主要介紹了
你必须知道的28个HTML5特征、窍门和技术
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=1058
原文地址：http://net…html5-features-tips-and-techniques…/
原文作者：Jeffrey Way
翻譯小編：張鑫旭//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>可以正確地包裹這些信息。small元素專指“小字”。四、腳本(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>
五、引號還是不要引號
…這確實是個問題。記住，HTML5不是XHTML，要是你不愿意，你沒有必要非得用引號標記包裹你的屬性，沒有必要非得閉合元素。換句話說，只要你自己覺得舒服，就沒有什么對錯之分。對于我自己來說就是如此。<p class="myClass" id=someId> Start the reactor. 對此取舍你還得自己拿主意。如果你更傾向于結構化的文檔，就算天塌下來，也要把引號牢牢拽在懷里。
六、內容可編輯HTML5內容可編輯 張鑫旭-鑫空間-鑫生活HTML5內容可編輯 張鑫旭-鑫空間-鑫生活最新的瀏覽器有個很贊的新屬性可以應用到元素上，叫做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系統)，當輸入內容不是合法郵箱格式，點擊“確定”按鈕是沒有反應的；當輸入為合法郵箱，點擊“確定”按鈕才會提交刷新頁面。
HTML5郵箱內置驗證 張鑫旭-鑫空間-鑫生活
目前而言，我們不能依賴瀏覽器驗證，客戶端/服務器驗證還是必須的。
還應當指出，當談到哪些元素和屬性支持和不支持時，當前所有的瀏覽器都有點靠不住的。例如，Opera似乎支持電子郵件驗證，但僅在name屬性被指定的時候。而且，它不支持占位符屬性，這個我們將會在后面學到。底線是不依賴于這種形式的驗證…但你仍然可以使用它！
八、占位符(Placeholders)
//zxx:此處內容非直譯，有刪改
Placeholders什么意思呢，就是文本框/文本域空間默認會有個文字提示，獲得焦點時，此提示文字消失；失去焦點時如果內容為空，提示文字又出現。如下圖所示：
淘寶首頁的搜索提示信息 張鑫旭-鑫空間-鑫生活flickr網站的搜索提示 張鑫旭-鑫空間-鑫生活這些表單控件里面顯示的些提示性的文字就是占位符。按照以往的做法，我們需要使用一點JavaScript代碼實現占位符效果，例如我之前的“文本框/域文字提示自動顯示隱藏jQuery小插件”一文所展示的。當然，你需要設定一個初始的默認的value值，然后根據輸入內容進行判斷，從而決定文本框值的改變與否。如果您使用占位符(placeholders)屬性，一切就輕松了。<label for="email">郵箱:</label>
<input id="email" type="email" placeholder="zhangxinxu@zhangxinxu.com" size="26" />
根據我的測試，目前僅webkit核心的瀏覽器支持placeholders屬性，像是Chrome5，Safari4，結果如下所示：
Safari HTML5 placeholders屬性 張鑫旭-鑫空間-鑫生活您可以狠狠地點擊這里：HTML5占位符Demo
九、本地存儲(Local Storage)
多虧了本地存儲(非正式的HTML5，本著方便歸納的目的)，我們可以讓高級瀏覽器記住我們的編輯后的內容，即使瀏覽器被關掉或是頁面刷新。//zxx:原視頻默認展示的是YouTube視頻，不FQ看不了，所以，這里展示來自另外一個網站的video。建議全屏觀看，以看清其中的HTML與JavaScript代碼//zxx:根據視頻內容，我自己做了個demo，關于本地存儲的。
您可以狠狠地點擊這里：HTML5本地存儲DemoIE8瀏覽器已經支持了本地存儲，如下截圖所示：
HTML5本地存儲IE8下效果 張鑫旭-鑫空間-鑫生活盡管顯然不支持所有的瀏覽器，我們可以在Internet Explorer8時，Safari 4和Firefox 3.5下期待此工作方式。請注意，為了彌補舊的瀏覽器將無法識別本地存儲，你應該先測試，以確定window.localStorage是否存在。各個瀏覽器對HTML5本地存儲支持情況一覽表 張鑫旭-鑫空間-鑫生活
十、語義的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瀏覽器下有點小效果
HTML5必要屬性 張鑫旭-鑫空間-鑫生活
十五、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瀏覽器都能正確編碼還有一個值得注意的一些事情：我們技術上不需要來設置type屬性，但是，如果我們不這樣做，瀏覽器不得不自己去尋找類型。節省一些帶寬，還是你自己聲明下吧。不是所有的瀏覽器理解HTML5視頻。在資源元素的下面，我們可以提供一個下載鏈接，或嵌入視頻的Flash版本代替。這取決于你。controls和preload屬性就會在下面提及。有方法可以讓所有的瀏覽器支持video標簽，具體參見我前面的“讓所有瀏覽器支持HTML5 video視頻標簽”一文。十八、視頻預載(Preload Videos)預載屬性不完全是你想的那個樣子，雖然，你應該先決定是否要在瀏覽器預裝的視頻。是否有必要？或許吧。如果訪問者訪問一個專門展示了一個視頻的頁面，你一定要預載的視頻，節約參觀者等待的一部分時間。影片可以通過設置 preload=”preload”或是簡單地添加preload進行預載。我更喜歡后者的解決方案，它少了一點多余的東西。<video preload>十九、顯示控制條如果你使用過上面的每一個提到的技術點，你可能已經注意到，使用上面的代碼，視頻僅僅顯示的是張圖片，沒有控制條。為了渲染出播放控制條，我們必須在video元素內指定controls屬性。<video preload controls>video控制條 張鑫旭-鑫空間-鑫生活請注意，不同瀏覽器渲染出來的進度條的模樣都是不一樣的。
二十、正則表達式你發現自己多久匆匆編寫一些正則表達式驗證一個特定的文本。多虧了新的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正則表達式 張鑫旭-鑫空間-鑫生活您可以狠狠地點擊這里：HTML5正則表達式Demo//zxx:我自己小測了下，貌似目前只在Chrome下有效(win系統)
注意到，我們已經開始組合使用這些很棒的屬性。如果您對正則表達式概念模糊了，可以參見這里。
二十一、屬性支持檢測如果我們沒有方法檢測瀏覽器是否支持這些屬性，這些就不能稱之為好的屬性。恩，不錯的觀點，事實上我們是有幾種方法的，這里我們討論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。SVG:不是HTML5，至少5歲了。CSS3:不是HTML5，它是…CSS。Geolocation:不是HTML5.//zxx:Geolocation（地理位置）：通過HTML 5，您應該能夠使Web應用程序可確定您的位置，并為您提供更多的相關信息。
Client Storage(客戶端存儲):非HTML5，雖說有一點切合，但被排除在規范之外，原因在于，擔憂其作為一個整體，會變得過于復雜。它現在有自己的規范。Web Sockets:不是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自定義屬性 張鑫旭-鑫空間-鑫生活要查看上圖所示的效果，您可以狠狠地點擊這里：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瀏覽器下有上佳的效果：
HTML5結果輸出框 張鑫旭-鑫空間-鑫生活如果您現在使用的是較新版本的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
最后，我們檢測我們的瀏覽器是否認識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瀏覽器吧。');// 設置初始值// 無論是否本地存儲了，都設置值為5range.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下的效果如下圖所示，酷吧：
HTML5 range input炫酷效果 張鑫旭-鑫空間-鑫生活感謝您的閱讀！我們已經討論了很多，但可能只是觸及到HTML5的皮毛，全當拋磚引玉，希望能對您的學習有所幫助！//zxx:以上是翻譯/編輯的全部內容，內容已經夠多了，我就不多說什么了。
原創文章，轉載請注明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=1058
?
轉載于:https://www.cnblogs.com/sxz2008/p/6427582.html
總結
以上是生活随笔為你收集整理的你必须知道的28个HTML5特征、窍门和技术的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Codeforces Round #26
- 下一篇： CssSelector之selenium