HTML5的更新
这篇博客目的是解决: HTML5新增了什么?
1. 语义化标签
主体元素
article: 定义页面独立的内容区域(可以嵌套使用, 可以表示插件)nav: 定义导航链接的部分section: 定义文档中的节aside: 定义其所处内容之外的内容(侧边)time: 定义时间或者日期
非主体元素
header: 定义文档的头部footer: 定义文档底部adderss: 定义文档作者/所有者的联系信息
2. 视频&音频&动画&图片
audio: 音频
<audio src='' controls autoplay loop='true'></audio>
属性:
controls控制面板autoplay自动播放loop='true'循环播放
video: 视频
<video src='' poster='xxximg.jpg' controls></video>
属性:
poster: 视频还没有完全下载完毕, 或者用户还没点击播放前显示的 封面. 默认是视频的第一帧, 可以自己指定controls: 控制面板widthheight
画布: canvas元素使用JavaScript在网页上绘制图像. 画布是一个矩形区域, 可以控制其每一像素. canvas拥有多种绘制路径,矩形,圆形,字符以及添加图像的方法.
<canvas id="myCanvas" width="200" height="100"></canvas>
SVG: SVG指可伸缩矢量图形, 使用XML格式定义图形, 图形在放大或改变尺寸的情况下其图形质量不会有损失, 它是万维网联盟的标准
3. 表单
表单属性
placeholder: 提示信息autofocus: 自动获取焦点autocomplete="on"或者autocomplete="off"使用这个属性需要有两个前提:- 表单必须提交过
- 必须有name属性
required: 要求输入框不能为空, 必须有值才能够提交pattern=" " 里面写入想要的正则模式, 例如手机号patte="^(+86)?\d{10}$"multiple: 可以选择多个文件或者多个邮箱from="form表单的ID"
表单事件
oninput-> 每当input里的输入框内容发生变化都会触发此事件oninvalid-> 当验证不通过时触发此事件
Input新增的type
email
url
number
range
Date picker：
Date —— 选取日、月、年
Month —— 选取月、年
Week —— 选取周和年
Time —— 选取时间（小时和分钟）
Datetime —— 选取时间、日、月、年（UTC 时间）（chrome使用“datetime-local”代替了原本的"datetime"）
search
color
tel
5. Web存储
HTML5 提供了两种在客户端存储数据的新方法
localStorage: 可以长时间保存的数据存储sessionStorage: 关掉会话框(浏览器窗口)就小时, 针对一个session的数据存储
6. web Worker 独立于其他脚本, 不影响页面性能运行在后台的JavaScript
7. webSocket 单个TCP连接上进行全双工通讯的协议
其他
拖放: 抓取对象以后拖到另一个位置
<img draggable="true" />
- 地理定位: Geolocation(地理定位)用于定位用户的位置.
DOM查询操作
- docunment.querySelector()
- document.querySelectorAll() 他们选择的对象可以是标签, 可以是类(需要加.), 可以是ID(需要加#)
进度条 & 度量器
- progress标签: 用来表示任务的进度(IE & Safari不支持), max用来表示任务的进度, value表示已完成多少
<progress max="100" value="76">
<span>76</span>%
</progress>
meter属性: 用来显示剩余容量或剩余库存(IE & Safari不支持)
<meter min="0" low="3" high="6" max="9" optimum="2" value="6"></meter>
* heigh/low: 规定被视作高/低的范围
* max/min: 规定最大/小值
* value: 规定当前度量值
设置规则: min < low < high < max
