《HTML5移动Web开发指南》读书笔记
《HTML5移动Web开发指南》 作者：唐俊开
Chapter 1：《移动互联网时代的web技术》
1.html5对移动web的支持
（1）canvas绘图：
canvas绘图很强大，以后肯定会用到很多，博客园有使用方法的文章，附上链接：
http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html
（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);
