這10個(gè)有用的HTML5功能，你肯定沒(méi)用過(guò)！

文章來(lái)源于公眾號(hào)：前端人

HTML5 不是新事物。自從最初發(fā)布（2008年1月）以來(lái)，我們一直在使用它的一些功能。今天給大家分享的是一些讓你意想不到的效果，和特性!到目前為止，我還沒(méi)有真正使用過(guò)它！

在本文中，我列出了十個(gè) HTML5 我過(guò)去沒(méi)用過(guò)但現(xiàn)在發(fā)現(xiàn)有用的功能。

1.輸出標(biāo)簽

<output>標(biāo)簽表示的運(yùn)算的結(jié)果。通常，此元素定義一個(gè)區(qū)域，該區(qū)域?qū)⒂糜陲@示某些計(jì)算得出的文本。

代碼如下:

<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中執(zhí)行任何計(jì)算，并且希望結(jié)果反映在頁(yè)面上，請(qǐng)使用<output>標(biāo)記。您不必走動(dòng)使用即可獲取元素的額外步驟getElementById()。

2.詳細(xì)信息標(biāo)簽

該<details>標(biāo)簽提供隨需應(yīng)變的細(xì)節(jié)給用戶。如果需要按需向用戶顯示內(nèi)容，請(qǐng)使用此標(biāo)記。默認(rèn)情況下，小部件是關(guān)閉的。打開(kāi)后，它將展開(kāi)并顯示其中的內(nèi)容。

該<summary>標(biāo)簽使用<details>來(lái)為它指定一個(gè)可見(jiàn)的標(biāo)題。

代碼如下:

<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>
    </table>
</details>

效果如下：

3.內(nèi)容可編輯

contenteditable屬性是可以在元素上設(shè)置以使內(nèi)容可編輯的屬性。它可與DIV，P，UL等元素一起使用。使用方法如下:

<element contenteditable="true|false"/>

注意，如果contenteditable未在元素上設(shè)置，則會(huì)從其父級(jí)繼承該屬性。

代碼如下:

<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樣式向其添加任何豐富的內(nèi)容。這將比使用輸入字段處理它更好。試試看！

4.地圖

該<map>標(biāo)簽可以幫助定義圖像映射。圖像映射是其中具有一個(gè)或多個(gè)可單擊區(qū)域的任何圖像。map標(biāo)簽與<area>標(biāo)簽一起確定可點(diǎn)擊區(qū)域?？牲c(diǎn)擊區(qū)域可以是矩形，圓形或多邊形區(qū)域中的任意一種。如果未指定任何形狀，它將考慮整個(gè)圖像。

代碼如下:

<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>

效果如下：

小小提示

圖像貼圖有其自身的缺點(diǎn)，但是您可以將其用于視覺(jué)演示。如何用全家福照片嘗試一下并深入研究個(gè)人照片（可能是我們一直以來(lái)都懷有的舊照片?。?。

5.標(biāo)記內(nèi)容

使用<mark>標(biāo)記突出顯示任何文本內(nèi)容。

代碼如下:

 <p> 我為何這么帥? <mark>"這該死的魅力"</mark> 是嗎? </p>

效果如下：

小小提示

您還可以使用CSS更改突出顯示顏色，標(biāo)記功能確實(shí)能夠做出很多有意思的東西!

mark {
  background-color: green;
  color: #FFFFFF;
}

6.data- *屬性

這些data-*屬性用于存儲(chǔ)頁(yè)面或應(yīng)用程序?qū)Ｓ玫淖远x數(shù)據(jù)?？梢栽?code>JavaScript代碼中使用存儲(chǔ)的數(shù)據(jù)來(lái)創(chuàng)建更多的用戶體驗(yàn)。

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

• 屬性名稱(chēng)不得包含任何大寫(xiě)字母，并且前綴“ data-”后必須至少長(zhǎng)一個(gè)字符
• 屬性值可以是任何字符串

代碼如下:

<h2> 你準(zhǔn)備好了嗎 </h2>
 <div class="data-attribute" 
      id="data-attr" 
      data-custom-attr="You are just Awesome!"> 
      我有個(gè)秘密！
  </div>
 <button onclick="reveal()">點(diǎn)擊看我的咪咪</button>
function reveal() {
   let dataDiv = document.getElementById('data-attr');
    let value = dataDiv.dataset['customAttr'];
   document.getElementById('msg').innerHTML = `<mark>${value}</mark>`;
}

效果如下：

小小提示

要在JavaScript中讀取這些屬性的值，可以使用getAttribute()它們的完整HTML名稱(chēng)（即data-custom-attr），但是該標(biāo)準(zhǔn)定義了一種更簡(jiǎn)單的方法：使用dataset屬性。

7.數(shù)據(jù)清單

<datalist>標(biāo)簽指定的預(yù)先定義的選項(xiàng)列表，并允許用戶添加更多了。它提供了一項(xiàng)autocomplete功能，使您可以提前輸入所需的選項(xiàng)

代碼如下:

<form action="" method="get">
    <label for="fruit">從列表中選擇你的水果:</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>  

效果如下：

小小提示

與傳統(tǒng)<select>-<option>標(biāo)簽有何不同？選擇標(biāo)記用于從選項(xiàng)中選擇一個(gè)或多個(gè)項(xiàng)目，您需要瀏覽列表以進(jìn)行選擇。Datalist是具有自動(dòng)完成功能的高級(jí)功能。

8.范圍（滑塊）

range是給定的一個(gè)樣滑塊范圍選擇的輸入類(lèi)型。

代碼如下:

<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> 

小小提示

sliderHTML5中沒(méi)有任何毛病

9.測(cè)量標(biāo)簽

使用<meter>標(biāo)簽測(cè)量給定范圍內(nèi)的數(shù)據(jù)。

代碼如下:

<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>標(biāo)簽用于進(jìn)度指示器，以實(shí)現(xiàn)用戶體驗(yàn)。我們有<Progress>HTML5 的標(biāo)記。

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

10.輸入（這個(gè)沒(méi)什么新鮮的，湊數(shù)吧!）

我們最了解這部分的用法，例如文本，密碼等輸入類(lèi)型。輸入類(lèi)型的特殊用法很少，

必填

將輸入字段標(biāo)記為必填

<input type="text" id="username1" name="username" required>

效果如下：

自動(dòng)對(duì)焦

通過(guò)將光標(biāo)放在輸入元素上來(lái)自動(dòng)將焦點(diǎn)放在輸入元素上。

<input type="text" id="username2" name="username" required autofocus>

正則表達(dá)式驗(yàn)證

您可以使用正則表達(dá)式指定模式以驗(yàn)證輸入。

<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>

以上就是W3Cschool編程獅關(guān)于這10個(gè)有用的HTML5功能，你肯定沒(méi)用過(guò)！的相關(guān)介紹了，希望對(duì)大家有所幫助。