一,浏览器引擎
   浏览器的内核引擎，基本上是四分天下：
Trident: IE 以Trident 作为内核引擎;
Gecko: Firefox 是基于 Gecko 开发;
WebKit: Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 opera浏览器 基于 Webkit 开发。
Presto: Opera的内核，但由于市场选择问题，主要应用在手机平台--Opera mini
注：2013年2月Opera宣布转向WebKit引擎
注：2013年4月Opera宣布放弃WEBKIT，跟随GOOGLE的新开发的blink引擎

智能手机的web浏览器：

大多数都是基于webkit的浏览器。webkit实际上是一种浏览器引擎。同时也是一个开源的项目。其起源可以追溯到Kool Desktop Environment(KDE)。在桌面浏览器中，Chrome,Safari。

这篇博客对webkit内核有更详细的介绍：http://www.cnblogs.com/jyli/archive/2010/01/31/1660355.html

二。html5新特性学习

1.html5新特性
1.<header> 标签定义文档的页眉（介绍信息）。
2.footer
<footer> 标签定义文档或节的页脚。
<footer> 元素应当含有其包含元素的信息。
页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
您可以在一个文档中使用多个 <footer> 元素。
浏览器支持同上。
3.nav
<nav>标签定义导航链接
浏览器支持同上。
4.aside
<aside>标签定义页面的一个页面的区域，用来表示和页面相关的主要内容。其作用主要用来装载非正文类的内容，例如，广告，侧边栏等。传统用来进行2栏或者多栏布局。
浏览器支持同上。
5.article

<article> 标签规定独立的自包含内容。

一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。

<article> 元素的潜在来源：

  • 论坛帖子
  • 报纸文章
  • 博客条目
  • 用户评论
6.section
<section>标签定义文档中的节。
7.hgroup
对网页或者区段的标题元素进行组合，通常使用多级别的h1-h6标签节点进行分组，例如副标题，标签行等。
8.更多的h5新元素
 
2.页面结构与移动设备的布局
 
 
3.HTML5规范的本地存储
2个重要的API:Web Storage ,本地数据库Web SQL Database,这里主要讲解Web Storage的用法。
本地存储Web Storage实际上是Html4中Cookie存储机制的一个改进版本。然而2中机制的作用不相同，Web Storage是把把网站中有用的信息存储到本地计算机和移动设备中。然后根据实际需要从本地读取数据。
 
Web Storage提供了2种存储类型API接口。sessionStorage 和localStorage.
他们的生命周期，sessionStorage是在会话期间内有效。而localStorage就存储在本地，并且存储是永久的，除非用户或者程序对其执行删除操作。
 
 
3.1 移动设备的支持
几乎所有浏览器都支持Web Storage存储
但是，在代码严谨上看，最好还是做检查：先判断浏览器是否支持
if(window.localStorage){
//浏览器支持localStorage
}
if(window.sessionStorage){
//浏览器支持sessionStorage
}
 
 
localStorage
域内安全，localStorage是基于域的，任何在域内的所欲页面，都可以访问localStorage数据。
但仍然存在一个问题，就是各个浏览器存储是独立的，就是火狐浏览器使用localStorage存储的数据，Chrome不能访问。
 
 
如何存储一个数据：
localStorage.setItem("name","飞一般的黑客");
取出数据：
localStorage.getItem("name");
或者如果知道localStorage列表中只有一个数据。那么可以通过localStorage.key(1) ;
同样，通过length属性，可以知道localStorage存储了多少个键值对。
removeItem()，clear()删除item操作。
localStorage.removeItem("name");删除key为name的item
localStorage.clear();用来删除所有键值对
 
除了字符串，还能存储json格式的数据
 
 
 
 
sessionStorage
 
 
sessionStorage存储的数据生命周期只保存在存储它的当前窗口或由当前窗口新建的新窗口，直到相关联的标签页关闭。使用方法和localStorage基本一致。
 
4.storage事件监听
 
 
 
 
 
function showStorageEvent(e){
   console.log(e) ;
}
 
 
 
 
 
4.移动web的离线应用。
1.离线与缓存
离线就是在没有网络访问的情况下，实际上是访问已下载的离线文件资源，并使web应用程序正常运行。
离线应用和网络缓存都是都是为了更好地缓存各种文件以提高访问速度。按两者对网络环境的要求有所差别。
  • 网络缓存依赖于网络的存在，而离线应用在离线状态下任然可以使用。
  • 网页缓存主要缓存当前页面相关的内容，也仅限于当前页面的读取。离线应用则主要缓存文件，只要设置缓存该文件的页面，都能在离线状态下读取该页面。
2.移动设备的支持
基本浏览器都支持该功能
判断：
if(window.applicationCache){
     //浏览器支持离线应用
}
3.applicationCache和manifest
HTML5提供的离线应用，开发者主要注意一下3点特征：
  • 离线资源缓存
开发时需要指定哪些资源可以离线缓存。离线应用将使用manifest类型的文件作为需要配置缓存资源文件的配置文件。
  • ApplicationCache对象缓存状态
ApplicationCache记录着Web应用程序的缓存状态，开发者可以根据该缓存状态手动更新资源文件的缓存。
  • 在线状态检测
HTML5提供了标准的onLine方法用于检测当前网络是否在线。开发者可以根据方法判断浏览器是否在线。
manifest文件
离线应用包含一个manifest文件，此文件记录着哪些文件需要离线缓存。
 
 
<!DOCTYPE html>
<html manifest="cache.manifest">
<head lang="en">
    <meta charset="UTF-8">
    <title>manifest离线应用演示</title>

</head>
<body>
<h5>
    <mark>由于manifest文件的MIME类型是text/cahce-manifest,因此web服务需要配置MIME类型，才能识别manifest文件
        。例如在tomcat服务器下，开发者需要在web.xml文件中配置manifest类型。</mark>
</h5>
</body>

</html>
 
由于manifest文件的MIME类型是text/cahce-manifest,因此web服务需要配置MIME类型，才能识别manifest文件
        。例如在tomcat服务器下，开发者需要在web.xml文件中配置manifest类型。
例如，web.xml中需要配置，
<mime-mapping>
          <extention>manifest</extention>
          <mime-type>text/cache-manifest</mime-type>
</mime-mapping>
 
 
################################
#需要缓存的文件都方法CACHE MANIFEST下面
#不需要缓存的：放在NETWORK下面
#FALLBACK后面是如果不存在则请求转发到下面的页面
#########################################
applicationCache对象和事件
applicationCache对象记录着本地缓存的各种状态及事件。缓存的状态可以通过window.applicationCache.status获得。其状态包括6种。
 
 
监听资源文件下载中：
 
applicationCache.addEventListener("updateready",function(){
});
 
判断浏览器是否在线：
if(window.navigator.onLine){
//当前浏览器online
}else{
//不在线offline
}
 
 
5.移动设备的常见HTML5表单元素
1.丰富的表单属性
1）form属性
2.移动web表单的input类型
6.移动web界面样式
1，css3
1)属性选择器
6.移动设备上显示问题
1.viewport设置自适应屏幕大小
使用：
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>
该代码 的主要作用是定义虚拟窗口，，并指定虚拟窗口width属性为设备width,初始缩放比例为1，且不允许用户使用手动缩放功能。
2.midea queries如何工作
适应不同分辨率设备的样式结构。
 
 
 
7.Geolocation地理定位
api:
 
首次获取地理位置：
 
navigator.geolocation.getCurrentPosition(function(pos){
            console.log("当前地理位置的纬度："+pos.coords.latitude);
            console.log("当前地理位置的经度："+pos.coords.longitude);
            console.log("当前经纬度的经度："+pos.coords.accuracy);

        })

HTML5移动Web开发指南-学习笔记（一）的更多相关文章

  1. 《应用Yii1.1和PHP5进行敏捷Web开发》学习笔记（转）

    学习地址为: http://www.yiibook.com/book/agile_web_application_development_with_yii1.1_and_php5   1.建立应用程序 ...

  2. Web开发入门学习笔记

    公司web项目终于要启动了,本以为django学习可以在实战中进行,结果最终使用了Drupal框架,好吧,那我们就PHP走起,买了本<细说PHP>,先跟着过一遍Web开发入门. HTTP协 ...

  3. 《Flask Web开发》学习笔记

    第一部分 Flask简介 前言:想熟练掌握一门web框架,为以后即将诞生的测试工具集做准备.为什么选择flask要做熟练掌握的一门框架,而不是其他的,最主要的原因是可以随意定制. 特别提醒:这本书的代 ...

  4. NODE.JS开发指南学习笔记

    1.Node.js是什么 Node.js是一个让JS运行在服务器端的开发平台,它可以作为服务器向用户提供服务.Node.js中的javascript只是Core javascript,或者说是ECMA ...

  5. django1.8.3搭建博客——2 django web 开发指南阅读笔记

    一.    django框架 1 .http封装web服务的整个过程.由请求(request)和响应(response)两部分组成. 请求的内容为URL (指向文档的路径). 响应主要为正文(body ...

  6. NODE.JS开发指南学习笔记2

    1.核心模块 核心模块是Node.js的心脏,由一些精简高效的库组成,为其提供了基本的API.2.全局对象 global.所有的的全局变量都是其属性.其根本的作用是作为全局变量的宿主.3.全局变量 1 ...

  7. Django Web开发指南笔记

    Django Web开发指南笔记 语句VS表达式 python代码由表达式和语句组成,由解释器负责执行. 主要区别:表达式是一个值,它的结果一定是一个python对象:如:12,1+2,int('12 ...

  8. 值得 Web 开发人员学习的20个 jQuery 实例教程

    这篇文章挑选了20个优秀的 jQuery 实例教程,这些 jQuery 教程将帮助你把你的网站提升到一个更高的水平.其中,既有网站中常用功能的的解决方案,也有极具吸引力的亮点功能的实现方法,相信通过对 ...

  9. Django web 开发指南 no such table:

    在学习django web开发指南时,发布新博客点击save后会有error提示:no such table balabalabala... 百度了一下说重新运行manage.py syncdb 就可 ...

随机推荐

  1. NPM Scripts -- onchange parallelshell

    Watch for changes to the styles.scss file and automatically compile it to the css file. Run multiple ...

  2. 删除Rancher节点的正确姿势

    在Rancher上疏散该节点 删除节点 登录该节点宿主机,删除rancher相关容器 docker rm -f -v $(docker ps -aq) 删除该节点的所有volume docker vo ...

  3. webpack入门配置

    webpack入门配置 根据该篇文章进行配置: 入门 Webpack,看这篇就够了 其中由于版本更新的问题会出现几个问题: 1.Would you like to install webpack-cl ...

  4. scp 上传 下载 文件

    linux 中的ssh命令: scp 可以用来上传本地文件到远程服务器 或下载远程服务器中的文件到本地 1. 上传本地文件到远程服务器 scp readme.md user@www.*****.com ...

  5. 【Python】常用排序算法的python实现和性能分析

    作者:waterxi 原文链接 背景 一年一度的换工作高峰又到了,HR大概每天都塞几份简历过来,基本上一天安排两个面试的话,当天就只能加班干活了.趁着面试别人的机会,自己也把一些基础算法和一些面试题整 ...

  6. 【Python】模块学习之ConfigParser读写配置信息

    前言 使用配置文件可以在不修改程序的情况下,做到对程序功能的定制.Python 使用自带的configParser模块可以很方便的读写配置文件的信息. configParser 支持的方法 Confi ...

  7. Linux网络编程--进程间通信（一）

    进程间通信简介(摘自<Linux网络编程>p85) AT&T 在 UNIX System V 中引入了几种新的进程通讯方式,即消息队列( MessageQueues),信号量( s ...

  8. 搞懂分布式技术11：分布式session解决方案与一致性hash

    搞懂分布式技术11:分布式session解决方案与一致性hash session一致性架构设计实践 原创: 58沈剑 架构师之路 2017-05-18 一.缘起 什么是session? 服务器为每个用 ...

  9. UVALive-4287 Proving Equivalences （有向图的强连通分量）

    题目大意:有n个命题,已知其中的m个推导,要证明n个命题全部等价(等价具有传递性),最少还需要做出几次推导. 题目分析:由已知的推导可以建一张无向图,则问题变成了最少需要增加几条边能使图变成强连通图. ...

  10. 普通for循环遍历LinkedList弊端

    java开发过程中,用到的最多的List集合就属ArrayList与LinkedList.对于ArrayList的遍历,通常是下面的方法: public static void main(String ...