作者：陆凌牛

出版社：机械工业出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

HTML 5与CSS 3权威指南(第4版·上册)试读：

前言

如果要盘点2010年IT届的十大热门技术，云计算、移动开发、物联网等无疑会在其中，HTML 5肯定也是少不了的。2010年，随着HTML 5的迅猛发展，各大浏览器开发公司（如Google、微软、苹果、Mozilla和Opera）的浏览器开发业务都变得异常繁忙。在整个2010年度，无论是Mozilla的Firefox、Google的Chrome、苹果的Safari、微软的Internet Explorer，还是欧普拉的Opera都处于不断推陈出新的状态当中。

2010年3月，在微软的MIX2010大会上，微软的工程师在介绍Internet Explorer 9浏览器的同时，还从前端技术的角度把互联网的发展分为了三个阶段：

第一阶段：Web 1.0的以内容为主的网络，前端主流技术是HTML和CSS；

第二阶段：Web 2.0的Ajax应用，热门技术是JavaScript、DOM、异步数据请求；

第三阶段：即将迎来的HTML 5时代，亮点是富图形和富媒体内容（Graphically-Rich and Media-Rich）。

前端技术将进入一个崭新的时代，至少已经开启了这扇门。

在这种局势下，学习HTML 5无疑成为Web开发者的一大重要任务，谁先学会HTML 5，谁就掌握了迈向未来Web平台的方向。因此，我希望能够借助本书帮助国内的Web开发者更好地学习HTML 5以及与之相伴的CSS 3技术，使大家能够早日运用这些技术开发出一个具有现代水平的、在未来的Web平台上能够正常运行的Web网站或Web应用程序。第4版与第3版的区别

自2016年上半年本书第3版出版以来，一直受到广大读者的欢迎，笔者在这里首先感谢广大读者的支持。自本书第3版出版之后，HTML 5与CSS 3标准不断发展，2016年11月，W3C发布HTML 5.1版本；2017年12月，W3C发布HTML 5.2版本。各主流浏览器也以最快的速度对HTML 5中各种最新公布的API提供了支持，其中包括对ECMA Script 2015以上版本的支持、对indexedDB 2.0版本的支持、对Fetch API的支持、改用Service Worker对离线应用程序提供支持、对BroadcastChannel API的支持、对Web组件模块（其中包括HTML模块、Shadow DOM、自定义元素、HTML导入）的支持、对Web Animations API的支持等。因此，本书第4版以第3版的内容为基础，添加2016年上半年到2018年上半年之间HTML 5中新增的各种元素及API，同时更新各主流浏览器CSS 3的最新支持情况，以使读者能够学到HTML 5与CSS 3标准中的各种知识，了解各种最新的浏览器中对HTML 5与CSS 3标准的最新支持情况，以帮助读者能够早日将这些新的知识打造成一个HTML 5时代的功能强大的Web网站或Web应用程序。

具体来说，第4版在第3版的基础上，做出的主要修改如下所示：

·第2章“HTML5与HTML4的区别”中删除在HTML 5.1中被移除的元素。

·新增第5章“ECMAScript中的新增功能”。

·第7章“本地存储”（原书中第8章）中新增indexedDB 2.0部分。

·第8章“扩展的XMLHttpRequest API”（原书中第13章）修改为第8章“扩展的XMLHttpRequest API及Fetch API”，新增8.4节“使用Fetch API”。

·新增第10章“使用Service Worker实现离线应用程序”。

·第11章“通信API”中新增11.4节“BroadcastChannel API”。

·新增第12章“Web组件”。

·第13章“绘制图形”（原书中第5章）中新增13.9.3节“将canvas元素中的图像转换为Blob对象”与13.9.5节“解码图像”。

·第18章“文字与字体相关样式”中新增18.4节“指定用户是否可选取文字的user-select属性”。

·第22章“CSS3中的动画功能”中新增22.3节“Web Animations API”。

·第23章“布局相关样式”中新增23.4节“网格布局”。

·第24章“Media Queries相关样式”一章修改为第24章“媒体查询表达式与特性查询表达式”，新增24.2节“特性查询表达式”。

·第25章“CSS 3的其他重要样式和属性”中新增25.4节“用于控制鼠标事件的pointer-events属性”与25.6节“CSS变量”。本书面向的读者

本书主要适合如下人群阅读：

·具有一定基础的Web前端开发工程师

·具有一定美术功底的Web前端设计师和UI设计师

·Web项目的管理人员

·开设了Web开发等相关专业的高等院校师生和相关培训机构的学员及教师如何阅读本书

本书从逻辑上共分为三个部分：

第一部分（第1～14章）　对HTML 5中新增的语法与标记方法、新增的元素、新增的API以及到本书截稿时这些元素与API得到哪些浏览器的支持等进行了详细介绍。在对它们进行介绍的同时将其与HTML 4中的各种元素与功能进行了对比，以帮助读者更好地理解为什么需要使用HTML 5、使用HTML 5有什么好处、HTML 5中究竟增加了哪些目前HTML 4不具备而在第三代Web平台上将会起到重要作用的功能与API，以及这些功能与API的详细使用方法。

第二部分（第15～25章）　详细介绍了CSS 3中的各种新增样式与属性，其中主要包括CSS 3中的各种选择器、文字与字体、背景与边框、各种盒模型、CSS 3中的布局方式、CSS 3中的变形与动画、CSS 3中与媒体类型相关的一些样式与属性等。在介绍的同时也详细讲述了到本书截稿时这些样式与属性得到哪些浏览器的支持，以及针对各种浏览器应该怎样在样式代码中进行各种属性的正确书写。

第三部分（第26章）　详细讲解了一个实例，该实例展示了如何使用HTML 5中新增的表单元素、如何读取本地数据库中的数据、如何保存数据到本地数据库、如何使用Fetch API读取服务器端的数据及提交数据到服务器端并处理服务器端响应、如何保存数据到LocalStorage及从LocalStorage读取保存后的数据，从而实现一个具有现代风格的Web应用程序，以及如何在这个由HTML 5语言及其功能编写而成的Web应用程序中综合使用CSS 3样式来完成页面的布局以及视觉效果的美化工作。

全书一共有300多个代码示例，每个代码示例都经过笔者上机实践，确保运行结果正确无误。每个代码示例的详细代码及其用到的脚本文件、各种资源文件都可在华章公司的官方网站（www.hzbook.com）本书的页面上下载，因为是用HTML 5编写的网页，所以这些文件可直接在各种浏览器中打开并查看运行结果。少量页面需要首先建立网站，然后通过访问网站中该页面的方式来进行查看，少量页面使用服务器端PHP脚本语言，可在Apache服务器中运行。书中详细介绍了对HTML 5中的各种元素、各种API和CSS 3中的各种属性和样式提供支持的浏览器，读者可以针对不同的页面选择正确的浏览器来查看其正确的运行结果。致谢

在本书的写作过程中，策划编辑杨福川先生和李艺女士给予了很大的帮助和支持，并提出了很多中肯的建议，在此表示感谢。同时，还要感谢机械工业出版社的所有编审人员为本书的出版所付出的辛勤劳动。本书的成功出版是大家共同努力的结果，谢谢你们。

另外，在本书的写作过程当中，由于时间及水平上的原因，可能存在一些对HTML 5及CSS 3上认识不全面或疏漏的地方，敬请读者批评更正，作者的联系QQ为240824399，联系邮箱为240824399@qq.com，谨以最真诚的心希望能与读者交流，共同成长。  第1章 Web时代的变迁

自从2010年HTML 5正式推出以来，它立刻得到了世界各大浏览器的支持。根据世界上各大IT界知名媒体评论，新的Web时代及HTML 5的时代马上就要到来。本章重点介绍什么是HTML 5，HTML 5产生的时代背景，为什么HTML 5会如此深受业界欢迎，以及HTML能够解决什么问题。

学习内容：

·初步了解什么是HTML 5，HTML 5与之前版本的HTML大致上有哪些区别。

·了解世界各大知名浏览器目前的发展策略，为什么它们都不约而同地把支持HTML 5当成目前的工作重点，就连微软也把全面支持HTML 5作为新版Internet Explorer 9（IE 9）浏览器的开发重点与主要宣传手段。

·了解为什么说开发者今后可以放心大胆地使用HTML 5进行Web网站与Web应用程序的开发，HTML 5被正式推广以后之前的Web网站与Web应用程序怎么办。

·了解使用HTML 5到底可以解决哪些问题。1.1　迎接新的Web时代1.1.1　HTML 5时代即将来临

自从2010年HTML 5正式推出以来，它就以一种惊人的速度被迅速推广着，就连微软也因此为下一代IE 9做了标准上的改进，使其能够支持HTML 5。关于各主流浏览器对于HTML 5所表现出来的积极支持的详细情况，以及为什么HTML 5会如此受欢迎，我们将在后面几节中详细介绍，这里，笔者要告诉大家的是，目前业界全体都步调一致地朝着HTML 5的方向迈进着，HTML 5的时代马上就要到来了。

在全面介绍HTML 5的相关知识之前，我们先来认识一下HTML 5中的部分代码，对HTML 5有个初步的了解。

首先，我们来看一段HTML 4中常见的JavaScript代码，如代码清单1-1所示。

代码清单1-1　HTML 4中的JavaScript代码示例

在HTML 5中，这段代码将会以怎样的形式出现呢？具体如代码清单1-2所示。

代码清单1-2　用HTML 5实现代码清单1-1中的JavaScript代码

我们来看一下在HTML 4中常见的一种页面结构，代码如代码清单1-3所示。

代码清单1-3　div标签示例（用HTML 4实现）

页面中有关该部分的结构示意如图1-1所示。图1-1　HTML 4中的页面结构

那么，在HTML 5中，又会用怎样的页面代码来描述这种结构呢？具体如代码清单1-4所示。

代码清单1-4　HTML 5中的新型结构示例

页面中有关该部分的结构示意图如图1-2所示。图1-2　HTML 5中的页面结构

怎么样？看出区别来了吗？在第一个示例中，我们可以看见，在HTML 4中的一段JavaScript代码，在HTML 5中消失了，取而代之的是一个在HTML 5中新出现的属性。在第二个示例中，我们可以看见，在HTML 4中常见的用div来划分页面结构的方法，到了HTML 5中，也被一种新出现的标签给替代了。那么究竟为什么HTML 5要对HTML 4的脚本以及页面代码做这种修改呢？做这种修改的目的又是什么呢？1.1.2　HTML 5的目标

HTML 5的目标是为了能够创建更简单的Web程序，书写出更简洁的HTML代码。例如，为了使Web应用程序的开发变得更容易，提供了很多API；为了使HTML变得更简洁，开发出了新的属性、新的元素，等等。总体来说，为下一代Web平台提供了许许多多新的功能。

那么让我们先来初步接触一下在HTML 5中究竟提供了哪些革命性的新功能。在第2章中，我们会针对这些功能做一个全面介绍。

首先，在HTML 5之前，有很多功能必须要使用JavaScript等脚本语言才能实现，譬如前面例子中提到，登录画面中经常使用的让文本框获得光标焦点的功能。如果使用HTML 5，同样的功能只要使用元素的属性标签就可以实现了。这样的话，整个页面就变得非常清楚直观，容易理解。因此，Web设计者可以非常放心大胆地使用这些HTML 5中新增的属性标签。由于HTML 5中提供了大量的这种可以替代脚本的属性标签，使得开发出来的界面语言也变得更加简洁易懂。

不但如此，HTML 5使页面结构也变得清楚明了。之前使用的div标签也不再使用了，而是使用前面HTML 5示例中所提到的更加语义化的结构标签。这样的话，书写出来的界面结构显得非常清晰，各部位要展示什么内容也让人一目了然。

虽然HTML 5宣称的立场是“非革命性的发展”，但是它所带来的功能是让人渴望的，使用它所进行的设计也是很简单的，因此，它深受Web设计者与Web开发者的欢迎。1.1.3　HTML5的小版本更新

2016年11月，W3C对长期行使的HTML 5标准进行了更新。许多最开始提出的HTML 5功能特性都因为设计上的缺陷和缺乏浏览器厂商的支持而去掉了。

尽管有一些元素和功能提升被带进了HTML 5.1里面，但这仍然是一个小的更新。其中有一些新的元素包含了组合标签，现在这样的元素包括dialog元素、details元素、summary元素及picture元素，这样就为开发者提供了更多表达创意和内容的空间。

2017年12月14日，W3C发布了HTML 5.2更新版本，且官方建议用户使用。此次更新增加了dialog标签等新功能，弃用了HTML插件系统等原有功能。该版本的HTML规范还提供了对ES6 JavaScript模块的官方支持。目前各主流浏览器都已经实现了这一功能。1.2　HTML 5深受欢迎的理由1.2.1　世界知名浏览器厂商对HTML 5的支持

HTML 5被说成是划时代的产品也好，具有革命性意义也好，如果不能被业界承认并且大面积地推广使用，这些都是没有意义的。

通过对Internet Explore、Google、Firefox、Safari、Opera等主要的Web浏览器的发展策略的调查，发现它们都在支持HTML 5上采取了措施。

·微软：2010年3月16日，微软于拉斯维加斯市举行的MIX10技术大会上宣布已推出IE 9浏览器开发者预览版。微软称，IE 9完成开发后，将更多支持CSS 3、SVG和HTML 5等互联网浏览通用标准。

·Google：2010年2月19日，谷歌Gears项目经理伊安·费特通过博客宣布，谷歌将放弃对Gears浏览器插件项目的支持，以此重点开发HTML 5项目。据费特表示，目前，在谷歌看来，Gears面临的主要问题是，该应用与HTML 5的诸多创新非常相似，而且谷歌一直积极发展HTML 5项目。因此，只要谷歌不断以加强新网络标准的应用功能为工作重点，那么为Gears增加新功能就无太大意义了。目前，多种浏览器将会越来越多地为GMail及其他服务提供更多脱机功能方面的支持，因此Gears面临的需求也在日益下降，这是谷歌做出上述调整的重要原因。

·苹果：2010年6月7日，苹果在开发者大会的会后发布了Safari 5，这款浏览器支持10个以上的HTML 5新技术，包括全屏幕播放、HTML 5视频、HTML 5地理位置、HTML 5切片元素、HTML 5的可拖动属性、HTML 5的形式验证、HTML 5的Ruby、HTML 5的AJAX历史和WebSocket字幕。

·Opera：2010年5月5日，Opera软件公司首席技术官Hakon Wium Lie先生在访华之际，接受了中国软件资讯网等少数几家媒体的采访。号称“CSS之父”的Hakon Wium Lie认为，HTML 5与CSS 3将是全球互联网发展的未来趋势，目前包括Opera在内的诸多浏览器厂商，纷纷在研发HTML 5相关产品，Web的未来属于HTML 5。

·Mozilla：2010年7月，Mozilla基金会发布了即将推出的Firefox 4浏览器的第一个早期测试版。在该版本中的Firefox浏览器中进行了大幅改进，包括新的HTML 5语法分析器，以及支持更多HTML 5形式的控制等。从官方文档来看，Firefox 4对HTML 5是完全级别的支持。目前包括在线视频、在线音频等多种应用都已在该版中实现。

以上证据表明，目前这些浏览器都纷纷地朝着支持HTML 5、结合HTML 5的方向迈进着，因此HTML 5已经被广泛地推行开来了。为什么HTML 5会如此受欢迎，理由如1.2.2节和1.2.3节所示。1.2.2　第一个理由：时代的要求

现在的时代已经迫切地要求有一个统一的互联网通用标准。HTML 5之前的情况是，由于各浏览器之间的不统一，仅是修改Web浏览器之间的由于兼容性而引起的bug就浪费了大量时间。而HTML 5的目标就是将Web带入一个成熟的应用平台，在HTML 5平台上，视频、音频、图像、动画，以及同电脑的交互都被标准化。

关于Web浏览器，网页标准计划小组设计并推出了Acid3测试，它是针对网页浏览器及设计软件之标准相容性的一项测试。它针对Web应用程序中使用着的动态内容进行检查，测试焦点主要集中在ECMAScript、DOM Level 3、Media Queries和data：URL。

Acid3测试推出后，各大浏览器都接受了它的测试并希望能够获得比较高的分数。这个测试的设计者正是在W3C开发者及设计者，HTML 5的重要人物Ian Hickson。Ian Hickson是WHATWG（Web Hypertext Application Technology Working Group）开发团体的成员，担任Web标准规格的设计，现在是W3C的HTML 5工作组的负责人之一。

Ian Hickson设计Acid3测试的意图是给声称“让开发者能够什么都不必担心，可以放心大胆地进行开发”的各大Web浏览器提供一个机会，让它们能够以此来证明自己是优秀的。Acid3的宣传是很重要的，要想扩大Web浏览器的市场份额，宣称遵从它所依赖的标准是最有效的宣传方法。图1-3为Acid3的一个测试图。图1-3　Acid3测试图1.2.3　第二个理由：Internet Explorer 8

Internet Explorer也积极地朝着支持HTML 5的方向迈进着。Internet Explorer对此十分重视。虽然它的使用者依然很多，但是它很不甘心。于是继Internet Explorer 7（IE 7）发表后不久，立刻推出了Internet Explorer 8（IE 8）的Release版。

IE 8宣称遵从互联网通用标准。虽然其他的浏览器由于标榜遵从该标准而获得了很多市场份额，但是Internet Explorer肯定是要对此采取强有力的对策的。因此Internet Explorer把宣称遵从互联网通用标准看成了很重要的一件事，并且开始在IE 8里支持HTML 5。

例如，HTML 5中代替Cookie的sessionStorage功能与globalStorage功能在IE 8里都获得了支持。使用Ajax时如果点击返回按钮也可以真正让操作返回了（在IE 7中点击返回按钮，画面跳转到其他画面）。很多Internet Explorer自己独特的处理方法与特性，今后也会有所改变。

因为现在市场份额最高的Internet Explorer也在针对HTML 5做出积极对应，微软也对新的互联网通用标准表示了赞同和支持，所以可以说HTML 5在市场上大面积推广的势头是非常强的。1.3　可以放心使用HTML 5的三个理由

Web开发者最担心的是新技术推出时由于其不成熟所产生的问题。如果能够实现互联网通用标准，则可以避免各浏览器之间的不统一，这一点已经被明确了，但是在朝着这方面前进的过程中会不会出现什么周折是令人担心的。

虽然Web开发者普遍认为有了HTML 5是比较好的，但是还是会很担心诸如“它在老版本的浏览器上也能正常运行吗？”，“会不会产生错误？”等各种问题。但是可以很高兴地告诉你，请放心，HTML 5就像以前CSS刚开始普及时一样不会存在什么问题。

有三个理由证明可以放心使用HTML 5：

·兼容性：HTML 5在老版本的浏览器上也可以正常运行。

·实用性：HTML 5内部并没有封装什么很复杂的、不切实际的功能，而只是封装了简单实用的功能。

·非革命性的发展：HTML 5的内部功能不是革命性的，只是发展性的。

以上三点就是所谓的“HTML设计原则”，HTML 5也是以该设计原则为基本原则而开发出来的，各主流浏览器使用HTML 5的前提也就是要求HTML 5能够符合这些原则，今后也将以其为前提来支持HTML 5。下面针对这些原则进行介绍。

首先是兼容性问题。虽然到了HTML 5时代，但并不代表现在用HTML 4创建出来的网站必须全部要重建，只会要求各Web浏览器今后能正常运行用HTML 5开发出来的功能。“非革命性的发展”这一点正是通过兼容性体现出来的。正是因为保障了兼容性才能让人毫不犹豫地用HTML 5来开发网站。

接着是实用性。实用性是指要求能够解决实际问题。HTML 5内只封装了切实有用的功能，不封装复杂而没有实际意义的功能。

通过以上列举的HTML设计原则，尤其是与HTML 4相兼容的部分，基本上可以让人放下心来，大胆地使用HTML 5。1.4　HTML 5要解决的三个问题

HTML 5的出现，对于Web来说意义是非常重大的。因为它的意图是想要把目前Web上存在的各种问题一并解决掉，它是一个企图心比较强的HTML版本。

那么，到底Web上存在哪些问题？HTML 5又打算怎么解决呢？

1.Web浏览器之间的兼容性很低

首先要提到的就是，Web浏览器之间的兼容性是非常低的。在某个Web浏览器上可以正常运行的HTML、CSS、JavaScript等Web程序，在另一个Web浏览器上就不正常了的事情是非常多的。

如果用一句话来描述这个问题的原因就是“规范不统一”。规范不统一，没有被标准化，是这个问题的主要原因。

在HTML 5中，这个问题将得到解决。HTML 5的使命是详细分析各Web浏览器所具有的功能，然后以此为基础，要求这些浏览器所有内部功能都要符合一个通用标准。

如果各浏览器都符合通用标准，然后以该标准为基础来书写程序，那么程序在各浏览器都能正常运行的可能性就大大提高了，这对于Web开发者和Web设计者都是一件令人高兴的事情。而且，今后开发者开发出来的Web功能只要符合通用标准，Web浏览器也都是很愿意封装该功能的。

2.文档结构不够明确

第二个问题是，在之前的HTML版本中，文档的结构不够清晰、明确。例如，为了要表示“标题”“正文”，之前一般都是用

在HTML 5中，为了解决这个问题，追加了很多跟结构相关的元素。不仅如此，还结合了包括微格式、无障碍应用在内的各种各样的周边技术。

3.Web应用程序的功能受到了限制

最后一个问题是，HTML与Web应用程序的关系十分薄弱。Web应用程序的特征是先从网络下载，然后忠实运行，因此应该对会威胁到用户安全的功能进行限制。

目前安全性的保障这方面已做到了，但对于Web应用程序来说，一直以来HTML真正所做出的贡献是很少的，譬如说就连上传文件的同时想选择一个以上的文件都做不到。

为了弥补这方面的不足，HTML 5已经开始提供各种各样Web应用上的新API，各浏览器也在快速地封装着这些API，HTML 5已经使富Web应用的实现变成了可能。  第2章 HTML 5与HTML 4的区别

HTML 5以HTML 4为基础，对HTML 4进行了大量修改。本章从总体上概要介绍HTML 5对HTML 4进行了哪些修改，HTML 5与HTML 4之间比较大的区别是什么地方。

学习内容：

·掌握HTML 5与HTML 4在基本语法上的区别，这个基本语法区别包括DOCTYPE声明、内容类型（ContentType）、字符编码的指定方法、元素标记的省略、具有布尔值的属性、引号的省略等几个方面。

·了解在HTML 5中新增的元素，删除了哪些HTML 4中的元素，以及为什么要删除这些元素，用什么元素或方法来取代这些被删除的元素。

·了解在HTML 5中新增的属性，删除了哪些HTML 4中的属性，在HTML 5中用什么方法来取代这些被删除的属性。

·掌握什么是全局属性，本章主要介绍几个常用全局属性，如contentEditable属性、designMode属性、hidden属性、spellcheck属性以及tabindex属性。2.1　语法的改变2.1.1　HTML 5的语法变化

与HTML 4相比，HTML 5在语法上发生了很大的变化。可能很多人会因为“之前的HTML已经相当普及”，“如果改变基础语法，会产生什么影响”等想法而感到不安。

但是，HTML 5中的语法变化，与其他开发语言中的语法变化在根本意义上有所不同。它的变化，正是因为在HTML 5之前几乎没有符合标准规范的Web浏览器导致的。

HTML的语法是在SGML（Standard Generalized Markup Language）语言的基础上建立起来的。但是SGML语法非常复杂，要开发能够解析SGML语法的程序也很不容易，因此很多浏览器都不包含SGML的分析器。因此，虽然HTML基本上遵从SGML的语法，但是对于HTML的执行在各浏览器之间并没有一个统一的标准。

在这种情况下，各浏览器之间的互兼容性和互操作性在很大程度上取决于网站或网络应用程序的开发者在开发上所做的共同努力，而浏览器本身始终是存在缺陷的。

如上所述，在HTML 5中提高Web浏览器之间的兼容性是它的一个很大的目标，为了确保兼容性，就要有一个统一的标准。因此，在HTML 5中，围绕着这个Web标准，重新定义了一套在现有HTML的基础上修改而来的语法，以便各浏览器在运行HTML的时候能够符合一个通用标准。

因为关于HTML 5语法解析的算法也都提供了详细的记载，所以各Web浏览器的供应商可以把HTML 5分析器集中封装在自己的浏览器中。最新的Firefox（默认为4.0以后的版本）与WebKit浏览器引擎中都迅速地封装了供HTML 5使用的分析器，IE（Internet Explorer）与Opera也在努力加快对HTML 5的支持——提高浏览器的兼容性指日可待。

接下来，让我们具体看一下在HTML 5中对语法进行了哪些改变。2.1.2　HTML 5中的标记方法

首先看一下HTML 5中的标记方法。

1.内容类型（ContentType）

首先，HTML 5的文件扩展符与内容类型保持不变。也就是说，扩展符仍然为“.html”或“.htm”，内容类型（ContentType）仍然为“text/html”。

2.DOCTYPE声明

DOCTYPE声明是HTML文件中必不可少的，它位于文件第一行。在HTML 4中，它的声明方法如下：

在HTML 5中，刻意不使用版本声明，一份文档将会适用所有版本的HTML。HTML 5中的DOCTYPE声明方法（不区分大小写）如下：

另外，当使用工具时，也可以在DOCTYPE声明方式中加入SYSTEM识别符，声明方法如下：

在HTML 5中像这样的DOCTYPE声明方式是允许的（不区分大小写，引号不区分是单引号还是双引号）。

3.指定字符编码

在HTML 4中，使用meta元素的形式指定文件中的字符编码，如下所示：

在HTML 5中，可以使用对元素直接追加charset属性的方式来指定字符编码，如下所示：

两种方法都有效，可以继续使用前面一种方式（通过content元素的属性来指定），但是不能同时混合使用两种方式。在以前的网站代码中可能会存在下面代码所示的标记方式，但在HTML 5中，这种字符编码方式将被认为是错误的，这一点请注意。

从HTML 5开始，对于文件的字符编码推荐使用UTF-8。2.1.3　HTML 5确保的兼容性

HTML 5的语法是为了保证与之前的HTML语法也能够达到最大程度的兼容而设计的。例如，符合“没有

的结束标记”的HTML代码随处可见，HTML 5中并没有把这种情况作为错误来处理，而是允许存在这种情况，但明确规定了这种情况应该怎么处理。

那么，针对这个问题，我们从元素标记的省略、具有boolean值的属性、引号的省略这几方面来详细看一下在HTML 5中是如何确保与之前版本的HTML实现兼容的。

1.可以省略标记的元素

在HTML 5中，元素的标记可以省略。具体来说，分为“不允许写结束标记”、“可以省略结束标记”和“开始标记和结束标记全部可以省略”三种类型。

接着，我们针对这三类情况列举一个元素清单，其中包括本书到现在为止还没有介绍的HTML 5中的新元素（关于这些新元素，2.2节将进行介绍）。

·不允许写结束标记的元素有：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。

·可以省略结束标记的元素有：li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。

·可以省略全部标记的元素有：html、head、body、colgroup、tbody。说明“不允许写结束标记的元素”是指不允许使用开始标记与结束标记将元素括起来的形式，只允许使用“<元素/>”的形式进行书写。例如“
...”的书写方式是错误的，只允许“
”的书写形式。当然，HTML 5之前的
这种写法可以被沿用。“可以省略全部标记的元素”是指该元素可以完全被省略。注意，即使标记被省略了，该元素还是以隐式的方式存在的。例如省略不写body元素时，在文档结构中它还是存在的，可以使用document.body访问。

2.具有boolean值的属性

对于具有boolean值的属性，例如disabled与readonly等，当只写属性而不指定属性值时，表示属性值为true，如果想要将属性值设为false，则可以不使用该属性。另外，要想将属性值设定为true时，也可以将属性名设定为属性值，或将空字符串设定为属性值。

属性值的设定方法可以参考下面的代码示例：

3.省略引号

大家已经知道，在指定属性值的时候，属性值两边加引号时既可以用双引号，也可以用单引号。

HTML 5在此基础上做了一些改进，当属性值不包括空字符串、“<”、“>”、“=”、单引号、双引号等字符时，属性值两边的引号可以省略。如下面的代码所示：2.1.4　标记示例

现在，我们通过前面学到的HTML 5的语法知识来看一个关于HTML 5标记的示例。

代码清单2-1完全是用HTML 5写成的。其中省略了、、等元素。可以通过这个示例复习一下HTML 5的DOCTYPE声明、用元素的charset属性指定字符编码、

元素的结束标记的省略、使用<元素/>的方式来结束元素，以及
元素等本节中所介绍的知识要点。

代码清单2-1　HTML 5标记示例

这段代码是根据HTML 5 语法
编写出来的。

这段代码在Firefox 4浏览器中的运行结果如图2-1所示，另外，本书中如果没有特别说明使用什么浏览器，则使用的都是Firefox 4浏览器。图2-1　HTML 5标记示例2.2　新增的元素和废除的元素

本节将详细介绍HTML 5中新增和废除了哪些元素。2.2.1　新增的结构元素

在HTML 5中，新增以下与结构相关的元素。（1）section元素

section元素表示页面中的一个内容区块，比如章节、页眉、页脚或页面中的其他部分。它可以与h1、h2、h3、h4、h5、h6元素结合使用，标示文档结构。

HTML 5中的代码示例：

HTML 4中的代码示例：

HTML 5中的代码示例：

HTML 4中的代码示例：

aside元素表示article元素的内容之外的、与article元素的内容相关的辅助信息。

HTML 5中的代码示例：

HTML 4中的代码示例：

header元素表示页面中一个内容区块或整个页面的标题。

HTML 5中的代码示例：

HTML 4中的代码示例：

footer元素表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名、创作日期以及创作者联系信息。

HTML 5中的代码示例：

HTML 4中的代码示例：

nav元素表示页面中导航链接的部分。

HTML 5中的代码示例：

HTML 4中的代码示例：

figure元素表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题。

HTML 5中的代码示例：PRC

The People's Republic of China was born in 1949...

HTML 4中的代码示例：

PRC

The People's Republic of China was born in 1949...

main元素表示网页中的主要内容。主内容区域意指与网页标题或应用程序中本页面主要功能直接相关或进行扩展的内容。

HTML 5中的代码示例：

HTML 4中的代码示例：

除了结构元素外，在HTML 5中，还新增以下元素。（1）video元素

video元素用于定义视频，比如电影片段或其他视频流。

HTML 5中的代码示例：

HTML 4中的代码示例：（2）audio元素

audio元素用于定义音频，比如音乐或其他音频流。

HTML 5中的代码示例：

HTML 4中的代码示例：（3）embed元素

embed元素用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等。

HTML 5中的代码示例：

HTML 4中的代码示例：（4）mark元素

mark元素主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。mark元素的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。

HTML 5中的代码示例：

HTML 4中的代码示例：（5）progress元素

progress元素表示运行中的进程，可以使用progress元素来显示JavaScript中耗费时间的函数的进程。

HTML 5中的代码示例：

这是HTML 5中的新增功能，故无法用HTML 4代码来实现。（6）meter元素

meter元素表示度量衡，仅用于已知最大值和最小值的度量。必须定义度量的范围，既可以在元素的文本中，也可以在min/max属性中定义。

HTML 5中的代码示例：

这是HTML 5中的新增功能，故无法用HTML 4代码来实现。（7）time元素

time元素用于表示日期或时间，也可以同时表示两者。

HTML 5中的代码示例：

HTML 4中的代码示例：（8）ruby元素

ruby元素表示ruby注释（中文注音或字符）。

HTML 5中的代码示例：漢 (ㄏㄢˋ)

这也是HTML 5中的新增功能。（9）rt元素

rt元素表示字符（中文注音或字符）的解释或发音。

HTML 5中的代码示例：漢 ㄏㄢˋ

这是HTML 5中的新增功能。（10）rp元素

rp元素在ruby注释中使用，以定义不支持ruby元素的浏览器所显示的内容。

HTML 5中的代码示例：漢 (ㄏㄢˋ)

这是HTML 5中的新增功能。（11）wbr元素

wbr元素表示软换行。wbr元素与br元素的区别是：br元素是此处必须换行，而wbr元素意思就是浏览器窗口或父级元素的宽度足够宽时（没必要换行时），不进行换行，而当宽度不够时，主动在此处进行换行。wbr元素好像对字符型的语言用处比较大，但是对于中文，貌似没多大用处。

HTML 5中的代码示例：

To learn AJAX, you must be familiar with the XMLHttpRequest Object.

这是HTML 5中的新增功能。（12）canvas元素

canvas元素表示图形，比如图表和其他图像。这个元素本身没有行为，仅提供一块画布，但把一个绘图API展现给客户端JavaScript，以使脚本能够把想绘制的东西绘制到这块画布上。

HTML 5中的代码示例：

HTML 4中的代码示例：（13）details元素

details元素表示用户要求得到并且可以得到的细节信息。它可以与summary元素配合使用。summary元素提供标题或图例。标题是可见的，用户点击标题时，会显示细节信息。summary元素应该是details元素的第一个子元素。

HTML 5中的代码示例：

这是HTML 5中的新增功能。（14）datalist元素

datalist元素表示可选数据的列表，与input元素配合使用，可以制作出输入值的下拉列表。

HTML 5中的代码示例：

这是HTML 5中的新增功能。（15）datagrid元素

datagrid元素表示可选数据的列表，它以树形列表的形式显示。

HTML 5中的代码示例：

这是HTML 5中的新增功能。（16）output元素

output元素表示不同类型的输出，比如脚本的输出。

HTML 5中的代码示例：

HTML 4中的代码示例：（17）source元素

source元素为媒介元素（比如

HTML 5中的代码示例：

HTML 4中的代码示例：（18）dialog元素

dialog元素表示对话框。

HTML 5中的代码示例：

·HTML 5中新增很多input元素的类型，现列举如下：

·email：email类型表示必须输入e-mail地址的文本输入框。

·url：url类型表示必须输入URL地址的文本输入框。

·number：number类型表示必须输入数值的文本输入框。

·range：range类型表示必须输入一定范围内数字值的文本输入框。

·Date Pickers：HTML 5拥有多个可供选取日期和时间的新型输入文本框。

·date：选取日、月、年。

·month：选取月、年。

·week：选取周和年。

·time：选取时间（小时和分钟）。

·datetime：选取时间、日、月、年（UTC时间）。

·datetime-local：选取时间、日、月、年（本地时间）。2.2.4　废除的元素

由于各种原因，在HTML 5中废除了很多元素，简单介绍如下。

1.能使用CSS替代的元素

对于basefont、big、center、font、s、strike、tt、u等元素，由于它们的功能都是纯粹为画面展示服务的，而HTML 5中提倡把画面展示性功能统一放在CSS样式表中统一编辑，所以将这些元素废除，使用编辑CSS、添加CSS样式表的方式进行替代。其中font元素允许由“所见即所得”的编辑器进行插入，s元素、strike元素可以由del元素进行替代，tt元素可以由CSS的font-family属性进行替代。

2.不再使用frame框架

对于frameset元素、frame元素与noframes元素，由于frame框架对网页可用性存在负面影响，在HTML 5中已不支持frame框架，只支持iframe框架，或者由服务器方创建的由多个页面组成的复合页面的形式，同时将这三个元素废除。

3.只有部分浏览器支持的元素

对于applet、bgsound、blink、marquee等元素，由于只有部分浏览器支持这些元素，特别是bgsound元素以及marquee元素，只被Internet Explorer所支持，所以在HTML 5中被废除。其中applet元素可由embed元素或object元素进行替代，bgsound元素可由audio元素进行替代，marquee可以由JavaScript编程的方式所替代。

4.其他被废除的元素

其他被废除元素还有：

·废除rb元素，使用ruby元素替代。

·废除acronym元素，使用abbr元素替代。

·废除dir元素，使用ul元素替代。

·废除isindex元素，使用form元素与input元素相结合的方式替代。

·废除listing元素，使用pre元素替代。

·废除xmp元素，使用code元素替代。

·废除nextid元素，使用GUIDS替代。

·废除plaintext元素，使用"text/plian"MIME类型替代。2.3　新增的属性和废除的属性

在HTML 5中，在增加和废除很多元素的同时，也增加和废除了很多属性，本节对于这些增加和废除的属性进行简单介绍。2.3.1　新增的属性

1.表单相关的属性

新增的与表单相关的元素如下：

·可以对input（type=text）、select、textarea与button元素指定autofocus属性。它以指定属性的方式让元素在画面打开时自动获得焦点。

·可以对input元素（type=text）与textarea元素指定placeholder属性，它会对用户的输入进行提示，提示用户可以输入的内容。

·可以对input、output、select、textarea、button与fieldset指定form属性，声明它属于哪个表单，然后将其放置在页面上任何位置，而不是表单之内。

·可以对input元素（type=text）与textarea元素指定required属性。该属性表示在用户提交的时候进行检查，检查该元素内一定要有输入内容。

·为input元素增加了几个新的属性：autocomplete、min、max、multiple、pattern与step。同时还有一个新的list元素与datalist元素配合使用。datalist元素与autocomlete属性配合使用。multiple属性允许在上传文件时一次上传多个文件。

·为input元素与button元素增加了新属性formaction、formenctype、formmethod、formnovalidate与formtarget，它们可以重载form元素的action、enctype、method、novalidate与target属性。为fieldset元素增加了disabled属性，用于把它的子元素设为disabled（无效）状态。

·为input元素、button元素、form元素增加了novalidate属性，该属性可以取消提交时进行的有关检查，表单可以被无条件提交。

·为所有可使用标签（label元素）的表单元素（包括非隐藏的input元素（type属性值不等于hidden)、button元素、select元素、textarea元素、meter元素、output元素、progress元素以及keygen元素）定义一个labels属性，属性值为一个NodeList对象，代表该元素所绑定的标签元素所构成的集合。

·可以在标签（label元素）内部放置一个表单元素，并且通过该标签的control属性访问该表单元素。

·针对input元素与textarea元素，在HTML 5中增加SelectionDirection属性。当用户在这两个元素中用鼠标选取部分文字时，可以使用该属性来获取选取方向。当用户正向选取文字时，该属性值为“forward”，当用户反向选取文字时，该属性值为“backward”。当用户没有选取任何文字时，该属性值为“forward”。

·对复选框（checkbox元素）添加indeterminate属性，以说明复选框处于“尚未明确是否选取”状态。

·对类型为image的input元素添加用于指定图片按钮中图片高度的height属性与图片宽度的width属性。

·对textarea元素新增用于限定可输入文字个数的maxlength属性与用于指定表单提交时是否在文字换行处添加换行符的wrap属性。

2.链接相关的属性

新增的与链接相关的属性如下：

·为a与area元素增加了media属性、download属性以及ping属性，其中media属性规定目标URL是为什么类型的媒介/设备进行优化的，download属性用于让用户下载目标链接所指向的资源，而不是直接打开该目标链接，这些属性均只能在href属性存在时使用。

·为area元素增加了hreflang属性与rel属性，以保持与a元素、link元素的一致。

·为link元素增加了新属性sizes。该属性可以与icon元素结合使用（通过rel属性），该属性指定关联图标（icon元素）的大小。

·为base元素增加了target属性，主要目的是保持与a元素的一致性。

3.其他属性

除了上面介绍的与表单和链接相关的属性外，HTML 5还增加了下面的属性：

·为ol元素增加start属性与reversed属性，其中start属性定义列表的开始编号，reversed属性指定列表倒序显示。

试读结束[说明：试读内容隐藏了图片]

下载完整电子书