# 前言
H5的雏形形成于2004年，在2008年发布正式版，并于2014年定稿。目前支持IE9+及绝大多数市场浏览器。同时，它是唯一一个支持PC、Mac、iPhone、Android等主流平台的 跨平台语言。用H5开发的移动软件对比于原生APP应用得名“WebAPP”。各自优缺参半。对比一下
# <!DOCTYPE>改变
<!DOCTYPE>必须是在HTML文档的第一行，它不是html标签，而是指示web浏览器对页面使用哪个HTML版本进行指令的编写
// html4.01框架版doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
// html4.01 严格版doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//en" "http://www.w3.org/TR/html4/strict.dtd">
// HTML 5 版本不需要DTD
<!DOCTYPE html>
# 新增功能
新增离线存储，更丰富的表单，Js线程，socket， 标准扩展embed，CSS3，流媒体多媒体引擎（Audio、Video、Canvas、webgl等）
# 新增标签
一. 结构标签
H5之前，有意义的结构标签就是div，H5扩展了以下标签。
| 标签 | 说明 |
|---|---|
| <article> | 标记一篇文章 |
| <header> | 一个区域的头部 |
| <nav> | 一个导航链接 |
| <section> | 一块区域 |
| <aside> | 页面的内容部分的侧边栏，如菜单栏 |
| <hgroup> | 定义section中的相关信息 |
| <figure> | 定义一组包裹多媒体内容以及他们的标题 |
| <figcaption> | figure元素的标题 |
| <footer> | 标记一个区域的底部 |
| <dialog> | 定义一个对话框（会话框）类似微信 |
【注意事项】
- 不要滥用结构标签
-
<header><section><aside><article><footer>这些标签不要嵌套自身 - 标签使用级别：
<header> <section> <footer>优于<aside> <article> <figure> <hgroup> <anv>优于<div> <figcaption>
二. 多媒体标签
| 标签 | 说明 |
|---|---|
| <video> | 定义一个视频 |
| <audio> | 定义音频内容 |
| <source> | 替代audio中src属性定义媒体资源 |
| <canvas> | 一个画布API，绘制酷炫的效果 |
| embed | 定义外部的可交互的内容或插件如flash |
(1) 音频<audio>标签
<audio src="./audio/demo.mp3" autoplay="autoplay" loop="-1" contrils="controls="controls">
当前浏览器暂不支持，建议您更换浏览器
</audio>
| 属性 | 值 | 说明 |
|---|---|---|
| autoplay | autoplay | 出现即生效，打开自动播放 |
| controls | controls | 出现即生效，显示控制控件，如播放暂停 |
| loop | loop/-1 | 是否循环播放 |
| muted | muted | 是否静音播放 |
| preload | preload | 页面载入时执行预加载。优先级低于autoplay |
| src | url | 资源位置 |
【说明】
- 支持3中音频格式：
ogg、MP3、WAV - 浏览器不支持
audio时显示标签内部文字 - 可以使用
<source>标签解决浏览器格式兼容问题
<audio autoplay="autoplay" loop="loop" controls="controls">
<source src="./audio/demo.mp3" type="audio/mpeg">
<source src="./audio/demo.ogg" type="audio/ogg">
<source src="./audio/demo.wav" type="audio/wav">
建议您更换浏览器
</audio>
（2）视频<video>标签
<video src="./video/demo1.mp4" autoplay="autoplay" controls="control">
当前浏览器不支持HTML5标签
</video>
| 标签 | 说明 |
|---|---|
| autoplay | 自动播放 |
| controls | 控制台，资源使用<source>标签引入则控制台在视频口外 |
| loop | 播放次数。loop或-1表示无限循环 |
| src | 资源路径，若使用了<source>，则该属性失效 |
| width | 视频播放器宽度 |
| height | 视频播放器高度 |
【说明】
- 支持格式 MP4，WebM，Ogg
- 可以使用
<sourc>标签解决浏览器格式兼容问题，用法同<audio>
3. <embed>标签
用于在网页上插入flash
<embed src="./falsh/demo1/swf" width="400" height="300"></embed>
三. web应用标签
1. 状态标签
| 标签 | 说明 |
|---|---|
| <meter> | 显示状态：气压，气温 |
| <progress> | 显示任务过程：安装，加载 |
（1）<meter>标签
<meter value="70" min="0" max="100" low="60" high="80" optimum="75">
meter标签的max、min属性定义在最两边，low和high定义在中间。隔开三个区域。最终表现为三种色彩。optimum所在的区域显示绿色，相邻区域显示换色，相隔区域显示红色。
（2）<progress>标签
可以使用在图片文件上传下载时，表现出一种loading的状态效果
如果没有设置max，则value值应该在0-1之间。如果没有value值，进度是不确定的，表示任务正在进行中，滚动条会来回滑动（chrome），可以用作loading效果
// 只写max属性，会有加载的效果
<progress value="0" max="100">您的浏览器不支持progress元素</progress>
<input type="button" value="开始" onclick="goprogress()"/>
<script>
function goprogress(){
var pro=document.getElementsByTagName("progress")[0];
gotoend(pro,0);
}
function gotoend(pro,value){
var value=value+1;
pro.value=value;
if(value<100) {
setTimeout(function(){gotoend(pro, value);},20)
}else{
setTimeout(function(){alert("任务完成")},20);
}
}
</script>
// 修改默认样式
<style>
progress {
background:orange;
border:1px solid red;
border:2px solid #000;
width:300px;
height:50px;
-webkit-appearance: none;
}
::-webkit-progress-bar{
background:orange;
}
</style>
2.列表标签
| 标签 | 说明 |
|---|---|
| <datalist> | 为input标定义一个下拉列表，配合option使用 |
| <details> | 定义一个元素的详细信息，配合summary使用 |
(1) <datalist>标签
<datalist>原生的样式已经比较好看，可以替代select使用，且拥有select没有的效果
<input placeholder="请选择学习的语言" list="langage"/>
<datalist id="langage">
<option value="c++">c++</option>
<option value="c#">c#</option>
<option value="java">java</option>
<option value="javascript">javascript</option>
</datalist>
（2）<detail>标签
<details open="open">
<summary>标题描述区域</summary>
<p>细节描述区域，可以对内容进行介绍。作为标题的一个可开关内容</p>
</details>
四. 其他标签
1. 注释标签
| 标签 | 说明 |
| :---:｜:---: |
| <ruby> | 定义注释或音标 |
| <rt> | 定义对ruby的注释内容文本 |
| <rp> | 不支持ruby元素的浏览器替换策略 |
<p>
<ruby>魑<rt>chi</rt></ruby>
<ruby>魅<rt>mei</rt></ruby>
<ruby>魍<rt>wang</rt></ruby>
<ruby>魉<rt>liang</rt></ruby>
</p>
2. 文本标记标签
| 标签 | 说明 |
|---|---|
| mark | 标记部分内容，显示黄色背景 |
<p>你是猴子派来的<mark>救兵</mark>吗？</p>
3. 输出标签
| 标签 | 说明 |
|---|---|
| output | 定义一类输出类型，计算表单结果，配合oninput使用 |
<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>
<form oninput="totalPrice.value = parseInt(price.value) * parseInt(number.value)">
<input type="text" id="price" value="5000">*
<input type="text" id="number" value="1"> =
<output name="totalPrice" for="price number"></output>
</form>
output输出结果
# 删除的标签
- 纯表现的元素：Basefont、big、center、font、s、strike、tt、u
- 对可用性产生负面影响的元素：frame、frameset、noframes（真要使用框架的话，请使用iframe）
- 产生混淆的元素：acronym、applet、isindex、dir
# 重新定义的标签
| 标签 | 说明 |
|---|---|
| <b> | 内联文本，粗体 |
| <i> | 内联文本，斜体 |
| <hr> | 表示主题结束，显示一条水平线 |
| <menu> | 表示用户界面菜单 |
| <small> | 小字体，例如打印注释或者法律条款 |
| <strong> | 强调重要性 |
