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

在本文中，我列出了十個HTML5我過去沒用過但現在發現有用的功能。

1. 輸出標簽

<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()。

2.詳細信息標簽

該<details>標簽提供隨需應變的細節給用戶。如果需要按需向用戶顯示內容，請使用此標記。默認情況下，小部件是關閉的。打開后，它將展開并顯示其中的內容。

該<summary>標簽使用<details>來為它指定一個可見的標題。

代碼如下:

<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.內容可編輯

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

4.地圖

該<map>標簽可以幫助定義圖像映射。圖像映射是其中具有一個或多個可單擊區域的任何圖像。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>

效果如下：

小小提示

圖像貼圖有其自身的缺點，但是您可以將其用于視覺演示。如何用全家福照片嘗試一下并深入研究個人照片（可能是我們一直以來都懷有的舊照片！）。

5. 標記內容

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

代碼如下:

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

效果如下：

小小提示

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

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

6. data- *屬性

這些data-*屬性用于存儲頁面或應用程序專用的自定義數據。可以在JavaScript代碼中使用存儲的數據來創建更多的用戶體驗。

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

• 屬性名稱不得包含任何大寫字母，并且前綴“ data-”后必須至少長一個字符
• 屬性值可以是任何字符串

代碼如下:

<h2> 你準備好了嗎 </h2><div class="data-attribute" id="data-attr" data-custom-attr="You are just Awesome!"> 我有個秘密！</div><button onclick="reveal()">點擊看我的秘密</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），但是該標準定義了一種更簡單的方法：使用dataset屬性。

7. 數據清單

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

代碼如下:

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

效果如下：

小小提示

與傳統<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>

小小提示

sliderHTML5中沒有任何毛病

9. 測量標簽

使用<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>標簽用于進度指示器，以實現用戶體驗。我們有<Progress>HTML5 的標記。

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

10. 輸入（這個沒什么新鮮的，湊數吧!）

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

必填

將輸入字段標記為必填

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。