H5 标签

audio

<audio> 标签定义声音，比如音乐或其他音频流。

• autoplay='autoplay' 如果出现该属性，则音频在就绪后马上播放。
• controls='controls' 如果出现该属性，则向用户显示控件，比如播放按钮。
• loop='loop' 如果出现该属性，则每当音频结束时重新开始播放。
• muted='muted' 规定视频输出应该被静音。
• preload='preload' 如果出现该属性，则音频在页面加载时进行加载，并预备播放。使用 "autoplay"，则忽略该属性。
• src='URL' 要播放的音频的 URL。

DEMO

<audio controls>
  <!-- Won't play because the mp3 doesn't exist -->
  <source src="cat.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

Your browser does not support the audio tag.

video

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

• autoplay='autoplay' 如果出现该属性，则视频在就绪后马上播放。
• controls='controls' 如果出现该属性，则向用户显示控件，比如播放按钮。
• height='pixels' 设置视频播放器的高度。
• loop='loop' 如果出现该属性，则当媒介文件完成播放后再次开始播放。
• muted='muted' 规定视频的音频输出应该被静音。
• poster='URL' 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
• preload='preload' 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
• src='url' 要播放的视频的 URL。
• width='pixels' 设置视频播放器的宽度。

DEMO

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

博客园将 video 标签渲染出来之后就不能渲染后面的内容了，故此处不写 video标签了。

blockquote

<blockquote> 标签定义块引用。

<blockquote cite="www.frontnotebook.com">
  很多人觉得它非常简单，确实，从本质上来说，它都算不上一中语言，只是一种描述型的标签。所以，在写业务的时候，大多数人都是全屏的div和span，完全满足要求，实现效果完美。
</blockquote>

很多人觉得它非常简单，确实，从本质上来说，它都算不上一中语言，只是一种描述型的标签。所以，在写业务的时候，大多数人都是全屏的div和span，完全满足要求，实现效果完美。

• cite='URL' 规定引用的来源。

output

<output> 标签定义不同类型的输出，比如脚本的输出。

• for='element_id' 定义输出域相关的一个或多个元素。
• form='form_id' 定义输入字段所属的一个或多个表单。
• name='name' 定义对象的唯一名称。（表单提交时使用）。

<form oninput="total.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="total" for="a b"></output>
</form>

0
100
+
=

picture

<picture> 元素通过包含零或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本。

• srcset='URL' 必填，引用图片的url
• media='(min-width=700px)' 允许你提供一个用于媒体查询的条件
• size 定义图片的宽度值，或者一些媒体查询的值
• type 允许你为 <source> 元素的 srcset 属性指向的资源指定一个 MIME 类型。如果用户代理不支持指定的类型，那么这个 <source> 元素会被跳过。

DEMO

<picture>
  <source media="(min-width: 700px)" src="./big.png">
  <source media="(min-width: 400px)" src="./small.png">
  <img src="./alter.png" alt="前端记事本" tyle="width: auto">
</picture>

progress

<progress> 标签标示任务的进度（进程）。

• max='number' 规定任务一共需要多少工作。
• value='number' 规定已经完成多少任务。

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

meter

<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。例子：磁盘用量、查询结果的相关性，等等。<meter> 标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 <progress> 标签。

• form='form_id' 规定 <meter> 元素所属的一个或多个表单。
• high='number' 规定被视作高的值的范围。
• low='number' 规定被视作低的值的范围。
• max='number' 规定范围的最大值。
• min='number' 规定范围的最小值。
• optimum='number' 规定度量的优化值。
• value='number' 必需。规定度量的当前值。

<meter value="6" min="0" max="10"></meter>
<meter value="0.6"></meter>

template

<template> 元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以(原文为 may be)在运行时使用JavaScript实例化。

<template>
  <h1>you-dont-konw-html</h1>
</template>

function createNewNode() {
  const node = document.querySelector('template');
  const template = node.content.cloneNode(true);
  document.body.appendChild(template);
}

time

<time> 用来表示24小时制时间或者公历日期，若表示日期则也可包含时间和时区。

<p>现在是早上<time>7:00</time></p>

现在是早上7:00

wbr

<wbr> 元素 — 一个文本中的位置，其中浏览器可以选择来换行，虽然它的换行规则可能不会在这里换行。

和 <br> 不同，<br> 表示必须折行。而wbr的意思是在宽度足够的情况下不换行，当宽度不足的时候，在 wbr 处主动换行。

所以，如果你有一段很长的文本，其中有一个英文单词，你不希望在文本自适应宽度时，单词因为折行被分割成两个部分，那么可以使用wbr标签保证这个单词不会被折行。

<p>在文本中使用这个属性，可以在页面宽度变小时，在这个英文单词<wbr>front<wbr>处折行，保证单词不会被分割<p>

在文本中使用这个属性，可以在页面宽度变小时，在这个英文单词front处折行，保证单词不会被分割

details

<details> 标签用于描述文档或文档某个部分的细节。

• open='open' 定义 details 是否可见。

<details open='open'>
  <summary>概要</summary>
  details可以创建一个挂件，仅在被切换成展开状态时才会显示内容信息。可以在其中嵌入`<summary>`标签，为该部件提供概要。
</details>

概要

details可以创建一个挂件，仅在被切换成展开状态时才会显示内容信息。可以在其中嵌入<summary>标签，为该部件提供概要。

参考资料

• MDN
• 还在用div的span打天下吗：你应该了解的HTML标签