「本文已參與好文召集令活動，點擊查看：後端、大前端雙賽道投稿，2萬元獎池等你挑戰！」javascript

HTML5不是什麼新鮮事。自初始版本（2008 年 1 月）以來，咱們一直在使用它的幾個功能。我再次仔細查看了 HTML5 功能列表。看看我發現了什麼？到目前爲止，我尚未真正使用過不少！css

在本文中，我列出了 10 個這樣的HTML5功能，這些功能過去我用得很少，但如今發現它們頗有用。我還建立了一個工做示例流程並託管在GitHub. 但願你也以爲它有用。讓咱們開始瞭解有關它們中的每個的解釋、代碼和快速提示。html

🍖 1、詳情標籤

該<details>標籤向用戶提供按需詳細信息。若是您須要按需向用戶顯示內容，請使用此標籤。默認狀況下，小部件是關閉的。打開時，它會展開並顯示其中的內容。java

該<summary>標籤用於<details>爲它指定一個可見的標題。git

代碼github

<details>
     <summary>Click Here to get the user details</summary>
            <table>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Location</th>
                    <th>Job</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>Adam</td>
                    <td>Huston</td>
                    <td>UI/UX</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Bob</td>
                    <td>London</td>
                    <td>Machine Learning</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Jack</td>
                    <td>Australia</td>
                    <td>UI Designer</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Tapas</td>
                    <td>India</td>
                    <td>Blogger</td>
                </tr>
            </table>
        </details>
複製代碼

看看它如何工做面試

🎶 2、內容可編輯

contenteditable是能夠在元素上設置以使內容可編輯的屬性。它適用於 DIV、P、UL 等元素。您必須指定它，例如，<element contenteditable="true|false">。後端

==注意==: 當contenteditable元素上沒有設置屬性時，它將從其父元素繼承。

代碼

<h2> Shoppping List(Content Editable) </h2>
 <ul class="content-editable" contenteditable="true">
     <li> 1. Milk </li>
     <li> 2. Bread </li>
     <li> 3. Honey </li>
</ul>
複製代碼

看看它如何工做

==快速提示==

span 或 div 元素可使用它進行編輯，您可使用 CSS 樣式向其中添加任何豐富的內容。這將比使用輸入字段處理它要好得多。去試一試！

✨ 3、地圖

該<map>標籤有助於定義圖像映射。圖像映射是其中包含一個或多個可點擊區域的圖像。地圖標籤帶有一個<area>標籤來肯定可點擊區域。可點擊區域能夠是這些形狀、矩形、圓形或多邊形區域之一。若是您不指定任何形狀，它會考慮整個圖像。

代碼

<div>
    <img src="circus.jpg" width="500" height="500" alt="Circus" usemap="#circusmap">

    <map name="circusmap">
        <area shape="rect" coords="67,114,207,254" href="elephant.htm">
        <area shape="rect" coords="222,141,318, 256" href="lion.htm">
        <area shape="rect" coords="343,111,455, 267" href="horse.htm">
        <area shape="rect" coords="35,328,143,500" href="clown.htm">
        <area shape="circle" coords="426,409,100" href="clown.htm">
    </map>
 </div>
複製代碼

看看它如何工做

==快速提示==

圖像地圖有其自身的缺點，但您能夠將其用於視覺演示。試試看一張全家福怎麼樣，而後深刻到我的的照片（能夠是咱們一直珍視的舊照片！）。

🏀 4、標記內容

使用<mark>標籤突出顯示任何文本內容。

<p> 你知道嗎，你能夠僅使用 HTML 標籤 <mark>"突出顯示有趣的東西"</mark></p>
複製代碼

看看它如何工做

==快速提示==

您能夠隨時使用 css 更改高亮顏色

mark {
  background-color: green;
  color: #FFFFFF;
}
複製代碼

🎥 5、data-* 屬性

這些data-*屬性用於存儲頁面或應用程序私有的自定義數據。存儲的數據可用於 JavaScript 代碼以建立進一步的用戶體驗。

data-* 屬性由兩部分組成：

屬性名稱不該包含任何大寫字母，而且必須在前綴「data-」以後至少長一個字符
屬性值能夠是任何字符串

代碼

<h2> Know data attribute </h2>
 <div class="data-attribute" id="data-attr" data-custom-attr="You are just Awesome!"> 
   I have a hidden secret!
  </div>

 <button onclick="reveal()">Reveal</button>
複製代碼

而後在 JavaScript 中，

function reveal() {
   let dataDiv = document.getElementById('data-attr');
    let value = dataDiv.dataset['customAttr'];
   document.getElementById('msg').innerHTML = `<mark>${value}</mark>`;
}
複製代碼

注意：要在 JavaScript 中讀取這些屬性的值，您可使用getAttribute()它們的完整 HTML 名稱（即 data-custom-attr），但標準定義了一種更簡單的方法：使用dataset屬性。

看看它如何工做

==快速提示==

您可使用它在頁面上存儲一些數據，而後使用 REST 調用將其傳遞給服務器。

🏆 6、輸出標籤

<output>標籤表示的運算的結果。一般，此元素定義將用於顯示某些計算的文本輸出的區域。

代碼

<form oninput="x.value=parseInt(a.value) * parseInt(b.value)">
   <input type="number" id="a" value="0">
          * <input type="number" id="b" value="0">
                = <output name="x" for="a b"></output>
</form>
複製代碼

看看它如何工做

==快速提示==

若是您在客戶端 JavaScript 中執行任何計算，而且但願結果反映在頁面上，請使用<output>標記。您沒必要執行使用獲取元素的額外步驟getElementById()。

🎻 7、數據列表

<datalist>標籤指定了一個預約義選項列表，並容許用戶向其中添加更多選項。它提供了一項autocomplete功能，容許您經過預先輸入得到所需的選項。

代碼

<form action="" method="get">
    <label for="fruit">Choose your fruit from the list:</label>
    <input list="fruits" name="fruit" id="fruit">
        <datalist id="fruits">
           <option value="Apple">
           <option value="Orange">
           <option value="Banana">
           <option value="Mango">
           <option value="Avacado">
        </datalist>
     <input type="submit">
 </form>  
複製代碼

看看它如何工做

==快速提示==

它與傳統<select>-<option>標籤有何不一樣？選擇標籤用於從您須要瀏覽列表的選項中選擇一項或多項。Datalist是具備自動完成支持的高級功能。

🧿 8、範圍（滑塊）

range是給定滑塊類型範圍選擇器的輸入類型。

代碼

<form method="post">
    <input type="range" name="range" min="0" max="100" step="1" value="" onchange="changeValue(event)"/>
 </form>
 <div class="range">
      <output id="output" name="result">  </output>
 </div>
複製代碼

看看它如何工做

==快速提示==

HTML5 中沒有叫slider的！

⏰ 9、Meter

使用<meter>標籤測量給定範圍內的數據。

代碼

<label for="home">/home/atapas</label>
<meter id="home" value="4" min="0" max="10">2 out of 10</meter><br>

<label for="root">/root</label>
<meter id="root" value="0.6">60%</meter><br>
複製代碼

看看它如何工做

==快速提示==

不要將<meter>標籤用於進度指示器類型的用戶體驗。咱們有來自 HTML5的<Progress>標籤。

<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>
複製代碼

💌 10、Inputs

這部分是咱們最熟悉的輸入類型的用法，如文本、密碼等。輸入類型的特殊用法不多

代碼

必需的將輸入字段標記爲必填字段。

<input type="text" id="username1" name="username" required>
複製代碼

自動對焦經過將光標放在輸入元素上自動提供焦點。

<input type="text" id="username2" name="username" required autofocus>
複製代碼

使用正則表達式驗證您可使用正則表達式指定模式來驗證輸入。

<input type="password" name="password" id="password" placeholder="6-20 chars, at least 1 digit, 1 uppercase and one lowercase letter" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$" autofocus required>
複製代碼

顏色選擇器一個簡單的顏色選擇器。

<input type="color" onchange="showColor(event)">
<p id="colorMe">Color Me!</p>
複製代碼

😊 結尾想說的

本文中用到的全部代碼均可以在下面提到的GitHub存儲庫中找到。若是你喜歡這份工做，能夠點個star。github.com/wanghao221/…

Github、Gitee

往日優秀文章推薦：

若是你真的從這篇文章中學到了一些新東西，喜歡它，收藏它並與你的小夥伴分享。🤗最後，不要忘了❤或📑支持一下哦

你真的熟練運用 HTML5 了嗎，這10 個酷炫的 H5 特性你會幾個？

🍖 1、詳情標籤

🎶 2、內容可編輯

✨ 3、地圖

🏀 4、標記內容

🎥 5、data-* 屬性

🏆 6、輸出標籤

🎻 7、數據列表

🧿 8、範圍（滑塊）

⏰ 9、Meter

💌 10、Inputs

😊 結尾想說的