HTML5基础上-陈楚吟

一 .HTML优点

1 . html5的建立的规则

• 新特性应该基于html，css，dom，js
• 应该减少对外部插件的使用（就因乔布斯炮轰flash插件推动了html5的发展）
• 更优秀的错误处理
• 更多取代脚本的标记
• html5应该独立于设备
• 开发进程应向公众透明

2.新特性

• 用于绘画的canvas元素和SVG元素（这个属性超级棒，你可以画一些很好玩的图形）
• 用于媒介回放的video和audio元素（摆脱了flash等插件，网页加载速度极大提升了）
• 对于对本地离线的存储的更好支持（这是html5最强大之处）
• 新的表单控件产生，特别是有关时间日期的，email，calendar，date，time，url，search
• 新的语义化的内容标签出现，article，footer，header，nav，section（减少div的使用，同时提高了代码的复用性）

3.浏览器

现在的浏览器几乎都支持html5

主流浏览器是指拥有自己内核且实用度极高的浏览器。

• Firefox：Gecko内核
• 谷歌 ： 之前是Webkit内核，现在是Blink内核
• IE : Trident内核
• Opera ： Presto内核——Webkit——Blink
• Safari ：Webkit内核

二 . 主要的新增元素

1 . 画布Canvas(基于脚本）

• 默认没有边框和内容，通常需要指定id属性以供脚本使用，所有绘制工作由脚本完成，因其是逐像素进行渲染的，故最适合图像密集型的游戏，其中的许多对象会被频繁重绘。
• 绘制步骤（前两部是固定的）
  • 通过id属性找到canvas元素：var c=document.getElementById(“id值”)；
  • 创建context对象（就是做绘图前的准备）：var cxt=c.getContext(“2d”);
  • 利用context对象绘制路径

2. 可伸缩矢量图形SVG（基于XML)

• 定义：用于定义用于网格的基于矢量的，用XML格式定义的图形，SVG图像在放大或改变尺寸时其图形质量不变

• 优势（与其他图像格式相比，如jpg，gif）

  • 可通过文本编辑器来创建和修改
  • 可被搜索，压缩，索引，脚本化，且在任何分辨率下高质量的打印，即使放大缩小，其质量也不会下降。适合大型渲染区域的应用程序（如google地图）

  类型	canvas	SVG
  支持分辨率	支持	不支持

  支持事件处理器 不支持 支持

  文本渲染能力 弱 强

3. 表单元素属性

• datalist元素规定表单域中自动完成功能，配合option使用
• keygen元素的作用是提供一种验证用户的可靠方法，其规定了用于表单的密钥生成器字段。当提交时会生成密钥和私钥两个键（防止中间人通过截取密钥解密数据），私钥存储于客户端，公钥被发送到服务器。公钥可用于之后验证用户的客户端证书
• output 元素定义不同类型的输出，比如脚本的输出

4. HTML5 Shiv

• IE8及更早版本无法在语义化元素中渲染css效果，可使用HTML Shiv脚本解决兼容问题
• 解决方法：1. 下载shiv然后将以下代码放在网页中

三 . html Web存储

• 定义及优点：使用html5可以在本地存储用户的浏览数据，web存储更安全与快速。这些数据不会保存在服务器端，只用于用户请求网站数据上。可存储大量的数据而不影响网站的性能（这也是为什么你输入网址会先在本地检索的原因），解决了之前cookie存储时需要在请求头上带着数据，且存储大小不超过4k的缺点,数据以键值对存在，且只允许该网页访问web网页上的数据
• 客户端存储数据的两个对象（进行web存储时先检查是否支持（typeof(Storage)!==”undefined”))
  • localStorage：没有时间限制的本地数据存储，关闭浏览器后，数据仍保存在浏览器上
  • sessionStorage：针对一个session的数据存储，关闭浏览器后，数据都将被删除
• 常用方法：
  • 保存数据：localStorage.setItem(key,value);
  • 读取数据：localStorage.getItem(key);
  • 删除单个数据：localStorage.removeItem(key);
  • 删除所有数据：localStorage.clear();
  • 得到某个索引的key：localStorage.key(index);

四 . HTML5 Web SQL数据库

1.基本概念

• Web SQL 是在浏览器上模拟数据库，可使用js对操作SQL完成对数据的读写，但是Web SQL数据库不是HTML5规范的一部分，它是一个独立的规范引入一组使用SQL操作客户端数据库的APIs。（仅在Safari,Chrome,Opera浏览器工作）

2. 三大核心方法

• openDatabase：这个方法使用现有的数据库或新建的数据库创建一个数据库对象

  • openDatabase（’数据库名称‘，’版本号‘，’描述文本‘，’数据库大小‘）；创建完后会回调并调用；

• transaction:这份方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚

• executeSql:用于执行实际的SQL查询

  for example

  var db = openDatabase(‘mydb’, ‘1.0’, ‘Test DB’, 2 * 1024 * 1024);
  db.transaction(function (tx) {
  tx.executeSql(‘CREATE TABLE IF NOT EXISTS LOGS (id unique, log)’);
  tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (1, “W3Cschool教程”)’);
  tx.executeSql(‘INSERT INTO LOGS (id, log) VALUES (2, “www.w3cschool.cn")');
  });

五 . html5 应用程序缓存

1.三大优势：

• 离线浏览-用户可在应用离线下使用它们
• 已缓存资源加载更快
• 减少服务器负载——浏览器将只从服务器下载更新过或更改的资源

2.应用：

每个指定了manifest的页面在用户对其访问时都会被缓存，未指定则不会缓存

3.Manifest文件

• manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
• manifest 文件可分为三个部分：
  • CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
  • NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
  • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
• 更新缓存，一旦应用被缓存，他就会保持缓存直到发生以下情况
  • 用户清空浏览器
  • manifest文件被修改
  • 由程序来更新应用缓存

六 . Web Workers

1. 定义

是运行在后台的javascript，属于后端的线程，不影响页面的性能。当html页面执行脚本时，页面的状态是不可响应的，直到脚本已完成，因其是前端的单线程

2.前轴

在创建 web worker 之前，请检测用户的浏览器是否支持它：typeof(Worker)!==”undefined” 这步的检测非常重要！你必须先检测才能保证接下来可以顺利操作 web worker！ web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。

3. Web Workers 和 DOM

由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：

• window 对象
• document
• parent 对象

七 . HTML5 SSE

1.定义

HTML5 服务器发送事件(Server-Sent Events)是基于WebSocket协议的一种服务器向客户端发送事件和数据的单向通讯,允许网页来自服务器的更新，除了·IE，其他主流浏览器都支持

2 . 实例讲解

var source=new EventSource(“demo_sse.php”);
source.onmessage=function(event)
{
document.getElementById(“result”).innerHTML+=event.data + “
“;
};

• 创建一个新的 EventSource 对象（用于接收发送事件通知），然后规定发送更新的页面的 URL（本例中是 “demo_sse.php”）
• 每接收到一次更新，就会发生 onmessage 事件
• 当 onmessage 事件发生时，把已接收的数据推入 id 为 “result” 的元素中

八 . WebSocket事件

1.定义及优势

• WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯协议（没有request和response的概念，两者地位完全相同，连接一旦建立就建立了持久性连接，双方可随时向对方发送数据）
• 在WebSocket API中，浏览器和服务器只需做一个握手的动作，两者间就会形成一条快速通道，故可直接进行数据传送。之前一直处于最开始的短轮询Polling阶段，即建立连接必须经过三次握手，连接才能算成功
• WebSockcet协议本质上是一个基于tcp的协议。为建立一个WebSoccket连接，客户端首先要向服务器端发起一个HTTP请求，这个请求和通常的HTTP请求不同，包含了一些附加头信息，其中附加头信息“Upgrade：WebSocket”表明这是一个申请协议升级的HTTP请求，服务端解析这些附加头信息并产生应答信息返回给客户端，客户端和服务器端就建立起来，双方可通过这个自由通道的传递信息，且这个连接会一直存在直到两方中有一方断开连接

2.用法

• 通过send（）方法向服务器发送数据，并通过onmessage时间接收服务器返回的数据

• 创建WebSocket对象，var Socket=new WebSocket(url,[protocal]);

  url:指定连接的URL

  protocol:指定可接受的子协议

• 只读属性Socket.readyState表示连接状态

  • 0-连接尚未建立
  • 1—连接已建立，可进行通信
  • 2—连接正在关闭
  • 3—连接已经关闭或者连接不能打开

• Socket.bufferedAmount:只读属性bufferedAmount已被send（)放入队列中等待传输，但还没有发出UTF-8文本字节数

• 示例代码：

  运行 WebSocket

九 . 代码规范

1.使用正确的生命文档类型

文档类型生命位于html文档的第一行

2.使用小写元素名

3.关闭所有元素

4.关闭空的 HTML 元素

5.属性值我们推荐使用引号:

• 如果属性值含有空格需要使用引号。

• 混合风格不推荐的，建议统一风格。

• 属性值使用引号易于阅读。

  6.图片属性

  图片通常使用alt 属性。 在图片不能显示时，它能替代图片显示。

  7.空行和缩进

  不要无缘无故添加空行。

  为每个逻辑功能块添加空行，这样更易于阅读。

  缩进使用两个空格，不建议使用 TAB。

  比较短的代码间不要使用不必要的空行和缩进。

  8.样式表

• 将左花括号与选择器放在同一行。

• 左花括号与选择器间添加以空格。

• 使用两个空格来缩进。

• 冒号与属性值之间添加已空格。

• 逗号和符号之后使用一个空格。

• 每个属性与值结尾都要使用符号。

• 只有属性值包含空格时才使用引号。

• 右花括号放在新的一行。

• 每行最多 80 个字符。