离线应用

HTML5新增了一个离线存储的API，用于实现本地数据的缓存，从而使得开发离线应用成为可能。
所谓“离线存储”，指的是建立一个URL列表，该列表可以包含HTML文件、CSS文件、JavaScript文件和图片等。当与服务器建立连接时，浏览器会在本地缓存URL列表中的文件；当与服务器断开连接时，浏览器将调用缓存的文件来支持页面展示。

想要实现离线存储，我们一般需要以下3步。

① 配置httpd.conf文件

AddType text/cache-manifest .manifest

② 页面头部加入manifest属性：manifest属性的取值是cache.manifest文件的路径。

③ 在www文件目录建立一个cache.manifest文件。

多线程处理

在HTML5中，我们可以使用Web Worker创建一个“后台线程”来执行某一段耗时较长的JavaScript程序，而不会影响页面响应。Web Worker其实就是HTML5提供的“JavaScript多线程”解决方案。

Web Worker技术基本原理就是：在当前JavaScript的主线程中，使用Worker()构造函数新建一个worker实例，然后加载某一个JavaScript文件，发送给一个后台线程来处理（注意，这里是后台线程）。

//新建worker实例
var worker = new Worker(url);
//向后台发送数据
worker.postMessage(yourdata);
//接收后台处理完成的数据
worker.onmessage = function(e){//e.data
};

Web Worker最重要的用途就是使用多线程的方式来处理耗时较长的JavaScript程序。
▶ Web Worker由于使用的是后台线程，发送给后台线程的那个JavaScript文件的使用有一定的限制，例如无法访问DOM、无法访问全局变量或全局函数等。
▶ Web Worker依然可以使用定时器的4个函数：setTimeout()、clearTimeout()、setInterval()、clearInterval()。
▶ Web Worker不支持跨域加载JavaScript。

地理位置

可以使用HTML5的geolocation对象来获取用户的地理位置信息。

window.navigator.geolocation

在geolocation对象中，我们可以使用getCurrentPosition()方法获取当前位置的坐标（经度和纬度）。
在geolocation对象中，我们可以使用watchPosition()方法来持续不断地获取当前位置的坐标，也就是追踪移动中的用户的位置。
getCurrentPosition()方法是一次性操作，而watchPosition会一直监视，每次位置发生改变，都会自动更新数据。
watchPosition()会一直监视位置，不过在geolocation对象中，我们可以使用clearWatch()方法来取消这个监视过程。

桌面通知

我们可以使用新增的Notification API来轻松实现桌面通知功能。Notification API通知属于桌面性质的通知，有点类似于显示器右下角弹出来的QQ弹框、360杀毒提示等，它跟浏览器是脱离的，消息是置顶的。

var notice = new Notification(title, options);

Canvas

HTML5新增了一个Canvas元素，我们常说的Canvas技术，指的就是使用Canvas元素结合JavaScript来绘制各种图形的技术。
游戏开发在HTML5领域具有举足轻重的地位，现在我们也可以使用Canvas来开发各种游戏。这几年非常火的游戏如《捕鱼达人》《围住神经猫》等，也可以使用HTML5 Canvas来开发。

HTML5有两个主要的2D图形技术：Canvas和SVG。

▶ Canvas是使用JavaScript动态生成的，SVG是使用XML静态描述的。
▶ Canvas是基于“位图”的，适用于像素处理和动态渲染，图形放大会影响质量；SVG是基于“矢量”的，图形放大不会影响质量。也就是说，使用Canvas绘制出来的是一个“位图”，而使用SVG绘制出来的是一个“矢量图”。
▶ 每次发生修改，Canvas需要重绘，而SVG不需要重绘。
▶ Canvas与SVG的关系，简单来说就像“美术与几何”的关系一样。

CSS3

我们常说的CSS指的是CSS2.1，而CSS3特指相对于CSS2.1新增加的内容。
由于CSS3新增的一些属性尚未成为W3C标准的一部分，因此对于这些属性来说，每种内核的浏览器都只能识别“带有自身私有前缀的属性”。也就是说，我们在书写CSS3属性的时候，可能需要在属性前面加上浏览器的私有前缀，然后该浏览器才能识别对应的CSS3属性。

border-shadow:5px 5px 10px red;
-webkit-border-shadow:5px 5px 10px red;
-moz-border-shadow:5px 5px 10px red;
-ms-border-shadow:5px 5px 10px red;
-o-border-shadow:5px 5px 10px red;

CSS3新增选择器

在CSS3中，新增加了以下三大类选择器。

属性选择器

属性选择器，指的是通过“元素的属性”来选择元素的一种方式。

结构伪类选择器

子元素伪类选择器，指的就是选择某一个元素下的子元素。

▶ :first-child、:last-child、:nth-child(n)、:only-child
▶ :first-of-type、:last-of-type、:nth-of-type(n)、:only-of-type

“：first-child”是选择父元素下的第1个子元素（不区分元素类型）;

“：first-of-type”是选择父元素下某个元素类型的第1个子元素（区分元素类型）。

（1）：first-child

h1:first-child：选择的是h1元素，因为h1元素是div的第1个子元素。

p:first-child：选择不到任何元素，因为p并不是div的第1个子元素，而是div的第2个子元素。

span:first-child:选择不到任何元素，因为span并不是div的第1个子元素，而是div的第3个子元素；

（2）：first-of-type

h1:first-of-type:选择的是h1元素，因为h1元素是div中所有h1元素中的第1个h1元素，事实上也只有一个为h1的子元素；

p:first-of-type:选择的是p元素，因为p元素是div中所有p元素中的第1个p元素，事实上也只有一个为p的子元素；

span:first-of-type:选择的是id="first"的span元素，因为在div元素中有2个span元素，我们选择的是两个之中的第1个。

伪类选择器，最典型的就是超链接的几个伪类：a:link、a:visited、a:hover、a:active。

UI伪类选择器

UI伪类选择器，指的是针对“元素的状态”来选择元素的一种伪类选择器。UI，全称“User Interface”，也就是用户界面。
元素的状态包括：可用、不可用、选中、未选中、获取焦点、失去焦点等。UI伪类选择器的共同特点是：对于指定的样式，在默认状态下不起作用，只有当元素处于某种状态时才起作用。此外，大多数UI伪类选择器都是针对表单元素的。
在CSS3中，UI伪类选择器主要包括以下5类。
▶ :focus
▶ ::selection
▶ :checked
▶ :enabled和:disabled
▶ :read-write和:read-only

其他几种伪类选择器。
▶ :root
▶ :empty
▶ :target
▶ :not()

我们可以使用:root选择器来选择HTML页面的根元素，也就是。

:root{font-size: 16px;
}

我们可以使用:empty选择器来选择一个“不包含任何子元素和内容”的元素，也就是选择一个空元素。

.box span:empty{
}
内容   

我们可以使用:target选择器来选取页面中的某一个target元素。所谓的target元素，指的是id被当成页面的锚点链接来使用的元素。

这是标题
跳转至内容 1
跳转至内容 2
请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。
内容 1...
内容 2...
注释： Internet Explorer 8 以及更早的版本不支持 :target 选择器。

我们可以使用:not()选择器来选取某一个元素之外的所有元素。

/* 为每个非元素设置css */
.box :not(span){font-size: 16px;
}
 文本
h2
段落

CSS3 文本样式

text-shadow 文本阴影

我们经常见到的坐标系是数学坐标系，不过CSS3使用的坐标系是W3C坐标系，这两种坐标系唯一的区别在于y轴正方向的不同，

▶ 数学坐标系：y轴正方向向上。
▶ W3C坐标系：y轴正方向向下。

text-shadow:x-offset y-offset blur color;

x-offset是“水平阴影”，表示阴影的水平偏移距离，单位可以是px、em和百分比等。因此如果值为正，则阴影向右偏移；如果值为负，则阴影向左偏移。
y-offset是“垂直阴影”，表示阴影的垂直偏移距离，单位可以是px、em和百分比等。由于CSS3采用的是W3C坐标系，因此如果值为正，则阴影向下偏移；如果值为负，则阴影向上偏移。
blur是“模糊距离”，表示阴影的模糊程度，单位可以是px、em和百分比等。blur值越大，阴影越模糊；blur值越小，阴影越清晰。此外，blur不能为负值。如果不需要阴影模糊效果，可以把blur值设置为0。

我们可以使用text-shadow属性为文本定义多个阴影，并且针对每个阴影使用不同的颜色。当定义多个阴影时，text-shadow属性是一个以英文逗号隔开的值列表。当text-shadow属性是一个值列表时，阴影效果会按从左到右的顺序应用到文本上，因此可能会出现相互覆盖的效果。

text-shadow:0 0 4px red, 0 -5px 4px green, 2px -10px 6px blue;

text-shadow:-1px 0 0 #333,　/*向左阴影*/0 -1px 0 #333,　/*向上阴影*/1px 0 0 #333,　 /*向右阴影*/0 1px 0 #333;　 /*向下阴影*/

如果将向左和向上的阴影颜色设置为白色，文本就会出现“凸起效果”，text-shadow属性修改如下：

text-shadow:-1px 0 0 white,　 /*向左阴影*/0 -1px 0 white,　/*向上阴影*/1px 0 0 #333,　　/*向右阴影*/0 1px 0 #333;　　/*向下阴影*/

如果将向右和向下的阴影颜色设置为白色，文本就会出现“凹陷效果”，text-shadow属性修改如下：

text-shadow:-1px 0 0 #333,　 /*向左阴影*/0 -1px 0 #333,　/*向上阴影*/1px 0 0 white,　/*向右阴影*/0 1px 0 white;　/*向下阴影*/

text-stroke 文本描边

在CSS3中，我们可以使用text-stroke属性为文本添加描边效果。所谓的“描边效果”，指的是给文字添加边框。
text-stroke是一个复合属性，它是由text-stroke-width和text-stroke-color两个子属性组成的。

▶ text-stroke-width：定义边框的宽度。
▶ text-stroke-color：定义边框的颜色。

使用text-stroke配合color:transparent;，我们还可以实现镂空文字。

{font-family:Verdana;font-size:50px;font-weight:bold;color:transparent;　　/*设置文字颜色为透明*/text-stroke:2px red;-webkit-text-stroke:2px red;
}

text-overflow 文本溢出

在CSS3中，我们可以使用text-overflow属性来定义文本的溢出样式。
单独使用text-overflow属性是无法得到省略号效果的。要想实现文本溢出时就显示省略号效果，我们还需要结合white-space和overflow这两个属性来实现，下面是完整的语法：

{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}

word-warp 文本换行

在CSS3中，我们可以使用word-wrap或word-break来定义长单词或URL地址是否换行到下一行。
一般情况下，我们只会用到word-wrap:break-word;或word-break:break-all；这两个来实现强制换行。

{word-wrap:break-word;word-break:break-all;
}

@font-face加载字体

在CSS3中，我们可以使用@font-face方法来加载服务器端的字体，从而使得所有用户的电脑都能正常显示该字体。

@font-face
{font-family: 字体名称;src:url(文件路径);
}