书名：HTML+CSS+JavaScript完全自学教程
ISBN：978-7-115-59096-1
本书由人民邮电出版社发行数字版。版权所有，侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。
如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。
编 著 明日科技
责任编辑 赵祥妮
人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
网址 http://www.ptpress.com.cn
读者服务热线：(010)81055410
反盗版热线：(010)81055315
本书从零基础读者自学Web前端开发的角度出发，通过通俗易懂的语言、精彩有趣的实例，详细介绍了HTML、CSS和JavaScript知识。全书共20章，分为4个部分。HTML部分介绍HTML基础、文本、图像和超链接；CSS部分介绍选择器、常用属性、CSS3高级应用、表格与标签、列表、表单、多媒体、HTML5、响应式网页设计和响应式组件；JavaScript部分介绍JavaScript的语言基础、基本语句、对象编程，以及事件处理、Ajax技术和jQuery基础；项目实战部分介绍了一个商城的设计与实现。书中结合具体实例进行讲解，代码有详细注释，使读者能够轻松领会前端开发的精髓，快速提高开发技能。
本书适合作为Web前端开发、网页设计、网页制作、网站建设的入门级教材或者有一定基础的读者的自学用书，也适合作为高校相关专业的教学参考书或相关培训机构的培训教材。
本书由异步社区出品，社区（https://www.epubit.com/）可为您提供相关资源和后续服务。
本书提供示例文件。您可以在异步社区本书页面中单击 
，跳转到下载页面，按提示进行操作即可。
作者和编辑尽最大努力来确保书中内容的准确性，但难免会存在疏漏。欢迎您将发现的问题反馈给我们，帮助我们提升图书的质量。
当您发现错误时，请登录异步社区，按书名搜索，进入本书页面（见下图），单击“提交勘误”，输入错误信息后，单击“提交”按钮即可。本书的作者和编辑会对您提交的错误信息进行审核，确认并接受后，您将获赠异步社区的100积分。积分可用于在异步社区兑换优惠券、样书或奖品。
我们的联系邮箱是contact@epubit.com.cn。
如果您对本书有任何疑问或建议，请您发电子邮件给我们，并请在电子邮件标题中注明书名，以便我们更高效地做出反馈。
如果您有兴趣出版图书、录制教学视频，或者参与图书翻译、技术审校等工作，可以发电子邮件给我们；有意出版图书的作者也可以到异步社区在线投稿（直接访问www.epubit.com/contribute即可）。
如果您所在的学校、培训机构或企业，想批量购买本书或异步社区出版的其他图书，也可以发电子邮件给我们。
如果您在网上发现有针对异步社区出品图书的各种形式的盗版行为，包括对图书全部或部分内容的非授权传播，请您将怀疑有侵权行为的链接发电子邮件给我们。您的这一举动是对作者权益的保护，也是我们持续为您提供有价值的内容的动力之源。
“异步社区”是人民邮电出版社旗下IT专业图书社区，致力于出版精品IT图书和相关学习产品，为作译者提供优质出版服务。异步社区创办于2015年8月，提供大量精品IT图书和电子书，以及高品质技术文章和视频课程。更多详情请访问异步社区官网。
“异步图书”是由异步社区编辑团队策划出版的精品IT专业图书的品牌，依托于人民邮电出版社近40年的计算机图书出版积累和专业编辑团队，相关图书在封面上印有异步图书的Logo。异步图书的出版领域包括软件开发、大数据、人工智能、测试、前端、网络技术等。
异步社区
微信服务号
第1章 HTML基础
第2章 文本
第3章 图像和超链接
视频教学：68分钟
浏览网站已经成为人们生活和工作中不可或缺的一部分，网页也随着信息技术的发展越来越丰富、越来越美观，网页上不仅有文字、图片，还有影像、动画效果等。而使用HTML就可以实现网页设计和制作，尤其是可以开发动态网站。那么什么是HTML？如何编写HTML文件？使用什么工具编写HTML文件？带着这些问题我们来学习本章内容。
HTML（HyperText Markup Language，超文本标记语言）是纯文本类型的语言，它是因特网上用于编写网页的主要语言，使用HTML编写的网页文件也是标准的纯文本文件。
HTML文件可以使用文本编辑器（如Windows系统中的记事本程序）打开，查看其中的HTML代码；也可以在用浏览器打开网页时，通过选择相应命令，查看网页中的HTML代码。HTML文件可以直接由浏览器解释执行，而无须编译。用浏览器打开网页时，浏览器读取网页中的HTML代码，分析其语法结构，然后根据解释的结果显示网页内容。
HTML是一种简易的文件交换标准，它旨在定义文件内的对象和描述文件的逻辑结构，而并不定义文件的显示。由于HTML所描述的文件具有极高的适应性，所以其特别适用于WWW（World Wide Web，万维网）的环境。
HTML的历史可以追溯到很久以前。1993年HTML首次以因特网草案的形式发布。20世纪90年代，人们见证了HTML的高速发展，从2.0版到3.2版和4.0版，再到4.01版，一直到现在正逐步普及的HTML5。
在快速发布了HTML的前4个版本之后，业界普遍认为HTML已经“无路可走”了，人们对Web标准关注的焦点也开始转移到XHTML（Extensible HyperText Markup Language,可扩展超文本标记语言）和XML（Extensible Markup Language，可扩展标记语言）上，HTML则被放在次要位置。不过在此期间，HTML体现了顽强的生命力，主要的网站内容还是基于HTML的。为了能够支持新的Web应用，同时克服现有的缺点，HTML迫切需要添加新功能，制定新规范。
为了将Web平台提升到一个新的高度，在2004年WHATWG（Web HyperText Application Technology Working Group，Web超文本应用技术工作组）成立了，他们创立了HTML5规范，同时开始专门针对Web应用开发新功能，这被WHATWG认为是HTML中最薄弱的环节。Web 2.0这个词也就是在那个时候被创造出来的，开创了Web的第二个时代，旧的静态网站逐渐让位于需要更多特性的动态网站。
因为HTML5能解决非常实际的问题，得益于浏览器的实验性反馈，HTML5规范也得到了持续的完善，HTML5以这种方式迅速融入到了对Web平台的实质性改进中。HTML5成为HTML的新一代标准。
HTML文件是由一系列的元素和标签组成的。元素是HTML文件的重要组成部分，而HTML用标签来规定元素的属性和它在文件中的位置。本节将对HTML文件的基本结构、基本标签进行详细介绍。
HTML的标签分为单独出现的标签（以下简称为单独标签）和成对出现的标签（以下简称为成对标签）两种。
● 单独标签。
单独标签的格式为<元素名称>，其作用是在相应的位置插入元素。例如，<br>标签就是单独标签，意思是在该标签所在位置插入一个换行符。
● 成对标签。
大多数标签都是成对出现的，由开始标签（又称首标签）和结束标签（又称尾标签）组成。开始标签的格式为<元素名称>，结束标签的格式为</元素名称>。成对标签的语法如下：
<元素名称>要控制的元素</元素名称>成对标签仅对包含在其中的内容产生作用。例如，<title>和</title>标签就是成对标签，用于界定标题元素的范围，也就是说，<title>和</title>标签之间的内容是此HTML文件的标题。
注意
在HTML标签中不区分大小写。例如，<HTML>、<Html>和<html>，其结果都是一样的。
在HTML标签中，还可以设置一些属性，用来控制HTML标签所建立的元素。这些属性将位于开始标签。因此，开始标签的基本语法如下：
<元素名称 属性1="值1" 属性2="值2"...>而结束标签的语法则为：
</元素名称>因此，在HTML文件中某个元素的完整定义语法如下：
<元素名称 属性1="值1" 属性2="值2"...>元素资料</元素名称>说明
在HTML语法中，设置各属性所使用的“"”可省略。
当用一组HTML标签将一段文字包含在中间时，这段文字与包含文字的HTML标签被称为元素。
在HTML语法中，每个由HTML标签与文字所形成的元素内，还可以包含另一个元素。因此，整个HTML文件就像是一个大元素包含许多小元素。
在所有的HTML文件中，最外层的元素是由<html>标签建立的。在<html>标签所建立的元素中，包含两个主要的子元素，这两个子元素是由<head>标签与<body>标签分别建立的。<head>标签所建立的元素内容为文件标题，而<body>标签所建立的元素内容为文件主体。
在介绍HTML文件结构之前，先来看一个简单的HTML文件及其在浏览器上的显示结果。
下面使用文本编辑器（如Windows系统自带的记事本）编写一个HTML文件，代码如下：
<html>
<head>
<title>文件标题</title>
</head>
<body>
文件正文
</body>
</html>用浏览器打开该文件，运行效果如图1.1所示。
图1.1 HTML示例运行效果
从上述代码和运行效果中可以看出HTML文件的基本结构，如图1.2所示。
图1.2 HTML文件的基本结构
其中，<head>与</head>之间的部分是HTML文件的文件头部分，用以说明文件的标题和整个文件的一些公共属性；<body>与</body>之间的部分是HTML文件的主体部分，下面介绍的标签，如果不加以特别说明，均是嵌套在这一对标签中使用的。
在任何HTML文件里，最先出现的HTML标签都是<html>，它用于表示该文件是用HTML编写的。<html>是成对出现的，开始标签<html>和结束标签</html>分别位于文件的最前面和最后面，文件中的所有元素和HTML标签都包含在其中。例如：
<html>
文件的全部内容
</html>该标签不带任何属性。
事实上，现在常用的Web浏览器（例如IE）都可以自动识别HTML文件，并不要求有<html>标签，也不对该标签进行任何操作。但是，为了提高文件的适用性，使编写的HTML文件能适应不断变化的Web浏览器，我们还是应该养成使用这个标签的习惯。
习惯上，我们把HTML文件分为文件头和文件主体两个部分。文件主体部分就是我们在Web浏览器窗口的用户区内看到的内容，而文件头部分用来规定该文件的标题（显示在Web浏览器窗口的标题栏中）和文件的一些公共属性。
<head>是一个表示文件头的标签。在由<head>标签所定义的元素中，并不放置网页的任何内容，而是放置关于HTML文件的信息，也就是说它并不属于HTML文件的主体。它包含文件的标题、编码方式及URL（Uniform Rasource Locator，统一资源定位符）等信息。这些信息大部分用于提供索引、辨认或其他方面的应用。
写在<head>与</head>标签中间的文本，如果又写在<title>标签中，就表示该网页的名称，并作为窗口的名称显示在这个网页窗口的标题栏中。
说明
如果HTML文件并不需要提供相关信息，可以省略<head>标签。
每个HTML文件都需要有一个文件名称。在浏览器中，文件名称作为窗口名称显示在该窗口的标题栏中。这对浏览器的收藏功能很有用。如果浏览者认为某个网页对自己很有用，今后想经常访问，可以选择IE的“收藏夹”菜单中的“添加到收藏夹”，将它保存起来，供以后调用。文件名称要写在<title>和</title>标签之间，并且<title>标签应包含在<head>与</head>标签之中。
HTML文件的标签是可以嵌套的，即在一对标签中可以嵌入另一对子标签，用来规定父标签所含范围的属性或其中某一部分内容。嵌套在<head>标签中使用的主要有<title>标签。
meta元素提供的信息是用户不可见的，它不显示在页面中，一般用来定义页面信息的名称、关键字、作者等。在HTML文件中，<meta>标签不需要设置结束标签，在一个尖括号内就是一个meta内容，而在一个HTML文件中可以有多个meta元素。meta元素的属性有两种，即name和http-equiv，其中name属性主要用于描述网页，以便于搜索引擎查找、分类。
文件主体部分以标签<body>标志开始，以标签</body>标志结束。<body>标签是成对出现的。在文件主体标签中常用属性如表1.1所示。
表1.1 body元素的属性
| 属性 |
描述 |
|---|---|
| text |
设定页面文字的颜色 |
| bgcolor |
设定页面背景的颜色 |
| background |
设定页面的背景图像 |
| bgproperties |
设定页面的背景图像为固定，不随页面的滚动而滚动 |
| link |
设定页面默认的链接颜色 |
| alink |
设定鼠标正在单击时的链接颜色 |
| vlink |
设定访问过后的链接颜色 |
| topmargin |
设定页面的上边距 |
| leftmargin |
设定页面的左边距 |
在HTML文件中，除了以上这些基本标签外，还包含一种不显示在页面中的元素，那就是代码的注释文字。适当地添加注释可以帮助用户更好地了解网页中各个模块的划分，也有助于以后对代码的检查和修改。给代码加注释，是一种很好的编程习惯。注释分为3类，即在HTML中的注释、在CSS中的注释和在JavaScript中的注释，其中在JavaScript中的注释又有两种形式。下面将对这3类注释的具体语法进行介绍。
（1）在HTML中的注释，具体语法如下：
<!--注释的文字-->注释文字的标记很简单，只需要在语法中“注释的文字”的位置上添加需要的内容即可。
（2）在CSS中的注释，具体语法如下：
/*注释的文字*/在CSS中添加注释时，只需要在语法中“注释的文字”的位置上添加需要的内容即可。
（3）在JavaScript中的注释有两种形式：单行注释和多行注释。
单行注释的具体语法如下：
//注释的文字在JavaScript中添加单行注释时，只需要在语法中“注释的文字”的位置上添加需要的内容即可。
多行注释的具体语法如下：
/*注释的文字*/在JavaScript中添加多行注释时，只需要在语法中“注释的文字”的位置上添加需要的内容即可。
注意
运用“//注释的文字”对每一行代码添加注释达到的效果和“/*注释的文字*/”的效果一样。
常见错误
在HTML代码中，注释语法使用错误时，浏览器会将注释视为文本内容，注释内容会显示在页面中。例如，下面给出的HTML代码中有4处注释错误。
用浏览器打开这个HTML文件，运行效果如图1.3所示。
图1.3 错误使用代码注释的运行效果
编写HTML文件主要有3种方法，以下分别进行介绍。
● 手动编写。
由于用HTML编写的文件是标准的ASCII文本文件，所以我们可以使用任何文本编辑器来打开并编写HTML文件，如Windows系统自带的记事本。
● 使用可视化软件。
我们可以使用WebStorm、Dreamweaver、Sublime等软件进行可视化的网页制作。
● 由Web服务器一方实时动态生成。
这需要进行后端的网页编程来实现，如JSP、ASP、PHP等，一般情况下都需要数据库的配合。
下面使用记事本来编写一个HTML文件，操作步骤如下。
（1）选择“开始”→“程序”→“附件”→“记事本”，打开Windows系统自带的记事本，如图1.4所示。
图1.4 打开记事本
（2）在记事本中直接输入HTML代码。具体代码如下：
<html>
<head>
<title>简单的HTML文件</title>
</head>
<body text="blue">
<h2 align="center">HTML5初露端倪</h2>
<hr>
<p>让我们一起体验超炫的HTML5旅程吧</p>
</body>
</html>（3）输入代码后，记事本中显示出代码，如图1.5所示。
图1.5 显示出代码的记事本
（4）在记事本中，单去“文件”→“另存为”，弹出如图1.6所示的“另存为”对话框。
图1.6 “另存为”对话框
（5） 在“另存为”对话框中，首先选择保存的文件夹，然后在“保存类型”下拉列表中选择“所有文件”，在“编码”下拉列表中选择“UTF-8”，并填写文件名，例如，将文件命名为1-2.html，最后单击“保存”按钮。
图1.7 保存好的HTML文件
（6）关闭记事本，回到保存的文件夹中，双击如图1.7所示的1-2.html文件，可以在浏览器中看到最终的页面效果，如图1.8所示。
图1.8 页面效果
WebStorm是JetBrains公司旗下的一款JavaScript开发工具。WebStorm支持不同浏览器的提示，还包括用户自定义的函数。其代码补全功能支持常用的库，比如jQuery、YUI、Dojo、Prototype、MooTools和Bindows等。WobStorm被广大JavaScript开发者誉为“Web前端开发神器”“最强大的HTML5编辑器、 “最智能的JavaScript IDE”等。
下面以WebStorm英文版为例，首先介绍安装WebStorm 11.0.4的过程，然后介绍制作HTML5页面的方法。
（1）打开浏览器，进入WebStorm官网下载页，如图1.9所示。
图1.9 WebStorm官网下载页
（2）单击链接“11.0.4 for Windows(exe)”，开始下载WebStorm 11.0.4程序，如图1.10所示。
图1.10 下载WebStorm 11.0.4程序
（3）下载完成之后，双击打开WebStorm 11.0.4程序，进入开始安装界面，如图1.11所示。
图1.11 开始安装界面
（4） 单击“Next”按钮，会显示如图1.12所示的界面，在该界面单击“Browse”按钮选择安装路径（默认的路径是“C:\Program Files\ JetBrains\ WebStorm 11.0.4”）。
图1.12 选择安装路径
（5）单击“Next”按钮，会显示选择安装选项的界面，这里需要勾选全部的复选框，如图1.13所示。
图1.13 选择安装选项
（6）单击“Next”按钮，选择开始菜单文件夹，默认为“JetBrains”，如图1.14所示。
图1.14 选择开始菜单文件夹
（7）单击“Install”按钮，会显示WebStorm 11.0.4的安装进程，如图1.15所示。
图1.15 显示WebStorm 11.0.4的安装进程
（8）安装进程达到100%后，单击“Next”按钮，会显示如图1.16所示的界面，在该界面单击“Finish”按钮，完成WebStorm 11.0.4的安装。
图1.16 安装完成
（1）单击“开始”→“所有程序”→“JetBrains WebStorm 11.0.4”，启动WebStorm软件的主程序，其主界面如图1.17所示。
图1.17 JetBrains WebStorm 11.0.4主界面
（2）选择菜单栏中的“File”→“New Project”，新建HTML工程，如图1.18所示。
图1.18 新建HTML工程
（3）在弹出的“Select Project Type”对话框中，在“Location”文本框中输入工程存放的路径，也可以单击
按钮选择路径，如图1.19所示。然后单击“Create”按钮，完成工程的创建。
图1.19 输入工程存放的路径
（4）选定新建好的HTML工程，单击鼠标右键，在弹出的快捷菜单中选择“New”→“HTML File”，创建HTML文件，如图1.20所示。
图1.20 创建HTML文件
（5）选择完成之后会弹出如图1.21所示的对话框，在“Name”文本框中输入文件名，在这里将文件命名为“index.html”，并在“Kind”下拉列表中选择“HTML5 file”。
图1.21 为HTML5文件命名
（6）单击“OK”按钮，会打开新建好的HTML5文件，如图1.22所示。
图1.22 新建好的HTML5文件
（7）编辑HTML5文件，在<body>标签中输入文本，如图1.23所示。
图1.23 编辑HTML5文件
（8）编辑完成之后，保存文件。单击“File”→“Save As”，选择需要保存HTML5文件的路径，如图1.24所示。
图1.24 选择需要保存HTML5文件的路径
此时，双击保存好的HTML5文件index.html，浏览器将显示如图1.25所示的运行效果。
图1.25 运行HTML5程序
下面通过一个实例进一步了解HTML文件的基本结构和<body>标签的属性的运用。
实例1-1 运用<body>标签的属性，渲染页面效果，代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<!--设置背景图像:background，设置背景不随页面滚动：bgproperties,文字颜色:text，链接颜色:link，访问过后的链接颜色: vlink，上边距: topmargin，左边距: Leftmargin-->
<body background="images/bg.jpg" bgproperties="fixed" text="blue" link="red" vlink="#CCCCCC" topmargin="100px" leftmargin="50px">
长风破浪会有时<br/><br/>
直挂云帆济沧海<br/><br/>
<a href="www.mingrisoft.com">单击链接</a>
</html>保存文件后用浏览器打开该HTML5文件，运行效果如图1.26所示。
图1.26 <body>标签的属性运用实例效果
（1）编写一个程序，在网页中显示电影《流浪地球2》的相关信息，如图1.27所示。
图1.27 显示电影《流浪地球2》的相关信息
（2）编写一个程序，在<body>标签中设置页面背景颜色为粉色（提示：设置bgcolor="pink"），如图1.28所示。
图1.28 设置页面背景颜色
（3）编写一个程序，在<body>标签中设置不同状态下的链接的颜色。网页初始效果如图1.29所示。而单击链接以后，效果如图1.30所示。
图1.29 网页初始效果
图1.30 单击链接后的效果
视频教学：92分钟
在网页的设计制作过程中，文本是最基本的要素。文本在网页中的呈现，就如同音符在音乐中的表现，优秀的网页文本设计，给人传递信息的同时，更给人以美的视觉体验；而糟糕的网页文本设计，就好像五音不全的人在嘶吼嚎叫，使人掩耳而走，或成为笑料。本章将对网页文本的知识内容进行详细讲解。
标题是对一段文字内容的概括和总结。书籍文本少不了标题，网页文本也不能没有标题。一篇文档的好坏，标题起到重要的作用。在越来越追求“视觉美感”的今天，一个好的标题设计，对用户的留存尤为关键。例如，图2.1和图2.2所示的界面效果，同样的标题内容，却使用了不同的页面标签，显示的效果因而大相径庭。
图2.1 较好的标题设计
图2.2 糟糕的标题设计
标题标签共有6个，分别是<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，<h1>标签用于定义最大的标题，<h6>标签用于定义最小的标题。一般使用<h1>标签来定义网页中最上层的标题，但是有些浏览器会默认把<h1>标签定义的标题的字体显得很大，所以一些开发者会使用<h2>标签代替<h1>标签来定义最上层的标题。
标题标签语法如下：
<h1>文本内容</h1>
<h2>文本内容</h2>
<h3>文本内容</h3>
<h4>文本内容</h4>
<h5>文本内容</h5>
<h6>文本内容</h6>说明
在HTML中，标签大都是由开始标签和结束标签组成的。例如，使用<h1>标签时，首先编写<h1>开始标签和</h1>结束标签，然后将文本内容放入两个标签之间。
实例2-1 巧用标题标签，编写“开心一笑”，具体代码如下：
<!DOCTYPE html>
<html>
<head>
<!--指定页面编码格式-->
<meta charset="UTF-8">
<!--指定页头信息-->
<title>程序员的笑话</title>
</head>
<body>
<!--表示文章标题-->
<h1>程序员的笑话</h1>
<!--表示相关发布信息-->
<h5>发布时间：19:20 03/24 | 发布者：程序员 | 阅读数：156次</h5>
<!--表示对话内容-->
<h4>甲：《C++面向对象程序设计》这本书怎么比《C程序设计语言》厚了好几倍？</h4>
<h4>乙：当然了，有“对象”后肯定麻烦呀！</h4>
</body>
</html>运行效果如图2.3所示。
图2.3 使用标题标签写笑话
常见错误
如果结束标签漏加“/”，比如把</h1>写成<h1>，会导致浏览器认为是新标题标签的开始，从而导致页面布局错乱。例如，在下面代码的第2行，就将</h1>结束标签写成了<h1>开始标签。
<!--表示文章标题-->
<h1>程序员的笑话<h1>
<!--表示相关发布信息-->
发布时间：19:20 03/24 | 发布者：程序员 | 阅读数：156次
<!--表示对话内容-->
<h4>甲：《C++面向对象程序设计》这本书怎么比《C程序设计语言》厚了好几倍？</h4>
<h4>乙：当然了，有“对象”后肯定麻烦呀！</h4>将会出现如图2.4所示的错误。
图2.4 结束标签漏加“/”出现的错误
在默认情况下，标题文字是左对齐的。而在网页制作的过程中，可以实现标题文字的编排设置。最常用的关于对齐方式的设置，就是给标题标签添加align属性。
语法如下：
<h1 align="对齐方式">文本内容</h1>在该语法中，align属性需要设置在标题标签的后面。具体的对齐方式属性值如表2.1所示。
表2.1 对齐方式属性值
| 属性值 |
含义 |
|---|---|
| left |
文字左对齐 |
| center |
文字居中对齐 |
| right |
文字右对齐 |
注意
在编写代码的过程中，一定要添加双引号。
实例2-2 活用文字居中，推荐商品信息，具体代码如下：
<!DOCTYPE html>
<html>
<head>
<!--指定页面编码格式-->
<meta charset="UTF-8">
<!--指定页头信息-->
<title>介绍图书商品</title>
</head>
<body>
<!--显示商品图片-->
<h1 align="center"><img src="book.jpg"/></h1>
<!--显示图书名称-->
<h5 align="center">书名：《Java从入门到精通》</h5>
<!--显示图书作者-->
<h5 align="center">作者：明日科技</h5>
<!--显示出版社-->
<h5 align="center">出版社：清华大学出版社</h5>
<!--显示图书出版时间-->
<h5 align="center">出版时间：2017年1月</h5>
<!--显示图书页数-->
<h5 align="center">页数：436页</h5>
<!--显示图书价格-->
<h5 align="center">价格：25.00元</h5>
</body>
</html>注意
在代码的第11行，使用了<img>图像标签。<img>图像标签可以将外部图像引入当前网页内。<img>图像标签的具体使用方法请参考本书第3章的内容。
运行效果如图2.5所示。
图2.5 图书商品介绍的页面效果
除了标题文字外，网页中普通的文字信息也不可或缺，而多种多样的文字装饰效果可以让用户“眼前一亮”，记忆深刻。在网页的编码中，可以直接在<body>和</body>标签之间输入文字，这些文字可以显示在页面中，同时可以为这些文字添加装饰效果，如斜体、下画线等。下面将详细讲解文字装饰标签。
在浏览网页时，常常可以看到一些有特殊效果的文字，如斜体字、带下画线的文字和带删除线的文字，而这些文字效果也可以通过HTML标签来实现。
语法如下：
<em>斜体内容</em>
<u>带下画线的文字</u>
<strike>带删除线的文字</strike>这几种文字装饰效果的语法类似，只是标签不同。其中，斜体字也可以使用标签<I>或<cite>定义。
实例2-3 活用文字装饰，推荐商品信息，具体代码如下：
<!DOCTYPE html>
<html>
<head>
<!--指定页面编码格式-->
<meta charset="UTF-8">
<!--指定页头信息-->
<title>斜体、下画线、删除线</title>
</head>
<body>
<!--显示商品图片-->
<img src="book.jpg"/>
<!--显示图书名称，文字用斜体效果-->
<h3>书名：<em>《JavaScript从入门到精通》</em></h3>
<!--显示图书作者-->
<h3>作者：明日科技</h3>
<!--显示出版社-->
<h3>出版社：清华大学出版社</h3>
<!--显示出版时间，文字用下画线效果-->
<h3>出版时间：<u>2017年1月</u></h3>
<!--显示页数-->
<h3>页数：436页</h3>
<!--显示图书价格，文字用删除线效果-->
<h3>原价：<strike>45.00</strike>元 促销价格：25.00元</h3>
</body>
</html>运行效果如图2.6所示。
图2.6 活用文字装饰的页面效果
除了设置前面介绍的文字装饰效果外，有时还需要设置一种特殊的文字装饰效果，即上标和下标。上标和下标经常会在数学公式或方程式中出现。
语法如下：
<sup>上标文字内容</sup>
<sub>下标文字内容</sub>在该语法中，上标标签和下标标签的使用方法基本相同，只需要将文字放在标签中间即可。
实例2-4 使用上标和下标标签，展示数学公式，具体代码如下：
<!DOCTYPE html>
<html>
<head>
<!--指定页面编码格式-->
<meta charset="UTF-8">
<!--指定页头信息-->
<title>上标和下标</title>
</head>
<body>
<!--表示文章标题-->
<h1 align="center">上标和下标标签</h1>
<h3 align="center">在数字计算中:</h3>
<!--使用上标标签，将文字置上-->
<h3 align="center">上标：X<sup>3</sup>+9X<sup>2</sup>-3=0</h3>
<!--使用下标标签，将文字置下-->
<h3 align="center">下标：3X<sub>1</sub>+2X<sub>2</sub>=10</h3>
</body>
</html>运行效果如图2.7所示。
图2.7 使用上标和下标标签的页面效果
在网页的制作过程中，特殊符号（如引号、空格等）也需要使用代码进行控制。一般情况下，特殊符号的代码由前缀“&”、字符名称和后缀“;”组成，具体如表2.2所示。
表2.2 特殊符号的表示
| 符号 |
代码 |
含义 |
|---|---|---|
| “ |
" |
引号 |
| < |
&It; |
左尖括号 |
| > |
> |
右尖括号 |
| × |
× |
乘号 |
| © |
§ |
小节符号 |
| |
空格 |
实例2-5 巧用特殊符号，绘制小狗字符画，具体代码如下：
<!DOCTYPE html>
<html>
<head>
<!--指定页面编码格式-->
<meta charset="UTF-8">
<!--指定页头信息-->
<title>特殊符号</title>
</head>
<body>
<!--表示文章标题-->
<h1 align="center">汪汪！你想找的页面被我吃喽！</h1>
<!--绘制小狗字符画-->
<pre align="center">
.----.
_.'__ '.
.--($)($$)---/#\
.' @ /###\
: , #####
`-..__.-' _.-\###/
`;_: `"'
.'"""""'.
/, hi ,\\
// 你好! \\
'-._______.-'
___'. | .'___
(______|______)
</pre>
</body>
</html>运行效果如图2.8所示。
图2.8 小狗字符画的页面效果
一块块砖瓦经组合就形成了高楼大厦，一行行文字经组合就形成了段落篇章。在实际的文本编码中，输入完一段文字后，按键盘上的<Enter>键即可生成一个段落，但是在HTML中需要通过标签来实现段落的效果。下面具体介绍和段落相关的一些标签。
在HTML中，段落效果是通过<p>标签来实现的。<p>标签会自动在其前后创建一些空白，浏览器则会自动添加这些空白。
语法如下：
<p>段落文字</p>其中，可以使用成对的<p>标签来包含段落，也可以使用单独的<p>标签来划分段落。
实例2-6 运用段落标签，实现明日学院介绍页面，具体代码如下：
!DOCTYPE html>
<html>
<head>
<!--指定页面编码格式-->
<meta charset="UTF-8">
<!--指定页头信息-->
<title>段落标签</title>
</head>
<body>
<!--使用段落标签，进行创意性排版-->
<p>╭═════════┤ 明日学院，专注编程教育十八年 ├══════════╮</p>
<p>║ 明日学院，
是吉林省明日科技有限公司倾力打造的在线实用 ║</p>
<p>║ 技能学习平台，该平台于2016年正式上线，主要为学习者提供海 ║</p>
<p>║ 量、优质的课程，课程结构严谨，用户可以根据自身的学习程度, ║</p>
<p>║ 自主安排学习进度。我们的宗旨是，为编程学习者提供一站式服 ║</p>
<p>║ 务，培养用户的编程思维，小白手册，视频教程，一学就会。 ║</p>
<p>╰═════════┤网址:http://www.mingrisoft.com ├══════════╯</p>
</body>
</html>运行效果如图2.9所示。
图2.9 使用段落标签的页面效果
段落与段落之间是“隔行换行”的，这样会导致文字的行间距过大，这时可以使用换行标签来完成文字的换行显示。
语法如下：
<p>
一段文字<br/>一段文字
</p>其中，<br/>标签代表换行，如果要多次换行，可以连续使用多个换行标签。
实例2-7 运用换行标签，实现唐诗《望庐山瀑布》中诗句的页面布局，具体代码如下：
<!DOCTYPE html>
<html>
<head>
<!--指定页面编码格式-->
<meta charset="UTF-8">
<!--指定页头信息-->
<title>段落的换行标签</title>
</head>
<body>
<!--使用段落标签书写古诗-->
<p align="center">
<!--使用2个换行标签-->
望庐山瀑布 李白<br/><br/>
<!--使用1个换行标签-->
日照香炉生紫烟，遥看瀑布挂前川。<br/>
<!--使用1个换行标签-->
飞流直下三千尺，疑是银河落九天。<br/>
</p>
</body>
</html>运行效果如图2.10所示。
图2.10 使用换行标签的页面效果
常见错误
<br/>换行标签的语法比较特殊，它并不是由开始标签和结束标签组成的，所以初学者经常会写错。例如，在下面代码的第4行，<br/>换行标签就被写成了<b/r>。
<!--使用段落标签书写古诗-->
<p align="center">
<!--使用2个换行标签-->
望庐山瀑布 李白<b/r><b/r>
<!--使用1个换行标签-->
日照香炉生紫烟，遥看瀑布挂前川。<br/>
<!--使用1个换行标签-->
飞流直下三千尺，疑是银河落九天。<br/>
</p>将会出现如图2.11所示的错误。
图2.11 写错换行标签而出现的错误
在网页制作中，一般是通过各种标签对文字进行排版。但在实际应用中，往往需要一些特殊的排版效果，这样使用标签控制非常麻烦。解决的方法就是使用原格式标签进行排版，如空格、制表符等。运用原格式标签<pre>就可以解决这个问题。
语法如下：
<pre>
文本内容
</pre>实例2-8 运用原格式标签，输出“元旦快乐”，具体代码如下：
<!DOCTYPE html>
<html>
<head>
<!--指定页面编码格式-->
<meta charset="UTF-8">
<!--指定页头信息-->
<title>原格式标签</title>
</head>
<body>
<h1>原格式标签--pre</h1>
<!--使用原格式标签，输入文字字符画-->
<pre>
oooooooo ooooooooo o o oooooooo
oooooooooooo o o o ooooooo o o
o o ooooooooo oo o o oooooooooo
o o o o o oo ooooooooo o
o o ooooooooo o o o o o o
o o o o o o o oo o
o ooooooo ooooooooooooo o o o o o o
</pre>
</body>
</html>运行效果如图2.12所示。
图2.12 使用原格式标签的页面效果
水平线用于段落与段落之间的分隔，使文档结构清晰，文字的编排更整齐。水平线具有很多的属性，如宽度、高度、颜色、排列对齐等。在HTML中经常会用到水平线，合理使用水平线可以获得非常好的页面装饰效果。一篇内容繁杂的文档，如果合理地放置几条水平线，就会变得层次分明、便于阅读。
在HTML中使用<hr>标签来创建一条水平线。水平线可以在视觉上将文档分割成多个部分。在HTML文件中输入一个<hr>标签，即可添加一条默认样式的水平线。
语法如下：
<hr>实例2-9 运用水平线标签，实现果酱制作的原料清单页面，具体代码如下：
<!DOCTYPE html>
<html>
<head>
<!--指定页面编码格式-->
<meta charset="UTF-8">
<!--指定页头信息-->
<title>水平线标签</title>
</head>
<body>
<!--表示文章标题-->
<h1 align="center">果酱制作的材料准备</h1>
<!--使用水平线来画表格-->
<hr>
<p align="center">苹果 两个</p>
<!--使用水平线来画表格-->
<hr>
<p align="center">方形酥皮 四片</p>
<!--使用水平线来画表格-->
<hr>
<p align="center">柠檬汁 一匙</p>
<!--使用水平线来画表格-->
<hr>
<p align="center">砂糖 一匙</p>
<!--使用水平线来画表格-->
<hr>
<p align="center">肉桂粉 适量</p>
<!--使用水平线来画表格-->
<hr>
</body>
</html>运行效果如图2.13所示。
图2.13 使用水平线标签的页面效果
默认情况下，在网页中添加的水平线是100%的宽度，而在实际创建网页时，可以对水平线的宽度进行设置。
语法如下：
<hr width="水平线宽度">在该语法中，水平线的宽度值可以是确定的像素值，也可以是窗口宽度值的百分比。
实例2-10 利用<hr>水平线标签中的宽度属性，实现一则微故事的页面文字装饰效果，具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<!--指定页面编码格式-->
<meta charset="UTF-8">
<!--指定页头信息-->
<title>水平线的宽度</title>
</head>
<body>
<!--设置水平线的宽度，居左-->
<hr width="120" align="left">
<p>故事是这样开始的:</p>
<!--使用段落标签，输入故事内容-->
<p align="center">
当初看《简·爱》的时候，哭得稀里哗啦
</p>
<p align="center">
泪点在哪里呢？
</p>
<p align="center">
我喜欢悲伤的故事
</p>
<p align="center">
不喜欢悲伤的结局
</p>
<!--设置水平线的宽度，居右-->
<hr width="120" align="right">
<p align="right">故事就这样结束了<p>
</body>
</html>运行效果如图2.14所示。
图2.14 利用<hr>标签装饰文字
（1）使用<strike>标签实现打折商品清单页面，效果如图2.15所示。
图2.15 实现打折商品清单页面
（2）实现明日学院介绍页面，效果如图2.16所示。（提示：各板块标题由<h2>标题标签实现，文字内容由<h4>标题标签实现。）
图2.16 实现明日学院介绍页面
（3）实现网页版祝福字符画，具体效果如图2.17所示。（提示：使用<pre>标签保留原始排版。）
图2.17 实现祝福字符画
（4）实现今日菜单页面，效果如图2.18所示。
图2.18 实现今日菜单页面
