高等学校计算机应用规划教材 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名称，并且发现其重复 量很大，如很多开发人员使用<div id-="header">来标记页眉区域。为了解决实际问题，HTML5 直接添加了一个<header>.标签。也就是说，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 名称，并且发现其重复 量很大，如很多开发人员使用<div id="header">来标记页眉区域。为了解决实际问题，HTML5 直接添加了一个<header>标签。也就是说，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的功能在所有不同的设备和平台上应该都能正常 运行。 ·支持所有语种：例如，新的<body>元素支持在东亚地区页面排版中会用到的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 的功能在所有不同的设备和平台上应该都能正常 运行。 ● 支持所有语种：例如，新的<body>元素支持在东亚地区页面排版中会用到的 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 项目。据费特表示