1. 首页
  2. 前端基础

这10 个 HTML 元素之你不知道但你却很需要

我听过 “HTML很容易” 这种情绪的次数比我想象的要多。 虽然我同意 HTML 可能比其他编程语言更容易学习,但你不应该认为它是理所当然的。

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

因此,今天我们将发觉 10 个你可能不知道存在的 HTML 元素,希望你可以创建易访问、结构更健全的 web 应用程序。

如果你想了解更多关于 HTML 的知识,可以访问W3Schools以获得更多的 HTML 元素。

Audio

码农进阶题库,每天一道面试题 or Js小知识

运行效果:

码农进阶题库,每天一道面试题 or Js小知识

查看示例

Blockquote

<blockquote> 标签指定从另一个源引用的部分。

码农进阶题库,每天一道面试题 or Js小知识

运行效果:

码农进阶题库,每天一道面试题 or Js小知识

查看示例

Output

<output> 标签表示一个计算的结果。你可以使用加号和等号来指定应该将第一个和第二个输入值输出到输出标记;可以使用包含要合并的两个元素的 IDfor 属性来表示这一点。

码农进阶题库,每天一道面试题 or Js小知识

运行效果:

码农进阶题库,每天一道面试题 or Js小知识

查看示例

Picture

<picture> 通过包含零或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <source> 元素,如果没有匹配的,就选择 <img> 元素的 src 属性中的URL。然后,所选图像呈现在<img>元素占据的空间中。

source 元素具有以下属性:

  • srcset(必填):定义要显示的图像的URL
  • media:media 属性允许你提供一个用于给用户代理作为选择元素的依据的媒体条件(media condition)(类似于媒体查询)。如果这个媒体条件匹配结果为 false,那么这个元素会被跳过。
  • sizes: 定义单个宽度值,具有宽度值的单个媒体查询,或具有宽度值的逗号分隔的媒体查询列表
  • type: type 属性允许你为元素的 srcset 属性指向的资源指定一个 MIME 类型。如果用户代理不支持指定的类型,那么这个元素会被跳过。

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

码农进阶题库,每天一道面试题 or Js小知识

Progress

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

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

码农进阶题库,每天一道面试题 or Js小知识

运行效果:

码农进阶题库,每天一道面试题 or Js小知识

查看示例

Meter

<meter>标签定义了一个定义范围内的标量度量,或者一个分数值。你还可以通过名称gauge引用此标记。

你可以使用<meter>标签来显示磁盘使用情况统计数据,或者指示搜索结果的相关性。

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

码农进阶题库,每天一道面试题 or Js小知识

运行效果:

码农进阶题库,每天一道面试题 or Js小知识

查看示例

Template

HTML内容模板(