HTML5学习碎片

春节在家读了两本介绍HTML5的书：《HTML5 Up and Running》和《Pro HTML5 Programming》，得益于Kindle的便捷，一边读一边标注了一些内容，随感觉而标记，不成体系，所以称之为“碎片”，记录于此作为存档。

浏览器支持情况检测
- Modernizr是一个开源的JavaScript脚本库，可以用它来检查浏览器对HTML5和CSS3的支持情况。
- IE是个很有意思的浏览器，它只识别它的DOM字典里存在的标签。如果你的HTML中包含它不认识的标签，只需要用JavaScript创建一下，IE就会把该标签加到它的DOM字典中，那么也就可以识别该标签并为它应用样式了。例如，让IE支持article标签的方法是：
```
document.createElement(“article”)
```
  根据这个原理，有人写了一段脚本来让老版本的IE支持HTML5标签：
```

```
ORIGIN（源）
- HTML5通过引入origin这个概念来明确和细化了域安全性，origin是由scheme（协议）、host（域名）和port（端口）组成的。譬如http://windstyle.cn和https://windstyle.cn是不同的origin，但http://windstyle.cn和http://windstyle.cn/example.html是同一origin。
DOCTYPE
- Web页面有几种不同的渲染模式：
  - Standards mode
  - Almost Standards mode
  - Quirk mode
- DOCTYPE就是用来告诉浏览器应该用哪种模式来渲染页面，符合HTML5标准（Standards mode）的DOCTYPE很简单：
```
<!DOCTYPE HTML>
```
- 没有DOCTYPE或者声明了不同的DOCTYPE会导致浏览器以Almost Standards mode或Quirks mode来渲染页面。《HTML5 Up and Running》的作者说，目前至少有5种DOCTYPE ，它们会触发浏览器的almost standards mode和至少73种quirks mode，光IE8就支持4种呈现模式（见下图），于是作者在书中要大喊：“Kill it. Kill it with fire!”。
文档大纲
- 在HTML4中，创建文档大纲的唯一方法是使用<h1>到<h6>这几个标签，为了确保大纲只有一个根节点，页面中就不能多次使用<h1>。而在HTML5中，每个section都可以包含自己的<h1>，这并不会影响大纲结构。
<time>标签
- 用法示例：
```
<time datetime="2009-10-22T13:59:47-04:00" pubdate> October 22, 2009 1:59pm EDT </time>
```
- pubdate特性有两个含义，如果<time>标签位于<article>标签中，pubdate表示该article的发布日期，否则，pubdate表示整个文档的发布日期。
<canvas>标签
- 设置<canvas>标签的宽度或高度会清除它的内容，并且还会将绘图上下文中的所有属性重设为默认值。IE目前上不支持<canvas>，可以使用ExplorerCanvas这个开源的JavaScript脚本库来间接实现画布API。
- 向context.drawImage方法传递img对象可以将img表示的图片绘制在画布上，但img所引用的图片必须完全加载完毕，否则会抛出异常。
- 如果向context.drawImage方法传递video对象，那么将会在画布上绘制视频的当前帧画面。
- context.getImageData方法可以获取画布的像素数据，但如果画布上绘制了来自不同origin的图片时，调用此方法会抛出异常。
Web Storage
- Cookie的缺点：
  - 每次HTTP请求都会包含Cookie，会降低请求速度；
  - Cookie数据未加密，在不使用SSL的情况下不安全；
  - Cookie的尺寸限制为4KB
- LocalStorage和sessionStorage的数据以字符串键值对的形式储存，他们的区别如下：
  - 生存周期不同：当包含页面的选项卡或者窗口关闭后，sessionStorage中存储的数据就清空了，而LocalStorage中存储的数据依然存在；
  - 数据可见度不同：sessionStorage中存储的数据只有当前页面可以访问，而LocalStorage存储的数据对相同origin的所有页面都可见。
- Web Storage事件会在相同origin的所有页面上触发，无论该页面是否对Web Storage进行过操作，所以可以利用这些事件来进行页面之间的通信。
Offline Web Application
- Offline Web Application需要一个离线清单文件（*.manifest），该文件可以位于服务器上的任何位置，但必须以text/cache-manifest为内容类型提供。
- Offline Web Application中所有页面的<html>标签中都要添加指向该清单文件的manifest特性。
- 清单文件示例：
  CACHE MANIFEST
  FALLBACK: / /offline.html
  NETWORK: *
- 无论当前是否在线，CACHE MANIFEST中的所有资源都会被缓存起来；NETWORK节表示“白名单”，该节中的所有资源都不会被缓存下来，只能在线获取；FALLBACK则为那些无法获取的资源提供一个备用路径。
- window.applicationCache对象包含许多事件
  1. 当浏览器发现<html>标签中的manifest特性时，就会触发checking事件；
  2. 如果浏览器之前从未见过此清单文件：
    1. 触发downloading事件，然后开始下载清单中的资源。
    2. 下载过程中会触发progress事件，该事件包含了已下载文件的数量和待下载文件的数量等信息。
    3. 清单中的资源都下载完毕后，会触发cached事件，这表明该Offline Web Application已经可以在离线使用了。
  3. 如果浏览器之前访问过包含同一清单文件的页面，就会去检查该清单是否发生了变化：
    1. 如果没有变化：触发noupdate事件；
    2. 如果发生了变化：会触发downloading事件，当清单中的资源都下载完毕后，会触发updateready事件，这表明该Offline Web Application已经更新成功。但浏览器仍然在使用旧版本，想要切换到新版本，需要手工调用window.applicationCache.swapCache()方法。
  4. 期间如果发生了错误，哪怕只有一个文件下载失败这样的错误，都会导致整个缓存过程失败，并会触发error事件，最要命的是这个事件并不会告诉你具体错在哪里。
- window.applicationCache.status指示了缓存的状态：
  - 0：UNCACHED
  - 1：IDLE
  - 2：CHECKING
  - 3：DOWNLOADING
  - 4：UPDATEREADY
  - 5：OBSOLETE
- 可以调用window.applicationCache.update()方法来向浏览器请求更新缓存。
- Web Server应当通过一些HTTP headers（譬如Expires和Cache-Control）来将文件的一些信息告诉浏览器。如果浏览器通过HTTP headers发现清单文件过期，就会向服务器请求新版本并下载它。此时浏览器会将服务器上一次通过HTTP headers发送给它的last-modified时间发回给服务器，如果服务器发现发现清单文件在该日期之后并没有更改过，就会返回304状态码，表示“Note Modified”。如果发生了变化，就会返回200状态码以及新文件的内容（当然也会包含Cache-Control和新的last-modified headers）；
- 所以每次修改了需要缓存的文件之后，记着也要修改清单文件，这样服务器才会认为它更新了版本。简单的方法是在清单文件中加一行版本注释，每次修改注释中的版本号即可。
- 当浏览器以联机方式工作时，navigator.onLine的值为true。
Microdata
- Microdata用一些具有范围概念的名值对来诠释DOM。
- 在HTML5中，<meta>标签可以在任何地方使用，不局限于<head>中。
- Google Rich Snippets tool可以提取页面中的Microdata，并以“Google See”的形式展现出来。

Selector API

新增加的和CSS Selector一样的Selector API，检索更加简单：

querySelector("input.error");//返回第一个class为error的input标签

querySelectorAll("#results td");//检索id为results的标签中的所有td标签

定位
- 新增加的定位服务会返回以下几种错误：
  - PERMISSION_DENIED，错误代码为1，用户不允许浏览器访问位置信息；
  - POSITION_UNAVAILABLE，错误代码为2，获取位置失败；
  - TIMEOUT，错误代码为3，超时；
  - UNKNOWN_ERROR，错误代码为0，发生了其他错误，可以检查message特性来获取具体信息
跨源
- XMLHttpRequest Level 2允许使用Cross Origin Resource Sharing（CORS）来进行跨源的HTTP请求。请求需要包含一个Origin header，用于告诉服务器请求从何而来，此header被浏览器保护，应用的代码无法更改它的值。Origin header和以前的sic header不同之处在于后者是完整的URL。
- 除了浏览器要自动发送Origin header信息之外，服务器端也需要支持CORS。检查浏览器是否支持XMLHttpRequest Level 2的方法是检查XMLHttpRequest 是否包含withCredentials属性。
- XMLHttpRequest Level 2的progress事件包括：
  - loadstart
  - progress
  - abort
  - error
  - load
  - loadend
WebSocket
- 新增加的WebSocket API用于连接远程主机，它大幅度减少了不必要的HTTP header，从而提高连接了速度。
- ws://和wss://协议分别表示WebSocket连接和安全WebSocket连接。
- WebSocket API也需要服务器专门支持。
- 当浏览器请求WebSocket URL时，服务器会回发headers来完成WebSocket握手，WebSocket握手响应的第一行内容必须是下面的格式：
  HTTP/1.1 101 WebSocket Protocol Handshake
  完成握手后，客户端和服务器端之间就可以随时发送消息了。
- WebSocket对象包含以下事件：
  - open：当连接建立时触发
  - close：当连接关闭时触发
  - message：当收到消息时触发
FORM API
- HTML5的input标签增加了一个placeholder特性，placeholder的值只能包含文本，不可以包含HTML标签。
- input标签的list特性和datalist标签结合起来可以为input标签提供一个备选列表。
- 新增加的valueAsNumber函数可以将控件的值从文本转换为数字，而且还可以将控件的值设置为数据。
- 如果input控件设置了required特性，那么该控件必须包含值，否则包含它的Form就无法被提交。
- 所有Form控件都包含validity属性（ValidityState对象），该属性包括8种可能的验证错误：
  - valueMissing：缺少必需值（包含required特性的input标签缺少值）
  - typeMismatch：值的类型不匹配（email、url等类型校验失败）
  - patternMismatch：值的格式不匹配（input标签设置了pattern特性，但值没有匹配该pattern。开发人员可以使用pattern来更加灵活地验证Form控件的值）
  - tooLong：值超出了控件允许的长度（超出了maxLength特性的值）
  - rangeUnderflow：值小于设定的最小值（值小于min特性的值）
  - rangeOverflow：值大于设定的最大值（值大于max特性的值）
  - stepMismatch：值不符合控件的min、max和step特性综合计算的结果（比如min="0" max="100" step="5"，那么值为6时就会导致stepMismatch）
  - customError：表示又代码产生的自定义错误，调用控件的setCustomValidity(message)方法可以设置customError，向该方法传递空字符串会清空customError。
- 如果Form控件有可能进行上述任何一项验证，那么它的willValidate属性会返回true。
- 调用控件的checkValidity方法也可以进行对控件的值进行验证。无论是提交Form还是调用checkValidity方法，如果Form验证失败，都会触发invalid事件。
- 可以通过控件的validationMessage属性来访问控件的验证失败消息。想要阻止浏览器显示错误消息，可以在invalid事件中调用参数evt的preventDefault方法。
- 设置Form的noValidate特性可以使其不去验证输入的有效性，关闭验证的更简单的方法是设置提交按钮formNoValidate特性。
Web Workers
- HTML5 Web Workers为Web应用提供了后台工作的能力，使得JavaScript可以享受到多核CPU的好处。
- Web Workers不能直接访问网页和DOMAPI，这一点和Windows Forms的机制很像。
- 初始化Web Workders时需要传递JavaScript文件的URL，该文件包含了Worker要执行的代码：
```
worker = new Worker("echoWorker.js");
```
- 如果想要在JavaScript文件中引用其他JavaScript文件，可以调用importScripts方法，传递一个或多个JavaScript文件的路径。
- 实例化Web Worker之后，就可以调用postMessage API来在网页和Web Worker之间发送数据了。

总的来说，这两本书还算不错，《HTML5 Up and Running》言语风趣，捎带着谈了许多HTML的发展历程，《Pro HTML5 Programming》则侧重于JavaScript API。这两本书都有中文版，分别是《HTML5揭秘》和《HTML5高级程序设计》。

原文发布于coding.windstyle.cn，欢迎访问、订阅并和我交流。

posted on 2011-02-14 09:14 Windie Chai 阅读(2881) 评论(12) 编辑收藏

#1楼  2011-02-14 09:39 无邪兮

好文必须顶　回复　引用　查看　

#2楼  2011-02-14 10:56 骆驼1

顶，不错　回复　引用　查看　

#3楼  2011-02-14 11:13 dudu

谢谢分享！　回复　引用　查看　

#4楼  2011-02-14 12:04 三桂

谢谢分享,前几天下了<Pro HTML5 Programming>还没看...
kindle原生系统功能还是太简陋了
Nook color貌似还不错,基本满足我的需求,过段时间打算入手:D 　回复　引用　查看　

#5楼 [楼主] 2011-02-14 13:20 Windie Chai

@三桂
我是直接给原文划线highlight的，挺方便啊。　回复　引用　查看　

#6楼  2011-02-14 13:23 三桂

引用Windie Chai：
@三桂
我是直接给原文划线highlight的，挺方便啊。

标注,书签是挺方便的,主要还是觉得collection是个问题得借助第三方工具辅助,呵呵... 　回复　引用　查看　

#7楼  2011-02-14 15:36 Wells

春节看这html5揭秘　回复　引用　查看　

#8楼  2011-02-14 16:35 司徒正美

这么快就出HTML5的书，还不是简单的API介绍，看这还不如到w3c那里看　回复　引用　查看　

#9楼  2011-02-18 01:08 daifei4321

querySelectorAll("#results td");//检索td中所有id为results的标签
这个不应该是id为result的DOM下的所有子孙级的td么？　回复　引用　查看　

#10楼  2011-02-23 23:06 pccai

不错！　回复　引用　查看　

#11楼 [楼主] 2011-02-28 08:52 Windie Chai

@daifei4321
你说的对，已经修正。　回复　引用　查看　

#12楼  2011-04-28 14:59 take it and go

7楼留言真棒　回复　引用　查看　

注册用户登录后才能发表评论，请登录或注册，返回博客园首页。

首页博问闪存新闻园子招聘知识库

最新IT新闻:
· 谷歌将出售Clearwire股份不到收购价1/10
· 为什么Google比苹果更令微软恐惧？
· 思科拟2.71亿美元收购私有公司Lightwire
· 社交商务公司Bazaarvoice将于2月24日进行IPO
· 戴尔收购备份软件公司AppAssure
» 更多新闻...

» 更多知识库文章...

China-pub 2011秋季教材巡展
China-Pub 计算机绝版图书按需印刷服务