【篇一：html5桌面通知：notification api】
1. 为什么需要html5的桌面通知
传统的桌面通知可以写一个div放到页面右下角自动弹出来，并通过轮询等等其他方式去获取消息并推送给用户。这种方式有个弊端就是：当我在使用京东 进行购物的时候，我是不知道人人网有消息推送过来给我的，而必须要等我把当前页面切到人人网才知道有消息推送了。这种方式的消息推送它是基于页面存活的， 但是我们需要这么一种策略：无论你在看哪个页面，只要有消息都应该能推送给我看到，这就是webkitnotification要解决的问题。 notification生成的消息不依附于某个页面，仅仅依附于浏览器。
2. 一个桌面通知生成的正常流程
我们先来看看一个桌面通知是如何生成的：
1.
2.
3.
4.
5. 检查浏览器是否支持notification 检查浏览器的通知权限（是否允许通知） 若权限不够则获取浏览器的通知权限 创建消息通知 展示消息通知
note: 关于第一点的说明需要做一些说明，notification目前还没有标准化，所以目前只支持chrome19+和safari6+；网上有资料显示firefox26+也支持，但是我拿我的firefox27检测的结果是无法支持。
3. notification api基础说明及代码示例
目前notification的实现有两种：一种是之前草案中的形式：webkitnotifications对象, 另一种就是未来标准化的形式:notification对象。首先来说一下webkitnotifications所包含的内容：
3.1 webkitnotifications：
3.1.1. 静态方法
1 window.webkitnotifications.checkpermission()
2 //该方法返回0, 1, 2三个值，0代表permission_allowed,即’允许’；1代表
3 permission_not_allowed，即不允许；2代表permission_denied，即拒绝
4 questpermission()
该方法只5 //调用该方法将会在浏览器的信息栏弹出一个是否允许桌面通知的提醒，
6 能由用户主动事件触发，如click 或 mouse over，也就是说你不能在
ady里面直接调用该方法。
atenotification(icon-url,title,
body )
//调用该方法将返回一个实例化的webkitnotifications对象
1 notification(title,
2 options)
3 //@param {string} title
4 要显示的通知标题
5 //@param {object}
6 options 备选项参数，键值
7 对
8 //option 结构如下
9 dictionary
10 notificationoptions {
11notificationdirection
dir = auto;
domstring lang = ;
domstring body;
domstring tag;
domstring icon;//在实
例化的时候会异步的去获取
};
default 等同于拒绝 denied 意味着用户不想要通知 granted 意味着用户同意
启用通知
test:在chrome的地址栏里面输入, 打开console，并在里面输入notification.permission 默认返回的是default.
notes:该属性是只读的不能手动修改
实例属性：
以下属性都需要在notification实例上才能访问，为只读属性，并且就是通过option来赋值
questpermission() ``` //该方法将会询问用户是否允许显示通知 ``` 该方法不能由页面自主调用，必须由用户主动事件触发，还是以百度的页面为例，百度的搜索框的id为kw：
```javascript //通过用户主动事件触发来调用
lementbyid(kw).onclick=function(){ questpermission(); }; //页面信息栏会弹出询问用户是否允许显示桌面通知
```
notes:当用户同意之后，再次调用该方法则无效，即该方法仅对
notification.permission不为granted的时候起作用
notes: notification 没有实例方法show(),在notification实例化的时候，浏览
器就已经自动的去处理notification的显示过程了。 3.3 代码示例
以下代码将展示如何使用webkitnotification和notification来显示桌面通知
3.3.1 webkitnotification
lementbyid(notifybutton).onclick = function(){
2 //判断浏览器是否支持notification
3 if(window.webkitnotifications){
4//判断当前页面是否被允许发出通知
5if(webkitnotifications.checkpermission==0){
6 var icon_url = /retype/zoom/2a86935c08a1284ac85043e9?pn=5&x=0&y=0&raww=631&rawh=799&o=jpg_6_0_______&type=pic&aimh=607.797147385103&md5sum=c52649d676b2c495f5d708edcb960c1f&sign=f936ec274e&zoom=&png=14072-&jpg=99122- target=_blank>点此查看
links
? w3官方文档
? /en/tutorials/notifications/quick ? uk/html5-notifications
? 火狐开发者博客
【篇二：html 网页设计参考手册】
html网页设计参考手册 ? html入门 ? html基本标记 ? 文字与段落 ? 列表 ? 超链接 ? 使 用 图 像 ? 添加多媒体元素 ? 表格的应用 ? 添加表单 ? 框架结构
第 1 章 html 入门
?html 的基本概念
?html 的发展历史
?网页设计原则
?dreamweaver 简介
?在 dreamweaver 中直接编写 html
网页制作技术日新月异，但都是以html 为基础的。html 是浏览器识别网页的标记语言，可以说，没有它就没有丰富多彩的网页。本章首先让读者对html 有一个初步的认识，了解其概念、发展历史以及编写方法。
1.1 html 的基本概念
1.1.1 html 简介
html 的英文全称是hyper text markup language，直译为超文本标记语言。它是全
球广域网上描述网页内容和外观的标准。html 包含了一对打开和关闭的标记，在当中包含有属性和值。标记描述了每个在网页上的组件，例如文本段落、表格或图像等。
事实上，html 是一种因特网上较常见的网页制作标注性语言，而并不能算做一种程
序设计语言，因为它缺少程序设计语言所应有的特征。html 通过ie 等浏览器的翻译，将网页中所要呈现的内容、排版展现在用户眼前。
1.1.2 html 的结构概念
一个完整的 html 文件包括标题、段落、列表、表格以及各种嵌入对象，这些对象统称为html元素。在html 中使用标签来分割并描述这些元素。实际上可以说，html 文件就是由各种html元素和标签组成的。一个html 文件的基本结构如下：
html 文件开始标记
head 文件头开始的标记
? 文件头的内容
/head文件头结束的标记
body 文件主体开始的标记
? 文件主体的内容
/body文件主体结束的标记
/html文件结束标记
从上面的代码结构可以看出，在html 文件中，所有的标记都是相对应的，开头标记
为 ，结束标记为/ ，在这两个标记中间添加内容。
有了标记作为文件的主干后，html 文件中便可添加属性、数值、嵌套结构等各种类
型的内容了。
1.1.3 html 的标记
网页自动关闭 既然 html 是超文本标记语言，那么可以想象其构成主要是通过各种标记来标示和排列各对象，通常由尖括号“”、“”以及其中所包容的标记元素组成。例如，head与/head就是一对标记，
称为文件的头部标记，用来记录文档的相关信息。
在 html 中，所有的标记都是成对出现的，而结束标记总是在开始标记前增加一个
“/”。标记与标记之间还可以嵌套，也可以放置各种属性。此外在源文件中，标记是不区分大小写的，因此在html源程序中，head与head的写法都是正确的，而且其含义是相同的。
html 定义了3 种标记用于描述页面的整体结构。页面结构标记不影响页面的显示效
果，它们是帮助html 工具对html 文件进行解释和过滤的。
html标记：html文档的第 1 个标记，它通知客户端该文档是html文档，类似地，
结束标记/html出现在html文档的尾部。
head标记：出现在文档的起始部分，标明文档的头部信息，一般包括标题和主题信息，其结束标记/head指明文档标题部分的结束。
body标记：用来指明文档的主体区域，该部分通常包容其他字符串，例如标题、段落、列
表等。读者可以把html文档的主体区域简单地理解成标题以外的所有部分，其结束标记/body指明主体区域的结尾。
1.2 html 的发展历史
1990 年，tim berners-lee 将他设计的初级浏览和编辑系统在网上合二为一，创建
发布评论