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ū)域。可點(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ù)?？梢栽贘avaScript代碼中使用存儲(chǔ)的數(shù)據(jù)來(lái)創(chuàng)建更多的用戶體驗(yàn)。

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

• 屬性名稱不得包含任何大寫(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名稱（即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è)樣滑塊范圍選擇的輸入類型。

代碼如下:

<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ù)吧!）

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

必填

將輸入字段標(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>

總結(jié)

以上是生活随笔為你收集整理的未发现数据源名称并且未指定默认驱动程序_10个有用的HTML5功能，您可能未使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。