前言
眾所周知HTML5 屬于萬(wàn)維網(wǎng)聯(lián)盟 (W3C), 這個(gè)組織為整個(gè)網(wǎng)絡(luò)界提供了標(biāo)準(zhǔn)，如此形成的協(xié)議可在全世界通行。在 2016 年 11 月， W3C 對(duì)長(zhǎng)期行使的 HTML 5 標(biāo)準(zhǔn)進(jìn)行了更新，它是2年內(nèi)的第一次小更新。許多最開(kāi)始提出的 HTML 5.1 功能特性都因?yàn)樵O(shè)計(jì)上的缺陷和缺乏瀏覽器廠商的支持而去掉了。
盡管有一些元素和功能提升被帶進(jìn)了 HTML 5.1 里面, 但它仍然是一個(gè)小的更新。其中的一些新的元素包含了組合標(biāo)簽, 現(xiàn)在這樣的元素包括有 <dialog>, <details>, <summary> 以及<picture>, 這樣就為開(kāi)發(fā)者提供了更多表達(dá)創(chuàng)意和內(nèi)容的空間。
W3C 以及開(kāi)始著手發(fā)展 HTML 5.2 草案，有望于 2017 年底發(fā)布。而我們?cè)谶@里所要呈現(xiàn)的是在版本 5.1 中被引入的新的功能特性和功能提升。你不需要?jiǎng)?javascript 就可以利用上這些功能特性。并非所有的瀏覽器都支持這些功能特性，因此你最好是在將它們應(yīng)用于生產(chǎn)環(huán)境之前先檢查一下瀏覽器的支持情況。
14. 防止網(wǎng)絡(luò)釣魚攻擊
大多數(shù)使用 target ='_ blank' 的人都不知道一個(gè)有趣的事實(shí)——新打開(kāi)的標(biāo)簽可以更改 window.opener.location 到一些網(wǎng)絡(luò)釣魚頁(yè)面。它會(huì)在開(kāi)放頁(yè)面上代表你執(zhí)行一些惡意 JavaScript 代碼。因?yàn)橛脩粝嘈糯蜷_(kāi)的頁(yè)面已安全，所以他們不會(huì)有所懷疑。
為了完全消除這個(gè)問(wèn)題，HTML 5.1 已經(jīng)通過(guò)隔離瀏覽器上下文的方式標(biāo)準(zhǔn)化了的 rel=”noopener”屬性的用法。 rel =“noopener”可以在 <a> 和 <area> 標(biāo)簽中使用。
<a href="#" target="_blank" rel="noopener"> The link won't make trouble anymore </a>
13. 靈活處理圖片標(biāo)題
<figcaption> 標(biāo)簽表示與 <figure> 元素關(guān)聯(lián)的標(biāo)題或圖例，通常作為例如圖片、圖表、插圖等視覺(jué)元素的容器。在早期的 HTML 版本中，<figcaption> 只能用作第一個(gè)或最后一個(gè) <figure> 的子標(biāo)簽。HTML5.1 已放寬此限制，現(xiàn)在您可以在 <figure> 容器中的任何位置使用 <figcaption>。
<article>
<h1>The Headline of todays news </h1>
<figure>
<img src="petrolimage.jpeg" alt="Petrol price drops">
<figcaption>A man fueling up his car at petrol station</figcaption>
</figure>
<p>This is the forth hike in petrol prices in two month and the third in case of diesel in one fortnight.</p>
</article>
12. 拼寫檢查
spellcheck 是一個(gè)取值可以為空字符串、true 和 false 的枚舉屬性。如果指定其狀態(tài)為 true，就表示元素將會(huì)接受對(duì)其的拼寫和語(yǔ)法檢查。
element.forceSpellCheck() 將強(qiáng)制用戶代理在文本元素上報(bào)告檢查出來(lái)的拼寫和語(yǔ)法錯(cuò)誤，即使用戶從來(lái)沒(méi)將輸入聚焦在該元素上。
<p spellcheck="true"> <label>Name: <input spellcheck=" false" id="textbox"></label> </p>
11. 空選項(xiàng)
新版的 HTML 允許你創(chuàng)建一個(gè)空的 <option> 元素。它可以是 <optgroup>, <datalist> 或者 <select> 元素的子元素。你將會(huì)發(fā)現(xiàn)這項(xiàng)功能在設(shè)計(jì)對(duì)用戶友好的表單方面時(shí)能有所幫助。
10. 支持 Frame 的全屏
為 Frame 開(kāi)發(fā)的布爾變量 allowfullscreen 屬性允許您通過(guò)使用 requestFullscreen() 方法控制內(nèi)容是否可以全屏顯示。 例如，我們使用嵌入 YouTube 的播放器的 iframe 做示例。 需要設(shè)置 allowfullscreen 屬性才能讓播放器全屏顯示視頻。
<article> <header> <p><img src="/usericons/16235"> <b>Fred Flintstone</b></p> <p><a href="/posts/30934" rel=bookmark>12:44</a> — <a href="#acl-503439551">Private Post</a></p> </header> <main> <p>Check out my new video!</p> <iframe title="Video" src="https://youtube.com/?id=92469812" allowfullscreen></iframe> </main> </article>
9. 嵌入 header 和 footer
HTML5.1 允許你在另一個(gè) header 嵌入 header 和 footer。你可以向頭部元素添加一個(gè) header 或 footer ，假如它們?cè)诙温鋬?nèi)容里包含它們自己。假如你想添加詳細(xì)闡述諸如 <section> 和 <article> 標(biāo)簽到語(yǔ)義段落元素，這個(gè)特性將變得非常有用。
在下面的代碼中，<article> 標(biāo)簽包含一個(gè) <header> 標(biāo)簽，它有個(gè)自身包含 <header> 標(biāo)簽的 <aside> 標(biāo)簽。
<article>
<header>
<h2>Lesson: How to cook chicken</h2>
<aside>
<header>
<h2>About the author: Tom Hank</h2>
<p><a href="./tomhank/">Contact him!</a></p>
</header>
<p>Expert in nothing but Cooking. The cookbook sideshow.</p>
</aside>
</header>
<p><ins>Pour the marinade into the zip-top bag with the chicken and seal it.
Remove as much air as possible from the bag and seal it. </ins></p>
</article>
8. 圖片零寬度