青花瓷鉴定:HTML5 CSS3 预研总结文档
目录:
第一章 HTML 5 的技术要点... 3
1. 地理位置API 3
1.1 简介:... 3
1.2 获取地理位置的方式及其优缺点:... 3
1.3 地理位置获取流程:... 3
1.4 浏览器支持的情况:... 3
1.5 浏览器支持的检查方法:... 3
1.6 位置请求方式:... 4
1.6.1 单次请求... 4
1.6.2 重复请求... 5
2. HTML5 离线功能... 5
2.1 简介:... 5
2.1.1 离线资源缓存:... 5
2.1.2 在线状态检测:... 5
2.1.3 本地数据存储(Web Sotrage API):... 5
2.2 浏览器支持的情况:... 6
3. Audio和Video标签... 6
3.1 各浏览器对编码格式的支持:... 6
3.2 浏览器支持的检查方法:... 6
3.3 标签使用方法:... 6
4. WebSocket API 7
4.1 简介:... 7
4.2 浏览器支持的情况:... 7
4.3 浏览器支持的检查方法:... 8
5. 跨文档消息机制(Cross Document Messaging)... 8
5.1 简介:... 8
5.2 浏览器的支持情况:... 8
5.3 浏览器支持的情况:... 8
6. XMLHttpRequest Level 2. 8
6.1 简介:... 8
6.2 浏览器支持情况:... 9
6.3 浏览器支持的检查方法:... 9
7. Web Worker API 9
7.1 简介:... 9
7.2 浏览器支持的检查方法:... 9
8. 其他HTML5支持的特性(部分未广泛支持)... 10
9. 总结... 10
第二章 jQuery Mobile. 10
1. 四大主流移动Web开发框架... 10
1.1 iUI: 10
1.2 jQTouch: 10
1.3 Sencha Touch:... 10
1.4 jQuery Mobile: 11
2.使用 jQuery Mobile. 11
2.1 简介:... 11
2.2 整合jQuery Moblie + Google Maps API v3的界面... 12
提纲:
1. Web App 开发之:HTML 5 技术要点 和 CSS 3 特性
2. Web App 开发之:CSS 3 特性
3. Web App 开发之:移动Web开发框架(jQuery Mobile)
第一章 HTML 5 的技术要点
1. 地理位置API
1.1 简介:
HTML5通过Geolocation API来支持检测用户位置。根据你的需求它提供了单次的位置接收以及持续的位置接收。
1.2 获取地理位置的方式及其优缺点:
1、ip地址
2、GPS
3、WiFi基站的mac地址。(连接位置已知的公共WiFi的时候,通过Mac地址识别WiFi接入点,从而定位)
4、 GSM或CDMA基站
1.3 地理位置获取流程:
1、用户打开需要获取地理位置的web应用。
2、应用向浏览器请求地理位置,浏览器弹出询问窗口,询问用户是否共享地理位置。
3、假设用户允许,浏览器从设别查询相关信息。
4、浏览器将相关信息发送到一个信任的位置服务器,服务器返回具体的地理位置。
1.4 浏览器支持的情况:
当前版本的 Chrome、Firefox、Opera、Safari都支持,但IE9还不支持。
1.5 浏览器支持的检查方法:
function loadDemo() {
if(navigator.geolocation) {
//supported
} else {
//not supported
}
}
1.6 位置请求方式:
1.6.1 单次请求
navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError, options);
回调函数updateLocation接受一个对象参数,表示当前的地理位置,它有如下属性:
latitude——纬度
longitude——精度
accuracy——精确度,单位米
altitude——高度,单位米
altitudeAccuracy——高度的精确地,单位米
heading—运动的方向,相对于正北方向的角度
speed——运动的速度(假设你在地平线上运动),单位米/秒
回调函数handleLocationError接受错误对象,error.code是如下错误号。
UNKNOWN_ERROR (error code 0) —— 错误不在如下三种之内,你可以使用error.message获取错误详细信息。
PERMISSION_DENIED (error code 1)—— 用不选择不共享地理位置
POSITION_UNAVAILABLE (error code 2) ——无法获取当前位置
TIMEOUT (error code 3) ——在指定时间无法获取位置会触发此错误。
第三个参数options是可选参数,属性如下:
enableHighAccuracy——指示浏览器获取高精度的位置,默认为false。当开启后,可能没有任何影响,也可能使浏览器花费更长的时间获取更精确的位置数据。
timeout——指定获取地理位置的超时时间,默认不限时。单位为毫秒。
maximumAge——最长有效期,在重复获取地理位置时,此参数指定多久再次获取位置。默认为0,表示浏览器需要立刻重新计算位置。
参数使用的例子如下:
navigator.geolocation.getCurrentPosition(updateLocation,handleLocationError,
{timeout:10000});
1.6.2 重复请求
navigator.geolocation.watchPosition(updateLocation, handleLocationError);
使用 watchPosition可以持续获取地理位置,浏览器或多次调用updateLocation函数以便传递最新的位置。该函数返回一个watchID,使用navigator.geolocation.clearWatch(watchId)可以清除此次回调,使用不带参数的navigator.geolocation.clearWatch()清除说有watchPosition。
2. HTML5 离线功能
2.1 简介:
在开发支持离线的 Web 应用程序时,开发者通常需要使用以下三个方面的功能:
2.1.1 离线资源缓存:
需要一种方式来指明应用程序离线工作时所需的资源文件。这样,浏览器才能在在线状态时,把这些文件缓存到本地。此后,当用户离线访问应用程序时,这些资源文件会自动加载,从而让用户正常使用。HTML5 中,通过 cache manifest 文件指明需要缓存的资源,并支持自动和手动两种缓存更新方式。
2.1.2 在线状态检测:
开发者需要知道浏览器是否在线,这样才能够针对在线或离线的状态,做出对应的处理。在 HTML5 中,提供了两种检测当前网络是否在线的方式。
2.1.3 本地数据存储(Web Sotrage API):
离线时,需要能够把数据存储到本地,以便在线时同步到服务器上。为了满足不同的存储需求,HTML5 提供了 DOM Storage 和 Web SQL Database 两种存储机制。前者提供了易用的 key/value 对存储方式,而后者提供了基本的关系数据库存储功能。
详情请参考:http://www.ibm.com/developerworks/cn/web/1011_guozb_html5off/(使用 HTML5 开发离线应用)
2.2 浏览器支持的情况:
浏览器支持情况:各大主流浏览器都已经实现了其中的很多功能。
3. Audio和Video标签
3.1 各浏览器对编码格式的支持:
两个标签的实际使用,请参考w3school的教程。
http://www.w3school.com.cn/html5/html5_audio.asp
http://www.w3school.com.cn/html5/html5_video.asp
3.2 浏览器支持的检查方法:
var hasVideo = !!(document.createElement(‘video’).canPlayType);
3.3 标签使用方法:
如果浏览器不支持HTML5的浏览器会载入flash标签,支持的则会优先选择HTML5的video标签。但这样必须准备两套视频格式了。
同样对于audio元素,不同的浏览器支持不同的格式,可以提供两种不同的格式供浏览器选择。