新特性
+ 用于绘画的 canvas 元素
+ 用于媒介回放的 video 和 audio 元素
+ 对本地离线存储的更好的支持
+ 新的特殊内容元素，比如 article、footer、header、nav、section
+ 新的表单控件，比如 calendar、date、time、email、url、search
article
<article> article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。
section
section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素；当一个内容需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。section元素中的内容可以单独存储到数据库中或输出到word文档中。
通常不推荐为那些没有标题的内容使用section元素。
section元素的作用是对页面上的内容进行分块，或者说对文章进行分段，请不要与有着自己的完整的、独立的内容的article元素混淆。
section 使用禁忌
+ 不要将section元素用作设置样式的页面容器，那是div元素的工作。
+ 如果article元素、aside元素或nav元素更符合使用条件，不要使用section元素。
+ 不要为没有标题的内容区块使用section元素。
<aside>元素表示一个页面的一部分， 它的内容跟这个页面的其它内容的关联性不强，或者是没有关联，单独存在。<aside>元素通常显示成侧边栏(sidebar)或一些插入补充内容。通常用来在侧边栏显示一些定义，比如目录、索引、术语表等；也可以用来显示相关的广告宣传，作者的介绍，Web应用，相关链接，当前页内容简介等。
不要使用<aside>元素标记括号中的文字，因为这种类型的文本被认为是主内容的一部分
nav
`<nav>`是与导航相关的，所以一般用于网站导航布局。同时完全就像使用`div`标签、`span`标签一样来使用`<nav>`标签，可添加`id`或`class`。而与`div`标签又有不同处是，此标签一般只用于导航相关地方使用，所以在一个html网页布局中可能就使用在导航条处，或与导航条相关的地方布局使用。
command
<command>标签是用来表示用户能够调用的命令，可以定义命令按钮，比如单选按钮、复选框或按钮。<command>标签在<menu>元标签中才是可见的，它还可以规定键盘快捷键。<command> 标签是html 5中新增标签，目前只有在IE 9中支持。
details & summary
`<details>` 标签 用于描述文档或文档某个部分的细节，与 <summary> 标签 配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。
`<details>` 标签 拥有 open 属性，"details" 元素默认是隐藏的，设置 open 属性后，可以定义"details" 元素默认可见，与checkbox定义checked属性是一个道理。
ul {
margin: 0;
padding: 0;
list-style: none;
max-height: 0;
transition: .3s all;
overflow: hidden;
}
[open] + ul {
max-height: 60px;
}
<div>
<details open>
<summary>商品管理</summary>
</details>
<ul>
<li>商品列表</li>
<li>添加商品</li>
</ul>
</div>
<div>
<details open>
<summary>品牌管理</summary>
</details>
<ul>
<li>品牌列表</li>
<li>添加品牌</li>
</ul>
</div>
<div>
<details open>
<summary>分类管理</summary>
</details>
<ul>
<li>分类列表</li>
<li>添加分类</li>
</ul>
</div>
hgroup
hgroup元素是将标题和他的子标题进行分组的元素。hgroup元素一般会把h1-h6的元素进行分组，比如在一个内容区块的标题和他的子标题算是一组。通常情况下，文章只有一个主标题时，是不需要hgroup元素的。
<hgroup>
<h1>文章主标题</h1>
<h2>文章子标题</h2>
</hgroup>
figure & figcaption
`<figure>` 标签规定独立的流内容（图像、图表、照片、代码等等）。
figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
mark
<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。
<p>Do not forget to buy <mark>milk</mark> today.</p>
time
<time> 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。
该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。
<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<p>我在 <time datetime="2019-02-14">情人节</time> 有个约会。</p>
progress
<progress> 标签标示任务的进度（进程）
<progress value="22" max="100"></progress>
meter
<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。
<meter value="3" min="0" max="10">十分之三</meter>
<meter value="0.6">60%</meter>
embed
embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等，Netscape及新版的IE都支持。url为音频或视频文件及其路径，可以是相对路径或绝对路径。
<embed src="your.wav" autostart=true>
autostart=true、false
该属性规定音频或视频文件是否在下载完之后就自动播放。
loop=正整数、true、false
该属性规定音频或视频文件是否循环及循环次数。
hidden=ture、no
该属性规定控制面板是否显示，默认值为no。
starttime=mm:ss（分：秒）
该属性规定音频或视频文件开始播放的时间。未定义则从文件开头播放。
volume=0-100之间的整数
该属性规定音频或视频文件的音量大小。未定义则使用系统本身的设定。
height=# width=#
取值为正整数或百分数，单位为像素。该属性规定控制面板的高度和宽度
：units=pixels、en
该属性指定高和宽的单位为pixels或en。
controls
该属性规定控制面板的外观。默认值是console。
console：一般正常面板；
smallconsole：较小的面板；
playbutton：只显示播放按钮；
pausebutton：只显示暂停按钮；
stopbutton：只显示停止按钮；
volumelever：只显示音量调节按钮。
name=#
#为对象的名称。该属性给对象取名，以便其他对象利用。
title=#
#为说明的文字。该属性规定音频或视频文件的说明文字。
palette=color|color
该属性表示嵌入的音频或视频文件的前景色和背景色，第一个值为前景色，第二个值为背景色，中间用 | 隔开。color可以是RGB色（RRGGBB）也可以是颜色名，还可以是transparent （透明）。
align
该属性规定控制面板和当前行中的对象的对齐方式。
center：控制面板居中；
left：控制面板居左；
right：控制面板居右；
top：控制面板的顶部与当前行中的最高对象的顶部对齐；
bottom：控制面板的底部与当前行中的对象的基线对齐；
baseline：控制面板的底部与文本的基线对齐；
texttop：控制面板的顶部与当前行中的最高的文字顶部对齐；
middle：控制面板的中间与当前行的基线对齐；
absmiddle：控制面板的中间与当前文本或对象的中间对齐；
absbottom：控制面板的底部与文字的底部对齐。
bdi
bdi 指的是 bidi 隔离。
<bdi> 标签允许您设置一段文本，使其脱离其父元素的文本方向设置。
在发布用户评论或其他您无法完全控制的内容时，该标签很有用。
浏览器支持差。
<div>Username <bdi dir="rtl">Bill</bdi>:80 points</div>
<div>Username <bdi dir="rtl">Steve</bdi>: 78 points</div>
bdi
{
width: 150px;
display: block;
}
ruby & rp & rb & rt
<ruby> 标签定义 ruby 注释（中文注音或字符）拼音字母
在东亚使用，显示的是东亚字符的发音。
与 <ruby> 以及 <rt> 标签一同使用：
ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 "ruby" 元素时显示的内容。
<rb> 要注音的对象。
<ruby>
<rb>千锋教育</rb>
<rp>(</rp>
<rt>qian feng jiao yu</rt>
<rp>)</rp>
</ruby>
video
`<video>` 标签定义视频，比如电影片段或其他视频流。
<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| height | *pixels* | 设置视频播放器的高度。 |
| loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放。 |
| muted | muted | 规定视频的音频输出应该被静音。 |
| poster | *URL* | 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。 |
| preload | preload | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 |
| src | *url* | 要播放的视频的 URL。 |
| width | *pixels* | 设置视频播放器的宽度。
script方法
play()
开始播放音频/视频
pause()
暂停当前播放的音频/视频
load()
重新加载音频/视频元素
canPlayType()
方法浏览器是否能播放指定的音频/视频类型。
"probably" - 浏览器最可能支持该音频/视频类型
"maybe" - 浏览器也许支持该音频/视频类型
"" - （空字符串）浏览器不支持该音频/视频类型
script属性
currentSrc
返回当前音频/视频的 URL
currentTime
设置或返回音频/视频中的当前播放位置（以秒计）
设置可以调播到指定时间
videoWidth
videoHeight
height
width
duration
返回当前音频/视频的长度（以秒计）
ended
返回音频/视频的播放是否已结束
error
返回表示音频/视频错误状态的 MediaError 对象
paused
设置或返回音频/视频是否暂停
playbackRate
设置或返回音频/视频播放的速度
muted
设置或返回音频/视频是否静音
seeking
返回用户是否正在音频/视频中进行查找
volume
设置或返回音频/视频的音量
loop
设置或返回音频/视频是否应在结束时重新播放
autoplay
设置或返回是否在加载完成后随即播放音频/视频
preload
设置或返回音频/视频是否应该在页面加载后进行加载
played
返回表示音频/视频已播放部分的 TimeRanges 对象
script事件
play
当音频/视频已开始或不再暂停时
pause
当音频/视频已暂停时
progress
当浏览器正在下载音频/视频时
error
当在音频/视频加载期间发生错误时
timeupdate
当目前的播放位置已更改时
ended
当目前的播放列表已结束时
abort
当音频/视频的加载已放弃时
emptied
当目前的播放列表为空时
waiting
当视频由于需要缓冲下一帧而停止
loadedmetadata
当浏览器已加载音频/视频的当前帧时
audio
`<audio>` 标签定义声音，比如音乐或其他音频流。
<audio src="someaudio.wav">
您的浏览器不支持 audio 标签。
</audio>
script属性
audioTracks | 返回表示可用音频轨道的 AudioTrackList 对象。 |
| autoplay | 设置或返回是否在就绪（加载完成）后随即播放音频。 |
| buffered | 返回表示音频已缓冲部分的 TimeRanges 对象。 |
| controller | 返回表示音频当前媒体控制器的 MediaController 对象。 |
| controls | 设置或返回音频是否应该显示控件（比如播放/暂停等）。 |
| crossOrigin | 设置或返回音频的 CORS 设置。 |
| currentSrc | 返回当前音频的 URL。 |
| currentTime | 设置或返回音频中的当前播放位置（以秒计）。 |
| defaultMuted | 设置或返回音频默认是否静音。 |
| defaultPlaybackRate | 设置或返回音频的默认播放速度。 |
| duration | 返回音频的长度（以秒计）。 |
| ended | 返回音频的播放是否已结束。 |
| error | 返回表示音频错误状态的 MediaError 对象。 |
| loop | 设置或返回音频是否应在结束时再次播放。 |
| mediaGroup | 设置或返回音频所属媒介组合的名称。 |
| muted | 设置或返回是否关闭声音。 |
| networkState | 返回音频的当前网络状态。 |
| paused | 设置或返回音频是否暂停。 |
| playbackRate | 设置或返回音频播放的速度。 |
| played | 返回表示音频已播放部分的 TimeRanges 对象。 |
| preload | 设置或返回音频的 preload 属性的值。 |
| readyState | 返回音频当前的就绪状态。 |
| seekable | 返回表示音频可寻址部分的 TimeRanges 对象。 |
| seeking | 返回用户当前是否正在音频中进行查找。 |
| src | 设置或返回音频的 src 属性的值。 |
| textTracks | 返回表示可用文本轨道的 TextTrackList 对象。 |
| volume | 设置或返回音频的音量。 |
script方法
addTextTrack() | 向音频添加新的文本轨道。 |
| canPlayType() | 检查浏览器是否能够播放指定的音频类型。 |
| fastSeek() | 在音频播放器中指定播放时间。 |
| getStartDate() | 返回新的 Date 对象，表示当前时间线偏移量。 |
| load() | 重新加载音频元素。 |
| play() | 开始播放音频。 |
| pause() | 暂停当前播放的音频。
script事件
play 播放事件 可判断歌曲是否正在播放中
pause 暂停事件 判断歌曲是否暂停
loadstart，durationchange，loadeddata，progress，canplay，canplaythrough。（这些事件在加载过程中是按以上顺序触发的）
以上这些事件可以通过事件监听对其做相应处理。
source
<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。用于解码器的选择
<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
track
<track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。目前所有主流浏览器都`不支持` <track> 标签。
<video width="320" height="240" controls="controls">
<source src="forrest_gump.mp4" type="video/mp4" />
<source src="forrest_gump.ogg" type="video/ogg" />
<track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
<track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
</video>
canvas
`<canvas>` 标签定义图形，比如图表和其他图像。
`<canvas>` 标签只是图形容器，您必须使用脚本来绘制图形。
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
表单
<input/>
type属性
- email
email 类型用于应该包含 e-mail 地址的输入域。
- url
url 类型用于应该包含 URL 地址的输入域。
- number
number 类型用于应该包含数值的输入域。
max | *number* | 规定允许的最大值 |
| min | *number* | 规定允许的最小值 |
| step | *number* | 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等） |
| value | *number* | 规定默认值
- range
range 类型用于应该包含一定范围内数字值的输入域。
| max | *number* | 规定允许的最大值 |
| min | *number* | 规定允许的最小值 |
| step | *number* | 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等） |
| value | *number* | 规定默认值
- Date pickers (date, month, week, time, datetime, datetime-local)
拥有多个可供选取日期和时间的新输入类型
- date - 选取日、月、年
- month - 选取月、年
- week - 选取周和年
- time - 选取时间（小时和分钟）
- datetime - 选取时间、日、月、年（UTC 时间）
- datetime-local - 选取时间、日、月、年（本地时间）
- search
search 类型用于搜索域，比如站点搜索或 Google 搜索。
- color
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能
autofocus 属性规定在页面加载时，域自动地获得焦点。
form 属性规定输入域所属的一个或多个表单。
<form action="demo_form.php" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />
- formaction - 重写表单的 action 属性
- formenctype - 重写表单的 enctype 属性
- formmethod - 重写表单的 method 属性
- formnovalidate - 重写表单的 novalidate 属性
- formtarget - 重写表单的 target 属性
height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。
list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。
multiple 属性规定输入域中可选择多个值。
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
pattern 属性规定用于验证 input 域的模式（pattern）。模式（pattern） 是正则表达式。
<input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />
placeholder 属性提供一种提示（hint），描述输入域所期待的值。
required 属性规定必须在提交之前填写输入域（不能为空）。
datalist
<datalist> 标签定义选项列表。与 input 元素配合使用该元素，来定义 input 可能的值。
datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
使用 input 元素的 list 属性来绑定 datalist。
<input id="city" list="cityData">
<datalist id="cityData">
<option>北京</option>
<option>上海</option>
<option>武汉</option>
</datalist>
keygen
<keygen> 标签规定用于表单的密钥对生成器字段。
当提交表单时，私钥存储在本地，公钥发送到服务器。
<form action="demo_keygen.do" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
output
<output> 标签定义不同类型的输出，比如脚本的输出。
<form οninput="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>
form属性
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能
autofocus 属性规定在页面加载时，域自动地获得焦点。
全局属性
| contenteditable | 规定元素内容是否可编辑。 |
| contextmenu | 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。 |
| data-* | 用于存储页面或应用程序的私有定制数据。 |
| draggable | 规定元素是否可拖动。 |
| dropzone | 规定在拖动被拖动数据时是否进行复制、移动或链接。 |
| hidden | 隐藏元素 |
| spellcheck | 规定是否对元素进行拼写和语法检查。 |
| translate | 规定是否应该翻译元素内容。
window事件
| onafterprint | script | 文档打印之后运行的脚本。 |
| onbeforeprint | script | 文档打印之前运行的脚本。 |
| onbeforeunload | script | 文档卸载之前运行的脚本。 |
| onerror | script | 在错误发生时运行的脚本。 |
| onhashchange | script | 当文档已改变时运行的脚本。 |
| onmessage | script | 在消息被触发时运行的脚本。 |
| onoffline | script | 当文档离线时运行的脚本。 |
| ononline | script | 当文档上线时运行的脚本。 |
| onpagehide | script | 当窗口隐藏时运行的脚本。 |
| onpageshow | script | 当窗口成为可见时运行的脚本。 |
| onpopstate | script | 当窗口历史记录改变时运行的脚本。 |
| onredo | script | 当文档执行撤销（redo）时运行的脚本。 |
| onstorage | script | 在 Web Storage 区域更新后运行的脚本。 |
| onundo | script | 在文档执行 undo 时运行的脚本。 |
form事件
| oncontextmenu | script | 当上下文菜单被触发时运行的脚本。 |
| onformchange | script | 在表单改变时运行的脚本。 |
| onforminput | script | 当表单获得用户输入时运行的脚本。 |
| oninvalid | script | 当元素无效时运行的脚本。
Mouse事件
ondrag | script | 元素被拖动时运行的脚本。 |
| ondragend | script | 在拖动操作末端运行的脚本。 |
| ondragenter | script | 当元素元素已被拖动到有效拖放区域时运行的脚本。 |
| ondragleave | script | 当元素离开有效拖放目标时运行的脚本。 |
| ondragover | script | 当元素在有效拖放目标上正在被拖动时运行的脚本。 |
| ondragstart | script | 在拖动操作开端运行的脚本。 |
| ondrop | script | 当被拖元素正在被拖放时运行的脚本。 |
| onmousewheel | script | 当鼠标滚轮正在被滚动时运行的脚本。 |
| onscroll | script | 当元素滚动条被滚动时运行的脚本。
Media事件
| oncanplay | script | 当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）。 |
| oncanplaythrough | script | 当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本。 |
| ondurationchange | script | 当媒介长度改变时运行的脚本。 |
| onemptied | script | 当发生故障并且文件突然不可用时运行的脚本（比如连接意外断开时）。 |
| onended | script | 当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。 |
| onerror | script | 当在文件加载期间发生错误时运行的脚本。 |
| onloadeddata | script | 当媒介数据已加载时运行的脚本。 |
| onloadedmetadata | script | 当元数据（比如分辨率和时长）被加载时运行的脚本。 |
| onloadstart | script | 在文件开始加载且未实际加载任何数据前运行的脚本。 |
| onpause | script | 当媒介被用户或程序暂停时运行的脚本。 |
| onplay | script | 当媒介已就绪可以开始播放时运行的脚本。 |
| onplaying | script | 当媒介已开始播放时运行的脚本。 |
| onprogress | script | 当浏览器正在获取媒介数据时运行的脚本。 |
| onratechange | script | 每当回放速率改变时运行的脚本（比如当用户切换到慢动作或快进模式）。 |
| onreadystatechange | script | 每当就绪状态改变时运行的脚本（就绪状态监测媒介数据的状态）。 |
| onseeked | script | 当 seeking 属性设置为 false（指示定位已结束）时运行的脚本。 |
| onseeking | script | 当 seeking 属性设置为 true（指示定位是活动的）时运行的脚本。 |
| onstalled | script | 在浏览器不论何种原因未能取回媒介数据时运行的脚本。 |
| onsuspend | script | 在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本。 |
| ontimeupdate | script | 当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。 |
| onvolumechange | script | 每当音量改变时（包括将音量设置为静音）时运行的脚本。 |
| onwaiting | script | 当媒介已停止播放但打算继续播放时（比如当媒介暂停已缓冲更多数据）运行脚本 |
870
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
