你可能不知道的 HTML 标签

2025-05-25

你可能不知道的 HTML 标签

你好，开发者👋

在这篇文章中，我将分享 HTML5 中添加的一些新的、有用的 HTML 标签，以便编写简单、快速的代码来创建复杂、动态、引人入胜且有效的网站。

让我们开始吧🚀

对话

➡ 现在，您可以轻松使用标签创建对话框或弹出窗口<dialog>。这是一种创建自定义模态对话框的绝佳方法，无需过度依赖JavaScript。

<dialog id="myDialog">
  <p>This is a dialog box</p>
  <button onclick="document.getElementById('myDialog').close()">Close
  </button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">Open Dialog
</button>
Enter fullscreen mode Exit fullscreen mode

模板

➡ 该<template>标签用作容器，用于保存您不想在页面加载时显示的客户端内容。您可以使用JavaScript克隆这些内容并将其插入到文档中。

<button onclick="showContent()">Show hidden content</button>

<template>
  <h2>Hello, This is Kiran</h2>
  <p>Thanks for reading this</p>
</template>

<script>
function showContent() {
  let temp = document.getElementsByTagName("template")[0];
  let clon = temp.content.cloneNode(true);
  document.body.appendChild(clon);
}
</script>
Enter fullscreen mode Exit fullscreen mode

图片

➡ 通过使用<picture>标签，您可以为一张图片定义多个来源，浏览器会根据屏幕尺寸和分辨率选择最佳来源。这对于响应式设计尤其有用。

<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Enter fullscreen mode Exit fullscreen mode

仪表

➡ 该<meter>标签可用于表示已知范围内的标量测量，例如磁盘使用情况或查询结果的相关性。它有助于直观地显示一定范围内的值。

<label for="diskUsage">Disk Usage:</label>
<meter id="diskUsage" value="0.6">60%</meter>
Enter fullscreen mode Exit fullscreen mode

输出

➡ 该<output>标签表示计算结果。它可以与JavaScript一起使用来显示计算结果。

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" value="50"> +
  <input type="number" id="b" value="25"> =
  <output name="result" for="a b">75</output>
</form>
Enter fullscreen mode Exit fullscreen mode

进步

➡标签代表任务<progress>的完成进度，例如下载或文件上传。

<label for="fileProgress">File upload progress:</label>
<progress id="fileProgress" value="70" max="100">70%</progress>
Enter fullscreen mode Exit fullscreen mode

标记

➡ 该<mark>标签用于高亮文本。对于需要高亮匹配文本的搜索结果页面来说，它尤其有用。

<p>The word <mark>highlighted</mark> is important.</p>
Enter fullscreen mode Exit fullscreen mode

缩写

➡ 该<abbr>标签用于定义缩写或首字母缩略词，在标题属性中提供完整的描述。

<p>I'm a true<abbr title="Marvel Cinematic Universe">MCU</abbr>fan.</p>
Enter fullscreen mode Exit fullscreen mode

时间

➡ 该<time>标签用于表示日期、时间或持续时间。它有助于使与时间相关的数据可机器读取。

<p>The concert starts at <time datetime="20:00">8 PM</time>.</p>
Enter fullscreen mode Exit fullscreen mode

比迪

➡ 此<bdi>标签用于隔离文本中可能与其他文本格式不同的部分。它可确保您的网页内容保持一致且可读，无论涉及何种语言或文本格式。

<ul>
  <li>Product: <bdi>ABC1234</bdi></li>
  <li>Product: <bdi>مرحبا5678</bdi></li>
</ul>
Enter fullscreen mode Exit fullscreen mode

沃布尔

➡ 此<wbr>标签指定文本在何处换行（如果需要）。这对于长单词或 URL 非常有用。

<p>Thisisaverylongword<wbr>thatmightneedbreaking.</p>
Enter fullscreen mode Exit fullscreen mode

主要的

➡ 该<main>标签用于指定文档的主要内容。该标签每页只能使用一次，并且不包含文档中重复的内容，例如页眉、页脚、导航和侧边栏。

<main>
  <h1>Welcome to my blog post</h1>
  <p>Today we will learn some new html tags</p>
</main>
Enter fullscreen mode Exit fullscreen mode

图题

➡ 该<figcaption>标签用于为图形提供标题。

<figure>
  <img src="Thanos.jpg" alt="Thanos image">
  <figcaption>Thanos snapping his fingers</figcaption>
</figure>
Enter fullscreen mode Exit fullscreen mode

这就是本文的全部内容。👍

谢谢你的阅读❤

在👉X GitHub上找到我

dev_kiran 图片

基兰·纳拉贡德

技术作家和主持人@DEV ✦全栈开发人员✦导师@Exercism✦开源贡献者✦协作电子邮件:)
文章来源：https://dev.to/dev_kiran/html-tags-you-might-not-know-about-3gk7
Devto 翻译
PREV
2019-2020 年你可能不知道的 JavaScript 功能私有类字段👇 String.matchAll()👇 数字分隔符👇 BigInt's👇 带有 BigInt 的语言环境字符串👇 GlobalThis 关键字👇 Promise.allSettled()👇 动态导入👇 稳定排序 —（现在结果一致可靠）👇
NEXT
😎 使用这些神奇的工具，成为 10 倍开发者🧑‍💻