HTML5新特性

兔子公主
219 阅读6分钟

HTML5新增标签

  • header（网站头部）
  • nav（导航栏）
  • section(类似idv)
  • aside(文章/文本内容)
  • footer(网站脚本)

  • 作用：语义化，利于SEO

HTML5新增表单输入框的类型

  • type = "email" 限制用户输入必须为Email类型
  • type = "url" 限制用户输入必须为URL类型
  • type = "date" 自动生成一个日期控件
  • type = "number" 限制用户输入必须为数字类型
  • type = "range" 产生一个进度条的表单
  • type = "email" 产生一个搜索意义的表单
  • type = "email" 生成一个颜色选择表单

HTML5新增表单输入框的属性

  • placeholder 占位文本，体验更佳
  • autofocus 自动获取焦点
  • autocomplete 提交一次后下次自动补全
  • multiple 配合file可以多选

HTML5制图 & Canvas

  • HTML5新增的元素<canvas>只是图形的容器，必须通过脚本（通常是Javascript）来绘制图形；
  • 你可以通过多种方法使用<canvas>绘制路径、盒、圆、字符以及添加图像；
  1. 基础API和用法；fill是填充为实心，stoke是空心描边
  2. 样式与颜色；
  3. 曲线和高级路径；
  4. 状态、变形及动画；save,restore
  5. 动画的基本步骤
    1. 清空canvas 除非接下来要画的内容会完全充满canvas(例如背景图)，否则需要清空所有。最简单的做法就是用clearRect方法；
    2. 保存canvas状态 如果需要改变一些会改变canvas状态的设置（样式，变形之类的），又要在每画一帧之时都是原始状态的话，要先保存一下
    3. 绘制动画图形 这一步才是重绘动画帧
    4. 回复canvas状态 如果已经保存了canvas的状态，可以先恢复它，然后重绘下一帧；

HTML5多媒体 & Video & Audio

  • <video>元素提供播放、暂停和音量控件来控制视频；提供width和height属性控制视频尺寸；
  • <video>与<video>标签间插入的内容提供不支持video元素的浏览器显示的；
  • <video>标签支持多个<source>元素，<source>元素在浏览器使用的是第一个识别（支持）的视频文件；

HTML5的Web存储功能

  • 存储容量大小（只有4k左右）
  • 解析复杂
  • 每次发送请求都携带cookie，浪费带宽，给开发带来不便
  1. 用sessionStorage来实现跨页签的数据共享？
(function(){    
    if(!sessionStorage.length){
        // 这个能触发其他页签监听的storage的事件
        localStorage.setItem('setSessionStorage',new Date().getTime());
    }
    //可用于监听localStorage的变化
    window.addEventListener('storage',function(event){
        let key = event.key;
        if (key === 'setSessionStorage') {
            //用于触发新开页签的监听事件
            localStorage.setItem('sessionStorage','token');
            localStorage.removeItem('sessionStorage');
        }else if(key == 'sessionStorage' && !sessionStorage.length){
            //新开页签的sessionStorage赋值
            sessionStorage.setItem('token',event.newValue);
            console.log(event.newValue);
        }
    })
})();

HTML5拖放释放功能

  • 拖动目标上触发的事件
    • ondragstart 源对象开始拖动元素时触发
    • ondrag 源对象正在拖动时触发
    • ondragend 源对象完成拖动后触发
  • 拖动对象上会触发的事件
    • ondragenter 目标对象进入其容器范围内时触发
    • ondragover 目标对象进入源对象范围内拖动时触发
    • ondragleave 源对象离开其容器范围内触发
    • ondrop 释放鼠标键时触发
  • 实现一个视图可视化的效果

HTML5选择器

  • querySelector:根据选择器规则，返回相匹配的第一个元素，没有找到则返回null。
  • querySelectorAll:根据选择规则，返回文档中所有符合要求的元素，并且返回NodeList对象；

HTML5 History

  • pushState、repalceState、onpopstate
  • 应用场景
  1. 单页应用
    1. 单页应用定义：只有一张web页面的应用，并且一开始会加载必须的HTML、CSS和Javascript，可以动态重写页面而不是通过服务器加载整个新页面来与用于交互，可以提高用户体验；
    2. 解决问题：实现网页无刷新更新数据的同时，解决浏览器无法前进/后退的问题；

跨文档消息通讯

  • 跨文档消息传达（cross-document messaging）,有时候也称为XDM，指的是来自不同域的页面间传递消息；
  • 使用场景：内嵌框架iframe和其父文档相互进行数据传输或者通讯；
  • window.postMessage(message,origin,transfer)

地理信息 web存储 离线存储

  1. 地理信息
    1. 定位用户的位置，使用HTML5 Geolocation API用于获取用户的地理位置；navigator.geolocation.getCurrentPosition(success,error,options)
    2. 注意：除非用户同意，否则用户位置信息是不可用的；
  2. web存储
    1. sessionStorage(同一个页签数据才能共享)
    2. localStorage
  3. 离线存储
    1. HTML5引入了应用程序缓存，这意味着web应用可进行缓存，并可在没有因特网连接时进行访问；
    2. 优势：离线浏览（即当用户网络断开时，可以继续访问页面）；访问速度快（将资源缓存到本地，已缓存资源加载更快）；减少服务器负载（浏览器将只会从服务器下载更新过或者更改过的资源）
    3. Cache Manifest基础
      1. 每个指定了manifest的页面在用户对其访问时都会被缓存；
      2. 如果未指定manifest属性，则页面不会被缓存；
      3. manifest 文件的建议文件扩展名是:'.appcache'；

弹性盒子模型与移动端事件

  1. 弹性盒子是什么以及作用
    • 弹性盒子是CSS3的一种新的布局模式
    • CSS3弹性盒（Flexible Box或flexbox)，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式
    • 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间
  2. 特殊属性使用
    • flex-grow：1 该属性的比例是分配剩余空间的比例
  3. touchstart与click区别
    • click会延迟300ms
  4. touchmove应该注意什么？
    • 节流

transform与移动端自定义滑动区域

  1. 移动加旋转(translate(30px) scale(1.5)),移动和旋转哪个先执行？
    • 先写的后执行
  2. 旋转中perspective的作用
    • 3D效果

陀螺仪操作 & 多指操作与兼容

  1. 陀螺仪事件：deviceorientation
    • 通过监听devicemotion事件，取设备x、y、z三个轴旋转角度，操作元素的各种操作
    • absolute、alpha、beat、gamma
      • absolute:表示该设备是否提供绝对定位数据（这个数据是关于地球的坐标系）或者使用了由该设备决定的专门的坐标系
      • var absolute = instanceOfDeviceOrientationEvent.absolute;
  2. 多指操作与兼容 旋转：初始值+差值

上滑加载与下拉刷新、响应式布局

  1. BetterScroll
    • 是一款重点解决移动端各种滚动场景需求的开源插件，适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用场景；
    • 基于原生javascript实现，不依赖任何框架，所以既可以原生javascript引用，也可以与目前前端mvvm框架结合使用
  2. 为什么不使用原生滚动条，原生滚动条可能存在问题
    • 带回弹
    • 有叠层
    • 下面的元素点不到
    • 阻止事件穿透，只能清除默认事件
avatar
文章
阅读
粉丝