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>
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>
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>
现在是早上🌞
wbr
<wbr> 元素 — 一个文本中的位置，其中浏览器可以选择来换行，虽然它的换行规则可能不会在这里换行。
和 <br> 不同，<br> 表示必须折行。而wbr的意思是在宽度足够的情况下不换行，当宽度不足的时候，在 wbr 处主动换行。
所以，如果你有一段很长的文本，其中有一个英文单词，你不希望在文本自适应宽度时，单词因为折行被分割成两个部分，那么可以使用wbr标签保证这个单词不会被折行。
<p>在文本中使用这个属性，可以在页面宽度变小时，在这个英文单词<wbr>front<wbr>处折行，保证单词不会被分割<p>
在文本中使用这个属性，可以在页面宽度变小时，在这个英文单词
details
<details> 标签用于描述文档或文档某个部分的细节。
- open='open' 定义 details 是否可见。
<details open='open'>
<summary>概要</summary>
details可以创建一个挂件，仅在被切换成展开状态时才会显示内容信息。可以在其中嵌入`<summary>`标签，为该部件提供概要。
</details>
概要
details可以创建一个挂件，仅在被切换成展开状态时才会显示内容信息。可以在其中嵌入<summary>标签，为该部件提供概要。
参考资料
