《HTML5秘籍：the missing manual》读书笔记-CSDN博客

前言：HTML5不能简单的被理解为是HTML的第5个版本，而是指代HTML5及所有相关标准，甚至更宽泛的表示“下一代网页编写技术”。

初步的推测理解，HTML5技术=HTML+CSS+javascript。为保证学习HTML5必备的基础知识，书中附录包括CSS和javascript的简明教程。所以先看附录。

HTML5的核心概念即语义化、javascript和CSS3。

CSS简明教程

在网页中添加CSS样式有三种方式：直接在标签中嵌入样式信息style="..."；在<style></style>标签中嵌入样式信息；通过<link ref="stylesheet" href="">链接外部样式文件，第三种方式最常用效果最好。

CSS样式的设定通过选择器完成，如果有多个选择器选择了同一个元素，那么这些选择器的样式都会起作用，但首先会应用最通用的样式，例如对于title标签选择器和类名为title选择器都适用于同一个元素，那么title标签的元素会被先应用，也就是从最终效果上来说，会导致后者覆盖更为通用的前者。若针对性一样，则会应用后面的样式。

除了与js类似的类选择器.xxx和ID选择器#xxx之外，还包括伪类选择器，伪类选择器以冒号:开头，伪类考虑的不是元素显而易见的属性，而是指并不存在的标记，或者根据用户操作来确定的信息。例如:link为新的、未访问过的链接样式，:visited用于访问过的链接样式等等。

书中列出了常用的css属性。

javascript简明教程

在页面标签中嵌入<script>，是使用js的最简单方式，浏览器会在<script>标签所在的位置运行其中的js代码。也可以将js代码放在函数中或是js脚本文件中，在需要的时候进行调用。

注意：html不区分大小写，而javascript区分。

书中列出了js支持的HTML对象事件。

js创建自定义对象，采用定义函数的方式，如下

定义一个circle对象用var mycircle = new Circle(); mycircle.radius=10;

js中的null值可以表示对象不存在，也可能表示某个功能无效。

js可以更新页面，从服务器取得数据，向服务器发送数据，操作元素，给元素动态添加事件，但是需注意如下事项。

关于js的调试，见下图：

window. $(document).ready(function(){})的区别：1.执行时间不同，前者必须等到页面内包括图片的所有元素加载完毕后才能执行，后者是DOM结构绘制完毕后就执行，不必等到加载完毕；2.编写个数不同，前者不能同时编写多个，如果有多个window.onload方法，只会执行一个，后者可以同时编写多个并且都可以得到执行；3.简化写法，后者可以简写为$(function(){})

w3school HTML5初探

HTML5支持视频标签<video>、音频标签<audio>，无需采用控件方式进行音视频的播放，这两种标签有一些属性控制播放/暂停、大小等。

拖放（Drag 和 drop）是 HTML5 标准的组成部分。实现拖放有如下4个步骤：设置被拖放元素为可拖放draggable="true"，规定当元素被拖动时会发生什么ondragstart 和 setData()，元素被放到何处ondragover设置允许放置event.preventDefault()，进行放置ondrop取得被拖动元素并放置。

HTML 5 Canvas用于在网页上绘制图形，canvas标签元素表示一个矩形区域的画布，与javascript配合完成图像的绘制。

HTML5 支持内联 SVG (Scalable Vector Graphics)， SVG标签用于定义用于网络的基于矢量的图形，使用 XML 格式定义图形，SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失。使用 SVG 的优势在于： SVG 图像可通过文本编辑器来创建和修改，SVG 图像可被搜索、索引、脚本化或压缩，SVG 是可伸缩的，SVG 图像可在任何的分辨率下被高质量地打印，SVG 可在图像质量不下降的情况下被放大。

Canvas与SVG区别：SVG用XML描述图形，Canvas通过javascript绘制图形。http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp

HTML5 Geolocation（地理定位）用于定位用户的位置，主要用javascript实现。

HTML5 Web存储即HTML5提供两种在客户端存储数据的方法：localStorage - 没有时间限制的数据存储，sessionStorage - 针对一个 session 的数据存储。之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。 HTML5 使用 JavaScript 来存储和访问数据。

HTML 5 应用程序缓存：使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。

HTML 5 Web Workers是运行在后台的 JavaScript，不会影响页面的性能。

HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。script和后台合作完成。

HTML5为表单提供了新的输入类型，提供了更好的输入控制和验证。包括：email ，url ，number，range ，Date pickers (date, month, week, time, datetime, datetime-local) ，search ，color。

HTML5为表单提供了新的表单元素标签，包括datalist（类似select标签效果，与input标签的list属性结合使用），keygen（密钥对生成器），output（用于不同类型的输出，比如计算或脚本输出）。

HTML5 为form和input标签提供了新的表单属性。

其实在已有的项目中已经用到了一些HTML特性，特别是HTML5提供的表单功能。

不是所有的浏览器都支持HTML5特性。

认识新语言

HTML5简介

HTML5的文档类型声明非常简单，只需要简单声明<!DOCTYPE html>。

HTML5验证器http://validator.w3.org。

HTML5新增删除了一些元素，修改一些已有元素。

了解各个浏览器对HTML5各个功能的支持，参考caniuse.com网站。

在页面代码中检测HTML5可以用javascript代码，更为方便的方式是用Modernizr js包。

当检测发现浏览器支持的不足后，可以找一些腻子脚本换一种浏览器支持的方式实现，例如Google Chrome Frame改造IE。

2.构造网页的新方式

HTML5一个重要的改变就是为HTML添加更多的语义性。新增或修改了一些标签元素，赋予其语义性。例如<time><nav><footer>等标签。

<header>标识标题元素，<footer>标示页脚元素。<hgroup>标注副标题。

<figure>添加插图。<aside>添加附注，<nav>标注导航链接。

但是浏览器对这些新元素的支持并不是那么令人满意，特别是IE，只有IE9以上的版本可以支持HTML5。可以自己用js创建新元素，或者直接从google下载html5.js引进对html5的支持。

<section>区块元素应该是最后考虑的语义元素，它可能包含的内容有很多种。

HTML5定义了一组规则，用于说明如何为网页创建文档纲要。

纲要可以提供很多便利，比如浏览器可以让用户从纲要的一处跳到另一处。查看纲要可以用在线生成器，也可以通过安装chrome扩展。

要确定网页的纲要，可以用标签元素来确定，这些元素包括：<h1><h2><h3>等构成层级关系，分块元素<article><aside><nav>和<section>会产生新的嵌套纲要，区块根元素<body><blockquote><td><fieldset><figure><details>产生自己的纲要而非向下嵌套分支。

这种纲要机制使得组合文档更加容易。

纲要机制中存在一些比较让人困惑的地方，在遇到编号标题元素<h1>等，只要该元素不在某个区块顶部，就会为它自动创建一个新的区块<section>。纲要机制可以作为一种质量保障工具，如果对其中的概念还有点迷糊也没有关系。

3.有意义的标记

之前提到的标记都是与页面结构相关的语义元素，对于文本级语义，HTML5的策略是双管齐下，一方面定义了几个文本级语义元素，另一方面跟重要的是支持一个独立的微数据标准。

文本级语义元素：

<time>标注日期和时间；<output>标注javascript返回值，与form表单结合；<mark>标注突显文本。

其他语义标准：

ARIA(Accessible Rich Internet Application无障碍富因特网应用)，通过在HTML元素上使用属性，提供语义信息，例如role属性，<header role="banner">。ARIA与HTML5语义元素有一定重复。屏幕阅读器支持ARIA但不支持HTML5。

RDFa(Resource Description Framework资源描述框架)，也是一个通过属性向网页嵌入详细信息的标准，针对XHTML。

Microformats，是一种在网页中嵌入元数据的简单而又合理的方式。两个最常见的microformats就是hCard或hCalendar。hCard用来标注联系信息，应用hCard的方式是为hCard找个根元素，指定其class属性值为vcard，在根元素内部至少要包含一个格式化的名字，其class值为fn，其他联系信息如电话、生日、邮箱等，以任何顺序列在根元素内，通过class值进行指定。虽然浏览器不能识别microformats，但是可以安装插件，如oomph等，提取hCard（联系人），hCalendar（活动）和hMedia（媒体文件）。也可以用javascript调用oomph的js包。

Microdata是另一种解决语义标记问题的选择，它使用自己的属性，相较microformats牺牲了简洁性，更讲究逻辑性。使用microdata需要给相应元素添加itemscope和itemtype属性，itemscope表示开始一段新的语义内容，itemtype表示内容中包含的数据类型。属性信息用itemprop来标注。

microdata支持嵌套。

microdata与RDFa非常类似。

虽然没有插件或者js脚本从页面中提取microdata的数据，但是它对于增强网页搜索效果非常有用。

Google Rich Snippets工具能够将RDF,microformats,microdata结合，提取网页语义信息。其中给出了使用上述方式的例子。

只要页面中语义标记格式正确，google会利用这些语义信息增强搜索结果，将语义信息放在搜索引擎返回的结果中。以下几种情况，google会对语义数据视而不见：1.语义数据不是页面的主要内容；2.语义数据被css隐藏；3.网站中只包含很少的语义数据。

除了增强搜索结果以外，语义数据还可以被google用于更智能的搜索，例如简历搜索引擎。

制作新网页

web表单

form表单负责告诉浏览器把数据提交到哪儿，方法是在action中提供一个URL，如果用javascript操作表单，只要在action属性里写一个井号#即可，表示表单提交到本页。

HTML5提供新的标签属性form，可以支持将表单控件放在表单标签之外。

placeholder属性：用来在input标签中通过占位符文本添加提示。并不是每个文本框都需要placeholder，占位符用来消除歧义，避免用占位符完成以下两种情况的工作：1.不用它代替字段描述说明，字段描述说明考虑放在输入框下方，或者作为title属性值，当用户鼠标悬浮到该字段上时，弹出窗口告诉用户做什么；2.为了表示占位符只是一个例子而非真正的内容，就选择特殊字符作为占位符。

autofocus属性：自动取得焦点，只能给一个input或textarea标签添加这个属性。

HTML5表单验证：例如required属性，验证会在用户点击提交按钮时发挥作用，拦截提交并在旁边显示提示。如果有多个数据不符合要求，浏览器的处理方式是，从上而下检查，只要发现一个无效的值就停下，不再继续验证别的字段。

关闭验证，可以在form表单中添加novalidate属性，也可以增加一个提交按钮来绕过验证，该按钮添加formnovalidate属性。

验证与样式挂钩，用css伪类实现，例如input:required{} input:required:invalid{}。

HTML5支持正则表达式方法进行验证，只需要在input标签中添加属性pattern="[a-z]{3}"，pattern属性值为正则表达式。

也可以通过HTML5提供的js属性自定义验证，onInput=“validate(this)”，onInput属性值为javascript函数。

HTML5添加了新的表单输入控件类型，包括email、网址、搜索框、电话号码、数值、滑动条、日期和时间、颜色。

HTML5增加新的元素，<datalist>显示输入建议，进度条<progress>和计量条<meter>，<command>创建工具条和<menu>菜单。

网页中的HTML编辑器，由IE5率先引入，设置属性contentEditable使页面元素可编辑，设置属性designMode使页面可编辑。

2.音频与视频

之前向网页添加视频的方式有两种：一种是用<embed>元素把视频添加进页面中，浏览器可以使用windows media player、apple quicktime等视频播放器创建一个视频窗口，第二种方式是使用浏览器插件，比如silverlight或adobe flash。

HTML5使用<audio>和<video>添加音频和视频。

<audio src="a.mp3">支持属性controls进行播放控制，下载缓冲控制的属性preload，值可设为auto/metadata/none，自动播放属性autoplay，自动重新播放loop。

<video>拥有与<audio>共同的属性，另外还有三个属性height,width和poster，poster属性用于设置替换视频的图片，浏览器会在以下三种情况用到poster设置的图片：1）视频第一帧未加载完毕；2）把preload属性设置为none；3）没有找到指定的视频文件。

关于音视频格式问题，包括mp3，ogg，wav，mp4等，浏览器对各种格式的支持不尽相同。为了满足不同的浏览器需要，有两种方案：1.主选flash，HTML5作为后备；2.主选HTML5，flash作为后备。

下面主要说明方案2：

要想使HTML5支持多种格式，从<audio>和<video>标签中删除src属性，使用<source>元素，如下，type的值是MIME类型：

用flash作后备，甚至以指向视频文件的下载链接为后备。

浏览器会对不认识的标签视而不见。

<video>和<audio>标签也有一个扩展的javascript对象，可以利用该对象，通过js+<audio>添加音效，创建自定义视频播放器，添加播放控制按钮，添加播放进度条。

更为方便的是使用网上免费的基于js的媒体播放器，例如VideoJS，和JPlayer。

关于为视频添加字幕，现在还没有最佳的方案，只能先选择javascript来实现。

3.基本canvas绘图

HTML5的<canvas>元素与javascript结合在网页中画图。

<canvas>元素指定以下三个属性即可：id，width和height。width和height一定要通过属性指定，不要在样式表中设置。javascript通过id找到对应的canvas画布。

首先用document.getElementById取得canvas对象，然后取得二维绘图的上下文。

var canvas = document.getElementById('drawingCanvas');//取得canvas对象

var context = canvas.getContext('2d');//取得二维绘图上下文

context.moveTo(10,10);//找到起点

context.lineTo(400,40);//找到终点

context.stroke();//绘制直线

context.lineWidth=10;//设置线宽度

context.strokeStyle='rgb(205,40,40)/#cd2828/red';//设置线颜色样式

context.lineCrap='butt/round/square';//设置线端点（方头，圆头，长方头）

context.beginPath();//开始绘制新直线

context.closePath();//关闭路径

context.fillStyle="blue"；//设置填充色

context.fill();//填充

contex.fillRect();//填充矩形

context.strokeRect();//绘制矩形

绘制曲线：arc(),arcTo(),bezierCurveTo(),quadraticCurveTo()，利用这些函数都需要一些数学计算。

变换：通过变化canvas坐标系达到绘制目的，可用的方式有translate平移，scale缩放，旋转rotate和矩阵matrix

context.translate(50,50);//把坐标系向下向右各移动50像素

context.save();//保存坐标系当前的状态

context.restore();//返回保存过的前一个状态

透明度设置

1.用rgba()函数

context.fillStyle="rgba(100,150,185,0.5)";//设置透明填充，0.5为不透明比例。

2.设置globalAlpha属性，即rgba中的最后一个参数，然后再设置fillStyle。

context.globalCompositeOperation="xor";//设置合成操作，canvas两个图形重叠的部分不显示。

将canvas中的图像保存canvas提供了三种方式：

1.使用数据URL;

2.使用getImageData()方法；

3.保存绘图的一组步骤。

对于不支持canvas的浏览器，有两种处理方式：

1. 可以利用第三方工机具模仿HTML5的canvas，例如ExplorerCanvas库（采用的是javascript和VML矢量标记语言技术），引入该脚本即可使用canvas。

2.在canvas元素中添加后备内容，无视canvas则显示后备内容，如下图

高级canvas技术

1.绘制图像

context.drawImage(img, 10, 10);//在画布中绘制已有图片，参数img可以用createImageData()创建，也可以从img元素中取，也可以用javascript创建。后面的参数可以用来对图片进行裁剪。第一个参数不仅可以是一个p_w_picpath，还可以是整个canvas元素或video元素。

2.绘制文本，相对于绘制图像和线条，绘制文本的速度稍慢一些。优化速度的方式，可以先将文本存为图片在drawImage()进行绘制。

context.font="20px Arial";//设置字体

context.textBaseline="top";//文字位置，设为顶点处

context.fillStyle="black";//文字颜色

context.fillText("hello world",10,10);//坐标（10,10）位置作为顶点，绘制一行文本

context.strokeText()//绘制文本轮廓

3.添加阴影

context.shadowBlur=20;//设置阴影的模糊程度

context.shadowColor="blue";//设置阴影颜色

context.shadowOffsetX和context.shadowOffsetY设置阴影相对内容的位置

在fill……函数前设置上述参数即可达到添加阴影的效果，可以是阴影文字也可以是图片等。

4.填充图案

var pattern=context.createPattern(img,"repeat/repeat-x/repeat-y");//创建图案对象

context.fillStyle=pattern;//用图案对象填充

5.填充渐变

与填充图案不同的是首先创建渐变对象

var gradient = context.createLinearGradient(10,0,100,0);//创建线性渐变对象

gradient.addColorStop("0.25", "blue");//设置渐变颜色，第一个参数为0~1之间的数值，表示颜色在渐变中的偏移值位置。

var gradient = context.createRadialGradient(180,100,10,180,100,50);//创建放射渐变对象，渐变起点在心形内部，坐标为（180,100），内部颜色是一个半径为10px的圆表示，外部颜色一个半径为50px的圆表示。

6.记录图案

可以用自定义js对象，并用数组记录canvas中的图案。

7.canvas添加动画

设置定时器，反复调用绘图函数（一般30、40秒）

有两个函数可以设置定时器：setTimeout()，setInterval()。后者保证精确地按时重绘，但可能牺牲性能。所以一般都采用setTimeout()。

4.使用CSS3

CSS3包含大约50个模块，没有一款浏览器支持全部模块。

使用CSS3有三个选择：用能用的；将CSS功能作为增强；先列出兼容性好的属性，再列出好的属性以覆盖老属性，或者设置两套样式属性，使用Modernizr为不支持某个样式属性的浏览器设置替代的样式。

浏览器开发商提供“开发商前缀”，为还在开发中的CSS属性和功能加上特定浏览器实现的前缀。

web排版

原本web设计人员只能用少数几种安全字体，CSS3通过@font-face为浏览器增强了字体功能。

使用该功能的步骤如下：

1.把字体上传到网站：字体的格式可以是eot,ttf,otf,svg,woff，可以从网上下载现成的字体包http://www.fontsquirrel.com/fonts

2.使用@font-face命令注册每个想要在样式表中使用的字体：将字体文件复制到网页所在的文件夹中，就可以注册该字体。

3.在样式表中使用注册过的字体

4.浏览器在遇到使用web字体的样式表时，就会把字体下载到页面和图片的临时缓存中

除了下载字体包之外，还可以使用google的web字体http://www.google.com/webfonts，也可以将自己本地获得授权许可的字体上传转换并使用。

CSS3通过属性column-count和column-width支持多栏文本

适用不同的设备

CSS3提供媒体查询功能，可以取得设备的关键信息（大小、分辨率、色深等），web开发人员可以根据该信息应用不同的样式。

媒体查询的格式如下：@media后小括号中为要查询的属性及值，大括号中的内容为对应的新样式

高级媒体查询支持and和not关键字

除了采用样式块的方式之外，还可以通过样式表链接替换整个样式表，格式如下：

<link rel="stylesheet" media="max-width:480px" href="small_style.css">//当前窗口中页面的宽度等于或小于480px时用的样式

<link rel="stylesheet" media="max-device-width:480px" href="small_style.css">//最大屏幕宽度等于或小于480px时，用于创建移动版网页

<link rel="stylesheet" media="screen" href="small_style.css">//屏幕显示时用的样式

<link rel="stylesheet" media="print" href="small_style.css">//打印页面用的样式

媒体查询功能也可以进行移动设备的识别。HTML5为视频的source标签添加media属性可以满足移动网站的视频播放。

对于移动版除了样式的改变以外，还得考虑带宽和用户体验的因素，例如提供更小的图片，把内容重新组织成无需滚动页面的小块。

多变的盒子

透明盒子：有两种实现方式，可以用rgba(170,240,0,0.5)函数，最后一个参数为不透明度；也可以用opacity属性也表示不透明度+rgb()函数。

在下列情况下，建议使用opacity属性而非rgba()函数：实现多种颜色（元素）的半透明效果；不知道颜色的情况下，实现半透明效果；实现图片的半透明效果；实现渐变元素的半透明效果

圆角盒子：用border-radius属性可以画出圆角盒子，还可以用border-top-left-radius这样的属性把圆拉成椭圆，或者创建出形状各异的盒子。

背景盒子：CSS3支持多个背景图片，并且可以为背景图片设置不同的位置，如下：

阴影盒子：CSS定义了两种阴影分别是盒子阴影和文本阴影，生成这两种阴影的属性分别是box-shadow和text-shadow。

box-shadow：5px 5px 10px gray；//前两个值是水平和垂直方向的偏移量，第三个值是模糊距离也就是阴影的模糊程度，最后一个值是阴影颜色，可以用rgba()函数设置这个值。

box-shadow：5px 5px 10px 5px gray；//新增的第四个参数5px用于设置阴影伸展范围，即增大模糊边界之前的实心颜色面积。

box-shadow：5px 5px 10px gray inset；//inset在元素内部创建一个阴影

text-shadow：gray 10px 10px 7px；//参数顺序与box-shadow稍有不同

渐变盒子：渐变是多种颜色混合而成的效果，关于渐变类似canvas中的渐变，支持两种渐变：线性和放射性，

background：-moz-linear-gradient（top，white，blue），还可以用渐变点控制每个渐变色的起点-moz-linear-gradient（top，red 0%，orange 20%，yellow 80%，violet 100%），0%为渐变起点，100%为终点。渐变属性有四个函数支持：linear-gradient()，radial-gradient(), repeat-linear-gradient(), repeat-radial-gradient()。

渐变也可以通过background-p_w_picpath属性实现。

创建过渡效果

过渡效果是为了避免伪类创造的样式变换过于突然的问题，为了通过过渡使整个过程更加平衡，需要为正常状态下的样式设置transition属性，如下，表示background属性的变换效果会慢半拍出现。

除了颜色过渡之外，还可以考虑其他的过渡属性包括透明度、阴影、渐变、变形。

变形（变换）用transform属性，变换包括移动、缩放、斜切和旋转。加上transition属性可以使变换过程更自然。

构建桌面式web应用

数据存储

在HTML5之前，本地存储的唯一方案就是使用cookie。利用cookie保存少量数据固然方便，但是cookie也有不好的一面，就是必须处理过期数据，而且要跟着请求来回发送和接收这些没有用的数据。

HTML5新增了更好的本地功能，让我们在用户计算机上保存数据更加方便。这些数据可以无限时间地保存在用户机器上，不会发送到服务器，有充裕的空间存储它们，而且能够通过几个简单的javascript对象操作它们。这一功能叫做web存储。

web存储分两种，分别对应两个javascript对象：

本地存储，localStorage对象，用于长期保存整个网站的数据，除非用户手动的清除本地缓存数据。

会话存储，sessionStorage对象，用于临时保存一个窗口或标签页的数据。

这两种存储，都是与网站所在的域对应的。两种javascript对象存储的方式都是键值对，例如

localStorage[keyname]=data;

删除数据项：localStorage.removeItem();

清空网站在本地保存的所有数据：sessionStorage.clear();

查找所有数据项：var key=localStorage.key(i);//取得索引i对应数据项的键

var item=localStorage[key];//取得以该键保存的数据值

保存数值和日期：web存储保存数据时，数据会自动被转换为文本。

保存数值：

保存日期：

保存对象：用JSON编码保存。JSON是把结构化数据转换为文本的一种简便格式。

JSON.stringify()把对象连同其数据转换为文本形式；JSON.parse()把文本转换回对象。

响应存储变化：当web存储产生变化时，同一页面或同一站点中其他页面的窗口会出发window.onstorage事件。

存储变化包括添加新数据项、修改既有数据项、删除数据项或清除所有数据。

读取文件：HTML5的javascript提供File API进行文件的读取。大部分浏览器支持File API的部分功能，

取得文件：file类型的input元素，用javascript函数处理提交的文件

<input id="fileInput" type="file" οnchange="processFiles(this.files)" mutiple>，mutiple支持多个文件处理。

javascript中用FileReader对象读取文件内容，FileReader提供readAsText()//处理文本文件, readAsBinaryString()//处理二进制编码数据, readAsDataURL()//处理图片数据, readAsArrayBuffer()等方法。

除文本字符串web存储和简单文件FileAPI之外，浏览器也提供了对数据库的支持Indexed DB标准。

2.离线应用

并不是所有网站都需要做成离线的应用，但是对于某些应用离线功能是非常必要的。

通过描述文件缓存资源，即下载文件并在用户计算机上保存一份副本。

步骤如下：

1）创建描述文件：告诉浏览器保存什么文件，描述文件的扩展名推荐使用.manifest和.appcache

2）修改网页，引用描述文件：给离线应用包含的每个页面添加同样的属性<html lang="en" manifest="PersonalityTest.manifest">

3）配置web服务器：web服务器须添加值为text/cache-manifest的MIME类型，以便正确交付配置文件。

一旦浏览器缓存了应用，那么它就不会向web服务器请求新内容。但是这时服务器的更新会被浏览器忽略。

要触发浏览器更新缓存的应用，必须同时满足以下三个条件：浏览器没有缓存描述文件；描述文件的保存日期必须是最新的；描述文件中的内容要更新。

NETWORK区块：不缓存的文件在描述文件中注明在NETWORK:之后，告诉浏览器这些文件需要联网访问获取。

FALLBACK区块：不能上网时请求的后备文件。

javascript可以通过navigator.onLine属性来检测连接，查看是否在线。

也可以通过javascript指定更新。通过javascript的applicationCache对象的status属性和事件函数，可以与离线应用功能交互。

3.与web服务器通信

向web服务器发送消息：依靠javascript的XMLHttpRequest对象，AJAX.

服务器发送事件：上述通信方式是一对一的，当服务器返回响应之后，通信就结束了。为了保持与web服务器长期的联系，可以采用轮询技术，但是许多客户端的轮询会给服务器造成无谓的压力。

还有一种方案是服务器发送事件（server-sent event）：

1）消息格式：每条消息每一行必须以“data:”开头，然后是实际的消息内容；除了消息本身之外，web服务器还发送唯一的ID值和一个连接超时选项retry:，ID和retry值是浏览器要用的，一般网页不会关注。

2）通过服务器脚本发送消息：以php为例，首先要设置头部信息，header("Content-Type:text/event-stream");//设置MIME类型，另外，消息一定要按格式返回。

3）在网页中处理消息：javascript创建EventSource对象source，将处理函数指定给onmessage事件，该函数会在收到服务器消息时触发。

轮询服务器端事件，网页的轮询时间由服务器通过retry:xxxx告知。

Web Socket：

服务器发送事件非常适合从服务器连续不断的接受消息，但整个通信过程是完全单向的，无法知道浏览器是否响应，也不能进行更复杂的对话。

XMLHttpRequest对象支持浏览器与服务器的对话，但是它不适合来回发送多条消息，没办法将一次调用跟下一次调用联系起来，每一次网页发送请求，服务器都要确定请求来自何方。

Web Socket方案可以解决这一问题。Web Socket目前的支持还并不完善。

为了使用Web Socket，需要在web服务器上运行一个程序。这个程序负责协调各方通信，而且启动后就会不间断的运行下去。

Web Socket功能：

一般都是安装别人写好的web socket服务器，然后再设计网页与之通信。

web socket客户端：

1）创建WebSocket对象，传入一个以ws://开头的URL，web socket标准还支持以wss://开头，表示安全、加密的连接；

2）为WebSocket对象的事件添加响应函数，包括onOpen、onError、onClose和onMessage；

3）使用现成的web socket服务器

Web Socket非常适合做聊天程序和多人绘图板等应用。

4.更酷的javascript技术

Google Gears

1）地理定位

地理定位的原理，包括根据IP地址定位，无线网络、信号塔位置、GPS、RFID芯片、蓝牙设备、GoogleMaps设置的cookie等等。

查找访客的坐标，用javascript中navigator.geolocation对象的方法getCurrentPosition()//异步取得访客位置、watchPosition()//跟踪访客位置，在访客位置改变时触发成功函数和clearWatch()//与watchPosition()搭配使用，将watchPosition()的返回值传给clearWatch()取消关注位置变化。

getCurrentPosition()有三个参数：成功函数、失败函数和地理定位选项。

Google Maps API提供的接口可以方便的使用

2）Web Workers：后台执行javascript代码。

将比较费时的工作放在后台完成，创建一个新的web worker对象，把要运行的代码交给这个对象。

网页和web worker之间不允许共享数据。

创建worker对象，让worker运行的代码都要放在一个单独文件中，避免worker引用全局变量或直接访问页面中的元素。

网页与worker对象通信通过消息来进行，worker.postMessage(myData);//给worker发送消息

worker通过onMessage事件接收上述数据的一个副本。

worker.οnerrοr=workerError;//onerror事件告诉网页有错误发生

取消后台任务的方式有两种：1.worker对象调用自己的close()方法；2.创建worker对象的页面调用该页面的terminate()方法。

取消之后要执行新的任务，必须创建一个新的worker对象。

web worker还可以把进度百分比信息发送给页面，通过给postMessage()的消息对象参数中定义新的属性，使onMessage()能够区分进度信息和消息数据并分别处理即可。