书名：HTML+CSS+JavaScript网页制作从入门到精通
ISBN：978-7-115-56523-7
本书由人民邮电出版社发行数字版。版权所有，侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。
如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。
著 宋丽娜 史笑颜 刘西杰 晁代远
责任编辑 赵 轩
人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
网址 http://www.ptpress.com.cn
读者服务热线：(010)81055410
反盗版热线：(010)81055315
本书从零开始，全面讲解开发网页的全过程，使读者能够迅速掌握核心知识点及对应的编程能力。
本书共有17 章内容，第1 章～第7 章介绍 HTML 中常用的标签；第8 章～第11 章介绍了 CSS 中的常见样式，其中包括浮动和定位两种网页布局方式；第 12 章介绍了 HTML5 中的新增元素和属性；第 13 章介绍了CSS3 中的新增属性；第14 章介绍了 flex 布局的用法，并用案例的方式讲解了移动端网页的实现方法；第15 章和第16 章讲解了 JavaScript 的基础知识并提供了大量示范案例；第17 章以一个商业网站为案例，对全书重点内容进行综合实战练习，案例中使用了HTML+CSS+JavaScript 的核心知识点。
本书提供配套视频教程，并附有HTML、CSS、JavaScript 的技巧精讲。书中提供的练习题和章节任务，可以帮助读者及时进行自我检测，查漏补缺。
本书知识点全面、讲解详细，适合零基础的编程初学者阅读，也适合具备基础知识、想要提升编程能力的读者阅读。
10多年前，互联网在国内开始流行。其中，网页作为互联网的主要媒介受到广泛的关注。由于当时网速的限制，网页主要承载文本、图像等简单数据信息，使用Dreamweaver或Frontpage软件，即可轻松制作网页。而今天，互联网领域已经改变了太多，在软件上点几下、拖几下即可制作完成整个网站的方法已经完全不适用了。现在的网页制作领域综合了多种技术，网页制作三大工具—— HTML、CSS、JavaScript成为网站开发者必学的基础语言。本书2012年改版后，首印上市一周就销售一空，4年来重印20多次，当当网络书店评论超过8000条。2016年第三次改版，4年中重印多次。在此期间，HTML和CSS不断地在进行更新换代，书中的一些内容已不能符合当前的环境。本次改版，删掉了书中滞后的知识点，增加了HTML5与CSS3的最新内容；应广大读者朋友的要求和反馈，本书增加了当前最流行的flex布局以及移动端网页的案例；为了增加案例代码的可读性，本次改版将难度较大的案例进行了拆分讲解，使读者更易理解书中的重点和难点。
本书从网页制作的实际角度出发，将所有HTML、CSS和JavaScript元素进行归类；每个标记的语法、属性和参数都有完整详细的说明；内容信息量大，知识结构完善；大量实用示例的全部语法都采用真实案例进行分析讲解，每一个知识点均相应配以一个实例。通过本书，读者可以边分析代码，边查看结果，以一种可视化的方式来学习语言，避免了单纯学习语法的枯燥与乏味。
本书是集体努力的结晶，许多从事网页教学工作的教师和具有大型商业网站建设经验的网页设计师为本书提供了许多实用的见解。由于时间所限，书中疏漏之处在所难免，恳请广大读者朋友批评指正。欢迎读者发送邮件至18811132138@163.com与我们联系，帮助我们改正提高。
技术只有多交流才能更快进步。本书为读者创建了一个高质量的学习交流平台。如果大家有任何问题，可以加QQ群（群号：544028317）提问和交流。QQ群将提供案例源代码、课件PPT、视频讲解等资料，辅助读者达成更好的学习效果。
本书配套的所有资源，包括案例源代码、课件PPT、视频讲解等，可以到QQ群（群号：544028317）进行下载。
在当今社会中，网络已成为人们生活的一部分，网页设计技术是学习计算机的重要内容之一。在计算机上看到的所有网页、用的微信小程序，以及一部分App的页面部分都是使用HTML+CSS+JavaScript完成的。其中，HTML语言用来搭建网页的结构以及内容，是网页效果实现的第一步。本章将带领读者准备网页编写的环境，介绍HTML的基本概念和编写方法，使读者对HTML有个初步的了解，从而为后面的学习打下基础。
学习目标
HTML的英文全称是Hyper Text Markup Language，即超文本标记语言，也是全球广域网上描述网页内容和外观的标准。HTML从1.0到5.0经历了巨大的变化，从单一的文本显示功能到多功能互动，经过多年的完善，已经成为一款非常成熟的标记语言。本书提到的HTML5指的就是HTML的第五个版本。
HTML作为一种标记语言，本身不能显示在浏览器中，经过浏览器的解释和编译，才能正确地反映HTML标记语言的内容。网页文件本身是一种文本文件，网页制作人员通过在文本文件中添加标记符，告诉浏览器如何显示其中的内容，如文字的大小、字体、颜色，图像的显示方式等。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容。
对于出错的标记浏览器不能指出其错误，编程人员只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不同的解释，因而可能会有不同的显示效果。
HTML标签是由尖括号包围的关键词，如h1是一个表明标题的关键词，给 h1加上尖括号，就成为<h1>标签。HTML标签经常成对出现，如<h1>和</h1>，第一个标签是开始标签，第二个标签是结束标签。
一个html元素通常是由一个开始标签、内容和一个结束标签组成的。结束标签中要用斜杠“/”表示元素结束，如图1-1所示。
图1-1 元素结构
HTML标签可以设置属性，属性一般设置在开始标签中。属性的作用是给元素添加附加信息，它总是以属性名="属性值"的形式出现，一个元素可以有多个属性，语法如下。
<元素名 属性名1="值1"属性名2="值2"></元素名>
【例1-1】
创建一个h1元素，为其设置id属性，属性值为title。
<h1 id="title">我是标题元素</h1>
提示
在使用中，“标签”和“元素”之间并不做严格区分。在本书中，<p>标签等同于p元素。
HTML文档是由HTML标签定义的，它必须具备正确的结构才能够在浏览器上显示出来。
语法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>说明：
<!DOCTYPE html>声明位于HTML文档的第一行，用于告知浏览器文档所使用的HTML规范。
<html>标签是所有的HTML文档都应该有的标签，<html>标签可以包含<head>和<body>两部分。
<head>标签内包含整个网页的信息。
<title>标签用于定义文档的名字，通常出现在浏览器窗口的标题栏或状态栏中。
<meta>标签通常用于指定网页的描述及其他元数据。<meta>标签的charset属性告知浏览器此网页的字符编码格式，如charset="UTF-8"表示此网页遵循万国码(unicode)的编码标准。
<body>标签用来指明文档的主体区域，网页所要显示的内容都放在这个标记内，其结束标记</body>标签指明主体区域的结束。
网页是在浏览器上呈现的。作为网页的载体，目前较受欢迎的浏览器有Chrome、Mozilla Firefox、Microsoft Edge、Opera、Safari等。本书选择Chrome浏览器进行讲解。Chrome的界面简洁，渲染速度快，并且已经有了很完善的开发者工具，是开发者常用的浏览器。在Chrome官方下载地址可以免费下载Chrome的安装程序，如图1-2所示。
图1-2 下载Chrome浏览器
作为开发者，必须掌握如何从开发者的角度来使用浏览器。开发者工具可以帮助开发者查看网页代码、快速进行调试和查找错误。HTML和CSS出现错误的时候，并不会报错，开发者工具是代码调试最好的方法，开发者应该了解和掌握这个强大的功能。
在想要查看的页面上单击鼠标右键，选择【检查】(或直接按快捷键F12)，会弹出一个窗口，开发者可以在这里查看页面元素，如图1-3所示。
图1-3 查看页面元素
有两种查看页面元素的方法：一种是通过源代码查看，另一种是选择页面中某一位置查看。
在弹出窗口的左侧选择【Elements】即可查看页面的源代码，单击想要查看的元素，右侧【Styles】界面就会显示该元素使用的CSS样式，如图1-4所示。
图1-4 【Styles】界面
在【Styles】界面中可以查看该元素的CSS样式，还可以查到该元素的某个CSS样式来自哪个CSS文件，使编码调试时修改代码变得非常方便。
提示
这里提到的CSS样式的概念，将在后续的章节中详细讲解。
【Styles】界面旁边是【Computed】界面，如图1-5所示。【Computed】展示该元素的盒模型以及经过计算之后浏览器使用的CSS样式。CSS样式的计算由浏览器根据规则自动进行，这是浏览器渲染页面时必不可少的过程。
图1-5 【Computed】界面
打开开发者工具，如图1-6所示，单击左上角的箭头图标（或按快捷键Ctrl+Shift+C）进入选择元素模式，在页面中单击需要查看的位置，此时【Elements】界面中对应的元素就会被标识出来。
图1-6 【Elements】界面
HTML是一款以文字为基础的语言，并不需要什么特殊的开发环境，直接在Windows操作系统自带的记事本中编写就可以了。HTML文件以.html为扩展名，将HTML源代码输入记事本并保存后，可以在浏览器中打开文件以查看其效果。
使用记事本编写HTML文件的具体操作步骤如下。
在桌面上单击鼠标右键，在弹出的快捷菜单中选择【新建】，选择类型为【文本文档】（见图1-7），得到一个默认为.txt格式的文本文档，如图1-8所示。
图1-7 新建【文本文档】
图1-8 创建结果
修改文件名为“第一个页面”，并更改文件扩展名为.html，如图1-9所示。在弹窗中选择【是】，确认修改，如图1-10所示。修改后的文件出现浏览器图标，表示修改成功，如图1-11所示。
图1-9 修改文件名和扩展名
图1-10 确认更改扩展名
图1-11 .html文件
虽然使用计算机自带的记事本即可完成HTML文档的创建和编辑，但是为了提高编程效率、优化编程体验，建议读者直接使用编辑器编程。本节将阐述编辑器的下载和使用方法。
目前，市面上比较流行的编辑器有Atom、Sublime、Brackets、Hbuilder X、VSCode等。其中，最适合初学者使用的莫过于Hbuilder X。它的优点是界面简洁，操作简单并且支持中文，能够有效地降低学习成本，为不熟悉编程的初学者提供良好的开发支持。Hbuilder X没有烦琐的安装步骤，下载即可运行。在Hbuilder X官方网站可以免费下载Hbuilder X安装程序，如图1-12所示。
图1-12 下载Hbuilder X安装程序
在图1-13所示的下载弹窗中，根据操作系统的不同，需要在【正式版】下选择相应的Hbuilder X版本。
图1-13 选择Hbuilder X的版本
下载完成后，解压压缩包，双击Hbuilder.exe即可打开编辑器。
提示
如果文件不显示扩展名，请在资源管理器中的【查看】目录下勾选【文件扩展名】。
使用Hbuilder X创建一个HTML5的项目，单击【文件】→【新建】→【项目】，如图1-14所示。
图1-14 创建项目
在弹出的【新建项目】中，填写项目名称，在【位置】中单击【浏览】可以选择项目存放的位置，勾选【基本HTML项目】，如图1-15所示。
图1-15 设置项目
创建好的项目中包含css文件夹、img文件夹，它们分别用来存储.css文件和项目中的图像，index.html表示项目的首页，如图1-16所示。
图1-16 项目结构
在文件或文件夹上单击右键，选择【删除】即可删除不需要的文件；选择【打开文件所在目录】可以在文件夹中所在的位置打开文件。
双击index.html打开页面，项目中已经默认生成了HTML5页面所需要的结构，代码如下。另外，在空的.html文档中输入英文状态下的叹号“!”，按Tab键，也能快速生成HTML5页面的基础结构。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>第一行代码<!DOCTYPE html>是一个声明，告诉Web浏览器当前页面应该使用哪个HTML版本进行解析。
<html>标签是整个页面的最外层围墙，用它来“包裹”页面的所有内容。<head>标签相当于页面的身份证，包括了页面的所有重要信息，这一部分内容不会呈现在页面上，浏览者不能直接看到。<body>部分是页面的主体部分，它相当于一个房间，里面包含了所有在浏览器上要呈现的内容信息，也就是浏览者可以看到的内容。
在<body></body>标签之间加入标题和内容，标题使用<h1>标签，内容使用<p>标签。不同的标签将在浏览器中呈现不同的样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第一个页面</title>
</head>
<body>
<h1>我们的第一个HTML页面</h1>
<p>开始HTML学习的旅程！</p>
</body>
</html>此时，网页的结构已经完成了，按快捷键Ctrl+S保存文件，单击【运行】，选择要使用的浏览器，如图1-17所示，即可使用浏览器打开网页，运行结果如图1-18所示。
图1-17 在浏览器中打开网页
图1-18 浏览器显示效果
当然，使用记事本同样可以编写HTML网页，步骤如下。
在.html文件上单击鼠标右键，在弹出的快捷菜单中选择【打开方式】，选择类型为【记事本】。此时，使用记事本打开了.html文件。
在记事本的界面中输入HTML代码，按快捷键Ctrl+S保存，如图1-19所示。此时，双击.html文件即可在浏览器中打开页面，如图1-20所示。
图1-19 在记事本中输入HTML代码
图1-20 在浏览器中打开.html文件
不同浏览器显示的HTML网页效果可能会略有差异，这个问题后期可使用CSS来解决。在.html文件上单击鼠标右键，在弹出的快捷菜单中选择【打开方式】，选择想要使用的浏览器，这样就可以在不同浏览器中打开.html文件了。
（1）标签通常都是成对使用，有一个 和一个 。结束标签只是在开头标签的前面加一个 。当浏览器收到HTML文件后，就会解释里面的标签，然后把标签相对应的功能表达出来。
（2）HTML是超文本标记语言，主要通过各种标签来标示和排列各对象，通常由尖括号 、 以及其中所包含的内容组成。
（3）HTML 文件的编写方法有两种：一种是利用 编写，另一种是在 中编写HTML 代码。
（1）开始标签、结束标签、/
（2）<、>
（3）记事本、编辑器
（1）用Chrome 浏览器打开网络上的任意一个网页，按快捷键F12，用开发者工具查看网页中元素所对应的代码。
（2）分别利用记事本和Hbuilder X创建一个简单的HTML 网页，在浏览器中打开它并使用开发者工具进行查看。
任务素材及源代码可在QQ群中获取，群号：544028317。
一个完整的HTML文档必须包含3个部分：第一部分是由<!DOCTYPE html>标签定义的文档版本信息，第二部分是由<head>标签定义的各项声明的文档头部；第三部分是由<body>标签定义的文档主体部分。在开始学习HTML的时候，应该先掌握正确的结构书写方式。除了文档结构，本章还会讲解HTML中一些最基础的文本标签，如标题、段落、横线、注释。
学习目标
<head> 标签用于定义文档的头部，它是所有头部标签的容器。<head>标签中可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
<title>标签用于显示文档的名字，通常出现在浏览器窗口的标题栏或状态栏中。<title> 标签是 <head> 标签中唯一要求包含的东西。
将一个网页的标题设为“诗词网站”时，浏览器窗口中将展示网页的标题，如图2-1所示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>诗词网站</title>
</head>
<body>
</body>
</html>图2-1 网页的标题为“诗词网站”
<meta>标签提供的信息不显示在网页中，一般用来定义网页信息的说明、关键字、刷新频率等。在 HTML中，<meta>标签不需要设置结束标签，在一个尖括号内就是一个meta内容。在一个 HTML 网页中可以有多个<meta>标签。<meta>标签的相关属性如表2-1和表2-2所示。
表2-1 <meta>标签的必要属性
| 属性 |
值 |
描述 |
| content |
some_text |
定义与 http-equiv 或 name 属性相关的元信息 |
表2-2 <meta>标签的可选属性
| 属性 |
值 |
描述 |
| charset |
character_set |
HTML5新属性：定义文档的字符编码 |
| http-equiv |
content-type expires refresh set-cookie |
把 content 属性关联到 HTTP 头部 |
| name |
author description keywords generator revised others |
把 content 属性关联到一个名称 |
| scheme |
some_text |
（HTML5不支持）定义用于翻译 content 属性值的格式 |
下面介绍<meta>标签的几种常见用法。
在搜索引擎中，检索信息都是通过输入关键字来实现的。设置关键字是最基本也是最重要的一步，是进行网页优化的基础。关键字在浏览时是看不到的，它是针对搜索引擎的信息。当用关键字搜索网站时，如果网页中包含该关键字，就可以在搜索结果中列出来。
语法：
<meta name="keywords" content="输入具体的关键字">说明：
在该语法中，name 为属性名称，这里是 keywords，也就是设置网页的关键字属性，而在 content 中则定义具体的关键字。
当网站的网页关键字为“诗词”时，代码如下。
<meta name="keyword" content="诗词">
提示
选择关键字的技巧与原则
设置网页说明也是为了便于搜索引擎的查找，它用来详细说明网页的内容，网页说明不在网页中显示出来。
语法：
<meta name="description" content="设置网页说明">说明：
在该语法中，name 为属性名称，这里设置为 description，也就是将元信息属性设置为网页说明，在content 中定义具体的描述语言。
当网站的网页说明为“这是一个内容为诗词的网页”时，代码如下。
<meta name="description" content="这是一个内容为诗词的网页 ">在<meta>中还可以添加网页制作者的姓名。
语法：
<meta name="author" content="作者的姓名">说明：
在该语法中，name 为属性名称，这里设置为 author，也就是设置作者信息，在 content 中定义具体的信息。
当网站的作者是李白时，代码如下。
<meta name="author" content="李白">charset属性规定HTML文档的字符编码，它是 HTML5 中的新属性，且替换了<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">。
语法：
<meta charset="HTML文档的字符编码">说明：
从理论上讲，可以使用任何字符编码，但并不是所有的浏览器都能理解它们。使用的字符编码越广泛，浏览器理解它的可能性就越大。当网站的编码方式为“UTF-8”时，其可以支持多种语言，代码如下。
<meta charset="UTF-8">使用 <meta>标签可以使网页在经过一定时间后自动刷新，这可以通过将 http-equiv 属性值设置为refresh 来实现。content 属性值可以设置为更新时间。
在浏览网页时经常会看到一些欢迎信息的页面，在经过一段时间后，这些页面会自动转到其他页面，这就是网页的跳转。
语法：
<meta http-equiv="refresh" content="跳转的时间；url=跳转到的地址">说明：
在该语法中，refresh 表示网页的刷新，在 content 中设置刷新的时间和刷新后的链接地址，时间和链接地址之间用分号相隔。默认情况下，跳转时间以秒（s）为单位。
【例2-1】
在进入网页后首先显示欢迎界面，5s后自动跳转到网页的内容区，如图2-2和图2-3所示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="5;url=target/index.html">
<title>网页的定时跳转</title>
</head>
<body>
<h1>欢迎来到这个页面，5s后将自动跳转到其他页面</h1>
</body>
</html>图2-2 欢迎界面
图2-3 跳转后的页面
HTML注释是在 HTML 代码中插入的描述性文本，用来解释该代码或提示其他信息。HTML注释只出现在代码中，在浏览器的页面中并不显示。
在 HTML代码中适当地插入注释语句是一种非常好的习惯，对于编程人员日后的代码修改、维护工作很有好处。另外，如果将代码交给其他人进行维护，其他人也能很快读懂前者所编写的内容。
语法：
<!-- 注释的内容 -->【例2-2】
在页面中插入注释，注释内容并不显示在网页上，如图2-4所示。
<!DOCTYPE html>
<html>
<head>
<!-- 在meta标签中设置网页的自动跳转 -->
<meta http-equiv="refresh" content="10;url=page1.html">
<title>网页的定时跳转</title>
</head>
<body>
<h1>欢迎来到这个页面，10s后将自动跳转到其他页面</h1>
</body>
</html>图2-4 注释内容不显示在网页中
HTML文档中包含有各种级别的标题，由 <h1>～<h6>标签来定义。<h1>～<h6>标签中的字母 h 是英文 headline 的简称。作为标题，它们的重要性是有区别的，其中<h1> 标题的重要性最高，<h6> 的最低。
语法：
<h1>1级标题 </h1>
<h2>2级标题 </h2>
<h3>3级标题 </h3>
<h4>4级标题 </h4>
<h5>5级标题 </h5>
<h6>6级标题 </h6>说明：
在该语法中，有 6 个级别的标题，<h1> 是1级标题，使用最大的字号表示，<h6> 是 6 级标题，使用最小的字号表示。
【例2-3】
在网页中依次使用<h1>~<h6>标题标签，在浏览器中的显示效果如图2-5所示。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
<h1>1级标题 </h1>
<h2>2级标题 </h2>
<h3>3级标题 </h3>
<h4>4级标题 </h4>
<h5>5级标题 </h5>
<h6>6级标题 </h6>
</body>
</html>图2-5 不同层级的标题
在网页中如果要把文字有条理地显示出来，离不开段落标签的使用。在 HTML 中可以通过标签实现段落的效果。<p> 是 HTML 文档中最常见的标签，用来标记一个段落的开始。
语法：
<p>段落文字</p>说明：
<p>标签显示在浏览器中时，会自动在生成的元素前后创建一些空白，浏览器会自动添加这些空白。
【例2-4】
在网页中创建一个段落，在浏览器中的显示效果如图2-6所示。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>段落</title>
</head>
<body>
<p>建筑艺术是一种立体艺术形式，是通过建筑群体组织、建筑物的形体、平面布置、立面形式、内外空间组织、结构造型（即建筑的构图、比例、尺度、色彩、质感和空间感）以及建筑的装饰、绘画、雕刻、花纹、庭园、家具陈设等多方面的考虑和处理所形成的一种综合性艺术。</p>
<p>建筑是技术和艺术相结合的产物。意大利现代著名建筑师奈维认为，建筑是一个技术与艺术的综合体。美国现代著名建筑师赖特认为，建筑是用结构来表达思想的科学性的艺术。优秀的建筑不仅要建筑师去设计，还要由能工巧匠将它建造出来。</p>
</body>
</html>图2-6 段落的显示效果
换行标签<br> 的作用是在不另起一段的情况下将当前文本强制换行。
语法：
<br>说明：
一个 <br> 标签代表一个换行，连续的多个标签可以实现多次换行。
【例2-5】
在标签的内部使用换行符实现换行效果，如图2-7所示。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>静夜思</title>
</head>
<body>
<h2>静夜思</h2>
<p>李白</p>
<p>床前明月光，<br>疑是地上霜。<br>举头望明月，<br>低头思故乡。</p>
</body>
</html>图2-7 段落中换行的显示效果
在网页中常常看到一些水平线将段落与段落之间隔开，这些水平线可以通过插入图像实现，也可以更简单地通过标签来完成。
<hr> 标签可以在 HTML 页面中创建一条水平线，在视觉上将文档分隔成各个部分。
语法：
<hr>【例2-6】
在古诗的题目下方通过<hr>标签插入一条水平线，使题目和内容区分开来，在浏览器中的显示效果如图2-8所示。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>静夜思</title>
</head>
<body>
<h2>静夜思</h2>
<hr>
<p>李白</p>
<p>床前明月光，<br>疑是地上霜。<br>举头望明月，<br>低头思故乡。</p>
</body>
</html>图2-8 水平线的显示效果
HTML中包含许多定义文本格式的标签，比如粗体和斜体字。格式化文本的效果现在已经被CSS样式所取代，只要简单了解即可。文本格式化的相关标签如表2-3所示。
表2-3 文本格式化的相关标签
| 标签 |
描述 |
| <b> |
定义粗体文本 |
| <big> |
定义大号字 |
| <em> |
定义着重文字 |
| <i> |
定义斜体字 |
| <small> |
定义小号字 |
| <strong> |
定义加重语气 |
| <sub> |
定义下标字 |
| <sup> |
定义上标字 |
| <ins> |
定义插入字 |
| <del> |
定义删除字 |
说明：
部分标签已经被淘汰了，不赞成使用，故表2-3中不展示此类标签。
【例2-7】
文本格式化标签在浏览器中的显示效果如图2-9所示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<b>This text is bold</b>
<br>
<strong>This text is strong</strong>
<br>
<big>This text is big</big>
<br>
<em>This text is emphasized</em>
<br>
<i>This text is italic</i>
<br>
<small>This text is small</small>
<br>
文本
<sub>下标</sub>
<br>
文本
<sup>上标</sup>
</body>
</html>图2-9 文本格式化
在HTML中，一些字符是预留的，比如说小于号“<”和大于号“>”在网页中被识别为HTML标签。想要正确地显示预留字符，就需要使用该字符对应的字符实体。
不管在HTML文档中输入多少空格，浏览器只会显示一个空格。当网页需要连续空格的时候，需要在文档中连续地插入空格对应的字符实体。
语法：
说明：
在网页中可以有多个空格， 代表一个半角空格，多个空格则可以多次使用这一符号。
【例2-8】
在《静夜思》的最后一句前面插入4个 ，在浏览器中的显示效果如图2-10所示。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>静夜思</title>
</head>
<body>
<h2>静夜思</h2>
<p> 床前明月光，疑似地上霜。</p>
<p> 举头望明月， 低头思故乡。</p>
</body>
</html>图2-10 输入4个空格效果
除了空格以外，在网页的创作过程中，还有一些特殊的符号也需要使用字符实体进行代替。一般情况下，特殊符号的代码由前缀（&）、字符名称和扩展名（;）组成，使用方法与空格符号类似，内容如表 2-4 所示。
表2-4 常见字符实体
| 显示结果 |
描述 |
实体名称 |
| 空格 |
|
|
| < |
小于号 |
< |
| > |
大于号 |
> |
| & |
和号 |
& |
| “ |
引号 |
" |
| ‘ |
单引号 |
' (IE不支持) |
| ￠ |
分（cent） |
¢ |
| £ |
镑（pound） |
£ |
| ¥ |
元（yen） |
¥ |
| € |
欧元（euro） |
€ |
| § |
小节 |
§ |
| © |
版权（copyright） |
© |
| ® |
注册商标 |
® |
| ™ |
商标 |
™ |
| × |
乘号 |
× |
| ÷ |
除号 |
÷ |
（1）一个完整的HTML文档必须包含3个部分：第一部分是由 标签定义的文档版本信息，第二部分是由 标签定义的各项声明的文档头部，第三部分是由 标签定义的文档主体部分。
（2）使用 <meta> 标签可以使网页在经过一定时间后自动刷新。自动刷新可以通过将 http-equiv 属性值设置为 来实现。
（3）<br>标签在HTML中的含义是 ，HTML文档中用来插入水平线的标签是 。
（4）当网页需要连续空格的时候，需要在文档中连续地插入空格对应的字符实体 。
（1）<!DOCTYPE html>、<head>、<body>
（2）refresh
（3）换行、<hr>
（4）
请写出HTML文档的基本结构。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>请实现图2-11所示的网页。
图2-11 章节任务显示效果
任务素材及源代码可在QQ群中获取，群号：544028317。
