文章來源于公眾號(hào)：前端人
HTML5 不是新事物。自從最初發(fā)布（2008年1月）以來，我們一直在使用它的一些功能。今天給大家分享的是一些讓你意想不到的效果，和特性!到目前為止，我還沒有真正使用過它！
在本文中，我列出了十個(gè) HTML5 我過去沒用過但現(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é)果反映在頁面上，請使用<output>標(biāo)記。您不必走動(dòng)使用即可獲取元素的額外步驟getElementById()。
2.詳細(xì)信息標(biāo)簽
該<details>標(biāo)簽提供隨需應(yīng)變的細(xì)節(jié)給用戶。如果需要按需向用戶顯示內(nèi)容，請使用此標(biāo)記。默認(rèn)情況下，小部件是關(guān)閉的。打開后，它將展開并顯示其中的內(nèi)容。
該<summary>標(biāo)簽使用<details>來為它指定一個(gè)可見的標(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)，但是您可以將其用于視覺演示。如何用全家福照片嘗試一下并深入研究個(gè)人照片（可能是我們一直以來都懷有的舊照片?。?。
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īng)用程序?qū)Ｓ玫淖远x數(shù)據(jù)?？梢栽?code>JavaScript代碼中使用存儲(chǔ)的數(shù)據(jù)來創(chuàng)建更多的用戶體驗(yàn)。
data- *屬性由兩部分組成：
- 屬性名稱不得包含任何大寫字母，并且前綴“ data-”后必須至少長一個(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名稱（即data-custom-attr），但是該標(biāo)準(zhǔ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è)樣滑塊范圍選擇的輸入類型。
代碼如下:
<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中沒有任何毛病
9.測量標(biāo)簽
使用<meter>標(biāo)簽測量給定范圍內(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è)沒什么新鮮的，湊數(shù)吧!）
我們最了解這部分的用法，例如文本，密碼等輸入類型。輸入類型的特殊用法很少，
必填
將輸入字段標(biāo)記為必填
<input type="text" id="username1" name="username" required>效果如下：
自動(dòng)對(duì)焦
通過將光標(biāo)放在輸入元素上來自動(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功能，你肯定沒用過！的相關(guān)介紹了，希望對(duì)大家有所幫助。
