这是一个创建于 2064 天前的主题，其中的信息可能已经有所发展或是发生改变。
概述
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>
14 条回复 • 2019-04-03 13:24:11 +08:00
 |
1
whypool 2019-04-02 17:19:45 +08:00
哦
|
 |
2
kamal 2019-04-02 17:34:29 +08:00
ruby
|
 |
3
unicloud 2019-04-02 17:50:40 +08:00 via iPhone
blockquote 挺常用的
|
 |
4
potatosmith 2019-04-02 19:33:09 +08:00
看 web 主要做什么的吧，音视频的 audio video 天天用
|
 |
5
Owenjia 2019-04-02 21:12:44 +08:00
|
 |
6
xy2401 2019-04-02 22:08:00 +08:00
大部分都知道。楼上的 details 很好用。我用来做嵌套目录结构展示。
template 这个真不知道。好多年前我使用 一个 隐藏的 div 来做都 效果大概一样？ |
 |
7
loading 2019-04-02 22:09:26 +08:00 via Android
div span 一把梭
|
 |
8
zzjas98 2019-04-03 00:55:45 +08:00
section, caption, details + summary, figure + figcaption, aside, samp 反正多是为了更好爬
|
 |
10
powertoolsteam OP @Owenjia 赞一个，学习了
|
|
11
powertoolsteam OP @xy2401 网上说有区别 https://segmentfault.com/q/1010000003116353
但是我个人认为没什么区别，因为两者都会被 html 的 dom tree 加载，templete 不会被渲染，渲染的时候遇到隐藏的 dom 也会被跳过。所以我个人认为是没有区别的，这也是我比较疑惑的地方。可能是我了解的还不够充分，如果有哪位大神知道的欢迎指正解惑。 |
 |
12
Exia 2019-04-03 12:53:19 +08:00
赞，有几个还真不知道
|
 |
13
no1xsyzy 2019-04-03 13:15:22 +08:00
@powertoolsteam 参考 <https://stackoverflow.com/a/50029017/6202760>。
另外参考 <https://www.html5rocks.com/en/tutorials/webcomponents/template/>。 1. 处理效率更高； 2. 内部的带副作用的元素不会生效（<style>/<script>/<audio>/<video>/...） 3. 内部元素不会被 document.querySelector 等选中； 4. 内部元素可以是 <tr> 这种无法单独存在的节点； 5. 本身可以被放在本来不可能放 <div> 的位置（比如 <head> 里）。 |
|
14
no1xsyzy 2019-04-03 13:24:11 +08:00
@powertoolsteam 另外这个：<https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots>
配合 Web Components 可以通过设置某个标签的 slot 属性对应到 <slot> 标签的 name 属性并相应地填入。 |
Select Language