1、html5新特性

(1)新增选择器document.querySelector、document.querySelectorAll
(2)拖拽释放，Drag and Drop
有兼容性，Drag 拖动触发的事件；Drop是拖动到目标容器后的事件
(3)媒体播放video和audio
(4)本地存储localStroage和sessionStroage
(5)离线应用manifest
(6)桌面通知Notifications
(7)语义化标签article,footer,header,nav,setion,
(8)增强表单控件calendar,date,time,email,url,search
(9)地理位置Geolocation
(10)多任务webworker
//待补充
(11)websocket
//待补充
(12)历史管理history
(13)跨域资源共享（CORS）Access-Control-Allow-Origin
(14)页面可见性改变事件visibilitychange
(15)跨窗口通信PostMessage
(16)From Data对象
文件上传时用到过
(17)绘画canvas
canvas加载图片时，必须时同源的，不然会被认为是被污染的
(18)如何处理移动端1px 被渲染成2px的问题

  1. <meta 
  2.       name="viewport" 
  3.       content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  5. <!--
  6. width:viewport宽度，为一个正整数，或字符串‘device-width’
  7. device-width:设备宽度
  8. height:设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置
  9. initial-scale: 默认缩放比例（初始缩放比例），为一个数字，可以带小数
  10. minimum-scale:允许用户最小缩放比例，为一个数字，可以带小数
  11. maximum-scale:允许用户最大缩放比例，为一个数字，可以带小数
  12. user-scalable:是否允许手动缩放
  13. -->
  15. 局部处理
  16. 1、meta标签中的 viewport属性 ，initial-scale 设置为 1
  17. 2、rem按照设计稿标准走，外加利用transfrome 的scale(0.5) 缩小一倍即可
  18. 全局处理
  19. 1、mate标签中的 viewport属性 ，initial-scale 设置为 0.5
  20. 2、rem 按照设计稿标准走即可

(19)rem的使用
1、先适配设计图屏幕大小，如750px，并根据屏幕大小定义一个html标签的font-size大小，比如50px。此时比例就是750/50 = 15
2、因为时等比例缩放，所以每一个适配的屏幕大小与font-size的比例都是相同的，所以各个屏幕大小除以比例就能得出font-size的大小

  1. //
  2.  @media screen and (min-width:750px) {
  3.    html {
  4.      font-size: 50px;
  5.    }
  6.  }
  8. .adapter(@width) {
  9.   @media screen and (min-width:@width) {
  10.     html {
  11.       /* round(数值)：让这个数值四舍五入 */
  12.      /* round(数值，保留几位小数) */
  13.       font-size: round(@width/15,2);
  14.     }
  15.   }
  16. }
  18. .adapter(320px);
  19. .adapter(360px);
  20. .adapter(375px);
  21. .adapter(384px);
  22. .adapter(400px);
  23. .adapter(414px);
  24. .adapter(424px);
  25. .adapter(480px);
  26. .adapter(540px);
  27. .adapter(720px);
  28. .adapter(750px);

3、另外 vscode中，安装 px2rem插件，每次写了px长度后，会有提示转换成rem
4、插件中默认的html font-size大小时16px,可以去配置里面修改

2、html文档解析