2016乌镇互联网会议上，李彦宏大大说"移动互联网时代已经结束"，小马哥也持有类似观点。不过这都是大牛的事，对于菜菜的俺来说，落后一个时代远比两个时代好的多，称为一个不错的跟随着是现阶段主要的任务。
移动互联的发展方向：移动广告（微信推广）；移动搜索（猎豹科技）；移动购物（京东，淘宝）；移动互联社交（微信）；多媒体（斗鱼）；移动游戏（阴阳师）。
Chrome, Safari均使用webkit浏览器内核，其支持html5,css3特性
H5的新特性：Canvas提供丰富的Web绘图功能；多媒体Video,Audio弥补需要插件播放flash的缺陷；Web Storage和Web SQL Database提供本地存储；Manifest File提供离线应用的支持；Geolocation提供地理信息。其他H5新标签等信息请见，Html与CSS快速入门01-基础概念。
本地存储
sessionStorage的操作和localStorage类似，区别是前者是长期保存，后者是会话保存，此外Storage支持事件监听。
离线应用
其突出功能是在没有网络状态时，Web应用仍然可以正常进行，使用场景比如在线编辑功能，对于智能手机等终端来说，其可以减少流量消耗。其通过manifest文件作为缓存资源文件的配置文件，ApplicationCache记录应用缓存状态，online方法用于检测网络是否在线。
接下来提供一个综合示例，首先需要在web.xml配置文件中添加manifest文件类型
<mime-mapping> <extension>manifest</extension> <mime-type>test/cache-manifest</mime-type> </mime-mapping>
cache.manifest文件如下所示
CACHE MANIFEST #缓存的文件 index.html test.js #不作缓存 NETWORK /images/ FALLBACK offline.html index.html
接下来是综合页面
1 <!DOCTYPE html> 2 <html manifest="cashe.manifest"> 3 <meta charset="utf-8"> 4 <meta name="viewport" 5 content="width=device-width, initial-scale=1,user-scalable=0" /> 6 <script 7 src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 8 <body> 9 <h2>Hello World!</h2> 10 <input type="text" placeholder="请输入内容" autofocus required> 11 <input type="search"> 12 <input type="email"> 13 <input type="number"> 14 <input type="range"> 15 <input type="tel"> 16 <!-- 此外,还有datetime, datetime-local, Time, Date, Week, Month等类型，以及min, max等属性 --> 17 </body> 18 <script> 19 if (window.localStorage) { 20 var userData = { 21 name : "xionger", 22 desc : "handsome" 23 }; 24 localStorage.setItem("xionger", JSON.stringify(userData)); 25 var newData = JSON.parse(localStorage.getItem("xionger")); 26 localStorage.key(1); 27 localStorage.removeItem("xionger"); 28 localStorage.clear(); 29 } 30 window.onload = function() { 31 window.addEventListener("storage", function(e) { 32 console.log(e); 33 }, true); 34 } 35 if (!window.navigator.online) { 36 application.Cache.addEventListener('updateready', function() { 37 //资源文件下载中， to do 38 }); 39 } 40 window.navigator.geolocation.getCurrentPosition(function(pos) { 41 console.log(pos.coords.latitude + ' , ' + pos.coords.longitude + ' , ' 42 + pos.coords.accuracy); 43 }); 44 45 var watchID = navigator.geolocation.watchPosition(function(pos){ 46 navigator.geolocation.clearWatch(watchID); 47 }); 48 </script> 49 </html>
Tip:选择器部分内容请见http://www.cnblogs.com/wanliwang01/p/jquery_01.html.
移动前端这部分内容自己接触的比较少，有不少困惑，询问了小伙伴，大体理解了当前的技术发展状况，这部分内容随着深入理解，会继续更新。
当前移动应用主要包括如下几种形式。
| 方式 | 诠释 |
| Native | 也就是常规的app应用，通过swift,java来编码 |
| Hybrid | 应用中内置浏览器，通过H5编码，但需要注意的是，其会把相关的js,css文件打包到安装包中。介于Native和H5之间，开发一个版本即可，比较方便，同时由于文件主要存在本地用户体验比较好 |
| H5 | 也就是常说的webapp了 |
| 内嵌 | 比如微信小程序 |
关于H5和native需要提到一个概念，就是js bright，其通过包装原生的方法，达到通过js可以调用终端api的效果，比如过去的phoneGap，ctrip的lizard等，现在比较流行react native。举个例子来说，ctrip的hybird框架，主要包括requirejs（管理js），backbone&underscore（数据绑定），zepto基础库, lizard(js bright)等内容。
对于一般的Online项目，推荐使用vue(听大神哥们的)替代angularjs，饿了么前端主要使用Vue框架。
2017前端可能发展：http://www.iteye.com/news/31988
-
唐俊开. HTML5移动Web开发指南[M]. 北京:电子工业出版社, 2012.