大家好，在這篇文章中，我將向大家介紹 6 個鮮為人知但有用的 HTML 標籤。您可以在您的應用程式中使用這些元素。
您可以使用 details 標籤建立使用者可以點擊開啟或關閉的互動式小工具。此小部件預設為關閉。打開後，它會展開並且可以看到裡面的內容。
<!DOCTYPE html> <html> <body> <details> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </details> </body> </html> **Gif**
屬性
Open : 指定詳細資訊應對使用者可見（開放）
使用meter標籤，您可以定義標量測量值或已知範圍內的分數值。
範例：
<!DOCTYPE html> <html> <body> <label for="member">Member</label> <meter id="member" value="2" min="0" max="10">2 out of 10</meter><br> <label for="register">Register:</label> <meter id="register" value="0.6">60%</meter> </body> </html>
您可以使用 mark 標籤來反白顯示文字的部分內容。
範例 :
<!DOCTYPE html> <html> <body> <p><mark>Lorem Ipsum</mark> is simply dummy text of the printing and typesetting industry.</p> </body> </html>
您可以根據需要變更突出顯示顏色。
mark {
background-color: red;
color: black;
}
您可以使用 fieldset 標籤將表單中的相關元素分組。在項目周圍畫一個框。
範例：
<!DOCTYPE html> <html> <body> <form > <fieldset> <legend>User:</legend> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="Submit"> </fieldset> </form> </body> </html>
屬性
已停用：指定一組相關的表單元素應停用
名稱：指定欄位集的名稱
您可以使用輸出標籤來顯示一次計算的結果。
Gif：
<p><!DOCTYPE html><br>
<html><br>
<body><br>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)"><br>
<input type="range" id="a" value="50"><br>
+<input type="number" id="b" value="25"><br>
=<output name="x" for="a b"></output><br>
</form><br>
</body><br>
</html></p>
如果您想在應用程式頁面載入時隱藏某些內容，請使用 template 元素。 使用JavaScript查看。
Gif :
<p><!DOCTYPE html><br>
<html><br>
<body></p>
<p><button onclick="showContent()">Show hidden content</button><br>
<template><br>
<h2>Flower</h2><br>
<img src="https://picsum.photos/200" width="214" height="204"><br>
</template></p>
<p><script><br>
function showContent() {<br>
let temp = document.getElementsByTagName("template")[0];<br>
let clon = temp.content.cloneNode(true);<br>
document.body.appendChild(clon);<br>
}<br>
</script></p>
<p></body><br>
</html></p>
在本文中，我們研究了 6 個鮮為人知但有用的 HTML 標籤。
您可以在您的應用程式中使用這些元素。
以上是鮮為人知但有用的 HTML 標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章！
