作者：传智播客高教产品研发部
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
HTML5+CSS3网站设计基础教程试读：
序言|PREFACE
为什么出这本书
数年前，传智播客团队是一群默默工作在IT岗位的程序员；现如今，为了同一个梦想，我们聚集在一起，为“改变中国的IT教育”而全力以赴。为什么会有这样的梦想，是因为在我们实现各自梦想的路上，不断地听到这样的来自IT毕业生的心声。“我们专业的课程太枯燥了，太多理论方面的课程，并且这些理论听起来都是很难理解的，同学们学完了都是一头雾水。”“终于毕业了，学了四年的计算机课程，我们班上大部分同学都不知道能干什么，感觉好像什么都学了，但却什么都不会干！”“实习单位根本就不让我们干活，最多只是让我们阅读代码、修改文档，说我们什么都不会，不敢让我们参与实际工作。想想自己辛苦学了四年连实习的要求都达不到，心里很不是滋味。”“面试的时候，用人单位问能做什么，做过什么项目，我们回答不上来，面试过程中问到的很多问题，我们连听都没有听过。”
……
这些心声并不是个别毕业生所表达的，而是中国高等教育反映出的一种普遍现象。我们并非否定中国高校的IT教育，而是想在IT教育的路上尽一份自己的绵薄之力。由于我国正处在市场经济转型期，目前高校的IT教育与企业的真实需求存在一定程度的脱节，这也给高等教育提出了一项亟待解决的课题，如果高校的相关课程更新滞后，那么毕业生毕业即失业的困境和现象仍将存在。出现这样的困境，其中主要的一个原因在于教材知识更新的速度过于缓慢，导致学生所学的知识与现在的社会需求严重不符，无法及时地向学生传授企业需要的专业技能。面对目前高校IT教育所存在的问题，教育部颁布的《关于全面提高高等教育质量的若干意见》提出了大力提升人才培养水平、全面提高高等教育质量的目标。很庆幸，我们能有机会与高校共同参与其中，我们所做的事情就是配合高校完成教学改革的目标和任务。
传智播客作为一家专业的IT培训机构，一直将“改变中国的IT教育”作为自己的事业，并为此拼搏了10年。在这10年期间，传智播客默默耕耘，陆续出版了计算机书籍20多册、教学视频数十套、发表各类技术文章数百篇，直接培养的软件工程师就有10万多名，被传智播客公开的免费学习视频影响的在校学生更是多达数百万人。毫不夸张地说，传智播客已经为IT学子开辟了一条全新的求知之路。
10年的沉淀让传智播客拥有了系统完善的IT培训课程体系。如今，传智播客决定把这套精品课程内容全部公开，开发成符合高等教育实际教学的教科书并输送至高校，解决眼下高校计算机相关课程陈旧的问题。另外，面向高校计算机专业的老师，传智播客还将提供相应培训服务，让高校老师通过培训提高授课技能，从而将专业、实用的知识传授给学生。为了让广大师生在学习传智播客课程的同时能达到最好的效果，公司投入巨额资金，用于为高校师生提供以下配套学习资源与服务。
针对高校教师的服务：
1．传智播客基于近10年的教育培训经验，精心设计了“教材+教案+授课资源+考试系统+题库+教学辅助案例”的一站式IT就业应用课程包，方便教师进行教学，缩短教师的备课时间，减轻教师的教学压力，有效提高教学质量。
2．本书配套源代码，下载网址：http://book.boxuegu.com/html5。
3．本书配备了传智播客一线讲师录制的教学视频，按本书知识结构体系部署到了教学辅助平台博学谷（http://www.boxuegu.com）上，可以作为教学资源使用，也可以作为备课参考。
高校教师如需索要配套教学资源，请关注博学谷师资服务平台，扫描下方二维码关注微信公众平台索取。
针对高校学生的服务：
1．在使用本书学习过程中，遇到任何问题，请找问答精灵（http://ask.boxuegu.com），它是一个有问必答的IT社区，平台上的专业答疑辅导老师承诺工作时间3小时内答复您学习IT中遇到的专业问题。读者也可以通过扫描下面的二维码，关注问答精灵微信公众平台，浏览其他学习者在学习中分享的问题和收获。
2．学习太枯燥，想了解其他学校的伙伴都是怎么学习的？你可以加入泛IT学习社团联盟。“泛IT社团”是传智播客联合行业机构发起的公益计划，专门面向对IT有兴趣的大学生提供免费的学习资源和学习服务支持，已有超过20多万名学习者获益。在这里，你可以接触到五湖四海的学习IT的伙伴，大家在一起参加兴趣实践项目活动，在活动中相互切磋交流。想知道有哪些免费的资源和服务以及关于IT的有趣故事吗？联系我们（QQ号3074960441），一起来“玩”IT吧。
希望通过我们的努力，在不久的将来，高校能够真正培养出符合企业所需的实用型人才，IT学子们不再为就业而迷惘！
关于本书
作为一种技术的入门教程，最重要也最难的一件事情就是要将一些非常复杂、难以理解的思想和问题简单化，让读者能够轻松理解并快速掌握。本教材对每个知识点都进行了深入分析，并针对每个知识点精心设计了相关案例，然后模拟这些知识点在实际工作中的运用，真正做到了知识的由浅入深、由易到难。
本教材共分为10个章节，下面分别对每个章节进行简单的介绍。
第1章主要介绍HTML5的发展历程、优势、浏览器支持情况，HTML5语法，文本控制标记，图像标记，超链接标记等。通过本章的学习，读者需要了解HTML5文档的基本结构，熟练运用文本、图像及超链接标记。
第2章主要介绍HTML5页面元素及属性，包括列表元素、结构元素、分组元素、页面交互元素、文本层次语义元素、全局属性。通过本章的学习，读者能够加深对HMTL5页面元素的理解，为后面章节的学习打下基础。
第3章主要介绍CSS3的发展历史、浏览器支持情况，CSS样式规则、引入CSS样式表的方式、CSS基础选择器，文本样式属性，CSS高级特性等。通过本章的学习，读者需要充分理解CSS所实现的结构与表现的分离以及CSS样式的优先级规则，熟练使用CSS控制页面中的字体和文本外观样式。
第4章主要介绍CSS3选择器，包括属性选择器、关系选择器、结构化伪类选择器、伪元素选择器，另外还介绍了链接伪类。通过本章的学习，读者应该能够熟练使用各种选择器选择页面元素。
第5章主要介绍CSS盒子模型，包括盒子模型概述，盒子模型相关属性，背景属性，另外还介绍了CSS3渐变属性。通过本章的学习，读者需要熟悉盒子模型的构成，熟练运用盒子模型相关属性控制网页中的元素。
第6章主要介绍元素的浮动与定位，包括设置与清除浮动的方法，overflow属性，元素的几种定位模式，元素的类型与转换。通过本章的学习，读者应该能够熟练地运用浮动和定位进行网页布局，掌握清除浮动的几种常用方法，理解元素的类型与转换。
第7章主要介绍HTML5表单，包括表单的构成与创建，表单属性，input元素及属性，其他表单元素，CSS控制表单样式。通过本章的学习，读者需要掌握常用的表单控件及其相关属性，并能够熟练地运用表单组织页面元素。
第8章主要介绍HTML5多媒体技术，包括HTML5多媒体特性，多媒体的支持条件，嵌入音频和视频等。通过本章的学习，读者需要了解HTML5多媒体文件的特性，熟悉常用的多媒体格式，掌握在页面中嵌入音视频文件的方法。
第9章主要介绍CSS3高级应用，包括过渡、变形、动画。通过本章的学习，读者应该能够熟练地使用相关属性实现元素的过渡、平移、缩放、倾斜、旋转及动画等特效。
第10章为实战开发，结合前面学习的基础知识，带领读者开发一个电商网站首页面。读者可以按照教材中的思路和步骤动手操作，以更好地掌握网页设计与制作的流程和思路。
在上面所提到的10个章节中，第1～9章主要是针对HTML5与CSS3基础进行的讲解，每一章的最后一个小节均为本章的阶段案例，在学习这些章节时，初学者可以通过阶段案例加深对本章知识点的理解。第10章为实战开发，读者需要仔细体会其中的制作思路和技巧。
在学习本书时，首先要做到对知识点理解透彻，其次一定要亲自动手去练习教材中所提供的案例，因为在学习网页制作的过程中动手实践是非常重要的。对于一些非常难以理解的知识点也可以选择通过案例的练习来学习，如果实在无法理解教材中所讲解的知识，建议初学者不要纠结于某一个知识点，可以先往后学习。通常来讲，看了后面一两个小节的内容后再回来学习之前不懂的知识点一般就都能理解了。
致谢
本教材的编写和整理工作由传智播客教育科技有限公司高教产品研发部完成，主要参与人员有吕春林、张绍娟、王哲、李丽亚、乔婷婷、连蕊蕊、张鹏、李凤辉、赵艳秋、刘静、刘晓强、李晨、贺叶铭，全体人员在这近一年的编写过程中付出了很多辛勤的汗水。除此之外，还有传智播客600多名学员也参与到了教材的试读工作中，他们站在初学者的角度对教材提供了许多宝贵的修改意见，在此一并表示衷心的感谢。
意见反馈
尽管我们尽了最大的努力，但教材中难免会有不妥之处，欢迎各界专家和读者朋友们来信来函给予宝贵意见，我们将不胜感激。您在阅读本书时，如发现任何问题或有不认同之处可以通过电子邮件与我们取得联系。
请发送电子邮件至：itcast_book@vip.sina.com传智播客教育科技有限公司高教产品研发部2015-12-18于北京第1章初识HTML5学习目标
● 了解HTML5发展历程，熟悉HTML5浏览器支持情况。
● 理解HTML5基本语法，掌握HTML5语法新特性。
● 掌握文本控制标记、图像标记、超链接标记，能够制作简单的网页。
HTML5是超文本标记语言（HyperText Markup Language）的第5代版本，目前还处于推广阶段。经过了Web 2.0时代，基于互联网的应用已经越来越丰富，同时也对互联网应用提出了更高的要求。HTML5正在引领时代的潮流，必将开创互联网的新时代。本章将对HTML5的基本结构和语法、文本控制标记、图像标记及超链接标记进行详细讲解。1.1 HTML5概述
随着时代的发展，统一的互联网通用标准显得尤为重要。在HTML5之前，由于各个浏览器之间的标准不统一，给网站开发人员带来了很大的麻烦。HTML5的目标就是将Web带入一个成熟的应用平台。在HTML5平台上，视频、音频、图像、动画及同电脑的交互都被标准化。本节将针对HTML5发展历程、优势、浏览器支持情况及如何创建HTML5页面进行讲解。1.1.1 HTML5发展历程
HTML的出现由来已久，1993年HTML首次以因特网的形式发布。20世纪90年代，HTML快速发展，从2.0版到3.2版、4.0版，再到1999年的4.01版。随着HTML的发展，万维网联盟（World Wide Web Consortium，W3C）掌握了对HTML规范的控制权，负责后续版本的制定工作。
然而，在快速发布了HTML的4个版本后，业界普遍认为HTML已经穷途末路，对Web标准的焦点也开始转移到了XML和XHTML上，HTML被放在了次要位置。不过，在此期间HTML体现了顽强的生命力，主要的网站内容还是基于HTML的。为了支持新的Web应用，克服现有的缺点，HTML迫切需要添加新的功能，制定新规范。
为了能继续深入发展HTML规范，在2004年，一些浏览器厂商联合成立了WHATWG工作组。它们创立了HTML5规范，并开始专门针对Web应用开发新功能。Web 2.0也是在那个时候被提出来的。
2006年，W3C组建了新的HTML工作组，明智地采纳了WHATWG的意见，并于2008年发布了HTML5的工作草案。由于HTML5能解决实际的问题，所以在规范还未定稿的情况下，各大浏览器厂家已经开始对旗下产品进行升级以支持HTML5的新功能。这样，得益于浏览器的实验性反馈，HTML5规范也得到了持续地完善，并以这种方式迅速融入到了对Web平台的实质性改进中。
2014年10月29日，万维网联盟宣布，经过8年的艰辛努力，HTML5标准规范终于制定完成，并公开发布。HTML5将会逐渐取代HTML 4.01、XHTML 1.0标准，以期能在互联网应用迅速发展的同时，使网络标准达到符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容。1.1.2 HTML5的优势
从HTML4.0、XHTML到HTML5，从某种意义上讲，这是HTML描述性标记语言的一种更加规范的过程。因此，HTML5并没有给开发者带来多大的冲击。但HTML5增加了很多非常实用的新功能和新特性，下面具体介绍HTML5的一些优势。
1．解决了跨浏览器问题
在HTML5之前，各大浏览器厂商为了争夺市场占有率，会在各自的浏览器中增加各种各样的功能，并且不具有统一的标准。使用不同的浏览器，常常看到不同的页面效果。在HTML5中，纳入了所有合理的扩展功能，具备良好的跨平台性能。针对不支持新标签的老式IE浏览器，只需简单地添加JavaScript代码就可以使用新的元素。
2．新增了多个新特性
HTML语言从1.0到5.0经历了巨大的变化，从单一的文本显示功能到图文并茂的多媒体显示功能，许多特性经过多年的完善，已经发展成为一种非常重要的标记语言。HTML5新增的特性如下。
● 新的特殊内容元素，比如header、nav、section、article、footer。
● 新的表单控件，比如calendar、date、time、email、url、search。
● 用于绘画的canvas元素。
● 用于媒介回放的video和audio元素。
● 对本地离线存储的更好支持。
● 地理位置、拖曳、摄像头等API。
3．用户优先的原则
HTML5标准的制定是以用户优先为原则的，一旦遇到无法解决的冲突时，规范会把用户放在第一位。另外，为了增强HTML5的使用体验，还加强了以下两方面的设计。
● 安全机制的设计
为确保HTML5的安全，在设计HTML5时做了很多针对安全的设计。HTML5引入了一种新的基于来源的安全模型，该模型不仅易用，而且对不同的API（Application Programming Interface，应用程序编程接口）都通用。使用这个安全模型，不需要借助于任何不安全的hack就能跨域进行安全对话。
● 表现和内容分离
表现和内容分离是HTML5设计中的另一个重要内容。实际上，表现和内容的分离早在HTML4.0中就有设计，但是分离的并不彻底。为了避免可访问性差、代码高复杂度、文件过大等问题，HTML5规范中更细致、清晰地分离了表现和内容。但是考虑到HTML5的兼容性问题，一些陈旧的表现和内容的代码还是可以兼容使用的。
4．化繁为简的优势
作为当下流行的通用标记语言，HTML5尽可能地简化，严格遵循了“简单至上”的原则，主要体现在这几个方面：
● 新的简化的字符集声明；
● 新的简化的DOCTYPE；
● 简单而强大的HTML5 API；
● 以浏览器原生能力替代复杂的JavaScript代码。
为了实现这些简化操作，HTML5规范需要比以前更加细致、精确。为了避免造成误解，HTML5对每一个细节都有着非常明确的规范说明，不允许有任何的歧义和模糊出现。1.1.3 HTML5浏览器支持情况
现今浏览器的许多新功能都是从HTML5标准中发展而来的。目前常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等，如图1-1所示。通过对这些主流Web浏览器的发展策略的调查，发现它们都在支持HTML5上采取了措施。图1-1 常见浏览器图标
1．IE浏览器
2010年3月16日，微软于MIX10技术大会上宣布，其推出的IE9浏览器已经支持HTML5。同时还声称，随后将更多地支持HTML5新标准和CSS3新特性。
2．火狐浏览器
2010年7月，Mozilla基金会发布了即将推出的Firefox4浏览器的第一个早期测试版。该版本中的Firefox浏览器中进行了大幅改进，包括新的HTML5语法分析器，以及支持更多HTML5形式的控制等。从官方文档来看，Firefox4对HTML5是完全级别的支持。目前，包括在线视频、在线音频在内的多种应用都已在该版本中实现。
3．Google浏览器
2010年2月19日，谷歌Gears项目经理伊安·费特通过微博宣布，谷歌将放弃对Gears浏览器插件项目的支持，以重点开发HTML5项目。据费特表示，目前在谷歌看来，Gears应用与HTML5的诸多创新非常相似，并且谷歌一直积极发展HTML5项目。因此，只要谷歌不断以加强新网络标准的应用功能为工作重点，那么为Gears增加新功能就无太大意义了。另外，Gears面临的需求也在日益下降，这也是谷歌做出调整的重要原因。
4．Safari浏览器
2010年6月7日，苹果在开发者大会的会后发布了Safari5，这款浏览器支持10个以上的HTML5新技术，包括全屏幕播放、HTML5视频、HTML5地理位置、HTML5切片元素、HTML5的可拖动属性、HTML5的形式验证、HTML5的Ruby、HTML5的Ajax 历史和WebSocket字幕。
5．Opera浏览器
2010年5月5日，Opera软件公司首席技术官，号称“CSS之父”的Hakon Wium Lie认为，HTML5和CSS3将是全球互联网发展的未来趋势，目前包括Opera在内的诸多浏览器厂商，纷纷研发HTML5相关产品，Web的未来属于HTML5。
综上所述，目前这些浏览器纷纷朝着HTML5的方向迈进，HTML5的时代即将来临。1.1.4 创建第一个HTML5页面
网页制作过程中，为了开发方便，通常我们会选择一些较便捷的工具，如Editplus、notepad++、sublime、Dreamweaver等。实际工作中，最常用的网页制作工具是Dreamweaver。本书中的案例将全部使用Adobe Dreamweaver CS6。接下来使用Dreamweaver CS6来创建一个HTML5页面，具体步骤如下。（1）打开Dreamweaver CS6，选择菜单栏中的“文件”→“新建”命令，弹出“新建文档”对话框，如图1-2所示。在“页面类型”列表中选择“HTML”选项，并在右下角的“文档类型”下拉菜单中选择“HTML5”，如图1-3所示。图1-2 执行“文件”→“新建”命令图1-3 新建HTML5默认文档（2）单击“创建”按钮，将会新建一个HTML5默认文档。切换到“代码”视图，这时在文档窗口中会出现Dreamweaver自带的代码，如图1-4所示。图1-4 HTML5文档代码视图窗口（3）修改HTML5文档标题，将代码
例1-1 example01.html
1 <！doctype html>
2
3
4
5
6
7
8 这是我的第一个HTML5页面哦
9
10
（4）在菜单栏中选择【文件】→【保存】选项，其快捷键为Ctrl+S。接着，在弹出来的“另存为”对话框中选择文件的保存地址并输入文件名即可保存文件。例如，本书将文件命名为example01.html，保存在D盘“HTML5+CSS3”文件夹下“教材案例”的“chapter01”文件夹中，如图1-5所示。图1-5 “另存为”对话框（5）在谷歌浏览器中运行example01.html，效果如图1-6所示。图1-6 第一个HTML5页面效果此时，浏览器窗口中将显示一段文本，第一个简单的HTML5页面创建完成。
注意：
由于谷歌浏览器对HTML5及CSS3的兼容性支持较好，而且调试网页非常方便，所以在HTML5网页制作过程中谷歌浏览器是最常用的浏览器。本书涉及的案例将全部在谷歌浏览器中运行。1.2 HTML5基础
HTML5是新的HTML标准，是对HTML及XHTML的继承与发展，越来越多的网站开发者开始使用HTML5构建网站。学习HTML5首先需要了解HTML5的语法基础。本节将针对HTML5文档基本格式、HTML5语法、HTML标记及其属性、HTML5文档头部相关标记进行讲解。1.2.1 HTML5文档基本格式
学习任何一门语言，都要首先掌握它的基本格式，就像写信需要符合书信的格式要求一样。HTML5标记语言也不例外，同样需要遵从一定的规范。接下来将具体讲解HTML5文档的基本格式。
使用Dreamweaver新建HTML5默认文档时，会自带一些源代码，如例1-2所示。
例1-2 example02.html
1 <！doctype html>
2
3
4
5
6
7
8
9
这些自带的源代码构成了HTML5文档的基本格式，主要包括<！doctype>文档类型声明、根标记、
头部标记、主体标记，具体介绍如下。1．<！doctype>标记
<！doctype>标记标记位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML标准规范，HTML5文档中的DOCTYPE声明非常简单，代码如下：
<！doctype html>
只有在开头处使用<！doctype>声明，浏览器才能将该网页作为有效的HTML文档，并按指定的文档类型进行解析。使用HTML5的DOCTYPE声明，会触发浏览器以标准兼容模式来显示页面。
2．标记
标记位于<！doctype>标记之后，也称为根标记，用于告知浏览器其自身是一个HTML文档，标记标志着HTML文档的开始，标记标志着HTML文档的结束，在它们之间的是文档的头部和主体内容。
3．
标记标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在标记之后，主要用来封装其他位于文档头部的标记，例如6
7
8
传智播客云课堂上线了
9
更新时间：2015年 07月 28日 14时 08分 来源：传智播客
10
11
传智云课堂是传智播客在线教育平台，可以实现晚上在家学习、在线直播教学、实时互动辅导等多种功能，专注于网页、平面、UI设计以及Web前端的培训。
12
13
在例1-3中，使用了不同的标记来定义网页，如标题标记
、水平线标记
、段落标记
。
运行例1-3，效果如图1-7所示。
2．注释标记
在HTML中还有一种特殊的标记——注释标记。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标记。其基本语法格式为：
<！—— 注释语句 ——>图1-7 标记的使用
例如，下面为
标记添加一段注释：
这是一段普通的段落。
<！——这是一段注释，不会在浏览器中显示。——>需要说明的是，注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，可以被下载到用户的计算机上，查看源代码时就可以看到。1.2.4 标记的属性
使用HTML 制作网页时，如果想让 HTML标记提供更多的信息，例如，希望标题文本的字体为“微软雅黑”且居中显示，段落文本中的某些名词显示为其他颜色加以突出。此时仅仅依靠 HTML标记的默认显示样式已经不能满足要求，需要使用HTML标记的属性加以设置。其基本语法格式为：
<标记名属性1="属性值1"属性2="属性值2"…> 内容
在上面的语法中，标记可以拥有多个属性，必须写在开始标记中，位于标记名后面。属性之间不分先后顺序，标记名与属性、属性与属性之间均以空格分开。任何标记的属性都有默认值，省略该属性则取默认值。例如：
标题文本
其中align为属性名，center为属性值，表示标题文本居中对齐，对于标题标记还可以设置文本左对齐或右对齐，对应的属性值分别为left和right。如果省略align属性，标题文本则按默认值左对齐显示，也就是说
等价于。了解了标记的属性，下面在例1-3的基础上通过标记的属性对网页进一步修饰，如例1-4所示。
例1-4 example04.html
1 <！doctype html>
2
3
4
5
6
7
8
传智播客云课堂上线了
9
更新时间：2015年 07月 28日 14时 08分 来源：传智播客
10
11
传智云课堂是传智播客在线教育平台，可以实现晚上在家学习、在线直播教学、实时互动辅导等多种功能，专注于网页、平面、UI设计以及Web前端的培训。
12
13
在例1-4的第8行代码，将标题标记
的align属性设置为center，使标题文本居中对齐，第9行代码中同样使用align属性使段落文本居中对齐。另外，第10行代码使用水平线标记的size和color属性设置水平线为特定的粗细和颜色。
运行例1-4，效果如图1-8所示。图1-8 使用标记的属性
通过例1-4可以看出，在页面中使用标记时，想控制哪部分内容，就用相应的标记选择它，然后利用标记的属性进行设置。
书写HTML页面时，经常会在一对标记之间再定义其他的标记，如例1-4中的第11行代码，在
标记中包含了标记。在HTML中，把这种标记间的包含关系称为标记的嵌套。例1-4中第11行代码的嵌套结构为：
传智云课堂是
传智播客
在线教育平台，可以实现晚上在家学习、在线直播教学、实时互动辅导等多种功能，专注于网页、平面、UI设计以及Web前端的培训。
需要注意的是，在标记的嵌套过程中，必须先结束最靠近内容的标记，再按照由内及外的顺序依次关闭标记。例如要想使段落文本加粗倾斜，可以将加粗标记和倾斜标记嵌套在段落标记 中，示例如下。 我们正在学习标记的嵌套。
我们正在学习标记的嵌套。
<！——正确的嵌套顺序——>需要说明的是，不合理的嵌套可能在一个甚至所有浏览器中通过，但是如果浏览器升级，新的版本不再允许这种违反标准的做法，那么修改源代码就会非常烦琐。
注意：
本书在描述标记时，经常会用到“嵌套”一词，所谓标记的嵌套其实就是一种包含关系。其实网页中所显示的内容都嵌套在
标记中，而又嵌套在标记中。多学一招：何为键值对？
在HTML开始标记中，可以通过“属性="属性值"”的方式为标记添加属性，其中“属性”和“属性值”是以“键值对”的形式出现的。
所谓“键值对”，简单地说即为对“属性”设置“值”。它有多种表现形式，如color="red"、width：200px；等，其中color和width即为“键值对”中的“键”（英文key），red和200px为“键值对”中的“值”（英文value）。“键值对”广泛地应用于编程中，HTML属性的定义形式“属性="属性值"”只是“键值对”中的一种。1.2.5 HTML5文档头部相关标记
制作网页时，经常需要设置页面的基本信息，如页面的标题、作者和其他文档的关系等。为此HTML提供了一系列的标记，这些标记通常都写在head标记内，因此被称为头部相关标记。接下来将具体介绍常用的头部相关标记。
1．设置页面标题标记
了解了页面标题标记
6
7
8
标题标记 title用于显示网页标题名称，HTML文档的标题将显示在浏览器的标题栏里。
9
10