离线应用

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

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

① 配置httpd.conf文件

AddType text/cache-manifest .manifest

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

<!DOCTYPE html>
<html manifest="cache.manifest">
<head>

③ 在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个子元素（区分元素类型）。

<div><h1></h1><p></p><span></span><span></span>
</div>

（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页面的根元素，也就是<html></html>。

:root{font-size: 16px;
}

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


.box span:empty{
}
<div class="box"><span>内容</span><span></span>
</div>

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

<html>
<head>
<style>:target{border: 2px solid #D4D4D4;background-color: #e5eecc;}
</style>
</head><body>
<h1>这是标题</h1>
<p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p>
<p>请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。</p>
<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>
<p><b>注释：</b> Internet Explorer 8 以及更早的版本不支持 :target 选择器。</p>
</body>
</html>

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

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

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(文件路径);
}

HTML5学习笔记（三）相关推荐

html5 学习笔记三（web存储）
HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储之前,这些都是由 coo ...
html5学习笔记——三、图文展示网页设计
常用图像标签 < img>标签 < img>标签用于定义网页中的图像,语法格式如下: <img src="图片路径" alt="图片无法显示 ...
HTML5学习笔记三
convas 使用  <canvas id="test" width="5 ...
HTML5学习笔记之音视频标签
HTML5学习笔记之音视频标签其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习 ...
html5学习笔记--leon
html5学习笔记–leon ####什么是html5 1.H5并不是新的语言,而是html语言的第五次重大修改–版本 2.支持:所有的主流浏览器都支持h5.(chrome,firefox,safar ...
HTML5学习笔记 —— JavaScript基础知识
HTML5学习笔记 -- JavaScript基础知识标签: html5javascriptweb前端 2017-05-11 21:51 883人阅读评论(0) 收藏举报分类: JavaScr ...
J2EE学习笔记三：EJB基础概念和知识收藏
J2EE学习笔记三:EJB基础概念和知识收藏 EJB正是J2EE的旗舰技术,因此俺直接跳到这一章来了,前面的几章都是讲Servlet和JSP以及JDBC的,俺都懂一些.那么EJB和通常我们所说的Ja ...
tensorflow学习笔记(三十二):conv2d_transpose (解卷积)
tensorflow学习笔记(三十二):conv2d_transpose ("解卷积") deconv解卷积,实际是叫做conv_transpose, conv_transpose ...
Ethernet/IP 学习笔记三
Ethernet/IP 学习笔记三原文为硕士论文: 工业以太网Ethernet/IP扫描器的研发知网网址: http://kns.cnki.net/KCMS/detail/detail.aspx? ...
Html5学习笔记1 元素标签属性
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

HTML5学习笔记（三）