一文带你吃透——HTML5（原来html这么简单）

HTML5篇

什么是html5?

h5并不是新的语言，而是html语言第五次重大修改的版本

1. ie9以上主流浏览器全部支持html5
2. 增加了用户与文档的交互方式：video audio canvas
3. 新增一些特性、和语义化标签（本地存储、网页多媒体、动画、过度、2d、3d）
4. 相比h4 抛弃了一些不常用的标签和属性 新增了一系列的语义化标签和属性

html5的语义标签（没有什么不同的就是单纯的命名div）

语义标签	作用
nav	导航标签
header	页眉也就是头部
fotter	页脚也就是是底部
main	文档的主要内容，也就是内容区域
article	内容左侧
aside	内容右侧

Ie8无法识别HTML5不支持语义标签

第一种方式

要通过js手动创建 并且要转成块级元素

(document.creatElement(‘header’)) display:block

第二种方式引入html5shiv.js这个插件，就可以实现ie的兼容

表单

表单TYPE属性

1. type=‘emali’ //邮箱对应的写法 email提供了默认的电子邮箱验证 不写好会阻断提交

---

2. type=‘tel’ //它并不是用来实现验证的，它本质是为了能够在移动端打开数字键盘，数字键盘就限制了用户只能输入数字

---

3. type=‘url’ //它只能输入合法的网址 包含http://这种的

---

4. type=‘number’ //他只能输入数字，不能输入其他的字符，可以输入小数点 ：最大值100 属性 max=‘100’ :最小值0 属性 min=‘0’ :value 属性 默认显示值

---

5. type=‘search’ //他会提供更人性化的搜索框 带x删除的那种

---

6. type=‘range’ //是一个范围文本框 提供范围的 需要设置最大值和最小值也就是 max min 默认值为中间 也可以通过默认 value修改默认值

---

7. type=‘color’ //颜色文本框，可以选取颜色

---

8. type=‘time’ //时间 时分秒 type=‘data’ //时间 年月日

---

9. type=‘datatime’ //时间 年月日时分秒 但是只有苹果浏览器支持

---

9. type=‘datatime-local’ //时间 各大浏览器支持的年月日时分秒

---

10. type=‘month’ //月份 type=‘week’ //星期

---

表单属性

• placeholder – 默认浅灰色提示文本
• autofocus – 页面刷新自动获取焦点
• autocomplete --自动完成 有值 on是打开 off是关闭 需要提交并且必须有name属性才会提示记录
• required – 必须输入属性，不允许为空否则提交时会验证
• pattern – 表单验证 正则验证的
• multiple – 文件上传多个选择 邮箱多个填写输入多个地址(逗号分隔)
• form – 会对照form中的id进行挂靠将没有放置在form表单中的数据一并提交过去

---

新增表单元素

• datalist --下拉框父元素包裹options 需要与input进行关联 input的list属性填入与datalist中id一致的值 但是浏览器的支持程度不一样所以要少用
• keygen – 传递公钥加密
• output – 语义标签不能修改

---

新增表单事件

• oninput – 就是表单内容被修改时被触发事件
• oninvalid – 当验证不通过时触发 表单添加required 通过js方法this.setCustomValidity,来改变默认的不通过提示信息

---

新增进度条

• progress --max属性时最大值，通过value来设置进度条的大小
• merer – max是最大值 min是最小值 high较高值 low较低值

---

fieldset 文本边框（和卡片差不多的那么一个容器）
legend标签在fieldset中开辟小块标题

html5自定义属性

data开头 data-后至少有一个字符

使用dataset取值时需要使用驼峰命名法

html5接口

网络连接事件和网络断开事件

网络连接：window.addEventListener(‘online’,匿名函数)

网络断开：window.addEventListener(‘offline’,匿名函数)

全屏接口的使用

全屏显示：div.(webkit谷歌/moz火狐/ms IE/o 欧鹏)RequestFullScreen()

退出全屏只能使用document来退出：document.(webkit谷歌/moz火狐/ms IE/o 欧鹏)CancelFullScreen()

判断是否全屏：document.(webkit谷歌/moz火狐/ms IE/o 欧鹏)FullscreenElement// ||或运算符判断 有就是true也就是全屏否则就是false

判断是什么浏览器只需要判断当前对应的节点有没有对应浏览器下所对应的那个方法即可

读取文件接口

onchange也可以获取当前的文件改变状态

• files属性获取表单文件元素的文件
• new FileReader() 读取文件实例对象
• abort none 中断读取
• readAsBinaryString file 将文件读取为二进制码
• readAsDataURL file 将文件读取为 DataURL base64
• readAsText file, [encoding] 将文件读取为文本

通过new FileReader()实例对象的readAsDataURL（图片文件）也就是我们使用document.querySelector(‘文件input’).files获取到的元素放在里面

当读取完成后就会将数据存放在new FileReader()内的result中，因为new FileReader()内没有返回值，所以我们需要调用new FileReader()的一系列事件状态，通俗的讲就是钩子函数来实现对应的功能

事件 描述
onabort 中断时触发

onerror 出错时触发

onload 文件读取成功完成时触发

onloadend 读取完成触发，无论成功或失败

onloadstart 读取开始时触发

onprogress 读取中

拖拽事件

默认p标签是不能拖拽的 因为鼠标移入就会变成 I 所以我们要加入一个属性

draggable=true
在拖动目标上触发事件 (源元素):
ondragstart - 用户开始拖动元素时触发

    ondrag - 元素正在拖动时触发

    ondragend - 用户完成元素拖动后触发

释放目标时触发的事件:

    ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件

    ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件

    ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件

    ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

ondrop默认不触发所以我们要在ondragover事件中阻止浏览器默认行为 e.preventDefault()

注意在我们appendchild()想目标元素追加我们要拖动的元素时，因为页面上已有对应的属性，appendchild的作用就相当于剪切，而不是追加！

e.dataTransfer.setData(‘text/html’,e.target) //传值

e.dataTransfer.getData(‘text/html’) //取值

sessinoStorage的使用

• sessionStorage存储数据到本地，存储的容量是5MB左右，存进去的都是字符串，关闭页面自动清除
• setItem（key，value）：存储数据键值队方式
• getItem（key）：查询数据
• removeItem（key）：删除数据
• clear（）：清除所有内容

localStorage的使用

• sessionStorage存储数据到本地，存储的容量是20MB左右，存进去的都是字符串，关闭页面不会清除
• • setItem（key，value）：存储数据键值队方式
• getItem（key）：查询数据
• removeItem（key）：删除数据
• clear（）：清除所有内容

应用缓存机制 cache manifest文件

• 需要在meth标签中添加manifest属性值为路径名扩展名最好为appcache
• 如manifest=‘app.appcache’
• 在app.appcache中我们需要添加3项 文件中#开头的是注释

填写项	作用
CACHE MANIFEST	开头必写第一项，标记当前文件是一个缓存文件
CACHE:路径如…/img/1.jpg	需要缓存的清单列表
NETWORK:路径如…/img/1.jpg	每一次都需要重新请求的文件清单
FALLBACK:…/img/2.jpg …/img/1.jpg	文件找不到就用指定文件代替
CACHE中的 *	代表所有文件需要缓存
FALLBACK中的 /	代表所有文件找不到就都会用指定文件代替