yy玄幻小说排行榜完本,怎么写网络小说

主頁 > 知識(shí)庫 > HTML 5.1學(xué)習(xí)之新增的14項(xiàng)特性與應(yīng)用示例

HTML 5.1學(xué)習(xí)之新增的14項(xiàng)特性與應(yīng)用示例

前言

眾所周知HTML5 屬于萬維網(wǎng)聯(lián)盟 (W3C), 這個(gè)組織為整個(gè)網(wǎng)絡(luò)界提供了標(biāo)準(zhǔn)，如此形成的協(xié)議可在全世界通行。在 2016 年 11 月， W3C 對(duì)長期行使的 HTML 5 標(biāo)準(zhǔn)進(jìn)行了更新，它是2年內(nèi)的第一次小更新。許多最開始提出的 HTML 5.1 功能特性都因?yàn)樵O(shè)計(jì)上的缺陷和缺乏瀏覽器廠商的支持而去掉了。

盡管有一些元素和功能提升被帶進(jìn)了 HTML 5.1 里面, 但它仍然是一個(gè)小的更新。其中的一些新的元素包含了組合標(biāo)簽, 現(xiàn)在這樣的元素包括有 <dialog>, <details>, <summary> 以及<picture>, 這樣就為開發(fā)者提供了更多表達(dá)創(chuàng)意和內(nèi)容的空間。

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

14. 防止網(wǎng)絡(luò)釣魚攻擊

大多數(shù)使用 target ='_ blank' 的人都不知道一個(gè)有趣的事實(shí)——新打開的標(biāo)簽可以更改 window.opener.location 到一些網(wǎng)絡(luò)釣魚頁面。它會(huì)在開放頁面上代表你執(zhí)行一些惡意 JavaScript 代碼。因?yàn)橛脩粝嘈糯蜷_的頁面已安全，所以他們不會(huì)有所懷疑。

為了完全消除這個(gè)問題，HTML 5.1 已經(jīng)通過隔離瀏覽器上下文的方式標(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)題或圖例，通常作為例如圖片、圖表、插圖等視覺元素的容器。在早期的 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ì)其的拼寫和語法檢查。

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

<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 開發(fā)的布爾變量 allowfullscreen 屬性允許您通過使用 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 ，假如它們在段落內(nèi)容里包含它們自己。假如你想添加詳細(xì)闡述諸如 <section> 和 <article> 標(biāo)簽到語義段落元素，這個(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. 圖片零寬度

HTML 新版本允許你添加零寬度的圖片。當(dāng)圖片不需要向用戶展示時(shí)，可以使用此特性。假如一個(gè) img 元素還有其他用途而不僅僅是展示一個(gè)圖片，例如，作為一個(gè)服務(wù)的一部分用來計(jì)算頁面視圖個(gè)數(shù)，在 width 和 height 屬性中使用 0 數(shù)值。對(duì)于 0 寬度的圖片，推薦使用空屬性。

<img src="theimagefile.jpg" width="0" height="0" alt="">

7. 校驗(yàn)表單

新的 reportValidity() 方法允許你校驗(yàn)一個(gè)表單和重置結(jié)果，并且在瀏覽器適合位置向用戶報(bào)告錯(cuò)誤。用戶代理可以報(bào)告一個(gè)以上的限制規(guī)則，假如單一元素同時(shí)遇到多個(gè)問題。對(duì)于這種情況，“密碼”輸入為必填內(nèi)容但沒有填，將會(huì)標(biāo)識(shí)為錯(cuò)誤。

<h2>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('form').reportValidity()
</script>

6. 瀏覽器的上下文菜單

在 HTML 5.1 中, 你可以使用 <menu> 標(biāo)記來定義菜單，里面包含了一個(gè)或者多個(gè) <menuitem> 元素, 然后利用 contextmenu 屬性將其綁定到任何元素上。 <menu> 元素的 id 取值應(yīng)該與我們想要為其添加上下文菜單的元素的 contextmenu 屬性取值保持一致。

每一個(gè) <menuitem> 都可以有如下三個(gè)表單項(xiàng)中的一個(gè):

radio – 從一個(gè)分組中獲取選項(xiàng)；
checkbox – 選擇或者取消選擇一個(gè)選項(xiàng)；
command – 在點(diǎn)擊時(shí)執(zhí)行一個(gè)動(dòng)作。

<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('WARNING')">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. 在腳本和樣式上使用加密隨機(jī)數(shù)

加密隨機(jī)數(shù)（cryptographic nonce ）是一個(gè)隨機(jī)生成的數(shù)字，只能被使用一次, 而且針對(duì)每一次頁面請(qǐng)求，它都得被生成出來。這個(gè) nonce 屬性可以被使用在 <script> 和 <style> 元素中。

它一般被用在一個(gè)網(wǎng)站的內(nèi)容安全策略之中，以決定一個(gè)特定的樣式和腳本是否應(yīng)該在頁面上被實(shí)現(xiàn)。在下面所提供的代碼中，這個(gè) value 是硬編碼的，不過在實(shí)際的使用場景中，這個(gè)值是隨機(jī)生成的。

<script nonce='d3ne7uWP43Bhr0e'>
  The JavaScript Code 
</script>

4、反序鏈接關(guān)系

rev 屬性在 HTML4 里有定義，但是它并沒出現(xiàn)在 HTML5 里。W3C 決定在 <a> 和 <link> 元素里重新包含 rev 屬性。rev 屬性標(biāo)識(shí)當(dāng)前和反向的鏈接文檔的關(guān)系。它已經(jīng)被包含來支持廣泛使用數(shù)據(jù)結(jié)構(gòu)標(biāo)記格式，RDFa。

讓我們用兩個(gè)文檔來舉個(gè)例子，每個(gè)包含一課程，在它們之間的鏈接可以使用如下 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. 顯示/隱藏信息

新的 <details> 和 <summary> 元素允許您向一段內(nèi)容添加擴(kuò)展信息。您可以通過單擊元素來顯示或隱藏一個(gè)附加信息塊。默認(rèn)情況下是隱藏附加信息的。

在代碼中，您應(yīng)該將 <summary> 標(biāo)記放在 <details> 標(biāo)記內(nèi)，如下所示。 <summary> 標(biāo)簽之后，你可以添加要隱藏的其他內(nèi)容。

<section>
  <h3>Error Message</h3>
  <details>
  <summary>This file hasn'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. 更多的輸入項(xiàng)類型

HTML 輸入項(xiàng)元素?cái)U(kuò)充了三個(gè)輸入類型 – week, month 以及 datetime-local。

正如其名稱所表明的，頭兩個(gè)元素可以讓用戶選擇一個(gè)星期值和一個(gè)月份值。根據(jù)瀏覽器的支持情況不同，它們倆都會(huì)被渲染成一個(gè)下拉顯示的日歷，讓你可以選擇一年中一個(gè)特定的星期或者月份。

datatime-local 表示的是一個(gè)日期和時(shí)間的輸入域, 不過沒有時(shí)區(qū)設(shè)置。其數(shù)據(jù)可以采用跟 month 或者 week 輸入項(xiàng)類似的方法來選定, 而時(shí)間可以單獨(dú)輸入。

<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. 響應(yīng)式圖像

W3C 引入了一些功能特性，無需使用 CSS 就可以實(shí)現(xiàn)響應(yīng)式圖像。它們是 …

srcset 圖像屬性

srcset 屬性讓你可以指定一個(gè)多個(gè)可選的圖像來源，對(duì)應(yīng)于不同的像素分辨率。它將允許瀏覽器根據(jù)用戶設(shè)備的不同選擇合適質(zhì)量的實(shí)現(xiàn)來進(jìn)行顯示。例如，對(duì)于使用網(wǎng)絡(luò)比較慢的移動(dòng)設(shè)備的用戶，顯示一張低分辨率的圖片會(huì)比較好。

你可以使用 srcset 屬性并且?guī)纤杂械?x 修飾符來描述每一個(gè)圖片的像素比例, 如果用戶的像素比例等于 3，就會(huì)顯示 high-res 這張圖片。

<img src="clicks/low-res.jpg" srcset="
  clicks/low-res.jpg 1x, 
  clicks/medium-res.jpg 2x, 
  clicks/high-res.jpg 3x"
>

除了像素比例之外，你也可以選擇使用 w 修飾符來指定不同尺寸大小的圖片。在如下示例中，high-res 圖片被定義成在寬度為 1600px 時(shí)顯示。

<img src="clicks/low-res.jpg" srcset="
  clicks/low-res.jpg 500w, 
  clicks/medium-res.jpg 1000w, 
  clicks/high-res.jpg 1600w"
>

sizes 圖像屬性

大多數(shù)時(shí)候創(chuàng)作者們都喜歡針對(duì)不同的屏幕尺寸顯示不同的圖片。這個(gè)可以用 sizes 屬性做到。它讓你可以針對(duì)分配給圖像顯示的空間大小來對(duì)寬度做出調(diào)整, 然后使用 srcset 屬性來挑選合適的圖片來顯示。例如…

<img src="clicks/low-res.jpg" 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 時(shí)圖像寬度為視窗寬度的 100%，或者在小于等于 25em 時(shí)為視圖寬度的 60%。

picture 元素

picture 元素讓你可以針對(duì)不同的屏幕尺寸聲明圖片。這個(gè)可以通過用 <picture> 元素封裝 <img> ，并且描述多個(gè) <source> 子元素來實(shí)現(xiàn)。

<picture> 標(biāo)記單獨(dú)使用并不會(huì)顯示任何東西。你已經(jīng)被假定會(huì)聲明默認(rèn)的圖像來源作為 src 屬性的取值，而可選的圖像來源則會(huì)放在 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="clicks/default/medium-res.jpg">
</picture>

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。

標(biāo)簽：阿拉善盟湖南揭陽銅陵健身房福建那曲沈陽

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《HTML 5.1學(xué)習(xí)之新增的14項(xiàng)特性與應(yīng)用示例》，本文關(guān)鍵詞 HTML,5.1,學(xué),習(xí)之,新增,的,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。