HTML 5之新增的特性該如何使用-html教學-PHP中文網

首頁

web前端

html教學

HTML 5之新增的特性該如何使用

Jan 18, 2018 am 09:51 AM

html 使用如何

這次帶給大家HTML 5之新增的特性該如何使用，HTML 5之新增的特性使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

前言

眾所周知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> 標籤中使用。

&lt;a href=&quot;#&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;
  The link won&#39;t make trouble anymore
&lt;/a&gt;

登入後複製

靈活處理圖片標題

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

&lt;article&gt;
  &lt;h1&gt;The Headline of todays news &lt;/h1&gt;
  &lt;figure&gt;
    &lt;img src=&quot;petrolimage.jpeg&quot; alt=&quot;Petrol price drops&quot;&gt;
    &lt;figcaption&gt;A man fueling up his car at petrol station&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;p&gt;This is the forth hike in petrol prices in two month and the third in case of diesel in one fortnight.&lt;/p&gt;
&lt;/article&gt;

登入後複製

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

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

&lt;p spellcheck=&quot;true&quot;&gt;
 &lt;label&gt;Name: &lt;input spellcheck=&quot; false&quot; id=&quot;textbox&quot;&gt;&lt;/label&gt;
&lt;/p&gt;

登入後複製

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

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

&lt;article&gt;
  &lt;header&gt;
  &lt;p&gt;&lt;img src=&quot;/usericons/16235&quot;&gt; &lt;b&gt;Fred Flintstone&lt;/b&gt;&lt;/p&gt;
  &lt;p&gt;&lt;a href=&quot;/posts/30934&quot; rel=bookmark&gt;12:44&lt;/a&gt; — &lt;a href=&quot;#acl-503439551&quot;&gt;Private Post&lt;/a&gt;&lt;/p&gt;
  &lt;/header&gt;
  &lt;main&gt;
  &lt;p&gt;Check out my new video!&lt;/p&gt;
  &lt;iframe title=&quot;Video&quot; src=&quot;https://youtube.com/?id=92469812&quot; allowfullscreen&gt;&lt;/iframe&gt;
  &lt;/main&gt;
&lt;/article&gt;

登入後複製

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

在下面的程式碼中，<article> 標籤包含一個 <header> 標籤，它有一個自身包含 <header> 標籤的 <aside> 標籤。

&lt;article&gt;
  &lt;header&gt;
    &lt;h2&gt;Lesson: How to cook chicken&lt;/h2&gt;
    &lt;aside&gt;
      &lt;header&gt;
        &lt;h2&gt;About the author: Tom Hank&lt;/h2&gt;
        &lt;p&gt;&lt;a href=&quot;./tomhank/&quot;&gt;Contact him!&lt;/a&gt;&lt;/p&gt;
      &lt;/header&gt;
      &lt;p&gt;Expert in nothing but Cooking. The cookbook sideshow.&lt;/p&gt;
    &lt;/aside&gt;
  &lt;/header&gt;
  &lt;p&gt;&lt;ins&gt;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. &lt;/ins&gt;&lt;/p&gt;
&lt;/article&gt;

登入後複製

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