日期:2014-05-17  浏览次数:20715 次

HTML5学习笔记(一)-概述

最近在看《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用户,哈哈。)