最近在看《html5程序设计(第2版)》,在此做一些学习笔记。
书中的示例代码可以在http://www.apress.com/9781430238645?的“Source Code/Downloads”中下载
?
(一)HTML5的新功能
1、新的DOCTYPE和字符集
旧:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "http://www.w3.org/TR/html4/loose.dtd">
新:
<!DOCTYPE html>
旧:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
新:
<meta charset="utf-8">
?
2、新元素和旧元素
内容类型 | 描述 |
内嵌 | 向文档中添加其他类型的内容,例:audio、video、canvas和iframe |
流 | 在文档和应用的body中使用的元素,例:form、h1和small |
标题 | 段落标题,例:h1、h2、group等 |
交互 | 与用户交互的内容,例:音频和视频控件、button和textarea |
元数据 | 通常出现在页面的head中,设置页面其他部分的表现和行为,例:script、style和title等 |
短语 | 文本和文本标记元素,例:mark、kbd、sub和sup等 |
片段 | 用于定义文档中片段的元素,例:article、aside和title等 |
上述所有类型的元素都可以通过CSS来设定样式。
?
3、语义化标记
元素名 | 描述 |
header | 标记头部区域的内容(用于整个页面和页面中的一块区域) |
footer | 标记脚部区域的内容(用于整个页面或页面中的一块区域) |
section | Web页面中的一块区域 |
article | 独立的文章内容 |
aside | 相关内容或引文 |
nav | 导航类辅助内容 |
书中的例子的样式用了CSS3的一些新特性,比如圆角(border-radius)和旋转变换(transform:rotate();)。CSS3同HTML5一样也正在开发过程中,并且为了便于浏览器逐步支持,也采用了模块化的方式发布子规范,例如变换(transformation)、动画(animation)和过渡(transition)分别对应不同的子规范。为避免命名空间冲突,有些功能需要加上浏览器厂商前缀。要显示圆角、渐变(gradients)、阴影(shadows)和变形(transformations)的话,需要在生命的部分加上前缀:-moz-(Mozilla浏览器)、o-(Opera浏览器)和-webkit-(Safari和Chrome等基于WebKit核心的浏览器)。
最后说明,使用这些标签现阶段是有风险的。不是所用浏览器都支持或全面支持。如IE,因为IE需要将这些元素最为DOM的步步粉,所以要想在IE中看到这些元素,必须用变成的方式把他们插入DOM中,再以块元素(block element)的形式显示出来。实现此功能的脚本之一是html5shiv(http://code.google.com/p/html5shiv/)
?
4、使用Selector API简化选取操作
如果你熟悉CSS3或jquery的选取api,就应该对此不陌生了。
函数 | 描述 | 示例 | 结构 |
querySelector() |
根据指定的选择规则, 返回在页面中找到的 第一个比配元素 |
quertSelector ("input.error") |
返回第一个CSS类名为 "error"的文本输入框 |
querySelectorAll() |
根据指定规则返回页面 中所有匹配的元素 |
querySelectorAll ("#results td") |
返回id值为results的元素 下所有的单元格 |
Selectors API不仅是方便,在遍历DOM的时候,Selectors API通常会比以前的子节点搜索API更快。为了实现快速样式表,浏览器对选择器匹配惊醒了高度优化。
?
5、JavaScript日志和调试
严格说这不属于HTML5,而是浏览器的支持功能。
console.log API与alert的区别是前者不阻塞脚本的执行。
?
6、window.JSON
JSON变成了HTML5应用内部数据交换的实施标准。典型的JSON API包含两个函数,parse()和stringify()。在旧的浏览器中使用JSON,需要javascript库,但效率不高。新的浏览器原生支持JSON。
?
7、DOM Level 3
IE9之后,所有浏览器终于可以使用相同的代码来实现DOM操作和事件处理了。(万恶的IE和某些已IE为内核的国产浏览器)
?
8、JavaScript引擎
大多数浏览器都更新的javascript引擎,使之比以前快很多倍。(前端工程师,最厌恶的就是那些使用IE6的XP用户,哈哈。)