10 个你不知道自己需要的 HTML 元素

声音的

区块引用

输出

图片

进步

仪表

模板

时间

视频

断词机会

“HTML 很简单”这句话我听过无数次了。虽然我承认 HTML 比其他编程语言更容易学习，但你不应该想当然地认为它很容易。

HTML 是一种强大的标记语言，可用于为我们的 Web 应用程序提供结构并提供强大的可访问性优势，但只有在适当使用时才有效。

因此，今天我们将发现十个您可能不知道的 HTML 元素，希望您可以创建更易于访问且结构更合理的 Web 应用程序。

如果您想了解有关 HTML 的更多信息，您可以访问W3Schools获取更多 HTML 元素。

声音的

该<audio>标签定义声音，例如音乐或其他音频流。目前支持三种文件格式：MP3、WAV 和 OGG。

区块引用

该<blockquote>标签指定从其他来源引用的部分。

输出

标签<output>表示计算的结果。您可以使用加号和等号来指示第一个和第二个输入值应该“输出”到输出标签；您可以使用for包含要合并的两个元素的 ID 的属性来表示这一点。

图片

该<picture>标签允许您指定图像源。无需根据视口宽度缩放单个图像，您可以设计多个图像来填充浏览器视口。

图片标签包含两种不同的标签：一个或多个<source>元素和一个<image>元素。

源元素具有以下属性：

• srcset（必需）：定义要显示的图像的 URL
• media：接受您可能在 CSS 中定义的任何有效媒体查询
• sizes：定义单个宽度值、具有宽度值的单个媒体查询或具有宽度值的以逗号分隔的媒体查询列表
• type：定义 MIME 类型。

浏览器使用属性值来加载最合适的图像；它使用第一个<source>匹配的元素并忽略后续的源元素。

如果浏览器不支持该元素或者没有匹配的标签，则该<img>标签用于提供向后兼容性<source>。

进步

标签<progress>代表任务的进度。

该<progress>标签不能替代标签<meter>，因此指示磁盘空间使用情况或查询结果相关性的组件应该使用该<meter>标签。

仪表

该<meter>标签定义了指定范围内的标量测量值，或分数值。您也可以使用“gauge”来引用此标签。

您可以使用<meter>标签来显示磁盘使用情况统计信息或指示搜索结果的相关性。

标签<meter>不应用于指示任务的进度；这些类型的组件应该由<progress>元素定义。

模板

该<template>标签包含对用户隐藏的内容，但将用于重复实例化 HTML 代码。

使用 JavaScript，您可以使用该cloneNode()方法呈现此内容。

时间

该<time>标签定义了人类可读的日期或时间。它可用于以机器可读的方式对日期和时间进行编码，以便用户代理可以将生日提醒或预定活动添加到用户的日历中。此外，这还能帮助搜索引擎生成“更智能”的搜索结果。

视频

该<video>标签指定影片剪辑或视频流。支持的格式包括 MP4、WebM 和 Ogg。

断词机会

如果您有一段较长的文本或一个较长的单词，您可以使用该<wbr>标签来指定正文中理想的断行位置。这种方法可以确保浏览器在调整大小时不会在奇怪的位置断行文本。

我希望这十个 HTML 元素能为您提供一些新工具来构建出色的应用程序！