H5总结
1.新增的语义化标签:
<nav>: 导航
<header>: 页眉
<footer>: 页脚
<section>:区块
<article>: 文章
<aside>: 侧边栏
<progress>: 进度条
2.兼容处理
在不支持HTML5新标签的浏览器里,会将这些新的标签解析成行内元素(inline)对待,所以我们只需要将其转换成块元素(block)即可使用,但是在IE9版本以下,并不能正常解析这些新标签,但是却可以识别通过document.createElement('tagName')创建的自定义标签,于是我们的解决方案就是将HTML5的新标签全部通过document.createElement('tagName')来创建一遍,这样IE低版本也能正常解析HTML5新标签了,但在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载第三方的一个JS库来解决兼容问题,这个库文件会帮自动通过document.createElement('tagName')创建所有HTML5的新标签。
3.微数据
微数据是在如 span、div 的标签内添加属性,让机器(如搜索引擎)识别其含义,某些特定类型的信息,例如评论、人物信息或事件都有相应的属性,用来描述其含义,可以理解成新语义标签的一种补充。
4.WAI-ARIA
WAI-ARIA[1] , 是Web Accessibility Initiative - Accessible Rich Internet Applications 的缩写,让残障人士能无障碍地访问网页上的动态内容。
5.输入类型
<input type="email">:输入邮箱格式 <input type="tel">:输入手机号码格式
<input type="url">:输入url格式 <input type="number">: 数字格式
<input type="search">: 搜索框 <input type="range">: 自由拖动滑块
<input type="color">:拾色器 <input type="time">:
<input type="date">: <input type="datetime">:
<input type="month">: <input type="week">:
6.表单
1.表单元素:
<datalist>: 数据列表 <keygen>: 生成加密字符串
<output>:输出结果 <meter>:度量器
2.表单属性:
1.<input type="text" placeholder="请输入用户名">: 占位符
2.<input type="text" autofocus> :自动获得焦点
3.<input type="file" multiple>: 多文件上传
4.<input type="text" autocomplete="off"> 自动完成
5.<input type="text" form="某表单ID">
6.<form novalidate></form>: 关闭验证
7.<input type="text" required>: 必填项
8.<input type="text" pattern="\d">:自定义验证
7.【多媒体】以前用flash,现在有H5新标签:
1.音频 <audio>
可以通过附加属性可以更友好控制音频的播放,如:
autoplay :自动播放
controls :是否显不默认播放控件
loop :循环播放
<audio controls autoplay loop="3">
<!-- 通过source标签指定多格式音频文件-->
<source src="./music/See You Again.mp3">
<source src="./music/See You Again.wav">
<source src="./music/See You Again.ogg">
</audio>
2.视频 <video>
autoplay :自动播放
controls :是否显示默认播放控件
loop :循环播放
width :设置播放窗口宽度
height :设置播放窗口的高度
8.DOM扩展
1.获取元素
1、document.getElementsByClassName ('class') 通过类名获取元素,以伪数组形式存在。
2、document.querySelector('selector') 通过CSS选择器获取元素,符合匹配条件的第1个元素。
3、document.querySelectorAll('selector') 通过CSS选择器获取元素,以伪数组形式存在。
2.类名操作
1、Node.classList.add('class') 添加一个class类名
2、Node.classList.remove('class') 移除一个class类名
3、Node.classList.toggle('class') 切换class,有则移除,无则添加
4、Node.classList.contains('class') 检测是否存在一个class类名
Node指一个有效的DOM节点,是一个通称。
3.自定义属性
格式:data-*="";
例如:data-info="我是自定义属性",通过Node.dataset['info'] 我们可获取到自定义的属性值。
特点:自定义属性全部必须是以data-开头的,只要是符合这种格式就是自定义属性。
Node.dataset是以对象形式存在的,当我们为同一个DOM节点指定了多个自定义属性时,Node.dataset则存储了所有的自定义属性的值。
假设某元素 <div id="demo" data-name="itcast" data-age="10">
var demo = document.querySelector('#demo');
1、读取 demo.dataset['name'] 或者 demo.dataset['age']
2、设置demo.dataset['name'] = 'web developer'
注:当我们如下格式设置时,则需要以驼峰格式才能正确获取
<div data-my-name="lining"> 这样获取Node.dataset['myName']
总结:
1.获取一个DOM节点,并且这个DOM节点定义了一些自定义属性
2.通过Node.dataset,管理/读取/设置自定义属性
3.Node.dataset.属性
4.Node.dataset.属性 = “属性值”
9.新增API
1.网络状态
我们可以通过window.onLine来检测,用户当前的网络状况,返回一个布尔值。
window.online用户网络连接时被调用
window.offline用户网络断开时被调用
2.全屏
HTML5规范允许用户自定义网页上任一元素全屏显示。
1、Node.requestFullScreen() :开启全屏显示
2、Node.cancelFullScreen() :关闭全屏显示
由于其兼容性原因,不同浏览器需要添加前缀如:
webkit内核浏览器:webkitRequestFullScreen、webkitCancelFullScreen,如chrome浏览器。
Gecko内核浏览器:mozRequestFullScreen、mozCancelFullScreen,如火狐浏览器。
3、document.fullScreen:检测当前是否处于全屏
不同浏览器需要添加前缀
document.webkitIsFullScreen、document.mozFullScreen
全屏伪类选择器
:full-screen .box {}、:-webkit-full-screen {}、:moz-full-screen {}
3.文件读取
通过FileReader对象可以读取本地存储的文件,使用 File对象来指定所要读取的文件或数据。
File对象可以是来自用户在一个 <input>元素上选择文件后返回的FileList对象,也可以来自由拖放操作生成的 DataTransfer。
4.FileList对象
由于HTML5中我们可以通过为表单元素添加multiple属性,因此我们通过<input>上传文件后得到的是一个FileList对象(伪数组形式)。
<input type="file" multiple class="file">
// 获取file表单元素
var file = document.querySelector('.file');
file.onchange = function () {
console.log(file.files); //FileList {0: File, length: 1}
}
5.FileReader对象
HTML5新增内建对象,可以读取本地文件内容。
var reader = new FileReader; 可以实例化一个对象
实例方法
1、readAsDataURL() 以DataURL形式读取文件
事件监听
onload 当文读取完成时调用
属性
result 文件读取结果
<script>
// 获取file表单元素
var file = document.querySelector('.file');
file.onchange = function () {
// 获取第一个文件信息
var f = this.files[0];
// 实例化一个读取器
var reader = new FileReader();
console.log(reader);
// 读取文件
reader.readAsDataURL(f);
// reader.readAsBinaryString(f);
// reader.readAsText(f);
// 当文件过大,不能立即读完
// 通过事件监听进度
reader.onload = function () {
console.log(this.result);
document.querySelector('img').src = this.result;
}
}
</script>
10.拖拽
1.拖拽元素
ondrag 应用于拖拽元素,整个拖拽过程都会调用
ondragstart 应用于拖拽元素,当拖拽开始时调用
ondragleave 应用于拖拽元素,当鼠标离开拖拽元素时调用
ondragend 应用于拖拽元素,当拖拽结束时调用
设置了draggable="true"属性的元素,可以被拖拽了;其中<img>、<a>标签默认是可以被拖拽的;
2.目标元素
ondragenter 应用于目标元素,当拖拽元素进入时调用
ondragover 应用于目标元素,当停留在目标元素上时调用
ondrop 应用于目标元素,当在目标元素上松开鼠标时调用
ondragleave 应用于目标元素,当鼠标离开目标元素时调用
页面中任何一个元素都可以成为目标元素
3.事件监听
根据元素类型不同,需要设置不同的事件监听
11.地理定位
1.获取地理信息
通过IP地址、三维坐标、GPS、Wi-Fi、手机信息等多种方式获取地址信息,如下图对不同获取方式的优缺点进行了比较,浏览器会自动以最优方式去获取用户地理信息。
2.隐私
HTML5 Geolocation 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可,才能获取用户的位置信息。
3.API详解
1、获取当前地理信息
navigator. geolocation.getCurrentPosition(successCallback, errorCallback, options) ;
2、重复获取当前地理信息
navigator. geolocation.watchPosition(successCallback, errorCallback, options);
当成功获取地理信息后,会调用succssCallback,并返回一个包含位置信息的对象position。
position.coords.latitude纬度
position.coords.longitude经度
position.coords.accuracy精度
position.coords.altitude海拔高度
当获取地理信息失败后,会调用errorCallback,并返回错误信息error
可选参数 options 对象可以调整位置信息数据收集方式
a) enableHighAccuracy 高精度模式 true/false
b) timeout 超时设置,单位为ms
c) maximumAge表示浏览器重新获取位置信息的时间间隔,单位为ms
navgator.geoloation.getcurrentPosition(success,error,{
enableHighAccuracy: true;
timeout : 3000
maximumAge: 1000
});
12.应用
在现实开发中,把获得到的客户的具体信息当做参数通过调用第三方API(如百度地图)来实现地理定位信息,这些API都是基于用户当前位置的,并将用位置位置(经/纬度)当做参数传递,就可以实现相应的功能。
<div id="container"></div>
<!-- 引入百度javascript版 API -->
<script src="http://api.map.baidu.com/api?v=2.0&ak=0A5bc3c4fb543c8f9bc54b77bc155724"></script>
<script>
// 提供了一个对象 navigator.geolocation
// 此对象下有一个方法 getCurrentPosition(); 是用来获取用户当前位置
// 成功的回调
function success(position) {
// alert(1);
console.log(position);
}
// 失败的回调
function error(err) {
console.log('error');
console.log(err);
}
// 获得用户当前信息
// navigator.geolocation.getCurrentPosition(success, error, {
// // enableHighAccuracy: true,
// // timeout: 3000,
// // maximumAge: 1000
// });
navigator.geolocation.getCurrentPosition(function (position) {
var latitude = position.coords.latitude; // 纬度
var longitude = position.coords.longitude; // 经度
// 查看地理信息
console.log(position);
/********************/
// 这些都是写死
var map = new BMap.Map("container"); // container表示主到哪个容器
// 把经度纬度传给百度
var point = new BMap.Point(longitude, latitude);
// 调用方法
map.centerAndZoom(point, 15);
/****************************/
// 只写上面三行就可出现地图了,并且会定位
// 定义好了一个图片标记
var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(300, 157));
// 创建标注
var marker = new BMap.Marker(point, {icon: myIcon});
// 调用方法
map.addOverlay(marker);
});
</script>
</body>
13.历史管理
提供window.history,对象我们可以管理历史记录,可用于单页面应用,Single Page Application,可以无刷新改变网页内容。
1.旧版本
history.back() 回退
history.forward() 前进
history.go(n) 前进/后退n步
history.length历史记录条数
2.新增方法
1、pushState(data, title, url) 追加一条历史记录
data用于存储自定义数据,通常设为null
title网页标题,基本上没有被支持,一般设为空
url 以当前域为基础增加一条历史记录,不可跨域设置
2、replaceState(data, title, url)
与pushState()基本相同,不同之处在于replaceState(),只是替换当前url,不会增加/减少历史记录。
14.事件监听
onpopstate事件,当前进或后退时则触发,通过事件对象ev.state可以读取到存储的数据。
15.Web存储
传统:document.cookie来存储:
缺点:存储大小只有4k左右,并且解析也相当的复杂,给开发带来诸多不便;
H5新增:
1.window.sessionStorage:
特性:
1、生命周期为关闭浏览器窗口
2、在同一个窗口下数据可以共享
2.window.localStorage:
特性:
1、永久生效,除非手动删除
2、可以多窗口共享
以上两者的特性:
1、设置、读取方便
2、容量较大,sessionStorage约5M、localStorage约20M
4、只能存储字符串,可以将对象JSON.stringify() 编码后存储
16.方法详解
setItem(key, value) 设置存储内容
getItem(key) 读取存储内容
removeItem(key) 删除键值为key的存储内容
clear() 清空所有存储内容
key(n) 以索引值来获取存储内容
17.其它
WebSQL、IndexDB
18.应用缓存
HTML5中我们可以轻松的构建一个离线(无网络状态)应用,只需要创建一个cache manifest文件。
1.优势
1、可配置需要缓存的资源
2、网络无连接应用仍可用
3、本地读取缓存资源,提升访问速度,增强用户体验
4、减少请求,缓解服务器负担
2.缓存清单
一个普通文本文件,其中列出了浏览器应缓存以供离线访问的资源,推荐使用.appcache为后缀名,添加MIME类型
AddType text/cache-manifest .appcache
例如我们创建了一个名为demo.appcache的文件,然后在需要应用缓存在页面的根元素(html)添加属性manifest="demo.appcache",路径要保证正确。
3.manifest文件格式
1、顶行写CACHE MANIFEST
2、CACHE: 换行 指定我们需要缓存的静态资源,如.css、image、js等
3、NETWORK: 换行 指定需要在线访问的资源,可使用通配符
4、FALLBACK: 换行 当被缓存的文件找不到时的备用资源
CACHE MANIFEST
#version 1.0.0
#缓存一些资料,在离线时使用
CACHE:
./images/img1.jpg
./images/img2.jpg
./images/img3.jpg
./images/img4.jpg
./images/img5.jpg
#当处于网络连接时可以更新
NETWORK:
./css/main.css
FALLBACK:
./online.html ./offline.html
./css/online.css ./css/offline.css
CACHE:
./images/img1.jpg
./images/img2.jpg
./images/img3.jpg
./images/img4.jpg
./images/img5.jpg
19.其它
1、CACHE: 可以省略,这种情况下将需要缓存的资源写在CACHE MANIFEST
2、可以指定多个CACHE: NETWORK: FALLBACK:,无顺序限制
3、#表示注释,只有当demo.appcache文件内容发生改变时或者手动清除缓存后,才会重新缓存。
4、chrome 可以通过chrome://appcache-internals/工具和离线(offline)模式来调试管理应用缓存
20.多媒体
方法:load()、play()、pause()
属性:currentSrc、currentTime、duration
事件:ontimeupdate,onended等
21.应用
1、自定义视频播放器
H5总结的更多相关文章
- 旺财速啃H5框架之Bootstrap(五)
在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...
- 旺财速啃H5框架之Bootstrap(四)
上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...
- H5单页面手势滑屏切换原理
H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...
- 快速构建H5单页面切换骨架
在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...
- 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
- 旺财速啃H5框架之Bootstrap(三)
好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...
- H5程序员如何利用cordova开发跨平台应用
什么是Cordova? Cordova以前也叫PhoneGap,它提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等.Cordova还 ...
- H5项目开发分享——用Canvas合成文字
以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...
- 【腾讯Bugly干货分享】H5 视频直播那些事
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57a42ee6503dfcb22007ede8 Dev Club 是一个交流移动 ...
- H5嵌入原生开发小结----兼容安卓与ios的填坑之路
一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的 ...
随机推荐
- vue 动态修改el-upload 的action
action是一个必填参数,且其类型为string,我们把action写成:action,然后后面跟着一个方法名,调用方法,返回你想要的地址,代码示例: //html 代码 <el-upload ...
- Jenkins发送邮件,邮件正文嵌套的html中文显示乱码
解决方案: 1.添加系统变量.变量名:JAVA_TOOL_OPTIONS变量值:-Dfile.encoding=UTF8 2.打开jenkins,系统管理--系统设置,在全局属性处勾选Environm ...
- 面向服务的架构(SOA)演变图片
公司项目演变 成熟的公司项目结构 对比 总线-服务的注册与发现
- (转)android权限(permission)大全
文章转载自:http://blog.csdn.net/hai_qing_xu_kong/article/details/24265533 1.android.permission.WRITE_USER ...
- Win7自带功能,刻录光盘遇到的问题
Win7系统的可以使用系统自带有光盘刻录功能来刻录光盘. 把一张空白光盘放入刻录机,打开“计算机”窗口,双击刻录机图标,弹出“刻录光盘”对话框,选择刻录类型.这里有两个选项:一个是“类似于USB闪存驱 ...
- angular2.0学习笔记5.关于组件
1.组件文件应在/src/app文件夹下 2.组件文件命名应遵循小写中线形式,每个单词之间用中线分隔,并且以.component.ts结尾. 如:HeroDetailComponent类应该放在her ...
- Hibbernate详解一
这里先做一个简单的入门,后面有详解 记住图解原理: 这里只是没有整合spring等项目使用的hibernate的使用详解. 一.Hibernate简介 1.Hibernate在开发中所处的位置 2.O ...
- PDO 代码
<?php try{ $dsn = "mysql:dbname=mydb;host=localhost"; $pdo = new PDO($dsn,"root&qu ...
- [ES]elasticsearch章2 ES查询过程解析
es服务端是准确知道每个document分布在哪个shard上: search一个比较复杂的执行模式,因为我们不知道那些document会被匹配到,任何一个shard上都有可能,所以一个search请 ...
- 微信小程序播放视频发送弹幕效果
首先.先来看一下效果图 然后.再看一下官方文档API对video的说明 相关属性解析: danmu-list:弹幕列表 enable-danmu:是否显示弹幕 danmu-btn:弹幕按钮 contr ...