H5总结

HTML5

HTML5广义的概念: 代表着浏览器技术发展的阶段，是html5 css3和js（API）一套前端技术的组合。
HTML5新定义了一堆语义化标签，更有利于搜索引擎或辅助设备理解HTML页面内容。

在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素( inline )对待，所以我们只需要将其转换成块元素( block )即可使用。低版本采用条件注释。

表单：

表单元素（标签）

<datalist> // 数据列表（input下的下拉菜单）与input 配合使用
     <input type=”text” list=”data”>
     <datalist id=”data”>
         <option>男</option>
         <option>女</option>
         <option>不详</option>
    </datalist>
    <meter>   // 表示度量器，不建议用作进度条
<progress></progress> // 进度条

表单属性：

    placeholder 占位符，
    autofocus 获取焦点，
    autocomplete 自动完成，
    用于表单元素，也可用于表单自身(on/off)，required 必填项
    pattern 正则表达式 验证表单

 

表单事件：

oninput 用户输入内容时触发，用于移动端输入字数统计
oninvalid 验证不通过时触发
setCustomValidity 用于在页面输出一段信息

 

多媒体：

<audio>音频标签 用于输出音频文件
<video>视频标签 用于输出视频文件

 

视频DOM:(重点)

    属性：currentTime 视频播放的当前进度、duration:视频的总时间、
         paused:视频播放的状态
    方法：load() 加载、play() 播放、pause() 暂停
    事件：oncanplay: 事件在用户可以开始播放视频/音频（audio/video）时触发。
         ontimeupdate:通过该事件来报告当前的播放进度。
         onended:播放完时触发。
    全屏：video.webkitRequestFullScreen();

 

自定义属性：

    在H5中，可自定义属性，使用data-*=””，可以通过node.dataset[‘’]，使用驼峰命名法。Node.dataset是以类对象形式存在的。

    拖拽：在HTML5的规范中，我们可以通过为元素增加draggable="true"来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启的。

    拖拽元素：页面中设置了draggable="true"属性的元素

    目标元素：页面中任何一个元素都可以成为目标元素

 

事件监听

拖拽元素

ondrag 应用于拖拽元素，整个拖拽过程都会调用

ondragstart 应用于拖拽元素，当拖拽开始时调用

ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用

ondragend    应用于拖拽元素，当拖拽结束时调用

目标元素

ondragenter 应用于目标元素，当拖拽元素进入时调用

ondragover 应用于目标元素，当停留在目标元素上时调用

ondrop    应用于目标元素，当在目标元素上松开鼠标时调用

ondragleave 应用于目标元素，当鼠标离开目标元素时调用

 

Web存储：

传统方式document.cookie来进行存储的。

window.sessionStorage
    1、生命周期为关闭浏览器窗口
    2、在同一个窗口下数据可以共享

window.localStorage
    1、永久生效，除非手动删除
    2、可以多窗口共享

全屏：

HTML5规范允许用户自定义网页上任一元素全屏显示。

 requestFullscreen() 开启全屏显示
 cancleFullscreen() 关闭全屏显示

 

但是需要加入私有化前缀，不同浏览器兼容性不同。

网络状态

我们可以通过window.onLine来检测，用户当前的网络状况，返回一个布尔值

window.online用户网络连接时被调用
window.offline用户网络断开时被调用

 

应用缓存：

Font Awesome 字体框架：
Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。

 

坚持渐进增强原则：

    渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

    优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

    区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

 

---

字体图标-优点：

1、将所有图标打包成字体库，减少请求；
2、具有矢量性，可保证清晰度；
3、使用灵活，便于维护；

---

 

H5的兼容性问题：通过http://caniuse.com/ 可查询CSS3各特性的支持程度，一般兼容性处理的常见方法是为属性添加私有前缀，如不能解决，应避免使用，无需刻意去处理CSS3的兼容性问题。