H5新特性——十个，后续将慢慢补上
1、新增的语义化标签
2、增强型表单
3、音频和视频
4、Canvas绘图
5、SVG绘图
6、地理定位
7、拖放API
8、Web Worker
9、Web Storage
10、Web Socket
1、新增语义化标签
- 常见的语义化标签
<header>：头部标签
<nav>：导航标签
<main>: 主体标签
<article>：独立的内容标签
<section>：区段标签
<aside>：侧边栏标签
<footer>：尾部标签
这些语义化标签主要是针对搜索引擎，IE9中需要将其转为块级元素才能有效
- 主要的HTML文档结构
<header></header> <nav></nav> <main> <article> <section></section> <section></section> </article> <aside></aside> </main> <footer></footer>
2、新增多媒体标签（音频、视频）
1.HTML5中的音视频标签都是行内元素
2.不同的浏览器对音视频资源的格式支持不统一，需要进行兼容处理，其中IE8及以下版本不支持音视频标签
-
音频标签<audio>
音频支持格式从表中可以看出，要实现各大浏览器的兼容，只需要将文件转为以下三种就行，一般使用ogg和mp3格式的就能够解决大部分主流浏览器的兼容问题
格式 MIME-type IE9 Firefox3.5 Opera10.5 Chrome3.0 Safari3.0 Ogg audio/ogg √ √ √ MP3 audio/mpeg √ √ √ Wav audio/wav √ √ √ 格式写法
<audio src="资源地址" controls></audio>兼容性写法
<audio controls> <source src="./*.mpeg" type="audio/mpeg"> <source src="./*.ogg" type="audio/ogg"> <source src="./*.wav" type="audio/wav"> 您的浏览器不支持audio标签 </audio>audio标签属性
- autoplay: autoplay 是否自动播放
- controls: controls 是否显示播放控件
- loop：loop 是否循环播放
- preload: preload 是否进行预加载音频，如果有autoplay属性值，则忽略
在书写这些属性时，可以只写属性名就行
-
视频标签<video>
视频支持格式
一般使用ogg和mp4格式的就能够解决大部分主流浏览器的兼容问题格式 MIME-type IE9 Firefox3.5 Opera10.5 Chrome3.0 Safari3.0 Ogg video/ogg √ √ √ MP4 video/mp4 √ √ √ WebM video/webm 4.0+ 10.6+ 6.0+ 格式写法与音频的写法一致
video标签属性
- autoplay：autoplay 自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
- controls：controls 显示播放控件
- loop：loop 是否循环播放
- preload 是否预加载视频，可选值:
auto：预先加载视频
none：不预加载视频 - width、height：设置播放器宽度、高度
- poster：Imgurl 播放第一帧之前的封面图片
- muted：muted 静音播放
3、新增表单元素
-
h4中的
<input>type类型type属性值 描述 text 单行文本框 password 密码输入框 radio 单选框 checkbox 复选框 button 普通按钮 hidden 隐藏式按钮 image 图像形式的按钮 file 文件上传 reset 重置按钮 submit 提交按钮 -
h5新增的
<input>type属性值type属性值 描述 email 规定输入的必须为Email类型 url 规定输入的必须为URL类型 date 规定输入的必须为日期类型 time 规定输入的必须为时间类型 month 规定输入的必须为月类型 week 规定输入的必须为周类型 number 规定输入的必须为数字类型 range 滑动条 tel 手机号码 search 搜索框 color 生成一个颜色选择表单 -
H5新增的表单元素——datalist标签
定义了<input> 元素可能的选项列表，<datalist>中包含多个<option>元素 datalist本身不可见
绑定的<input>`标签必须设置 list 属性，属性值等于<datalist>标签的 id 属性值<datalist id="city-list"> <option>北京</option> <option>上海</option> </datalist> <input type="text" list="city-list"/> -
H5新增的表单元素——progress
标示任务的进度(进度条效果)，IE9及以下不支持
属性：- value：规定已经完成多少任务
- max：规定总任务量
两种形式：
- 左右来回移动的进度条：
<progress></progress> - 具有指定进度值的进度条：
<progress value="70" max="100"></progress> -
H5新增的表单元素——meter
度量衡、刻度尺，用于标示一个值所处的范围：不可接受（红色），可接受（黄色），优秀（绿色）。可用于磁盘用量的显示效果。IE不支持。
属性：属性 值 描述 form form_id 规定 <meter> 元素所属的一个或多个表单 high number 规定被视作高的值的范围 low number 规定被视作低的值的范围 max number 规定范围的最大值 min number 规定范围的最小值 optimum number 规定度量的优化值 value number 必需。规定度量的当前值 度量衡的颜色随着所取值的不同而不同，一般有以下几种情况：
- min <= 合理下限值(low) <= 最优值(optimum) <= 合理上限(high) <= max
在这种情况下，当前值value的取值在各个区间中的颜色变化为： 黄 —— 绿 —— 黄
<!--合理下限<=最优值<=合理的上限：黄-绿-黄--> 机油含量：<meter id="m1" min="0" max="100" low="30" high="70" optimum="40" value="0"></meter>- min <= 最优值(optimum) <= 合理下限值(low) <= 合理上限(high) <= max
在这种情况下，当前值value的取值在各个区间中的颜色变化为： 绿 —— 黄 —— 红
<!--合理下限>=最优值：绿-黄-红色--> PM25数值：<meter id="m2" min="0" max="500" low="100" high="300" optimum="10" value="0"></meter>- min <= 合理下限值(low) <= 合理上限(high) <= 最优值(optimum) <= max
在这种情况下，当前值value的取值在各个区间中的颜色变化为： 红 —— 黄 ——绿
<!--最优值>=合理的上限：红-黄-绿--> 每月薪资：<meter id="m3" min="0" max="30000" low="2000" high="10000" optimum="20000" value="0"></meter>meter中的id值可以直接获取，值为DOM元素
- min <= 合理下限值(low) <= 最优值(optimum) <= 合理上限(high) <= max
H5新增的表单元素——output
输出，语义标签，常用于结果输出，没有任何外观样式，等同于<span>-
新增的表单属性
placehoder：输入框提示文本信息<input type='text' placeholder='请输入用户名'>autofocus：页面加载完成自动聚焦到指定表单输入框中
<input type='text' placeholder='请输入用户名' autofocus>multiple: 允许输入框出现多个输入，用逗号
,隔开,例如邮箱输入域或者文件上传中允许多选文件<input type='email' multiple>form: 用于把input放置到form外部
<form id='f1'></form> ... <input form='f1'>
输入验证相关的新属性
- required: 表示必填项，内容不能为空
<input type='' required> - maxlength(minlength): 指定输入的字符串最大（小）长度
<input type='' maxlength='6'> - max(min): 指定数字的最大（小）值
<input type='' max='60'> -
pattern: 指定输入项必须符合的正则表达式,例如输入电话号码
<input type='' pattern='1[35789]\d{9}'>
