10 个不常用但你有必要知道的 html 标签

概述

HTML 也被称为超文本记语言（ hyper text markup language ）是为网页创建和其他可在网页浏览器中看到的信息设计的一种标记语言。HTML 被用来结构化信息，如标题、段落和列表等，也可用来在一定程度上描述文档的外观和语义。

今天我们将介绍您可能不知道的十个 HTML 标签。虽然不常用，但是一旦遇到使用场景使用起来将是非常方便的。

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

audio：

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

<audio src="/i/horse.ogg" controls="controls">
Your browser does not support the audio element.
</audio>

点击此处查看结果

blockquote

<blockquote> 标签定义块引用。 <blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。

Here comes a long quotation:

<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
</blockquote>

请注意，浏览器在 blockquote 元素前后添加了换行，并增加了外边距。

点击此处查看结果

output

<output> 标签定义不同类型的输出，比如脚本的输出。标签包含以下属性 for 规定一个或多个元素的 id 列表，以空格分隔。这些元素描述了计算中使用的元素与计算结果之间的关系。 form 规定 <output> 元素所属的一个或多个表单的 id 列表，以空格分隔。 name 规定 <output> 元素的名称。 Internet Explorer 不支持 <output> 标签。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

点击此处查看结果

picture

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

picture 标签的属性如下：

srcset （必需） - 定义要显示的图像的 URL

media - 接受通常在 CSS 中定义的任何有效媒体查询（ media queries ）

例如下面所示

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

根据浏览器的最小宽度的变化，picture 将显示不同的图片

点击此处查看结果

progress

<progress> 标签标示任务的进度（进程）。用于进度条显示

<progress value="22" max="100">
</progress>

点击此处查看结果

meter

<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge （尺度）。也可以用于进度条的显示

<meter value="3" min="0" max="10">3/10</meter><br>
<meter value="0.6">60%</meter>

点击此处查看结果

template

<template>标记内的内容本身是对用户隐藏的，通过 JS 可以将其用于重复实例化显示。相当有定义了一个模板，该模板可以通过 JS 重复被调用展示。

例如下面定义模板：

<template>
    <img src=” icon.jpg ”>
</template>

在 JS 中可以通过 cloneNode() 方法，来重复实例化显示该模板中的内容：

const template = document.querySelecor(‘ template ’);
const templateClone = myTemplate.content.cloneNode(true);
document.body.appendChild(templateClone);

time

<time> 标签定义公历的时间（ 24 小时制）或日期，时间和时区偏移是可选的。

time 主要作用在于可以方便的被爬虫抓取，从而获得相应的数据。

time 本身对页面布局没有任何影响

例如：

<p>
我们在每天早上 <time>9:00</time> 开始营业。
</p>

video

与<audio>相对应，<video> 标签定义视频，比如电影片段或其他视频流。

<video src="/i/movie.ogg" controls="controls">
your browser does not support the video tag
</video>

点击此处查看结果

wbr

wbr 是 Word Break Opportunity 的简写，规定在文本中的何处适合添加换行符。

例如下面的对于较长的单词 XMLHttpRequest 希望在换行时候能够截断换行而不是整个换行的情况下可以使用，下面的代码在换行的时候截断成 XML Http Request 分别进行换行，而不是 XMLHttpRequest 整个进行换行。

<p>
如果想学习 AJAX，那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。
</p>

点击此处查看结果