一,浏览器引擎
   浏览器的内核引擎，基本上是四分天下：
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. kuangbin大佬模板（侵删）- hdu 2222

    2017-08-13 19:54:08 kuangbin的AC自动机模板 可以直接过 入门题目 hdu2222 #include<cstdio> #include<cstring&g ...

  2. gTest&gMock learning

    在C++中,编写服务后的一种测试方式是使用google的gTest和gMock结合 之前写py,测试方式是将服务挂起,使用工具模拟请求发包,check resp,这样的缺点在于不方便,即使存下了所有的 ...

  3. Memcache课程

    这套Memcache课程今天正式上线,http://www.yzmedu.com/course/53,总计6集,包括Memcache缓存技术和Memcache用户跨域技术,后面即将发布网上最全的微信小 ...

  4. mysql字符编码的设置以及mysql中文乱码的解决方法

    查看字符编码 首先,将中文插入到数据库乱码是因为没有将数据库编码设置为支持中文的编码,mysql的默认编码是Latin1,不支持中文,应该设置为utf8查看自己的数据库编码是否已设置好,进入数据库,输 ...

  5. linux 用 grep 查找单个或多个字符串（关键字）

    1.单个 cat /tmp/php.log | grep "成功" 所有的成功都会被查询出来. 2.多个,并列查询 cat /tmp/php.log | grep "推荐 ...

  6. 【三小时学会Kubernetes！（一） 】容器简介及为每个服务创建镜像

    容器是什么 Kubernetes 是容器管理平台.可想而知我们需要容器去管理它们.但是容器是什么?Docker 官方文档的最佳答案如下: 容器映像是轻量级的.独立的.可执行软件包,包含所有可运行的东西 ...

  7. cassandra 之 在spark-shell 中使用 spark cassandra connector 完整案例

    1.cassandra 准备 启动cqlsh, CQLSH_HOST=172.16.163.131 bin/cqlsh cqlsh>CREATE KEYSPACE productlogs WIT ...

  8. Docker 学习记录笔记（一）

    Docker 一些简单的命令列表docker build -t friendlyhello . # Create image using this directory's Dockerfiledock ...

  9. word2016_统计字数

    统计字数 审阅->字数统计

  10. 解决在for循环内判断条件多次执行

    最近遇到的这个问题,就是在for循环内if判断的条件会多次执行. 例如,在返回的30数据中,a条目是第7条则会进行30次判断,弹出29次查无数据,也就是要点击29次关闭alert,很是让人不爽. 有了 ...