《HTML5移动Web开发指南》读后笔记

第1章移动互联网时代的Web技术

Apple提供的是基于Object-C语言的IOS SDK应用开发，Google提供的是基于Java语言的Android SDK应用开发。

除了基于SDK开发方式外，移动智能设备还支持Web开发方式，例如iphone上的App Store就是典型的Web App应用软件。

HTML5在移动端应用的技术：Canvas绘图、多媒体、本地存储、离线应用、使用地理位置、移动web框架

PhoneGap框架：打通Web和Native两者

第2章移动设备HTML5页面布局

新增HTML5元素：header/aside/article/section/nav/footer/audio/video/canvas

第3章 HTML5规范的本地存储

两个API：Web Storage和本地数据库Web SQL Database

Web storage提供了两种存储类型：sessionStorage在会话期间内有效，直到相关联的标签页关闭；localStorage存储在本地，并且数据存储是永久的，除非用户或程序对其执行删除操作。

localStorage:

安全性：localStorage是域内安全的，即localstorage是基于域的，任何在该域内的所有页面，都可以访问localstorage数据。

localStorage.setItem(“key”,”value”);

localStorage.getItem(“key”);

localStorage.removeItem(“key”);

localStorage.clear();

除了可以存储字符串也可以存储JSON格式数据：

localStorage.setItem(“userData”,JSON.stringify(userData));

let newUserData = JSON.parse(localStorage.getItem(“userData”));

sessionStorage:

由于和localStorage一样都继承自Storage接口，所以方法使用与上面一致，将对象名改为sessionStorage即可；

事件监听：

window.addEventListener(“storage”,function(e){console.log(e);},true);

第4章移动Web的离线应用

配置manifest文件、applicationCache对象记录着本地缓存的各种状态及事件；

判断浏览器是否在线：window.navigator.onLine

第5章移动设备的常见HTML5表单元素

提交的表单中各控件不再依赖于form元素的位置，只需要在对应控件中添加form=“form元素id”的属性就可以将其归属于表单中。

autofocus属性：指定元素自动获得焦点，一个HTML页面只能有一个控件有该属性；

input类型：邮箱、电话号码、url等；

第6章移动Web界面样式

属性选择器：完全=、包含*=、首字符^=、尾字符$=

伪类选择器:  元素:before{content:’..’}、:after、first-child、last-child、li:nth-child(2){}、nth-last-child

阴影：box-shadow:1px 1px 1px red; text-shadow:1px 1px 1px red;

Background、border-radius

viewport:它的主要作用是允许开发者创建一个虚拟的窗口，并自定义其窗口的大小或缩放功能；

<meta name=“viewport” content=“width=device-width,initial-scale=1,user-scalable=0” />

媒体查询：@media screen and(max-width:900px){}

第7章 Geolocation地理定位

getCurrentPosition():获取当前位置

watchPosition():监控当前位置变化

clearWatch():清楚监控

第8章轻量级框架jQuery Mobile初探

第9章重量级富框架Sencha Touch入门

第10章跨平台的PhoneGap应用介绍

PhoneGap是一款基于HTML5标准的跨平台开源手机Web应用开发框架。

如何在Android平台和IOS平台下搭建PhoneGap开发环境？

硬件设备接口：加速度传感器、指南针信息、设备网络状态、文件系统、移动设备信息；

软件接口：照片资源、多媒体资源采集、通讯录、公告警示、多媒体；

第11章构建基于HTML5的生活轨迹Web App

第12章进阶之路