HTML 5.1學習之新增的14項特性與應用範例

這篇文章主要為大家介紹了HTML 5.1新增的14項特性與應用範例，文中介紹的非常詳細，對大家具有一定的參考價值，有需要的朋友們下面來一起看看吧。

前言

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

儘管有一些元素和功能提升被帶進了 HTML 5.1 裡面, 但它仍然是一個小的更新。其中的一些新的元素包含了組合標籤, 現在這樣的元素包括有

,

,

以及, 這樣就為開發者提供了更多表達創意和內容的空間。

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

14. 防止網路釣魚攻擊

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

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

<a href="#" target="_blank" rel="noopener">
  The link won&#39;t make trouble anymore
</a>

13. 靈活處理圖片標題

標籤表示與

元素關聯的標題或圖例，通常作為例如圖片、圖表、插圖等視覺元素的容器。在早期的 HTML 版本中，

只能用作第一個或最後一個

的子標籤。 HTML5.1 已放寬此限制，現在您可以在

容器中的任何位置使用

。

<article>
  <h1 id="The-nbsp-Headline-nbsp-of-nbsp-todays-nbsp-news-nbsp">The Headline of todays news </h1>
  <figure>
    <img src="/static/imghwm/default1.png"  data-src="petrolimage.jpeg"  class="lazy"   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 是一個取值可以為空字串、true 和 false 的枚舉屬性。如果指定其狀態為 true，就表示元素將接受對其的拼字和語法檢查。

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

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

11. 空白選項

新版的 HTML 讓你可以建立一個空的  元素。它可以是 ,

10. 支援 Frame 的全螢幕

為 Frame 開發的布林變數 allowfullscreen 屬性可讓您透過使用 requestFullscreen() 方法來控制內容是否可以全螢幕顯示。 例如，我們使用嵌入 YouTube 的播放器的 iframe 做範例。 需要設定 allowfullscreen 屬性才能讓播放器全螢幕顯示影片。

<article>
  <header>
  <p><img  src="/static/imghwm/default1.png"  data-src="/usericons/16235"  class="lazy"   alt="HTML 5.1學習之新增的14項特性與應用範例" > <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 允許你在另一個 header 嵌入 header 和 footer。你可以為頭部元素加上一個 header 或 footer ，假如它們在段落內容中包含它們自己。假如你想加入詳細闡述諸如

和

標籤到語意段落元素，這個特性將變得非常有用。

在下面的程式碼中，

標籤包含一個

標籤，它有個自身包含

標籤的

標籤。

<article>
  <header>
    <h2 id="Lesson-nbsp-How-nbsp-to-nbsp-cook-nbsp-chicken">Lesson: How to cook chicken</h2>
    <aside>
      <header>
        <h2 id="About-nbsp-the-nbsp-author-nbsp-Tom-nbsp-Hank">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. 圖片零寬度

HTML 新版本允許你添加零寬度的圖片。當圖片不需要向使用者展示時，可以使用此特性。假如一個 img 元素還有其他用途而不僅僅是展示一個圖片，例如，作為一個服務的一部分用來計算頁面視圖個數，在 width 和 height 屬性中使用 0 數值。對於 0 寬度的圖片，建議使用空屬性。

<img src="/static/imghwm/default1.png"  data-src="theimagefile.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" alt="">

7. 校驗表單

新的 reportValidity() 方法允许你校验一个表单和重置结果，并且在浏览器适合位置向用户报告错误。用户代理可以报告一个以上的限制规则，假如单一元素同时遇到多个问题。对于这种情况，“密码”输入为必填内容但没有填，将会标识为错误。

<h2 id="Form-nbsp-validation">Form validation</h2>
<p>Enter details</p>
<form>
  <label>
    Mandatory input <input type="password" name="password" required />
  </label>
  <button type="submit">Submit</button>
</form>
<script>
  document.querySelector(&#39;form&#39;).reportValidity()
</script>

6. 浏览器的上下文菜单

在 HTML 5.1 中, 你可以使用

标记来定义菜单，里面包含了一个或者多个 元素, 然后利用 contextmenu 属性将其绑定到任何元素上。 元素的 id 取值应该与我们想要为其添加上下文菜单的元素的 contextmenu 属性取值保持一致。

每一个 都可以有如下三个表单项中的一个:

1. radio – 从一个分组中获取选项；
   

2. checkbox – 选择或者取消选择一个选项；
   

3. command – 在点击时执行一个动作。
   

<h2 contextmenu="popup-menu">
  Right click to get the context menu demo.
</h2>
 
<menu type="context" id="popup-menu">
  <menuitem type="checkbox" checked="true">Checkbox 1 </menuitem>
  <menuitem type="command" label="Command" onclick="alert(&#39;WARNING&#39;)">Checkbox 2</menuitem> 
  <menuitem type="radio" name="group1">Radio button a</menuitem>
  <menuitem type="radio" name="group1" checked="true">Radio button b</menuitem>
  <menuitem type="checkbox" disabled>Disabled menu item</menuitem>
</menu>

5. 在脚本和样式上使用加密随机数

加密随机数（cryptographic nonce ）是一个随机生成的数字，只能被使用一次, 而且针对每一次页面请求，它都得被生成出来。这个 nonce 属性可以被使用在 <script> 和 <style> 元素中。</script>

它一般被用在一个网站的内容安全策略之中，以决定一个特定的样式和脚本是否应该在页面上被实现。在下面所提供的代码中，这个 value 是硬编码的，不过在实际的使用场景中，这个值是随机生成的。

<script nonce=&#39;d3ne7uWP43Bhr0e&#39;>
  The JavaScript Code 
</script>

4、反序链接关系

rev 属性在 HTML4 里有定义，但是它并没出现在 HTML5 里。W3C 决定在 和 元素里重新包含 rev 属性。rev 属性标识当前和反向的链接文档的关系。它已经被包含来支持广泛使用数据结构标记格式，RDFa。

让我们用两个文档来举个例子，每个包含一课程，在它们之间的链接可以使用如下 rel 和 rev 的属性来定义。

//Document with URL "chapter1.html"
 
<link href="Lesson2.html" rel="next" rev="prev">
 
 
//Document with URL "chapter2.html"
 
<link href="Lesson1.html" rel="prev" rev="next">
<link href="Lesson3.html" rel="next" rev="prev">

3. 显示/隐藏信息

新的

和 

元素允许您向一段内容添加扩展信息。您可以通过单击元素来显示或隐藏一个附加信息块。 默认情况下是隐藏附加信息的。

在代码中，您应该将

标记放在

标记内，如下所示。

标签之后，你可以添加要隐藏的其他内容。

<section>
  <h3 id="Error-nbsp-Message">Error Message</h3>
  <details>
  <summary>This file hasn&#39;t been download due to network error.</summary>
  <dl>
    <dt>File name:</dt><dd>Passcode.txt</dd>
    <dt>File size:</dt><dd>8 KB</dd>
    <dt>Error code:</dt><dd>342a</dd>
  </dl>
  </details>
</section>

2. 更多的输入项类型

HTML 输入项元素扩充了三个输入类型 – week, month 以及 datetime-local。

正如其名称所表明的，头两个元素可以让用户选择一个星期值和一个月份值。根据浏览器的支持情况不同，它们俩都会被渲染成一个下拉显示的日历，让你可以选择一年中一个特定的星期或者月份。

datatime-local 表示的是一个日期和时间的输入域, 不过没有时区设置。其数据可以采用跟 month 或者 week 输入项类似的方法来选定, 而时间可以单独输入。

<section>
  <h2> 
    Week, Month and Datetime-local 
  </h2>
  <form action="action_page.php">
    Choose a week:
    <input type="week" name="year_week">
    <input type="submit">
  </form>
  <form action="action_page.php">
    Birthday (month and year):
    <input type="month" name="bdaymonth">
    <input type="submit">
  </form>
  <form action="action_page.php">
    Joining (date and time):
    <input type="datetime-local" name="bdaytime">
    <input type="submit" value="Send">
  </form>
</section>

1. 响应式图像

W3C 引入了一些功能特性，无需使用 CSS 就可以实现响应式图像。它们是 …

srcset 图像属性

srcset 属性让你可以指定一个多个可选的图像来源，对应于不同的像素分辨率。它将允许浏览器根据用户设备的不同选择合适质量的实现来进行显示。例如，对于使用网络比较慢的移动设备的用户，显示一张低分辨率的图片会比较好。

你可以使用 srcset 属性并且带上它自有的 x 修饰符来描述每一个图片的像素比例, 如果用户的像素比例等于 3，就会显示 high-res 这张图片。

<img src="/static/imghwm/default1.png"  data-src="clicks/low-res.jpg"  class="lazy"   srcset="
  clicks/low-res.jpg 1x, 
  clicks/medium-res.jpg 2x, 
  clicks/high-res.jpg 3x"
>

除了像素比例之外，你也可以选择使用 w 修饰符来指定不同尺寸大小的图片。在如下示例中，high-res 图片被定义成在宽度为 1600px 时显示。

<img src="/static/imghwm/default1.png"  data-src="clicks/low-res.jpg"  class="lazy"   srcset="
  clicks/low-res.jpg 500w, 
  clicks/medium-res.jpg 1000w, 
  clicks/high-res.jpg 1600w"
>

sizes 图像属性

大多数时候创作者们都喜欢针对不同的屏幕尺寸显示不同的图片。这个可以用 sizes 属性做到。它让你可以针对分配给图像显示的空间大小来对宽度做出调整, 然后使用 srcset 属性来挑选合适的图片来显示。例如…

<img src="/static/imghwm/default1.png"  data-src="clicks/low-res.jpg"  class="lazy"   sizes="(max-width: 25em) 60vw, 100vw" 
  srcset="clicks/low-res.jpg 500w, 
  clicks/medium-res.jpg 1000w, 
  clicks/high-res.jpg 1600w"
>

在这里， sizes 属性定义了在视窗大于 25 em 时图像宽度为视窗宽度的 100%，或者在小于等于 25em 时为视图宽度的 60%。

picture 元素

picture 元素让你可以针对不同的屏幕尺寸声明图片。这个可以通过用 元素封装 ，并且描述多个 子元素来实现。

标记单独使用并不会显示任何东西。你已经被假定会声明默认的图像来源作为  src 属性的取值，而可选的图像来源则会放在 scrset 属性之中，如下所示：

<picture>
  <source media="(max-width: 25em)" srcset="
    clicks/small/low-res.jpg 1x,
    clicks/small/medium-res.jpg 2x, 
    clicks/small/high-res.jpg 3x
  ">
  <source media="(max-width: 60em)" srcset="
    clicks/large/low-res.jpg 1x,
    clicks/large/medium-res.jpg 2x, 
    clicks/large/high-res.jpg 3x
  ">
 
  <img  src="/static/imghwm/default1.png"  data-src="clicks/default/medium-res.jpg"  class="lazy"   alt="HTML 5.1學習之新增的14項特性與應用範例" >
</picture>

更多HTML 5.1学习之新增的14项特性与应用示例相关文章请关注PHP中文网！