首页 > 文章 > web前端 > 鲜为人知但有用的 HTML 标签

鲜为人知但有用的 HTML 标签

Susan Sarandon原创: 2024-10-06 06:09:02721浏览

大家好，在这篇文章中，我将向大家介绍 6 个鲜为人知但有用的 HTML 标签。您可以在您的应用程序中使用这些元素。

1. 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**

ITTLE KNOWN BUT USEFUL HTML TAGS

属性

Open : 指定详细信息应对用户可见（开放）

2. HTML 仪表标签

使用meter标签，您可以定义标量测量值或已知范围内的分数值。

示例：

ITTLE KNOWN BUT USEFUL HTML TAGS


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

3. HTML标记Tag

您可以使用 mark 标签突出显示文本的部分内容。

示例 :

ITTLE KNOWN BUT USEFUL HTML TAGS


<!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;
}

ITTLE KNOWN BUT USEFUL HTML TAGS

4. HTML 字段集标签

您可以使用 fieldset 标签对表单中的相关元素进行分组。在项目周围画一个框。

示例：

ITTLE KNOWN BUT USEFUL HTML TAGS


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

属性

已禁用：指定应禁用一组相关的表单元素
名称：指定字段集的名称

5. HTML输出标签

您可以使用输出标签来显示一次计算的结果。

Gif：

ITTLE KNOWN BUT USEFUL HTML TAGS


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

HTML 模板标签

如果您想在应用程序页面加载时隐藏某些内容，请使用 template 元素。 使用JavaScript查看。

Gif :

ITTLE KNOWN BUT USEFUL HTML TAGS


<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中文网其他相关文章！

JavaScript html define if for using Attribute default this display

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：CSS reakthrough: Redefining Animations with animation-timeline: view()下一篇：Boosting Performance by Removing Unused Files and Dependencies with Knip and PurgeCSS

查看更多