高等学校计算机应用规划教材 HTML5+CSS3网页没计基础教程 石 磊王维哲 主 编 李 娜那 谢昆鹏 王鸭程 副主编 清华大学出版社 北京
高等学校计算机应用规划教材 HTML5+CSS3 网页设计基础教程 石 磊 王维哲 主 编 李 娜 谢昆鹏 王鹏程 副主编 北 京
目 录 第1章W伦b开发新时代…1 2.3.1HTML5语法…21 1.1HTML5概述…1 2.3.2HTM5元素…22 24新增和废除的属性……25 1.1.1HTML5的目标…1 2.4.1新增的属性 25 1.1.2HTML5新特性： …2 2.4.2废除的属性： 27 1.1.3HTML5深受欢迎的原因…3 2.5全局属性 28 1.1.4HTML5的构成…4 2.5.1 12HTML5设计原理…5 contentEditable属性…28 2.5.2 designMode属性…29 1.2.1HTML的历史变迁…5 2.5.3 hidden属性…29 1.2.2HTML5开发动力…6 1.3编写第一个HTML5页面…7 2.5.4 spellcheck属性…. …29 1.3.1搭建上机练习环境……7 2.5.5 tabindex属性…29 2.6新增的事件… …29 1.3.2检测浏览器是否支持…7 2.7本章小结… …30 1.3.3使用HTML5编写简单的Web 2.8思考和练习…30 页面…8 14HTML5页面的特征…9 第3章创建HTML5文档 …31 1.4.1使用HTML5的结构化元素…9 3.1 认识HTML5文档结构…31 1.4.2使用CSS美化HTML5文档…12 3.2HTML5元素分类 …33 1.5本章小结…13 33构建主体内容…34 1.6思考和练习…13 3.3.1标识文章：article元素…34 第2章HTML、XHTML、HTML5…14 3.3.2给内容分块：section元素…36 2.1HTML基础… 3.3.3设计导航信息：nav元素…37 …14 3.3.4设计辅助信息：aside元素…39 2.1.】HTML简介…14 3.3.5设计微格式：time元素…40 2.1.2HTML结构…15 3.3.6添加发布日期：pubdate属性…41 2.13HTML语法…15 3.4添加语义模块…41 2.2 XHTML基础…17 3.4.1添加标题块：header元素…41 2.2.1 XHTML结构…17 2.2.2 XHTML语法…18 3.4.2给标题分组：hgroup元素…42 3.4.3添加脚注块：footer元素…43 2.2.3 XHTML类型…18 3.4.4添加联系信息：address元素…44 2.2.4DTD解析… …19 3.5本章小结…44 22.5命名空间… …21 3.6思考和练习…45 2.3HTML5基础… …21
目 录 第 1 章 Web 开发新时代························ 1 1.1 HTML5 概述·································· 1 1.1.1 HTML5 的目标···························· 1 1.1.2 HTML5 新特性···························· 2 1.1.3 HTML5 深受欢迎的原因············ 3 1.1.4 HTML5 的构成···························· 4 1.2 HTML5 设计原理·························· 5 1.2.1 HTML 的历史变迁······················ 5 1.2.2 HTML5 开发动力························ 6 1.3 编写第一个 HTML5 页面············· 7 1.3.1 搭建上机练习环境······················ 7 1.3.2 检测浏览器是否支持·················· 7 1.3.3 使用 HTML5 编写简单的 Web 页面·············································· 8 1.4 HTML5 页面的特征······················ 9 1.4.1 使用 HTML5 的结构化元素······· 9 1.4.2 使用 CSS 美化 HTML5 文档····12 1.5 本章小结······································· 13 1.6 思考和练习··································· 13 第 2 章 HTML、XHTML、HTML5······· 14 2.1 HTML 基础·································· 14 2.1.1 HTML 简介································14 2.1.2 HTML 结构································15 2.1.3 HTML 语法································15 2.2 XHTML 基础······························· 17 2.2.1 XHTML 结构·····························17 2.2.2 XHTML 语法·····························18 2.2.3 XHTML 类型·····························18 2.2.4 DTD 解析···································19 2.2.5 命名空间····································21 2.3 HTML5 基础································ 21 2.3.1 HTML5 语法······························21 2.3.2 HTML5 元素······························22 2.4 新增和废除的属性······················· 25 2.4.1 新增的属性································25 2.4.2 废除的属性································27 2.5 全局属性 ······································ 28 2.5.1 contentEditable 属性··················28 2.5.2 designMode 属性 ·······················29 2.5.3 hidden 属性································29 2.5.4 spellcheck 属性 ··························29 2.5.5 tabindex 属性 ·····························29 2.6 新增的事件··································· 29 2.7 本章小结 ······································ 30 2.8 思考和练习··································· 30 第 3 章 创建 HTML5 文档····················· 31 3.1 认识 HTML5 文档结构··············· 31 3.2 HTML5 元素分类························ 33 3.3 构建主体内容······························· 34 3.3.1 标识文章：article 元素··············34 3.3.2 给内容分块：section 元素········36 3.3.3 设计导航信息：nav 元素··········37 3.3.4 设计辅助信息：aside 元素·······39 3.3.5 设计微格式：time 元素············40 3.3.6 添加发布日期：pubdate 属性···41 3.4 添加语义模块······························· 41 3.4.1 添加标题块：header 元素·········41 3.4.2 给标题分组：hgroup 元素········42 3.4.3 添加脚注块：footer 元素··········43 3.4.4 添加联系信息：address 元素····44 3.5 本章小结 ······································ 44 3.6 思考和练习··································· 45
第1章 Web开发新时代 HTML5自2010年推出以来，受到各大浏览器厂商的支持和广大开发人员的喜爱。2010 年，微软E9预览版在MX10大会上首次公开亮相，工程师在介绍时，从前端角度将Wb 发展历程分为三个阶段：第一个阶段为Wb1.0,主流技术是HTML和CSS:第二阶段为 Web2.O,主流技术为Ajax应用，如JavaScript/DOMW异步数据请求：第三阶段则是即将到来 的HTML5+CSS3阶段。2014年10月29日，万维网联盟宣布，经过几乎8年的艰辛努力， HTML5标准规范终于最终制定完成并公开发布，这宣告Wb开发正式进入第三个阶段。 本章学习目标： ·了解什么是HTML5,以及HTML5相比之前版本的HTML有哪些区别 ●了解世界各大知名浏览器目前的发展策略，以及为什么它们都不约而同地把支持 HTML5当成目前的工作重点，就连微软也把全面支持HTML5作为E浏览器的开发 重点与主要宣传手段 ·了解为什么开发者今后可以大胆地使用HTML5进行Wb网站与Web应用程序的开 发，以及HTML5被正式推广以后，之前的Web网站与Web应用程序怎么办 ●了解HTML5到底可以解决哪些问题 1.1 HTML5概述 2OO4年成立的Web超文本应用技术工作组(Web Hypertext Application Technology Working Group,WHATWG)创立了HTML5规范，同时开始专门针对Web应用开发新的功能。 2006年，W3C介入HTML5的开发，并于2008年发布HTML5的工作草案。2009年，W3C 停止对XHTML2的更新。2010年，HTML5开始用于解决实际问题。这时，各大浏览器厂商 开始对旗下产品进行升级以支持HTML5的新功能，因此，HTML5规范得到持续的完善。2014 年10月29日，HTML5规范终于最终制定完成并公开发布。 1.1.1HTML5的目标 HTML5的目标是创建更简单的Wb程序，书写出更简洁的HTML代码。例如，为了使 Web应用程序的开发变得更容易，提供了很多APL;为了使HTML变得更简洁，开发出了新 的属性、新的元素，等等。总体来说，HTML5为下一代Wb平台提供了许许多多新的功能。 HTML5提供了以下革命性的新功能： 首先，在HTML5之前，有很多功能必须使用JavaScript等脚本语言才能实现，譬如在 登录页面中经常使用的让文本框获得光标焦点的功能。如果使用HTML5,同样的功能只要 使用元素的属性标签即可实现。这样的话，整个页面就变得非常清楚、直观且容易理解。因 此，Wb设计者可以非常放心大胆地使用HTML5中这些新增的属性标签。由于HTML5中
第1章 Web开发新时代 HTML5 自 2010 年推出以来，受到各大浏览器厂商的支持和广大开发人员的喜爱。2010 年，微软 IE9 预览版在 MIX10 大会上首次公开亮相，工程师在介绍时，从前端角度将 Web 发展历程分为三个阶段：第一个阶段为 Web 1.0，主流技术是 HTML 和 CSS；第二阶段为 Web 2.0，主流技术为 Ajax 应用，如 JavaScript/DOM/异步数据请求；第三阶段则是即将到来 的 HTML5+CSS3 阶段。2014 年 10 月 29 日，万维网联盟宣布，经过几乎 8 年的艰辛努力， HTML5 标准规范终于最终制定完成并公开发布，这宣告 Web 开发正式进入第三个阶段。 本章学习目标： ● 了解什么是 HTML5，以及 HTML5 相比之前版本的 HTML 有哪些区别 ● 了解世界各大知名浏览器目前的发展策略，以及为什么它们都不约而同地把支持 HTML5 当成目前的工作重点，就连微软也把全面支持 HTML5 作为 IE 浏览器的开发 重点与主要宣传手段 ● 了解为什么开发者今后可以大胆地使用 HTML5 进行 Web 网站与 Web 应用程序的开 发，以及 HTML5 被正式推广以后，之前的 Web 网站与 Web 应用程序怎么办 ● 了解 HTML5 到底可以解决哪些问题 1.1 HTML5 概述 2004 年成立的 Web 超文本应用技术工作组(Web Hypertext Application Technology Working Group，WHATWG)创立了 HTML5 规范，同时开始专门针对 Web 应用开发新的功能。 2006 年，W3C 介入 HTML5 的开发，并于 2008 年发布 HTML5 的工作草案。2009 年，W3C 停止对 XHTML2 的更新。2010 年，HTML5 开始用于解决实际问题。这时，各大浏览器厂商 开始对旗下产品进行升级以支持 HTML5 的新功能，因此，HTML5 规范得到持续的完善。2014 年 10 月 29 日，HTML5 规范终于最终制定完成并公开发布。 1.1.1 HTML5 的目标 HTML5 的目标是创建更简单的 Web 程序，书写出更简洁的 HTML 代码。例如，为了使 Web 应用程序的开发变得更容易，提供了很多 API；为了使 HTML 变得更简洁，开发出了新 的属性、新的元素，等等。总体来说，HTML5 为下一代 Web 平台提供了许许多多新的功能。 HTML5 提供了以下革命性的新功能： 首先，在 HTML5 之前，有很多功能必须使用 JavaScript 等脚本语言才能实现，譬如在 登录页面中经常使用的让文本框获得光标焦点的功能。如果使用 HTML5，同样的功能只要 使用元素的属性标签即可实现。这样的话，整个页面就变得非常清楚、直观且容易理解。因 此，Web 设计者可以非常放心大胆地使用 HTML5 中这些新增的属性标签。由于 HTML5 中
2 HTML5+CSS3网页设计基础教程 提供了大量的这种可以替代脚本的属性标签，使得开发出来的界面语言也变得更加简洁易懂。 不但如此，HTML5使页面结构变得清楚明了。之前使用的dv标签也不再使用了，而是 使用HTML5提供的更加语义化的结构标签。这样书写出来的界面结构显得非常清晰，各部 位要展示什么内容也一目了然。 虽然HTML5宣称的立场是“非革命性的发展”，但是它所带来的功能是让人渴望的， 使用它进行设计也是简单的，因此深受Web设计者和Web开发者的欢迎。 1.1.2HTML5新特性 1.兼容性 考虑到互联网上HTML文档己经存在二十多年了，因此支持所有现存HTML文档是非 常重要的。HTML5不是颠覆性的创新，它的核心理念就是要保持与过去技术的兼容和过渡。 一旦浏览器不支持HTML5的某项功能，针对该功能的备选行为就会悄悄进行。 2.合理性 HTML5新增加的元素都是经过对现有网页和用户习惯进行跟踪、分析和概括而推出的。 例如，Google分析了上百万个页面，从中分析出div标签的通用D名称，并且发现其重复 量很大，如很多开发人员使用来标记页眉区域。为了解决实际问题，HTML5 直接添加了一个.标签。也就是说，HTML5新增的很多元素、属性或功能都是根据现 实互联网中己经存在的各种应用进行技术精炼，而不是在实验室中理想化地虚构新功能。 3.效率 HTML5规范是基于用户优先准则编写的，宗指是“用户即上帝”，这意味着在遇到无法 解决的冲突时，HTML5规范会把用户放在第一位，其次是页面作者，再次是实现者（或浏览器）， 接着是规范制定者(W3 C/WHATWG),最后才考虑理论的纯粹性。因此，HTML5的绝大部分 功能是实用的，只是在有些情况下还不够完美。例如，下面的几种代码写法在HTML5中都 能被识别： id="prohtml5" id-prohtml5 ID="prohtml5" 当然，上面几种写法比较混乱，不够严谨，但是从用户开发角度考虑，用户不在乎代码 怎么写，根据个人习惯书写反而能提高代码编写效率。当然，我们并不提倡初学者一开始写 代码就这样随意、不严谨。 4.安全性 为保证安全，HTML5规范引入了一种新的基于来源的安全模型，该模型不仅易用，而 且各种不同API都可通用。这个安全模型不需要借助任何所谓聪明、有创意却不安全的hack 就能跨域进行安全对话。 5.分离 在清晰分离表现与内容方面，HTML5迈出了很大一步。HTML5在所有可能的地方都努 力进行了分离，包括HTML和CSS。实际上，HTML5规范已经不支持旧版HTML的大部分 表现功能了
• 2 • HTML5+CSS3 网页设计基础教程 提供了大量的这种可以替代脚本的属性标签，使得开发出来的界面语言也变得更加简洁易懂。 不但如此，HTML5 使页面结构变得清楚明了。之前使用的 div 标签也不再使用了，而是 使用 HTML5 提供的更加语义化的结构标签。这样书写出来的界面结构显得非常清晰，各部 位要展示什么内容也一目了然。 虽然 HTML5 宣称的立场是“非革命性的发展”，但是它所带来的功能是让人渴望的， 使用它进行设计也是简单的，因此深受 Web 设计者和 Web 开发者的欢迎。 1.1.2 HTML5 新特性 1. 兼容性 考虑到互联网上 HTML 文档已经存在二十多年了，因此支持所有现存 HTML 文档是非 常重要的。HTML5 不是颠覆性的创新，它的核心理念就是要保持与过去技术的兼容和过渡。 一旦浏览器不支持 HTML5 的某项功能，针对该功能的备选行为就会悄悄进行。 2. 合理性 HTML5 新增加的元素都是经过对现有网页和用户习惯进行跟踪、分析和概括而推出的。 例如，Google 分析了上百万个页面，从中分析出 div 标签的通用 ID 名称，并且发现其重复 量很大，如很多开发人员使用来标记页眉区域。为了解决实际问题，HTML5 直接添加了一个标签。也就是说，HTML5 新增的很多元素、属性或功能都是根据现 实互联网中已经存在的各种应用进行技术精炼，而不是在实验室中理想化地虚构新功能。 3. 效率 HTML5 规范是基于用户优先准则编写的，宗旨是“用户即上帝”，这意味着在遇到无法 解决的冲突时，HTML5 规范会把用户放在第一位，其次是页面作者，再次是实现者(或浏览器)， 接着是规范制定者(W3C/WHATWG)，最后才考虑理论的纯粹性。因此，HTML5 的绝大部分 功能是实用的，只是在有些情况下还不够完美。例如，下面的几种代码写法在 HTML5 中都 能被识别： id="prohtml5" id=prohtml5 ID="prohtml5" 当然，上面几种写法比较混乱，不够严谨，但是从用户开发角度考虑，用户不在乎代码 怎么写，根据个人习惯书写反而能提高代码编写效率。当然，我们并不提倡初学者一开始写 代码就这样随意、不严谨。 4. 安全性 为保证安全，HTML5 规范引入了一种新的基于来源的安全模型，该模型不仅易用，而 且各种不同 API 都可通用。这个安全模型不需要借助任何所谓聪明、有创意却不安全的 hack 就能跨域进行安全对话。 5. 分离 在清晰分离表现与内容方面，HTML5 迈出了很大一步。HTML5 在所有可能的地方都努 力进行了分离，包括 HTML 和 CSS。实际上，HTML5 规范已经不支持旧版 HTML 的大部分 表现功能了
第1章Web开发新时代 。3· 6.简单 HTML5要的就是简单，避免不必要的复杂性。为了尽可能简单，HTML5做了以下改进： ·以浏览器原生能力替代复杂的JavaScript代码。 ·简化的DOCTYPE: ·简化的字符集声明。 ●简单而强大的HTML5API。 7.通用 通用访问的原则可以分成如下3个概念： ·可访问性：出于对残疾人士的考虑，HTML5与WAI(Web Accessibility Initiative,Web 可访问性倡议)和ARIA(Accessible Rich Internet Application,可访问的富Internet应用) 做到了紧密结合，WAL-ARIA中以屏幕阅读器为基础的元素己经被添加到HTML中。 ·媒体中立：如果可能的话，HTML5的功能在所有不同的设备和平台上应该都能正常 运行。 ·支持所有语种：例如，新的元素支持在东亚地区页面排版中会用到的Ruby 注释。 8.无插件 在传统Web应用中，很多功能只能通过插件或复杂的hack来实现，但在HTML5中提 供了对这些功能的原生支持。插件方式存在很多问题： ·插件安装可能失败。 ●插件可以被禁用或屏蔽（如Flash插件）。 ● 插件自身会成为被攻击的对象。 ·插件不容易与HTML文档的其他部分集成，因为存在插件边界、剪裁和透明度问题。 以HTML5的canvas为例，以前在HTML4页面中较难画出对角线，而有了canvas元素 就可以轻易地实现了。基于HTML5的各类API的优秀设计，可以轻松地对它们进行组合应 用。例如，从video元素中抓取的帧可以显示在canvas中，用户单击canvas即可播放与该帧 对应的视频文件。 1.1.3HTML5深受欢迎的原因 1.世界知名浏览器厂商对HTML5的支持 HTML5被说成划时代也好，具有革命性也好，如果不被业界承认并且大范围地推广使用， 这些都没有意义。事实上，今后HTML5被正式、大规模地投入应用的可能性是相当高的。 通过对Internet Explorer、Google、Firefox、Safari、Opera等主流Web浏览器的发展策略 的调查，发现它们都在支持HTML5上采取了措施。 ●微软：2010年3月16日，微软于美国拉斯维加斯举行的MX10技术大会上宣布推 出E9浏览器开发者预览版。微软称，IE9完成开发后，会更多地支持CSS3、SVG 和HTML5等互联网浏览通用标准。 ·Google:2010年2月19日，Google Gears项目经理伊安·费特通过博客宣布，Google 将放弃对Gear浏览器插件项目的支持，以此重点开发HTML5项目。据费特表示
第 1 章 Web 开发新时代 • 3 • 6. 简单 HTML5 要的就是简单，避免不必要的复杂性。为了尽可能简单，HTML5 做了以下改进： ● 以浏览器原生能力替代复杂的 JavaScript 代码。 ● 简化的 DOCTYPE。 ● 简化的字符集声明。 ● 简单而强大的 HTML5 API。 7. 通用 通用访问的原则可以分成如下 3 个概念： ● 可访问性：出于对残疾人士的考虑，HTML5 与 WAI(Web Accessibility Initiative，Web 可访问性倡议)和 ARIA(Accessible Rich Internet Application，可访问的富 Internet 应用) 做到了紧密结合，WAI-ARIA 中以屏幕阅读器为基础的元素已经被添加到 HTML 中。 ● 媒体中立：如果可能的话，HTML5 的功能在所有不同的设备和平台上应该都能正常 运行。 ● 支持所有语种：例如，新的元素支持在东亚地区页面排版中会用到的 Ruby 注释。 8. 无插件 在传统 Web 应用中，很多功能只能通过插件或复杂的 hack 来实现，但在 HTML5 中提 供了对这些功能的原生支持。插件方式存在很多问题： ● 插件安装可能失败。 ● 插件可以被禁用或屏蔽(如 Flash 插件)。 ● 插件自身会成为被攻击的对象。 ● 插件不容易与HTML 文档的其他部分集成，因为存在插件边界、剪裁和透明度问题。 以 HTML5 的 canvas 为例，以前在 HTML4 页面中较难画出对角线，而有了 canvas 元素 就可以轻易地实现了。基于 HTML5 的各类 API 的优秀设计，可以轻松地对它们进行组合应 用。例如，从 video 元素中抓取的帧可以显示在 canvas 中，用户单击 canvas 即可播放与该帧 对应的视频文件。 1.1.3 HTML5 深受欢迎的原因 1. 世界知名浏览器厂商对 HTML5 的支持 HTML5 被说成划时代也好，具有革命性也好，如果不被业界承认并且大范围地推广使用， 这些都没有意义。事实上，今后 HTML5 被正式、大规模地投入应用的可能性是相当高的。 通过对 Internet Explorer、Google、Firefox、Safari、Opera 等主流 Web 浏览器的发展策略 的调查，发现它们都在支持 HTML5 上采取了措施。 ● 微软：2010 年 3 月 16 日，微软于美国拉斯维加斯举行的 MIX10 技术大会上宣布推 出 IE9 浏览器开发者预览版。微软称，IE9 完成开发后，会更多地支持 CSS3、SVG 和 HTML5 等互联网浏览通用标准。 ● Google：2010 年 2 月 19 日，Google Gears 项目经理伊安·费特通过博客宣布，Google 将放弃对 Gear 浏览器插件项目的支持，以此重点开发 HTML5 项目。据费特表示
4 HTML5+CSS3网页设计基础教程 目前，在Google看来，Gears面临的主要问题是，该应用与HTML5的诸多创新非常 相似，而且Google一直在积极发展HTML5项目。因此，只要Google不断以加强新 网络标准的应用功能为工作重点，那么为Geas增加新功能的意义就不大了。目前， 多种浏览器将会越来越多地为Gmail以及其他服务提供更多脱机功能方面的支持， 因此Gears面临的需求也在日益下降，这是Google做出上述调整的重要原因。 ●苹果：2010年6月7日，苹果在开发者大会的会后发布了Safari5,这款浏览器支持 10个以上的HTML5新技术，包括全屏幕播放、HTML5视频、HTML5地理位置、 HTML5切片元素、HTML5的可拖动属性、HTML5的形式验证、HTML5的Ruby、 HTML5的Ajax历史和WebSocket字幕。 ● Opera::2010年5月5日，Opera软件公司首席技术官Hakon Wium Lie先生在访华之 际，接受了中国软件资讯网等少数几家媒体的采访。号称“C$S之父”的他认为， HTML5和CSS3将是全球互联网发展的未来趋势，目前包括Opera在内的诸多浏览 器厂商，纷纷在研发HTML5相关产品，Web的未来属于HTML5。 ● Mozilla:20l0年7月，Mozilla基金会发布了即将推出的Firefox4浏览器的第一个早 期测试版，并在该版本的Firefox浏览器中进行了大幅改进，包括新的HTML5语法 分析器，以及支持更多HTML5形式的控制等。从官方文档来看，Firefox4对HTML5 提供完全级别的支持。目前包括在线视频、在线音频等多种应用都已在该版本中实现。 以上证据表明，目前这些浏览器都纷纷朝着支持HTML5、结合HTML5的方向在迈进， 因此HTML5己经被广泛推行开来。 2.时代的要求 现在的时代已经迫切地要求有一个统一的互联网通用标准。在HTML5发布之前的情况 是，由于各大浏览器之间的不统一，光是修改Wb浏览器之间的由于兼容性引起的Bug就浪 费了大量时间。而HTML5的目标就是将Wb带入一个成熟的应用平台，在HTML5平台上， 视频、音频、图像、动画以及同电脑的交互都被标准化。 关于Wb浏览器，网页标准计划小组设计并推出了Acid3测试，它是针对网页浏览器及 设计软件之标准相容性的一项测试。它针对Wb应用程序中使用的动态内容进行检查，测试 焦点主要集中在ECMAScript、DOM Level3、Media Queries和data:URL上。 Acd3测试推出后，各大浏览器都认真接受了它的测试并希望能够获得比较高的分数。 这个测试的设计者，正是W3C的开发及设计者，HTML5的重要人物Ian Hickson。Ian Hickson 是WHATWG开发团队的成员，负责Web标准的设计，现在是W3C的HTML5工作组的负 责人之一。 Ian Hickson设计Acid3测试的意图，是给声称“让开发者能够什么都不必担心，可以放 心大胆地进行开发”的各大Wb浏览器提供一个机会，让它们能够以此来证明自己是优秀的。 针对Acid3的宣传是很重要的，要想扩大Wb浏览器的市场份额，宣称遵从它所依赖的标准 是最有效的宣传方法。 1.1.4HTML5的构成 HTML5主要包括下面这些功能：Canvas(2D和3D)、Channel消息传递、Cross-Document 消息传送、Geolocation、MathML、Microdata、Server--Send Events、Scalable Vector
• 4 • HTML5+CSS3 网页设计基础教程 目前，在 Google 看来，Gears 面临的主要问题是，该应用与 HTML5 的诸多创新非常 相似，而且 Google 一直在积极发展 HTML5 项目。因此，只要 Google 不断以加强新 网络标准的应用功能为工作重点，那么为 Gears 增加新功能的意义就不大了。目前， 多种浏览器将会越来越多地为 Gmail 以及其他服务提供更多脱机功能方面的支持， 因此 Gears 面临的需求也在日益下降，这是 Google 做出上述调整的重要原因。 ● 苹果：2010 年 6 月 7 日，苹果在开发者大会的会后发布了 Safari 5，这款浏览器支持 10 个以上的 HTML5 新技术，包括全屏幕播放、HTML5 视频、HTML5 地理位置、 HTML5 切片元素、HTML5 的可拖动属性、HTML5 的形式验证、HTML5 的 Ruby、 HTML5 的 Ajax 历史和 WebSocket 字幕。 ● Opera：2010 年 5 月 5 日，Opera 软件公司首席技术官 Hakon Wium Lie 先生在访华之 际，接受了中国软件资讯网等少数几家媒体的采访。号称“CSS 之父”的他认为， HTML5 和 CSS3 将是全球互联网发展的未来趋势，目前包括 Opera 在内的诸多浏览 器厂商，纷纷在研发 HTML5 相关产品，Web 的未来属于 HTML5。 ● Mozilla：2010 年 7 月，Mozilla 基金会发布了即将推出的 Firefox 4 浏览器的第一个早 期测试版，并在该版本的 Firefox 浏览器中进行了大幅改进，包括新的 HTML5 语法 分析器，以及支持更多 HTML5 形式的控制等。从官方文档来看，Firefox 4 对 HTML5 提供完全级别的支持。目前包括在线视频、在线音频等多种应用都已在该版本中实现。 以上证据表明，目前这些浏览器都纷纷朝着支持 HTML5、结合 HTML5 的方向在迈进， 因此 HTML5 已经被广泛推行开来。 2. 时代的要求 现在的时代已经迫切地要求有一个统一的互联网通用标准。在 HTML5 发布之前的情况 是，由于各大浏览器之间的不统一，光是修改 Web 浏览器之间的由于兼容性引起的 Bug 就浪 费了大量时间。而 HTML5 的目标就是将 Web 带入一个成熟的应用平台，在 HTML5 平台上， 视频、音频、图像、动画以及同电脑的交互都被标准化。 关于 Web 浏览器，网页标准计划小组设计并推出了 Acid3 测试，它是针对网页浏览器及 设计软件之标准相容性的一项测试。它针对 Web 应用程序中使用的动态内容进行检查，测试 焦点主要集中在 ECMAScript、DOM Level 3、Media Queries 和 data:URL 上。 Acid3 测试推出后，各大浏览器都认真接受了它的测试并希望能够获得比较高的分数。 这个测试的设计者，正是 W3C 的开发及设计者，HTML5 的重要人物 Ian Hickson。Ian Hickson 是 WHATWG 开发团队的成员，负责 Web 标准的设计，现在是 W3C 的 HTML5 工作组的负 责人之一。 Ian Hickson 设计 Acid3 测试的意图，是给声称“让开发者能够什么都不必担心，可以放 心大胆地进行开发”的各大 Web 浏览器提供一个机会，让它们能够以此来证明自己是优秀的。 针对 Acid3 的宣传是很重要的，要想扩大 Web 浏览器的市场份额，宣称遵从它所依赖的标准 是最有效的宣传方法。 1.1.4 HTML5 的构成 HTML5 主要包括下面这些功能：Canvas(2D 和 3D)、Channel 消息传递、Cross-Document 消息传送、 Geolocation 、 MathML 、 Microdata 、 Server-Send Events 、 Scalable Vector
第1章Web开发新时代 5 Graphics(SVG)、WebSocket API及协i议、Web Origin Concept、Web Storage、Web SQL Database、 Web Workers,XMLHttpRequest Level 2. 1.2HTML5设计原理 设计原理是Wb发展背后的驱动力，也是通过HTML5反映出来的某种思维方式。软件 就像所有技术一样，具有天然的独裁性。代码必然会反映作者的选择、偏见和期望。任何开 放的标准，都应该追求以下几点： ·简化最常见的任务，让不常见的任务不至于太麻烦。 ●只为80%设计。 ·给内容创建者最大的权利。 ● 默认设置智能化。 1.2.1HTML的历史变迁 HTML最早从2.0版开始，实际上并没有HTML1.0版官方规范。HTML tags文档可以 算作HTML的第一个版本，但它却不是一个正式的版本。第一个正式版本HTML2.0也不是 出自W3C之手，而是由ETF制定的，从第三个版本开始，W3C开始接手并负责后续版本 的制定工作。 20世纪90年代，HTML有过几次快速发展。众所周知，那时构建网站是一项十分复杂 的工程，浏览器大战曾令人头疼不己，市场竞争的结果就是各家浏览器里都塞满了各种专有 的特性，都试图在专有特性上胜人一筹。当时的混乱不堪回首，HTML还重不重要，或者它 作为Wb格式的前景如何，谁都说不清楚。 从1997年到1999年，HTML的版本从3.2到4.0，再到4.01，经历了非常快的发展。问 题是到了版本4.01的时候，W3C的认识发生倒退，W3C并没有停止开发这门语言，只不过 他们对HTML不再感兴趣了。在HTML4.01之后，W3C提出了XHTML1.0的概念。虽然 听起来完全不同，但XHTML1.0和HTML4.01其实是一样的。唯一不同的是XHTMI1.0 要求使用XML语法。 从规范本身的内容来看，本质是相同的，不同之处在于编码风格，因为浏览器读取符合 HTML4.01、HTML3.2或XHTML1.0规范的网页都没有问题。对于浏览器来说这些网页都 是一样的，都会生成相同的DOM树，只不过用户更喜欢XHTML1.0,因为不少人认同它比 较严格的编码风格。 到了2000年，Wb标准项目的活动开展得如火如茶，开发人员对浏览器里包含的那些 乱七八糟的专有特性已经忍无可忍了。当时CSS有了长足的发展，而且与XHTML1.0的结 合也很紧密，CSS+HTML1.0可以算是最佳实践了。虽然HTML4.01与XHTML1.0没有本 质上的区别，但是大部分开发人员接受了这种组合。专业的开发人员能做到元素全部小写， 属性全部小写，属性值也全部添加引号。由于专业人员起到了模范带头作用，越来越多的人 也都开始支持这种语法。 XHTML1.0之后是XHTML1.1,只是小数点后面的数字变成了1，而且从词汇表的角度 看，规范本身没有什么新内容，元素、属性也都相同，唯一的变化就是把文档标记为XML
第 1 章 Web 开发新时代 • 5 • Graphics(SVG)、WebSocket API 及协议、Web Origin Concept、Web Storage、Web SQL Database、 Web Workers、XMLHttpRequest Level 2。 1.2 HTML5 设计原理 设计原理是 Web 发展背后的驱动力，也是通过 HTML5 反映出来的某种思维方式。软件 就像所有技术一样，具有天然的独裁性。代码必然会反映作者的选择、偏见和期望。任何开 放的标准，都应该追求以下几点： ● 简化最常见的任务，让不常见的任务不至于太麻烦。 ● 只为 80%设计。 ● 给内容创建者最大的权利。 ● 默认设置智能化。 1.2.1 HTML 的历史变迁 HTML 最早从 2.0 版开始，实际上并没有 HTML 1.0 版官方规范。HTML tags 文档可以 算作 HTML 的第一个版本，但它却不是一个正式的版本。第一个正式版本 HTML 2.0 也不是 出自 W3C 之手，而是由 IETF 制定的，从第三个版本开始，W3C 开始接手并负责后续版本 的制定工作。 20 世纪 90 年代，HTML 有过几次快速发展。众所周知，那时构建网站是一项十分复杂 的工程，浏览器大战曾令人头疼不已，市场竞争的结果就是各家浏览器里都塞满了各种专有 的特性，都试图在专有特性上胜人一筹。当时的混乱不堪回首，HTML 还重不重要，或者它 作为 Web 格式的前景如何，谁都说不清楚。 从 1997 年到 1999 年，HTML 的版本从 3.2 到 4.0，再到 4.01，经历了非常快的发展。问 题是到了版本 4.01 的时候，W3C 的认识发生倒退，W3C 并没有停止开发这门语言，只不过 他们对 HTML 不再感兴趣了。在 HTML 4.01 之后，W3C 提出了 XHTML 1.0 的概念。虽然 听起来完全不同，但 XHTML 1.0 和 HTML 4.01 其实是一样的。唯一不同的是 XHTML 1.0 要求使用 XML 语法。 从规范本身的内容来看，本质是相同的，不同之处在于编码风格，因为浏览器读取符合 HTML 4.01、HTML 3.2 或 XHTML 1.0 规范的网页都没有问题。对于浏览器来说这些网页都 是一样的，都会生成相同的 DOM 树，只不过用户更喜欢 XHTML 1.0，因为不少人认同它比 较严格的编码风格。 到了 2000 年，Web 标准项目的活动开展得如火如荼，开发人员对浏览器里包含的那些 乱七八糟的专有特性已经忍无可忍了。当时 CSS 有了长足的发展，而且与 XHTML 1.0 的结 合也很紧密，CSS+HTML 1.0 可以算是最佳实践了。虽然 HTML 4.01 与 XHTML 1.0 没有本 质上的区别，但是大部分开发人员接受了这种组合。专业的开发人员能做到元素全部小写， 属性全部小写，属性值也全部添加引号。由于专业人员起到了模范带头作用，越来越多的人 也都开始支持这种语法。 XHTML 1.0 之后是 XHTML 1.1，只是小数点后面的数字变成了 1，而且从词汇表的角度 看，规范本身没有什么新内容，元素、属性也都相同，唯一的变化就是把文档标记为 XML
6 HTML5+CSS3网页设计基础教程 文档。而在使用XHTML1.0的时候，还可以把文档标记为HTML。 但是，这样做带来了很多问题。首先，把文档标记为XML后，E浏览器不能处理。当 然，E9及其以上版本是可以处理的。作为全球领先的浏览器，E无法处理接收到的XML 类型的文档，而规范又要求以ML类型来发送文档，这对于广大用户来说，是一件很痛苦 的事。 所以说，XHTML1.1有点脱离实际，而用户不想把文档以ML格式发送给那些能够理 解XML的浏览器，则是因为XML的错误处理模型。XML的语法，无论是属性小写、元素 小写，还是始终要给属性值加引号，这些都没有问题，但XML的错误处理模型确是这样的： 如果解析器遇到错误，停止解析。如果把XHTML1.1标记为XML文档类型，假设用Firefox 打开这个文档，而文档中有一个符号没有正确编码，就算整个页面中只有这一处错误，浏览 器也会崩溃，用户将看不到任何网页内容。根据ML规范，这样处理是正确的，对于Firefox 而言，遇到错误就停止解析，并且不呈现其他任何内容，这是严格按照XML规范处理的。 因为它不是HTML,HTML根本没有错误处理模型，但根据ML规范，这样做没错。这就 是为什么人们不会把文档标记为ML的另一个原因。 接下来，新的版本是XHTML2,但是这个版本并没有完成。从理论的角度来说， XHTML2是一个非常好的规范。如果所有人都同意使用的话，也一定是非常好的格式，只 不过它还不够实际。 首先，XHTML2仍然使用XML错误处理模型，用户必须保证以XML类型发送文档： 其次，XHTML2中有意不再向后兼容己有的HTML版本，甚至曾经讨论废除ig元素，这 对于每天都在做Wb开发的人员来说确实有点难以接受，理论上分析，使用object元素可能 会更好。 因此，无论XTML2在理论上是多么完美的一种格式，却从未有机会付诸实践。之所 以难以付诸实践，就是因为开发人员永远不会支持它，它向后不兼容。同样，浏览器厂商也 不会支持它。 XHTML1和XHTML2都使用XML错误处理模型，但这个错误处理模型太苛刻了，它 不符合“接收时开放”这个法则，遇到错误就停止解析，这怎么能叫开放呢？ 1.2.2HTML5开发动力 在20世纪末期，W3C琢磨着改良HTML语言。在2004年W3C成员内部的一次研讨 会上，Opera公司的代表伊恩·希克森an Hickson)提出了一个扩展和改进HTML的建议。 他建议新的任务组可以跟XHTML2并行，但是在已有HTML的基础上开展工作，目标是对 HTML进行扩展。但是W3C投票表示反对，因为他们觉得XHTML2才是未来的方向。然 后，Opera、Apple等浏览器厂商以及其他一些成员脱离了W3C,成立了WHATWG(Web Hypertext Applications Technology Working Group,Web超文本应用技术工作组)，在HTML的 基础上开展工作，向其中添加新东西。 WHATWG的工作不久就初见成效，而W3C的XHTML2并没有实质性进展。于是， W3C于2007年组建了HTML5工作组，在WHATWG工作成果的基础上继续开展工作，由 伊恩·希克森担任W3 C HTML5规范的编辑，同时兼任WHATWG的编辑，以方便新工作组 开展工作
• 6 • HTML5+CSS3 网页设计基础教程 文档。而在使用 XHTML 1.0 的时候，还可以把文档标记为 HTML。 但是，这样做带来了很多问题。首先，把文档标记为 XML 后，IE 浏览器不能处理。当 然，IE9 及其以上版本是可以处理的。作为全球领先的浏览器，IE 无法处理接收到的 XML 类型的文档，而规范又要求以 XML 类型来发送文档，这对于广大用户来说，是一件很痛苦 的事。 所以说，XHTML 1.1 有点脱离实际，而用户不想把文档以 XML 格式发送给那些能够理 解 XML 的浏览器，则是因为 XML 的错误处理模型。XML 的语法，无论是属性小写、元素 小写，还是始终要给属性值加引号，这些都没有问题，但 XML 的错误处理模型确是这样的： 如果解析器遇到错误，停止解析。如果把 XHTML 1.1 标记为 XML 文档类型，假设用 Firefox 打开这个文档，而文档中有一个符号没有正确编码，就算整个页面中只有这一处错误，浏览 器也会崩溃，用户将看不到任何网页内容。根据 XML 规范，这样处理是正确的，对于 Firefox 而言，遇到错误就停止解析，并且不呈现其他任何内容，这是严格按照 XML 规范处理的。 因为它不是 HTML，HTML 根本没有错误处理模型，但根据 XML 规范，这样做没错。这就 是为什么人们不会把文档标记为 XML 的另一个原因。 接下来，新的版本是 XHTML 2，但是这个版本并没有完成。从理论的角度来说， XHTML 2 是一个非常好的规范。如果所有人都同意使用的话，也一定是非常好的格式，只 不过它还不够实际。 首先，XHTML 2 仍然使用 XML 错误处理模型，用户必须保证以 XML 类型发送文档； 其次，XHTML 2 中有意不再向后兼容已有的 HTML 版本，甚至曾经讨论废除 img 元素，这 对于每天都在做 Web 开发的人员来说确实有点难以接受，理论上分析，使用 object 元素可能 会更好。 因此，无论 XHTML 2 在理论上是多么完美的一种格式，却从未有机会付诸实践。之所 以难以付诸实践，就是因为开发人员永远不会支持它，它向后不兼容。同样，浏览器厂商也 不会支持它。 XHTML 1 和 XHTML 2 都使用 XML 错误处理模型，但这个错误处理模型太苛刻了，它 不符合“接收时开放”这个法则，遇到错误就停止解析，这怎么能叫开放呢？ 1.2.2 HTML5 开发动力 在 20 世纪末期，W3C 琢磨着改良 HTML 语言。在 2004 年 W3C 成员内部的一次研讨 会上，Opera 公司的代表伊恩·希克森(Ian Hickson)提出了一个扩展和改进 HTML 的建议。 他建议新的任务组可以跟 XHTML 2 并行，但是在已有 HTML 的基础上开展工作，目标是对 HTML 进行扩展。但是 W3C 投票表示反对，因为他们觉得 XHTML 2 才是未来的方向。然 后，Opera、Apple 等浏览器厂商以及其他一些成员脱离了 W3C，成立了 WHATWG(Web Hypertext Applications Technology Working Group，Web 超文本应用技术工作组)，在 HTML 的 基础上开展工作，向其中添加新东西。 WHATWG 的工作不久就初见成效，而 W3C 的 XHTML 2 并没有实质性进展。于是， W3C 于 2007 年组建了 HTML5 工作组，在 WHATWG 工作成果的基础上继续开展工作，由 伊恩·希克森担任 W3C HTML5 规范的编辑，同时兼任 WHATWG 的编辑，以方便新工作组 开展工作
第1章Web开发新时代 7· 这就是我们今天看到的局面：一种格式，两个版本。WHATWG的网站上有这个规范， 而W3C的网站上也有一份。但是，这两份成果也是有区别的。W3C最终要制定一个具体的 规范，而WHATWG还在不断地迭代，将开发一项简单的HTML或Web技术作为工作的核 心目标。 1.3编写第一个HTML5页面 尽管主流浏览器的最新版本都对HTML5提供了很好的支持，但HTML5毕竞是全新的， 因此在执行HTML5页面之前，必须先搭建支持HTML5的浏览器环境，并检查浏览器是否 支持HTML标记。 1.3.1搭建上机练习环境 目前，Microsoft的IEE9+)浏览器，以及Mozlilla的Firefox与Google的Chrome浏览 器等都可以很好地支持HTML5。本书的示例主要运行在Chrome浏览器上。 1.3.2检测浏览器是否支持 安装相应的浏览器以后，为了能进一步了解浏览器支持HTML5新标签的情况，还可以 在引入新的标签前，通过编写JavaScript代码来检测浏览器是否支持该标签。 浏览器在加载Web页面时会构造一个文本对象模型Document Object Model,DOM),然 后通过该文本对象模型来表示页面中的各个HTML元素，这些元素被表示为不同的DOM对 象。全部的DOM对象都共享一些公共或特殊属性，如HTML5的某些特性。如果在支持该 属性的浏览器中打开页面，就可以很快检测出这些DOM对象是否支持这些特性。 下面以加入画布标记为例，说明如何检测浏览器对canvas标签的支持。 【例1-1】在Dreamweaver中新建一个HTML页面，保存为index.html,.代码如下： #myCanvas{ background:red; width:200px; height:100px, } 该浏览器不支持HTML5的画布标记！
第 1 章 Web 开发新时代 • 7 • 这就是我们今天看到的局面：一种格式，两个版本。WHATWG 的网站上有这个规范， 而 W3C 的网站上也有一份。但是，这两份成果也是有区别的。W3C 最终要制定一个具体的 规范，而 WHATWG 还在不断地迭代，将开发一项简单的 HTML 或 Web 技术作为工作的核 心目标。 1.3 编写第一个 HTML5 页面 尽管主流浏览器的最新版本都对 HTML5 提供了很好的支持，但 HTML5 毕竟是全新的， 因此在执行 HTML5 页面之前，必须先搭建支持 HTML5 的浏览器环境，并检查浏览器是否 支持 HTML 标记。 1.3.1 搭建上机练习环境 目前，Microsoft 的 IE(IE9+)浏览器，以及 Mozlilla 的 Firefox 与 Google 的 Chrome 浏览 器等都可以很好地支持 HTML5。本书的示例主要运行在 Chrome 浏览器上。 1.3.2 检测浏览器是否支持 安装相应的浏览器以后，为了能进一步了解浏览器支持 HTML5 新标签的情况，还可以 在引入新的标签前，通过编写 JavaScript 代码来检测浏览器是否支持该标签。 浏览器在加载 Web 页面时会构造一个文本对象模型(Document Object Model，DOM)，然 后通过该文本对象模型来表示页面中的各个 HTML 元素，这些元素被表示为不同的 DOM 对 象。全部的 DOM 对象都共享一些公共或特殊属性，如 HTML5 的某些特性。如果在支持该 属性的浏览器中打开页面，就可以很快检测出这些 DOM 对象是否支持这些特性。 下面以加入画布标记为例，说明如何检测浏览器对 canvas 标签的支持。 【例 1-1】 在 Dreamweaver 中新建一个 HTML 页面，保存为 index.html，代码如下： #myCanvas { background: red; width: 200px; height: 100px; } 该浏览器不支持 HTML5 的画布标记！
8 HTML5+CSS3网页设计基础教程 在浏览器中执行页面文件index.html.,如果浏览器不支持HTML5的画布标记，将会显 示“该浏览器不支持HTML5的画布标记！”；若支持，则显示图1-1所示效果。需要注意 的是，虽然是同一个页面，但由于不同的浏览器对HTML5标记的支持情况也不同，因此显示 的页面效果也各异。所以，在编写HTML5新标记时，有必要先检测浏览器是否支持该标记。 合in鱼1o4egm 图1-】支持HTML5标记的浏览器的显示结果 1.3.3使用HTML5编写简单的Web页面 与HTML4相比，HTML5新增了很多新标签，整体页面结构也发生了很大变化。下面 使用HTML5来编写一个HTML页面，保存为index.html,.在其中加入如下代码： 【例1-2】一个简单的HTML5页面。 itle>第一个HTML5页面 Hello,World 该页面的运行效果如图1-2所示。 D-1HL5法 ◆C白127A.0.I20W2dh1 Hetlo.World 图1-2运行效果 通过短短几行代码就完成一个页面的开发，可见HTML5语法的简洁。下面逐句分析 HTML5文档的组成。 第一行代码如下：
• 8 • HTML5+CSS3 网页设计基础教程 在浏览器中执行页面文件 index.html，如果浏览器不支持 HTML5 的画布标记，将会显 示“该浏览器不支持 HTML5 的画布标记！”；若支持，则显示图 1-1 所示效果。需要注意 的是，虽然是同一个页面，但由于不同的浏览器对 HTML5 标记的支持情况也不同，因此显示 的页面效果也各异。所以，在编写 HTML5 新标记时，有必要先检测浏览器是否支持该标记。 图 1-1 支持 HTML5 标记的浏览器的显示结果 1.3.3 使用 HTML5 编写简单的 Web 页面 与 HTML4 相比，HTML5 新增了很多新标签，整体页面结构也发生了很大变化。下面 使用 HTML5 来编写一个 HTML 页面，保存为 index.html，在其中加入如下代码： 【例 1-2】 一个简单的 HTML5 页面。 第一个 HTML5 页面 Hello,World 该页面的运行效果如图 1-2 所示。 图 1-2 运行效果 通过短短几行代码就完成一个页面的开发，可见 HTML5 语法的简洁。下面逐句分析 HTML5 文档的组成。 第一行代码如下：
