《HTML5移动Web开发指南》 作者：唐俊开
Chapter 1：《移动互联网时代的web技术》
1.html5对移动web的支持
（1）canvas绘图：
canvas绘图很强大，以后肯定会用到很多，博客园有使用方法的文章，附上链接：
（2）多媒体播放：
<video>和<audio>标签对于IOS来说是福音，解决了ios下不支持播放flash文件以致播放多媒体难以实现的问题。
目前各浏览器支持的视频格式如下：
Chapter 2：《移动设备html5页面布局》
1.新的标签
（1）这里只列举了一些与移动web开发关系比较密切的元素
<header></header> 页眉
<footer></footer> 页脚
<nav></nav> 导航栏
<aside></aside> 区域
<article></article> 独立文章内容
<section></section> 章节
<hgroup></hgroup> 标题组
Chapter 3：《HTML5 规范 的本地存储》
1.Web Storage 和 Web SQL Database
（1）html5定义了两个重要的API：Web Storage 和 Web SQL Database。
（2）Web Storage：
主流的浏览器基本都支持HTML5的Web Storage，而Web Storage有两种存储类型的API：localStorage 和 sessionStorage
// 判断是否支持localStorage 和 sessionStorage：
if(window.localStorage){}
if(window.sesiionStorage){}
2.localStorage
（1）数据永久保存在客户端，需用户或程序指定删除。
（2）域内安全，域内所有页面都可以访问localStorage的数据，但不同浏览器之间的localStorage不能互相访问。
（3）localStorage接口：
interface localStorage{
long length; // 数据长度
DOMString getItem(DOMString key); // 获取key对应的值
void setItem(DOMString key, DOMString value); // 插入键值对
void removeItem(DOMString key); // 删除一个键值对
void clear(); // 清除数据
}
除了用key调用getItem方法来获取值外，还可以这样获取：
localStorage.key(n); // n代表的是键的索引值
（4）存取JSON格式数据
var data = {
name:''Vincent",
sex:"male"
};
// 存储json格式的数据,，JSON.stringify-将JSON对象转换成JSON字符串
localStorage.setItem("jsonData", JSON.stringify(data));
// 读取json格式的数据，JSON.parse-将JSON字符串转换成JSON对象
JSON.parse(localStorage.getItem());
3.sessionStorage
（1）数据保存在当前会话当中，方法和属性与localStorage相同
4.Storage事件监听
（1）StorageEvent接口：
interface StorageEvent{
DOMString key; // 键值
DOMString oldValue; // 更新前的值，如果为新增的数据，则为null
DOMString newValue; // 数据更新后的值，如果为删除数据，则为null
DOMString url; // 记录storage事件发生的源地址
Storage storageArea; // 指向监听的storage对象
void initStorageEvent(
DOMString typeArg,
boolean CanBubbleArg,
boolean cancelableArg,
DOMString keyArg,
DOMString oldValueArg,
DOMString newValueArg,
DOMString urlArg,
Storage storageAreaArg
);
}
（2）使用StorageEvent监听：
// 注册storage监听器
window.addEventListener("storage", showStorageEvent, true);
// 监听器触发事件
function showStorageEvent(e){
console.log(e);
}
Chapter 4：《移动Web的离线应用》
1.离线应用和网页缓存的异同：
（1）相同点：缓存访问页面需要的文件以提高访问速度
（2）不同点：
1.网页缓存依赖于网络的存在，离线应用即使离线也可以用
2.网页缓存主要缓存当前页面的内容，离线应用缓存的是文件
2.applicationCache 和 manifest
（1）manifest的使用方法：
指定使用cache.manifest缓存配置文件
<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
<meta charset="UTF-8">
<title>离线使用缓存示例</title>
</head>
<body>
</body>
</html>
manifest文件的MIME类型是text/cache-manifest，因此要在web服务器配置MIME类型，才能识别manifest的文件。
在Tomcat下的conf/web.xml文件中进行配置，在mime-mapping中添加一下配置即可：
<mime-mapping>
<extension>manifest</extension>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>
完成manifest的识别后，要在manifest中写入要缓存的文件：
// 通知浏览器以下是一个离线应用的清单文件，当前处于网络不可用时，应用会从本地缓存中直接读取以下的文件
CACHE MANIFEST
index.html
test.js
// 无论文件是否被缓存，都要从网络进行下载
NETWORK
/images/
// 当前半部分(offline.html)无法获取的时候，就去获取后半部分(index.html)
FALLBACK
offline.html index.html
（2）applicationCache 接口：
interface ApplicationCache{
short UNCACHED = 0; // 未缓存
short IDLE = 1; // 空闲状态
short CHECKING = 2; // 检查中
short DOWNLOADING = 3; // 下载中
short UPDATEREADY = 4; // 更新准备中
short OBSOLETE = 5; // 过期状态
short status;
}
（3）applicationCache 的使用：
// 注册applicationCache监听器
applicationCache.addEventListener('updateready', function(){
// TO-DO 触发事件
});
（4）applicationCache 事件：
1.checking 第一次下载manifest或客户端检查更新的时候触发的事件
2.noupdate 检查到manifest中不需要更新文件的时候触发的事件
3.downloading 第一次下载manifest或正在更新manifest中文件的时候触发的事件
4.Progress 在下载过程中周期性触发
5.Cached 当manifest清单下载完毕或成功缓存后触发的事件
6.updateready 缓存清单已经下载完毕的时候触发的事件
7.Obsolete 当请求页面或文件返回HTTP 404 或 410时触发的事件
8.Error 触发该事件要满足以下条件：（1）已经触发了Obsolete事件；（2）manifest没有改变，但缓存文件中存在文件下载失败；（3）获取mainifest文件时发生致命错误；（4）当更新本地缓存时，manifest再次被更改
（5）判断当前是否在线
if(window.navigator.onLine){} // 判断是否在线
Chapter 5：《移动设备常见的HTML5表单元素》
1.表单属性
（1）form属性
<form id="testform">
<input type="text"> <!-- 以往的input需要在表单内，提交表单时才会提交input的值 -->
</form>
<input form=testform> <!-- 现在只需要在外部的input添加form属性并指定id，则可以提交该input的值 -->
（2）autofocus 属性
<input type="text" autofocus> <!-- 访问页面时自动聚焦该input，但整个页面只允许有一个autofocus属性 -->
（3）required 属性
<input type="text" required> <!-- 必填项，如果不输入则无法提交表单 -->
2.input 类型
（1）search 类型
无特点
（2）email 类型
系统会提供输入邮箱要用的符号的输入法键盘，例如带@和.的键盘
（3）number 类型
系统提供输入数字和符号用的输入法键盘，可以配合min、max、step属性使用
<input type="number" min="0" max="10"> <!-- 最小值为0，最大致为10 -->
<input type="number" step="3"> <!-- 步长为3，输入框会出现上下按钮，如果输入的为2，点击上，则变为3，再点击上，则变为6 -->
（4）tel类型
系统提供输入电话号码输入法键盘
（5）url类型
系统提供输入网址的输入法键盘
（6）html5新增的类型，各浏览器支持 http://www.w3school.com.cn/html5/html_5_form_input_types.asp
Chapter 6：《移动Web界面样式》
1.CSS3
（1）选择器：
1.完全匹配选择器
/*完全匹配-属性中id等于article的字体颜色为红色*/
[id=article]{
color:red;
}
/*包含匹配-属性中id等于article的字体颜色为红色*/
[id*=article]{
color:red;
}
/*首字符匹配-属性中id等于article的字体颜色为红色*/
[id^=article]{
color:red;
}
/*尾字符匹配-属性中id等于article的字体颜色为红色*/
[id$=article]{
color:red;
}
2.伪类选择器
/*在元素前添加元素*/
p:before{
content:"添加的文字";
}
/*在元素后添加元素*/
p:after{
content:"添加的文字";
}
/*元素列表中第一个元素*/
ul.main > li:first-child{
color:red;
}
/*元素列表中最后一个元素*/
ul.main > li:first-child{
color:red;
}
/*指定第几个元素*/
li:nth-child(2){
color:red;
}
/*指定倒数第几个元素*/
li:nth-last-child(2){
color:red;
}
/*指定偶数个元素*/
li:nth-child(even){
color:red;
}
/*指定奇数个元素*/
li:nth-last-child(odd){
color:red;
}
（2）阴影：
1.元素阴影
/*box-shadow:<x偏移量> <y偏移量> <模糊半径> <扩散半径> <颜色>*/
div{
box-shadow: 5px 5px 5px 5px gray;
-moz-box-shadow: 5px 5px 5px 5px gray; /*moz内核*/
-webkit-box-shadow: 5px 5px 5px 5px gray; /*webkit内核*/
}
2.文本阴影
/*text-shadow:<x偏移量> <y偏移量> <模糊半径> <扩散半径> <颜色>*/
div{
text-shadow: 5px 5px 5px 5px gray;
-moz-text-shadow: 5px 5px 5px 5px gray; /*moz内核*/
-webkit-text-shadow: 5px 5px 5px 5px gray; /*webkit内核*/
}
（3）背景：
1.background-size
/*background-size:<宽度><高度>*/
div{
background-size: 100px 50px;
}
2.background-clip
/*background-clip: border-box | padding-box | content-box | no-clip*/
/*border-box:从border区域向外裁剪背景 */
/*padding-box:从padding区域向外裁剪背景 */
/*content-box:从内容区域向外裁剪背景 */
/*no-clip:从border区域向外裁剪背景 */
div{
background-clip: border-box;
}
3.background-origin
/*background-origin: padding || border || content */
/*padding:从padding外边沿开始显示图片*/
/*border:从border外边沿开始显示图片*/
/*content:从padding内边沿开始显示图片*/
4.背景渐变gradient
/*线性渐变*/
background: -moz-linear-gradient(left, #ace, #f96); /*Mozilla*/
background: -webkit-gradient(linear, 0 50%, 100% 50% ,from(#ace),to(#f96)); /*Old gradient for webkit*/
background: -webkit-linear-gradient(left ,#ace, #f96); /*new gradient for Webkit*/
background: -o-linear-gradient(left, #ace, #f96); /*Opera11*/
/*径向渐变(不支持Opera)*/
background: -moz-radial-gradient(#ace, #f96, #1E90FF); /*Mozilla*/
background: -webkit-radial-gradient(#ace, #f96, #1E90FF); /*new gradient for Webkit*/
/*重复渐变*/
background: -moz-repeating-radial-gradient(#ace, #ace 5px, #f96 5px, #f96 10px); /*Mozilla*/
background: -webkit-repeating-radial-gradient(#ace, #ace 5px, #f96 5px, #f96 10px); /*new gradient for Webkit*/
类型：
liner 线性渐变
radial 径向渐变
repeating-liner 重复线性渐变
repeating-radial 重复径向渐变
2.Media Queries 移动样式设备
（1）viewport
1.介绍
主要作用是允许开发者创建一个虚拟的窗口（viewport），并自定义其窗口的大小或缩放功能。
各浏览器viewport默认大小：
Safari：980像素
Android Browser：800像素
IE：974像素
Opera：850像素
2.使用方法
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0" />
width指定虚拟窗口的屏幕宽度大小。
height指定虚拟窗口的屏幕高度大小。
initial-scale指定初始缩放比例。
maximum-scale指定允许用户缩放的最大比例。
minimum-scale指定允许用户缩放的最小比例。
user-scalable指定是否允许手动缩放。
（2）media queries
1.使用方法
<link rel="stylesheet" media="screen and(max-width:600px)" href="small.css"/>
/*small.css*/
@media screen and (max-width:600px){
.demo{
background-color:#CCC;
}
}
<link rel="stylesheet" media="all and(orientation:portrait)" href="portrait.css"/> <!-- 纵向 -->
<link rel="stylesheet" media="all and(orientation:landscape)" href="landscape.css"/> <!-- 横向 -->
2.语法
/*
语法：
@media [media_query] media_type and media_feature
media_query: 查询关键字(not/only)
media_type: 设备类型
media_feature：设备特征
*/
@media not screen and (max-device-width:480px) /*not 取反*/
@media only screen and (max-device-width:480px) /*only让不支持Media Queries的设备但能读取Media Type类型的浏览器忽略这个样式*/
3.设备类型
4.设备特征
Chapter 7：《Geolocation地理定位》
//判断浏览器是否支持geolocation
if(navigator.geolocation){
// getCurrentPosition支持三个参数
// getSuccess是执行成功的回调函数
// getError是失败的回调函数
// getOptions是一个对象，用于设置getCurrentPosition的参数
// 后两个不是必要参数
var getOptions = {
//是否使用高精度设备，如GPS,默认是true,将消耗更多的电量和流量
enableHighAccuracy:true,
//超时时间，单位毫秒，默认为0
timeout:5000,
//使用设置时间内的缓存数据，单位毫秒
//默认为0，即始终请求新数据
//如设为Infinity，则始终使用缓存数据
maximumAge:0
};
navigator.geolocation.getCurrentPosition(getSuccess, getError, getOptions);
//成功回调
function getSuccess(position){
// getCurrentPosition执行成功后，会把getSuccess传一个position对象
// position有两个属性，coords和timeStamp
// timeStamp表示地理数据创建的时间？？？？？？
// coords是一个对象，包含了地理位置数据
console.log(position.timeStamp);
// 估算的纬度
console.log(position.coords.latitude);
// 估算的经度
console.log(position.coords.longitude);
// 估算的高度 (以米为单位的海拔值)
console.log(position.coords.altitude);
// 所得经度和纬度的估算精度，以米为单位
console.log(position.coords.accuracy);
// 所得高度的估算精度，以米为单位
console.log(position.coords.altitudeAccuracy);
// 宿主设备的当前移动方向，以度为单位，相对于正北方向顺时针方向计算
console.log(position.coords.heading);
// 设备的当前对地速度，以米/秒为单位
console.log(position.coords.speed);
// 除上述结果外，Firefox还提供了另外一个属性address
if(position.address){
//通过address，可以获得国家、省份、城市
console.log(position.address.country);
console.log(position.address.province);
console.log(position.address.city);
}
}
//失败回调
function getError(error){
// 执行失败的回调函数，会接受一个error对象作为参数
// error拥有一个code属性和三个常量属性TIMEOUT、PERMISSION_DENIED、POSITION_UNAVAILABLE
// 执行失败时，code属性会指向三个常量中的一个，从而指明错误原因
switch(error.code){
case error.TIMEOUT:
console.log('超时');
break;
case error.PERMISSION_DENIED:
console.log('用户拒绝提供地理位置');
break;
case error.POSITION_UNAVAILABLE:
console.log('地理位置不可用');
break;
default:
break;
}
}
// watchPosition方法一样可以设置三个参数
// 使用方法和getCurrentPosition方法一致，只是执行效果不同。
// getCurrentPosition只执行一次
// watchPosition只要设备位置发生变化，就会执行
var watcher_id = navigator.geolocation.watchPosition(getSuccess, getError, getOptions);
//clearwatch用于终止watchPosition方法
clearWatch(watcher_id);
