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的兼容性问题。