1. 标签语义化
-
header main article aside footer nav
- ie兼容
- 手动创建语义化标签 转成块元素
- 引入第三方文件html5shiv.min.js ie注释 cc:ie
- ie兼容
-
进度条 progress max value
-
度量器 meter max min value low high
2. 表单属性
2.1 type属性
1. email
2. url 加协议 http://
3. search
4. tel 移动端调取数字键盘
5. number max value min
6. range
7. color
8. time
9. date
10. datetime-local
11. week
12. month
2.2 其他属性
1. autofocus
2. placeholder
3. required
4. pattern ="^$"
5. autocomplete="on" 必须成功提交过 必须设置name属性
6. multiple
7. 被关联的表单写 form="关联的表单id值" 关联的表单设置id属性
8. input 设置list="datalist的id值" datalis设置id属性
1. option 可以写成单标签
2. label 提示信息
3. value 实际信息
4. 如果type是url value 加协议
3. 表单事件
- oninput
- oninvalid
- setCustomValidity(’’)
4. 多媒体
- 音频 audio src controls loop autoplay
- 视频 video src controls loop autoplay width height poster="" muted
- 视频优化 source src=".flv" source src=".mp4" type=“video/mp4”
5. DOM扩展
5.1 获取元素
- 单个 document.querySelector(’’)
- 多个 document.querySelectorAll(’’)
5.2 类样式classList
- 增加 元素.classList.add(“a”,“b”)
- 移除 元素.classList.remove()
- 切换 元素.classList.toggle()
- 检测是否包含 元素.classList.contains()
- 获取指定项 元素.classList.item(数值)
5.3 自定义属性
-
设置 data-a-b-c
-
获取 dataset[‘aBC’]
5.4 网络监听
- online
- offline
6. 全屏接口
- 开启 requestFullScreen 元素绑定开启全屏
- 谷歌前缀 webkitRequestFullScreen()
- 火狐 mozRequestFullScreen()
- IE msRequestFullScreen()
- 欧朋 oRequestFullScreen()
- 退出 cancelFullScreen document绑定退出全屏
- 谷歌前缀 webkitCancelFullScreen()
- 火狐 mozCancelFullScreen()
- IE msCancelFullScreen()
- 欧朋 oCancelFullScreen()
- 检测 fullScreenElement document
- 只有火狐浏览器是严格遵守驼峰命名 document.mozFullScreenElement
7. 文件读取★
- 结构 上传控件 绑定onchange事件 该事件执行一段函数
- js
- 先new一个文件读取对象 var readel;'mr= new FileReader(); 它就有了一个完整的事件模型
- 在上传控件的files属性中拿文件因为files是个数组 files[0]
- reader.readAsDataURL(file[0]) 读取上传文件的路径
- reader.onload 上传成功的事件中 读取路径 reader.result — 就是上传的文件的路径
- 动态修改img的src属性
8. 拖拽 ★
- 元素可以被拖拽 draggable="true"
- 被拖拽元素
- 拖拽开始 ondragstart
- 拖拽结束 ondragend
- 持续拖拽 ondrag
- 拖拽离开 ondragleave 指的是鼠标离开被拖拽元素的原始位置就触发
- 目标元素
- 拖拽进入 ondragenter
- 拖拽离开 拖拽离开 ondragleave 指的是鼠标离开被拖拽元素的原始位置就触发
- 持续拖拽 ondragover 想触发ondrop中的程序 必须在ondragover阻止掉浏览器的行为 e.preventDefault(); || return false;
- 拖拽结束 ondrop
- 遗留问题处理方式
- 将事件绑定给document e.target事件源
- 被拖拽元素开始被拖拽时存储到全局变量 e.target
- 在目标元素的ondrop事件中获取到 追加
- 遗留全局变量的问题
- 在被拖拽元素ondragstart 存储 数据 e.dataTransfer.setData(“text/html”, e.target.id);
- 在目标元素的ondrop事件中获取 e.dataTransfer.getData(“text/html”);
9. 地理定位
-
navigator.geolocation.getCurrentPosiotn(success,error,{})
-
在成功的回调函数中
position.coords.latitude 纬度
position.coords.longitude 经度
position.coords.accuracy 精度
position.coords.altitude 海拔高度
10. web存储(会话存储) ★
- 都不能跨浏览器访问
sessionStorage
- 大小 - 5M左右
- 生命周期 - 关闭当前页面就消失
- 活动范围 - 当前页面
- 存储位置 - 当前页面的内存中
- API
- 设置 window.sessionStorage.setItem(k,v);
- 获取 window.sessionStorage.getItem(k);
- 移除 window.sessionStorage.removeItem(k);
- 清空 window.sessionStorage.clear();
localStorage
- 大小 - 20M左右
- 生命周期 - 永久存储 除非手动清除
- 活动范围 - 当前浏览器的所有页面
- 存储位置 - 硬盘中
- API
- 设置 window.localStorage.setItem(k,v);
- 获取 window.localStorage.getItem(k);
- 移除 window.localStorage.removeItem(k);
- 清空 window.localStorage.clear();
11. h5缓存 开启服务测试
- 给需要缓存的html文件的html的开始标签添加 manifest=“以.appcache结尾的文件”
- 创建以.appcache结尾的文件
- 第一行 CACHE MANIFEST
- 缓存文件 CACHE:
- 请求服务器 NETWORK:
- 文件加载失败,替代文件渲染 FALLBACK:
- (#) 注释 (*) 在CACHE的所有文件 (/) 在FALLBACK的所有文件