H5新特性

1. 标签语义化

• header main article aside footer nav

  • ie兼容
    • 手动创建语义化标签 转成块元素
    • 引入第三方文件html5shiv.min.js ie注释 cc: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 网络监听

1. online
2. offline

6. 全屏接口

• 开启 requestFullScreen 元素绑定开启全屏
  • 谷歌前缀 webkitRequestFullScreen()
  • 火狐 mozRequestFullScreen()
  • IE msRequestFullScreen()
  • 欧朋 oRequestFullScreen()
• 退出 cancelFullScreen document绑定退出全屏
  • 谷歌前缀 webkitCancelFullScreen()
  • 火狐 mozCancelFullScreen()
  • IE msCancelFullScreen()
  • 欧朋 oCancelFullScreen()
• 检测 fullScreenElement document
  • 只有火狐浏览器是严格遵守驼峰命名 document.mozFullScreenElement

7. 文件读取★

1. 结构 上传控件 绑定onchange事件 该事件执行一段函数
2. 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缓存 开启服务测试

1. 给需要缓存的html文件的html的开始标签添加 manifest=“以.appcache结尾的文件”
2. 创建以.appcache结尾的文件
   1. 第一行 CACHE MANIFEST
   2. 缓存文件 CACHE:
   3. 请求服务器 NETWORK:
   4. 文件加载失败,替代文件渲染 FALLBACK:
   5. (#) 注释 (*) 在CACHE的所有文件 (/) 在FALLBACK的所有文件