前言

眾所周知HTML5 屬于萬維網聯盟 (W3C), 這個組織為整個網絡界提供了標準，如此形成的協議可在全世界通行。在 2016 年 11 月， W3C 對長期行使的 HTML 5 標準進行了更新，它是2年內的第一次小更新。許多最開始提出的 HTML 5.1 功能特性都因為設計上的缺陷和缺乏瀏覽器廠商的支持而去掉了。

盡管有一些元素和功能提升被帶進了 HTML 5.1 里面, 但它仍然是一個小的更新。其中的一些新的元素包含了組合標簽, 現在這樣的元素包括有 dialog , details , summary 以及 picture , 這樣就為開發者提供了更多表達創意和內容的空間。

W3C 以及開始著手發展 HTML 5.2 草案，有望于 2017 年底發布。而我們在這里所要呈現的是在版本 5.1 中被引入的新的功能特性和功能提升。你不需要動 javascript 就可以利用上這些功能特性。并非所有的瀏覽器都支持這些功能特性，因此你最好是在將它們應用于生產環境之前先檢查一下瀏覽器的支持情況。

防止網絡釣魚攻擊

大多數使用 target = _ blank 的人都不知道一個有趣的事實——新打開的標簽可以更改 window.opener.location 到一些網絡釣魚頁面。它會在開放頁面上代表你執行一些惡意 JavaScript 代碼。因為用戶相信打開的頁面已安全，所以他們不會有所懷疑。

為了完全消除這個問題，HTML 5.1 已經通過隔離瀏覽器上下文的方式標準化了的 rel=”noopener”屬性的用法。 rel =“noopener”可以在 a 和 area 標簽中使用。

 a href= # target= _blank rel= noopener  The link won t make trouble anymore /a 

靈活處理圖片標題

figcaption 標簽表示與 figure 元素關聯的標題或圖例，通常作為例如圖片、圖表、插圖等視覺元素的容器。在早期的 HTML 版本中， figcaption 只能用作第一個或最后一個 figure 的子標簽。HTML5.1 已放寬此限制，現在您可以在 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 

spellcheck 是一個取值可以為空字符串、true 和 false 的枚舉屬性。如果指定其狀態為 true，就表示元素將會接受對其的拼寫和語法檢查。

element.forceSpellCheck() 將強制用戶代理在文本元素上報告檢查出來的拼寫和語法錯誤，即使用戶從來沒將輸入聚焦在該元素上。

 p spellcheck= true  label Name: input spellcheck= false id= textbox /label  /p 

新版的 HTML 允許你創建一個空的 option 元素。它可以是 optgroup , datalist 或者 select 元素的子元素。你將會發現這項功能在設計對用戶友好的表單方面時能有所幫助。

為 Frame 開發的布爾變量 allowfullscreen 屬性允許您通過使用 requestFullscreen() 方法控制內容是否可以全屏顯示。 例如，我們使用嵌入 YouTube 的播放器的 iframe 做示例。 需要設置 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= http://youtube.com/?id=92469812 allowfullscreen /iframe  /main  /article 

HTML5.1 允許你在另一個 header 嵌入 header 和 footer。你可以向頭部元素添加一個 header 或 footer ，假如它們在段落內容里包含它們自己。假如你想添加詳細闡述諸如 section 和 article 標簽到語義段落元素，這個特性將變得非常有用。

在下面的代碼中， article 標簽包含一個 header 標簽，它有個自身包含 header 標簽的 aside 標簽。

 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 

相信看了這些案例你已經掌握了方法，更多精彩請關注php 其它相關文章！

相關閱讀：

HTML圖片的img標簽怎樣使用

HTML里的name與id和html' target='_blank'>class到底有什么不同

怎樣實現table表格中的斜線表頭效果

以上就是HTML 5之新增的特性該如何使用的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。