高等学校计算机应用规划教材：《HTML5+CSS3 网页设计基础教程》教学资源（PDF电子书）第1章 Web开发新时代.pdf_大学文库

目录第 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 的编辑，以方便新工作组开展工作