第2章 HTML¶
第 2 章¶
HTML¶
Web 开发既包括前端页面开发，又包括后端接口实现。本书内容由浅入深，从前端知识入手讲解。众所周知，前端开发的 “三剑客” HTML、CSS 和 JavaScript 中，HTML 负责页面的整体骨架和整体内容展示，CSS 负责美化页面，让内容展示得更美观，JavaScript 则负责页面的逻辑代码部分，如页面的动态修改行为等。学习了这三项技术就能搭建出简单的静态页面，本章主要介绍 HTML 相关知识，第 3 章和第 10 章将分别对 CSS、JavaScript 展开介绍。
本书基于 IDEA2022.3 版本，创建 JavaWeb 项目来实现所有代码，并在该项目下创建多个模块，其中第 2 章到第 13 章各对应一个单独的模块。
首先，创建 JavaWeb 项目，具体步骤如下。
（1）单击菜单栏的 “File” 选项，选择 “New”，然后选择下一级 “Project...”，如图 2-1 所示。
（2）进入 New Project 新窗口，填写项目名称、路径等信息，填写完成后单击 “Create” 即可创建完成，如图 2-2 所示。
然后，在 JavaWeb 项目中，创建 chaper02_html 模块来存放本章的所有代码。创建项目和创建模块的步骤类似，具体如下。
（1）单击菜单栏的 “File” 选项，选择 “New”，然后选择下一级 “Module...”，如图 2-3 所示。
（2）进入 New Module 新窗口，填写模块名称、路径等信息，然后单击 “Create” 即可创建完成，如图 2-4 所示。
创建完项目及模块后，下面将正式进入本章 HTML 的学习。
2.1 HTML 简介¶
HTML 已经在 1.2.1 节介绍了，接下来我们看一下 HTML 的基本结构：
<!-- 文档头，即文档版本声明，用来设置 html 的版本-->
<!DOCTYPE html >
<!-- 骨架标签 -->
<html>
<head>
<!-- 并非页面的展示内容，而是页面的一些基本设置-->
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<!-- 页面展示的内容 -->
Hello World!
</body>
</html>
例如，创建 HelloWorld.html 文件，编写代码实现在页面中输出 “Hello, World!” 字符串。
在 IDEA 中创建 HTML 文件的步骤如图 2-5 所示，右键单击该模块，选择 “New”，然后选择 “HTML File” 进行创建。
代码如下。
<!DOCTYPE html >
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
Hello, World!
</body>
</html>
使用浏览器运行 HelloWorld.html 文件如图 2-6 所示，结果是成功显示 “Hello, World!”。
注意，HTML 文件的运行方式有两种。一种是针对本地 HTML 文件，直接左键双击该文件，自动跳转浏览器，如图 2-7 所示。另一种是借助 IDEA 工具打开 HTML 文件，如图 2-8 所示，选择文件右侧的浏览器，单击即可。由于涉及文件路径的问题，我们暂时选择第一种，直接双击 HTML 文件。
另外，HTML 文件的扩展名可以是 “.html” 或 “.htm”，这是两种常见的命名约定。“.html” 扩展名使用长文件名格式，而 “.htm” 扩展名是为了与过去的 DOS 命名格式兼容而存在的。从使用效果上来说，无论是 “.html” 还是 “.htm” 扩展名，浏览器都可以正常解析和显示 HTML 文件，它们没有实质上的区别。
2.2 基本语法¶
学习 HTML 就是学习 HTML 预先设定好的标签和效果。对于前端页面而言，“万物皆标签”。标签，即标记，也就是超文本，指特殊格式和固定命名的字符串。每个标签都有自己的显示效果，例如，“<input>” 变成一个输入框，而 “<button>” 变成一个按钮。本书基于 HTML5，接下来学习其标签的语法。
标签是由 “<” 开始、由 “>” 结束的，并且标签名不区分大小写。标签可以分为双标签和单标签（也叫自结束标签）。
双标签就是 2.1 节案例中所使用的标签的形式，由两个标签组成，一个代表开始，一个代表结束。结束的标签中要使用斜杠 “/” 并在其后加标签名，如 “</body>”。需要注意的是，双标签的标签名都是相同的，要成对出现，语法格式如下。
单标签也叫自结束标签，顾名思义，单标签不是成对出现的，单标签只需要一个标签，结尾以斜杠 “/” 来结尾。例如，“<br/>”，该标签表示的含义是换行。
例如，修改 HelloWorld.html 文件，在 Hello 和 World 之间添加换行标签，具体代码如下。
<!DOCTYPE html >
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
Hello<br/>World!
</body>
</html>
添加换行后，使用浏览器打开 HelloWorld.html 文件查看效果，如图 2-9 所示，在 Hello 和 World 之间成功换行。
从上面两个案例可以看出：标签与标签出现了嵌套。后面的编码过程中我们经常会遇到 “双标签中嵌套单标签，双标签中嵌套双标签” 的情况。
任何的程序、代码都有注释，注释是给程序员看的，不影响程序运行。HTML 中注释符的格式由小于号 “<” 后接感叹号 “!”、2 个短横线 “--” 加上注释的内容，再接上 2 个短横线 “--” 和大于号 “>” 构成。另外，注释内容支持换行，也就是支持多行注释。语法格式如下。
注释通常用于说明代码含义。其实在实际开发中，书写注释不仅可以帮助程序员记忆代码功能，还可以大大提升代码的可读性。建议尽量多书写注释，以提升代码的质量。
另外，值得注意的是，编写 HTML 代码，我们必须要遵守以下语法规则。
2.3 基础标签¶
下面对常用的标签展开讲解。基础标签包括标记文本、超链接、列表，以及标题标签、段落标签、图像标签等。首先介绍 <head> 标签中的两个标签，即 <title> 标签和 <meta> 标签。
(1) <title> 标签是双标签，包括开始和结束两个标签，表示网页的标题。
例如，修改 HelloWorld.html 文件，在 <title> 标签中填写内容，具体代码如下。
使用浏览器打开 HelloWorld.html 文件查看效果，添加 title 标签如图 2-10 所示，可以看到显示了该网页的标题。
（2）<meta> 标签是一个单标签，可以用来在 HTML 文件中模拟 HTTP 的响应头报文。该标签包含一个 charset 属性，可以设置文件的字符编码。注意，乱码的根本原因是编码和解码使用的编码方式不一致，因此保证编码和解码格式一致是避免乱码产生的重要前提。
例如，修改 HelloWorld.html 文件的编码格式为 “GBK”，并在 <body> 标签中添加带有中文的字符串 “你好，HTML！”，具体代码如下。
<!DOCTYPE html >
<html>
<head>
<title>这是我的第一个网页</title>
<meta charset="GBK">
</head>
<body>
<!-- 页面展示的内容 -->
Hello, World!
你好，HTML!
</body>
</html>
访问该文件，如图 2-11 所示，发现出现中文乱码。
再次修改编码格式为 “UTF-8” 后访问文件结果，如图 2-12 所示，发现中文显示正常。
用户访问网站主要是为了获取网站相关内容，对于他们来说，该网站是否能轻松获得相关的内容是最重要的事情。所谓内容指的不只是文本，还包括其他形式的信息，如图像、视频、音频等。接下来，介绍表示网页中不同形式内容的标签，也就是用在 <body> 标签中的标签，主要包括标记文本、超链接、列表、标题、段落、图像等标签。
2.3.1 行内标签¶
使用标签标记普通文本，包括设置文本为粗体、斜体，以及文本带有下画线、删除线等形式，常用的标签如下。
- <b> 标签或 <strong> 标签，表示将标记的文本显示为粗体，其语法格式如下。
- <i> 标签，表示将标记的文本显示为斜体。其语法格式如下。
- <u> 标签，表示将标记的文本显示为带下画线的文本，通常用来描述拼写错误等提示。其语法格式如下。
- <s> 标签，表示将标记的文本显示为加删除线的文本，通常用来描述不存在、不相关的事物。其语法格式如下。
下面分别对以上标签进行演示。创建 section03.html 文件，示例代码如下。
<!DOCTYPE html >
<html>
<head>
<title>基础标签</title>
<meta charset="UTF-8">
</head>
<body>
I like <b>apples</b> and <b>oranges</b><br/>
我喜欢吃苹果和香蕉，最喜欢<strong>葡萄</strong><br/>
我喜欢吃<i>苹果</i>和<i>香蕉</i><br/>
Web 的全称是<u>World Wide Web</u><br/>
今日优惠已经<s>结束</s>
</body>
</html>
使用浏览器访问该文件查看效果，测试标记文本的标签如图 2-13 所示。
结果表明，添加了标签的文本呈现了不同形式的变化。
2.3.2 标题标签¶
HTML 中提供了 h1、h2、h3、h4、h5、h6 标签用来定义标题。所谓标题就是以几个固定字号显示的文字。其中，h1 的级别最高，h6 的级别最低，重要程度依次递减，而且标题标签是独占一行的。具体语法格式如下。
运行代码后，标题标签的页面效果如图 2-14 所示。
此外，我们也可以书写多个同级标题，在网页上通常用来将内容分作几个部分，每个部分一个主题。标题标签很好地构成了文件的大纲，示例代码如下。
<h1>Web 前端学习</h1>
<h2>第一章</h2>
<h3>第一节</h3>
<h3>第二节</h3>
<h3>第三节</h3>
<h2>第二章</h2>
<h3>第一节</h3>
<h3>第二节</h3>
<h3>第三节</h3>
运行代码后，多个同级标签的页面效果如图 2-15 所示。
2.3.3 段落标签¶
<p> 标签，用来标识一个段落，该标签的表现形式会在段落上、下加入空白，也就是段落之间自动换行！语法格式如下所示。
此外，HTML 还提供了 <hr> 标签，用来表示段落级别的主题转换，它表现为一条水平线。值得一提的是，<hr> 标签是一个单标签。
下面通过案例演示段落标签，示例代码如下。
测试段落标签如图 2-16 所示。
2.3.4 超链接¶
超链接是指从一个网页指向一个目标的连接关系。在一个 Web 项目中各个网页就是由超链接连接起来的。在 HTML 中，使用 <a> 标签来指定一个超链接，其语法格式如下所示。
<a> 标签间的内容会显示到页面上，在页面上单击超链接后，链接目标将显示在浏览器上，并且根据目标类型来打开或运行。
但并不是只要书写标签间的文字就可以实现超链接，HTML 为 <a> 标签提供了 href 属性，该属性用来指定单击链接之后要跳转的目标，标签的属性需要书写在标签中，如下代码所示。
例如，想要链接到尚硅谷官网，就可以书写为如下形式。
测试超链接标签如图 2-17 所示。
当在页面上单击 “尚硅谷” 文本的超链接时，会跳转到尚硅谷的官网，如图 2-18 所示。
href 属性值可以使用绝对路径，也可以使用相对路径。接下来我们对绝对路径和相对路径进行相关介绍。
首先我们需要明确什么是路径。所谓路径就是用来描述当前文件和其他文件的位置关系。比如，a.html 文件在磁盘 E 的目录下，这样的位置关系就可以称之为路径，因为它准确地描述了 a.html 文件和磁盘 E 的关系。
本地绝对路径比较常见，比如，“E:\www\logo.jpg” 就是本地绝对路径，表示 E 盘下的 www 文件夹下的 logo.jpg。
而相对路径是相对于当前文件所在的路径来计算的路径。在相对路径中，使用 “.” 表示当前文件所在的目录，使用 “..” 表示当前文件所在文件目录的上级目录，“./” 表示当前文件所在的目录下，“../” 表示当前文件所在目录的上级目录下。另外，“./” 可以省略，也就是路径前面不加 “./” 时也表示当前文件所在的目录下。
在上面的讲解中，出现了目录分隔符 “/” 和 “\”，它们用来表示文件路径中的层级关系。在 Windows 操作系统中能识别 “\” 和 “/”，而在 Linux 操作系统中只能识别 “/”，因此在 Web 网页中我们统一使用 “/” 作为目录分隔符。
针对以下目录，分析四种文件路径的使用情况。
（1）情况一：使用下级目录中的文件。
假设在编写 1.html 时，需要使用同目录中 img1 中的 img.jpg, 那么可以在 1.html 中写为 “./img1/img.jpg”。需要注意的是，前面不加 “./” 时同样表示当前文件所在的目录下。也就是说，“img1/img.jpg” 也可以表示，使用同目录下 img1 中的 img.jpg。
(2) 情况二：使用同级目录中的文件。
假设在编写 img1 目录下的 test.html 时，需要使用同目录下的 img.jpg，那么可以在 test.html 中写为 “./img.jpg”。与情况一相同，同样可以省略 “./”。
（3）情况三：使用上级目录中的文件。
假设在编写 src 目录下的 2.html 时，需要使用 img1 目录中的 img.jpg，那么可以在 2.html 中写为 “../img1/img.jpg”。
（4）情况四：使用多层上级目录中的文件。
假设在编写 html 目录中的 3.html 时，需要使用 img1 目录中的 img.jpg，那么可以在 3.html 中写为 “.././img1/img.jpg”。
接下来继续演示使用相对路径跳转新页面。在 section03.html 同级目录下创建 1.html，并在 1.html 文件中编写字符串 “我是一个新网页”，具体代码如下。
<!DOCTYPE html >
<html>
<head>
<title>新网页</title>
<meta charset="UTF-8">
</head>
<body>
我是一个新网页
</body>
</html>
然后，在 section03.html 文件中添加一行代码，跳转 1.html 网页。
使用浏览器访问 section03.html，使用相对路径跳转页面如图 2-19 所示。
此时超链接的 href 属性使用的是相对路径，单击 “跳转到 1.html 页面”，即可成功跳转，如图 2-20 所示。
对于 href 属性还有一点需要注意，最好不要将其值写为本地的绝对路径，否则经过 Web 服务器端将不能进行访问。
另外，<a> 标签中的 target 属性指定跳转目标在哪里打开。它有两个属性值，分别是 _self 和 _blank。具体如下。
例如，在 section03.html 文件中，编写测试代码如下。
<!--在本页面打开-->
<a href="http://www.atguigu.com" target="_self">尚硅谷官网1</a>
<!--在新页面打开-->
<a href="http://www.atguigu.com" target="_blank">尚硅谷官网2</a>
运行代码查看效果，测试 <a> 标签中的 target 属性如图 2-21 所示。
单击 “尚硅谷官网 1”，如图 2-22 所示，跳转的网页在当前窗口打开，覆盖之前的网页，在当前页面加载新网页。
单击 “尚硅谷官网 2”，如图 2-23 所示，跳转的网页在新窗口打开，之前的网页没有被覆盖。
另外，书写标签属性时需要注意以下两点。
请注意，尽管在某些情况下可以省略引号，但使用引号是一种良好的编码风格，可以避免由于属性值中含有空格或特殊字符而引起的错误。
2.3.5 锚点¶
所谓锚点是指在 URL 地址中出现的片段标识符，也称为页面内链接。如果所请求的目标是一个大目标，那么可以使用 <a> 链接来将页面划分成大目标的一个一个小目标，之后在地址栏中输入这个小目标的标识之后跳转到小目标的位置。
<a> 标签的 id 属性可以在页面中划分一个一个小目标，其属性的值可以是自定义的字母、数字，但是尽量不要使用数字开头来创建 test_anchors.html，示例代码如下。
<a id="test1">测试一</a>
测试内容<br/>
测试内容<br/>
测试内容<br/>
...
测试内容<br/>
...
测试内容<br/>
...
测试内容<br/>
...
测试内容<br/>
...
测试内容<br/>
...
测试内容<br/>
...
测试内容<br/>
...
测试内容<br/>
...
测试内容<br/>
...
测试内容<br/>
...
测试内容<br/>
...
测试内容<br/>
...
测试内容<br/>
...
测试内容<br/>
...
测试内容<br/>
...
测试内容<br/>
...
测试内容<br/>
...
测试内容<br/>
...
测试内容<br/>
...
测试内容<br/>
...
在上面代码的基础上，直接在浏览器地址栏的地址后面加上 “#test1” 或 “#test2” 将跳转至其对应的页面标记的小目标位置。如图 2-24 所示，地址后面添加 “#test2” 的效果。
以上做法虽然可以跳转到小目标位置，但是每次都需要在地址栏上输入，比较麻烦，因此可以定义跳转到这个小目标的超链接。示例代码如下，在上面代码的顶端加上 <a> 标签来进行测试。
上面代码中使用相对路径，只是写了 “#test1” 和 “#test2”，那么路径将会解析为当前的文件地址。
锚点也可以链接到其他目标的小目标，示例代码如下。
<a href="./index.html#test1">跳转到 index.html 测试一的位置</a>
<a href="./index.html#test2">跳转到 index.html 测试二的位置</a>
上述代码中，单击任何一个链接将直接跳转到 index.html 的小目标位置。
2.3.6 图像标签¶
HTML 提供了 <img> 标签，可以向网页中嵌入图片。<img> 标签是一个单标签，不需要书写标签对。<img> 标签可以书写多个属性，下面将依次展开介绍。
<img> 标签中可以书写 src 属性，用来指定要嵌入的图片的 URL 地址，地址可以是绝对路径也可以是相对路径。示例代码如下。
上方代码在 src 属性中书写了绝对路径和相对路径，相对路径表示要嵌入图片的 URL 地址是当前目录下 images 文件夹下的 logo.png 图片，绝对路径表示要嵌入图片的 URL 是本地电脑 E 盘目录下的 www 文件夹下的 logo.png 图片。
<img> 标签中可以书写 width 属性，设置图片的宽度；书写 height 属性，设置图片的高度。示例代码如下。 <img src="./images/logo.png" width="409" height="292"/>
<img> 标签中还可以书写 alt 属性，用来指定 <img> 标签的备用内容，这个内容会在图像无法显示时出现。示例代码如下。
例如，在 section03.html 文件中，编写测试代码如下。
但没有在 section03.html 同级目录 images 中添加图片，当图片无法加载时，会显示 alt 属性中的内容 “尚
硅谷 logo”，如图 2-25 所示。
<img> 标签的常见用法是结合 <a> 标签，创建一个可以单击的图像链接。例如，在 section03.html 中编写测试代码如下。
上方代码实现了单击图像可以跳转尚硅谷官网的效果，在网页中插入图片运行代码查看效果，如图 2-26 所示。
单击图片，成功跳转尚硅谷官网，如图 2-27 所示。
2.3.7 列表¶
列表分为有序列表、无序列表和自定义列表三种，其中，有序列表就是按照字母或数字等顺序排列的列表项目。
在 HTML 中，使用 <ol> 标签来编写一个带有编号的列表。需要注意的是，<ol> 标签只是定义了一个有序列表，列表中的每项内容需要使用 <li> 标签来表示。
无序列表与有序列表的表现形式相似，只不过无序列表是一个没有序号的列表。<ul> 标签只是定义了一个无序列表，列表中的每项内容同样需要使用 <li> 标签来表示。
如图 2-28 所示，该图为我们常见的试卷截图，共有 4 道题，这就是有序列表的一种形式。
请判断下面说法是否正确（对的在括号内打“√”，错的在括号内打“×”）：
1. “http://www.atguigu.com”为绝对路径。（）
2. <b>标签可以将标记的文本显示为粗体，突出显示内容。（）
3. <i>标签可以将标记的文本显示为带下画线的文本。（）
4. <p>标签用来标识一个段落，该标签的表现形式会在段落上、下加入空白。（）
下面使用 <ol> 标签和 <li> 标签实现这个有序列表。具体代码如下。
请判断下面说法是否正确（对的在括号内打 “√”，错的在括号内打 “×”）：
<ol>
<li> "http://www.atguigu.com" 为绝对路径。 （）</li>
<li><b>标签可以将标记的文本显示为粗体，突出显示内容。 （）</li>
<li><i>标签可以将标记的文本显示为带下画线的文本。 （）</li>
<li><p>标签用来标识一个段落，该标签的表现形式会在段落上、下加入空白。 （）</li>
</ol>
另外，<li> 标签的结束标签也可以省略，页面效果不会改变。
有序列表的 type 属性用于设置列表的编号类型，取值有 5 种，分别是 1（数字）、i（小写罗马字母）、I（大写罗马字母）、a（小写字母）、A（大写字母）。其默认值为 1，有序列表的编号按照选择的不同类型依次顺延，修改上述代码中 <ol> 标签的 type 属性值为 i，示例代码如下。
请判断下面说法是否正确（对的在括号内打 “√”，错的在括号内打 “×”）：
<ol type="i">
<li> "http://www.atguigu.com" 为绝对路径。() </li>
<li><b>标签可以将标记的文本显示为粗体，突出显示内容。() </li>
<li><i>标签可以将标记的文本显示为带下画线的文本。() </li>
<li><p>标签用来标识一个段落，该标签的表现形式会在段落上、下加入空白。() </li>
</ol>
运行代码查看页面效果，修改 type 属性值，如图 2-29 所示，编号变成了小写罗马字母。
i. “http://www.atguigu.com” 为绝对路径。 （）
ii. <b>标签可以将标记的文本显示为粗体，突出显示内容。（）
iii. <i>标签可以将标记的文本显示为带下画线的文本。（）
iv. <p>标签用来标识一个段落，该标签的表现形式会在段落上、下加入空白。（）
无序列表也会按照 <li> 标签的顺序显示，只是不显示序列号，如图 2-30 所示。
下面使用 <ul> 标签和 <li> 标签实现这个无序列表。具体代码如下。
常见的蔬菜
无序列表的 type 属性有 4 种取值，分别是 disc（实心圆）、circle（空心圆）、square（实心正方形）、none（取消前缀）。其默认值为 disc，分别演示剩余的三种情况，如图 2-31、图 2-32 和图 2-33 所示。
不管是有序列表还是无序列表，其中的 <li> 标签都可以嵌套有序、无序列表或其他标签。比如，<li> 标签中可以嵌套超链接或者另一个无序列表，示例代码如下。
宠物列表
<ul>
<li>
<a href="https://baike.baidu.com">哺乳类动物</a>
<ul>
<li>狗</li>
<li>猫</li>
<li>鼠</li>
<li>马</li>
</ul>
</li>
<li>
<a href="https://baike.baidu.com">爬行类动物</a>
<ul>
<li>蜥蜴</li>
<li>蛇</li>
<li>龟</li>
<li>鳄鱼</li>
</ul>
</li>
</ul>
运行代码查看效果，列表嵌套如图 2-34 所示。
代码中使用 <ul> 标签定义了无序列表，在其内部使用两个 <li> 标签。<li> 标签内分别嵌套了 <a> 标签和新的 <ul> 标签，从而展示了 2 级列表的效果。
这里，读者可能会对什么时候使用有序列表或者无序列表产生疑惑。实际上如果改变列表中 <li> 标签的顺序，会使得这个列表对应的意义发生改变，那么应该使用 <ol> 标签；如果更改之后意义没有发生改变，那么使用 <ul> 标签更为合适。
另外，如果需要定义列表包含着一系列标题或者说明的组合，还可以使用自定义列表来实现。自定义列表需要使用三个标签，分别是 <dl> 标签、<dt> 标签和 <dd> 标签，具体如下。
下面通过一个案例来演示这三种标签的使用，示例代码如下。
<d1>
<!--定义标题-->
<dt>苹果</dt>
<!--定义说明-->
<dd>蔷薇科苹果属植物</dd>
<dd>苹果的功效：益胃，生津，除烦，醒酒。主津少口渴，脾虚泄泻，食后腹胀，饮酒过度。</dd>
</dl>
从代码中可以看出，<dl> 标签相当于有序列表的 <ol> 标签，用来定义列表；<dt> 标签用来定义标题 “苹果”；<dd> 标签用来定义说明 “蔷薇科苹果属植物” 和 “苹果的功效：益胃……”。运行代码查看效果，如图 2-35 所示。
其实每个自定义列表中可以有一个或多个 <dt> 标签，以及一个或多个 <dd> 标签。示例代码如下。
<d1>
<!--定义标题-->
<dt>苹果</dt>
<!--定义说明-->
<dd>蔷薇科苹果属植物</dd>
<dd>苹果的功效：益胃，生津，除烦，醒酒。主津少口渴，脾虚泄泻，食后腹胀，饮酒过度。</dd>
<dt>香蕉</dt>
<dd>芭蕉科芭蕉属植物</dd>
<dd>香蕉的功效：清热，补充能量，保护胃黏膜，降血压，通便润肠道，安神助睡眠，保持心情愉悦，抗癌，解酒。
</dd>
</dl>
代码中使用 <dt> 标签定义了两个标题，苹果和香蕉。并对应配以说明，运行代码查看效果，如图 2-36 所示。
2.3.8 其他标签¶
还有一种标签，它们不是为了显示内容，只是实现某种功能，如换行、分割线，以及布局标签。
<span> 标签用来表示无特殊语义的一些文本内容，其语法格式如下。
<div> 标签语法格式如下。
通常情况下，<span> 标签和 <div> 标签标记的内容需要使用 CSS 样式来进行修饰。下面创建 test_div_span.html 文件对这两个标签进行案例演示，示例代码如下。
<!DOCTYPE html >
<html>
<head>
<title>测试 div</title>
<meta charset="UTF-8">
<style type="text/css">
div{
width: 200px;
height: 200px;
}
.div1{
background-color:#ABC;
}
.div2{
background-color:#BCA;
}
.div3{
background-color:#CBA;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<br/>
<span class="div1">span1</span>
<span class="div2">span2</span>
<span class="div3">span3</span>
</body>
</html>
运行代码查看效果，测试 <div> 标签的页面效果如图 2-37 所示。
结果表明，每个 <div> 标签独占一行，而所有 <span> 标签则默认共享一行。
2.3.9 实体¶
HTML 对空格和回车的处理比较特殊。在 HTML 文件中，一个空格和多个空格都会被当作一个空格来处理，一个回车和多个回车也会被当作一个空格来处理。
要在 HTML 中显示多个空格，则需要通过实体来实现。那什么是实体呢？在 HTML 中有些字符是系统预留下来的，如果想要使用这些预留下来的字符就要使用实体将它们表示出来。实体的格式是 “&” 符号后接字母。下面以表格的形式列出一些常用的实体，如表 2-1 所示。
表 2-1 常用的实体
| 符号 | 实体 |
| 空格 | |
| 单引号(') | ' |
| 双引号(") | " |
| 大于号(>) | > |
| 小于号(<) | <; |
修改 HelloWorld.html 文件，在 “Hello, World!” 后面添加多个 “ ”（空格），然后访问该文件查看效果，如图 2-38 所示，发现 “Hello, World!” 后面间距变大了，成功添加了空格。
2.4 表格¶
前面介绍了基础标签，本节学习如何使用 HTML 在网页中实现表格。在生活中表格的应用随处可见，因为使用表格来展示数据信息，可以使用户快速从表格中获取想要的信息。常见的表格如图 2-39 所示。
图 2-39 常见的表格
| 海产品购买清单 | |||
| 品名 | 价格/斤（元） | 重量（斤） | 单项总价（元） |
| 花龙虾 | 350 | 3.6 | 1260 |
| 三文鱼 | 48 | 1.8 | 86.4 |
| 象牙蚌 | 270 | 4 | 1080 |
| 基围虾 | 68 | 5 | 340 |
| 总价（元） 2766.4 | |||
针对该表格，我们可以划分为 4 部分，划分后的表格如图 2-40 所示。
图 2-40 划分后的表格
| 海产品购买清单 ① | |||
| 品名 | 价格/斤（元） | ②重量（斤） | 单项总价（元） |
| 花龙虾 | 350 | 3.6 | 1260 |
| 三文鱼 | 48 | 1.8 | 86.4 |
| 象牙蚌 | 270 | 4 | 1080 |
| 基围虾 | 68 | 5 | 340 |
| ④ 总价（元） 2766.4 | |||
对图 2-40 中的 4 部分对应情况进行梳理，如表 2-2 所示。
表 2-2 表格内容对应关系
| 序号 | 表中对应名称 |
| 1 | 表格标题 |
| 2 | 表格表头 |
| 3 | 表格主体 |
| 4 | 表格脚注 |
也就是说，一个表格可以分为以上 4 个部分，HTML 提供了 <table> 标签来声明一个表格，而 <table> 标签内可以包含表格标题、表格表头、表格主体和表格脚注，分别对应如下标签。
在通常情况下，表格表头、表格主体、表格脚注的内部都有一行一行的数据，在 HTML 中使用 <tr> 标签来定义表格中的行。另外，HTML 还提供了 <th> 标签来定义每一行表头数据中的单元格、<td> 标签来定义每一行表格主体，以及表格脚注中的单元格。
下面通过标签实现图 2-39 中的 “海产品购买清单” 案例，创建 test_table.html 文件，示例代码如下。为了方便演示，案例中会使用 <table> 标签的属性 border，用来显示表格的边框。
<!DOCTYPE html >
<html>
<head>
<title>测试表格标签</title>
<meta charset="UTF-8">
</head>
<body>
<table border="1">
<caption>海产品购买清单</caption>
<thead>
<tr>
<th>品名</th>
<th>价格/斤（元）</th>
<th>重量（斤）</th>
<th>单项总价（元）</th>
</tr>
</thead>
<tbody>
<tr>
<td>花龙虾</td>
<td>350</td>
<td>3.6</td>
<td>1260</td>
</tr>
<tr>
<td>三文鱼</td>
<td>48</td>
<td>1.8</td>
<td>86.4</td>
</tr>
<tr>
<td>象拔蚌</td>
<td>270</td>
<td>4</td>
<td>1080</td>
</tr>
<tr>
<td>基围虾</td>
<td>68</td>
<td>5</td>
<td>340</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>总价（元）</td>
<td>2766.4</td>
</tr>
</tfoot>
</table>
</body>
</html>
对于 border 属性，如果设置其值为 0，意味着没有边框；如果将其值设置为 1，表示设置了 1px 大小的边框。其实在 HTML5 中不建议使用该属性，因为这属于样式的修饰。一般使用 CSS 来修饰边框，这里只对该属性简单提及。
运行代码查看效果，如图 2-41 所示。
大多数程序员使用 HTML 编写表格时，不太习惯使用 <thead>、<tbody> 和 <tfoot> 标签，而是会将它们省略，因此上面的例子也可以写成如下代码。
图 2-41 在网页中实现表格
| 品名 | 价格/斤（元） | 重量（斤） | 单项总价（元） |
| 花龙虾 | 350 | 3.6 | 1260 |
| 三文鱼 | 48 | 1.8 | 86.4 |
| 象拔蚌 | 270 | 4 | 1080 |
| 基围虾 | 68 | 5 | 340 |
| 总价（元） | 2766.4 |
<!DOCTYPE html >
<html>
<head>
<title>测试表格标签</title>
<meta charset="UTF-8">
</head>
<body>
<table border="1">
<caption>海产品购买清单</caption>
<tr>
<th>品名</th>
<th>价格/斤（元）</th>
<th>重量（斤）</th>
<th>单项总价（元）</th>
</tr>
<tr>
<td>花龙虾</td>
<td>350</td>
<td>3.6</td>
</table>
</html>
<td>1260</td>
</tr>
<tr>
<td>三文鱼</td>
<td>48</td>
<td>1.8</td>
<td>86.4</td>
</tr>
<tr>
<td>象拔蚌</td>
<td>270</td>
<td>4</td>
<td>1080</td>
</tr>
<tr>
<td>基围虾</td>
<td>68</td>
<td>5</td>
<td>340</td>
</tr>
<tr>
<td></td>
<td></td>
<td>总价（元）</td>
<td>2766.4</td>
</tr>
</table>
</body>
</html>
运行代码可以看到，页面效果与图 2-41 相同。不过需要注意的是，即使在使用表格时省略了 <tbody> 标签，浏览器解析时也会自动将该标签加上。
另外，<th> 标签和 <td> 标签中都支持 colspan 和 rowspan 属性。colspan 的英文原意是跨列、合并列，顾名思义在 HTML 中用来规定单元格可以横跨的列数；rowspan 的英文原意是行距、合并行，同样在 HTML 中用来规定单元格可以竖跨的行数。
下面将通过一个案例来演示 colspan 和 rowspan 属性的使用。
现有一个 2 行 3 列的表格，如表 2-3 所示。
表 2-3 2 行 3 列的表格
| 1-1 | 1-2 | 1-3 |
| 2-1 | 2-2 | 2-3 |
根据之前所学，我们可以通过如下代码实现该 2 行 3 列的表格。
<table border="1">
<tbody>
<tr>
<td> 1-1 </td>
<td> 1-2 </td>
<td> 1-3 </td>
</tr>
<tr>
<td> 2-1 </td>
<td> 2-2 </td>
</table>
运行代码查看效果，如图 2-42 所示。
前面提到 colspan 属性，表示一个单元格可以横跨的列数。如果将其属性值设置为 2 会出现什么样的效果呢？下面将 2 行 3 列表格中的 1-1 单元格加上 colspan 属性并将其值设置为 2。示例代码如下。
<table border="1">
<tbody>
<tr>
<td colspan="2"> 1-1 </td>
<td> 1-2 </td>
<td> 1-3 </td>
</tr>
<tr>
<td> 2-1 </td>
<td> 2-2 </td>
<td> 2-3 </td>
</tr>
</tbody>
</table>
运行代码查看效果，如图 2-43 所示。
从页面效果看，仿佛和我们预想的效果并不一样。初始的表格本来是 2 行 3 列，每个单元格横向占据 1 列。但是，1-1 单元格设置 conspan 属性并将其设置为 2 之后，1-1 单元格占 2 列、1-2 占 1 列、1-3 占 1 列，这样看来，第一行共变为了 4 列，而第二行依旧是 3 列，最终只有 1-3 这个单元格超出了。
前文提及 rowspan 属性表示一个单元格可以竖跨的行数。如果给 1-1 单元格加上 rowspan 属性并将其值设为 2，会不会出现类似的效果呢？下面通过代码进行验证。
<table border="1">
<tbody>
<tr>
<td rowspan="2"> 1-1 </td>
<td> 1-2 </td>
<td> 1-3 </td>
</tr>
<tr>
<td> 2-1 </td>
<td> 2-2 </td>
<td> 2-3 </td>
</tr>
</table>
运行代码查看效果，如图 2-44 所示。
从图 2-42 来看，表格本来是 2 行 3 列（每个单元格纵向占据 1 行），但是 1-1 单元格给 rowspan 设置值为 2 之后，1-1 单元格会向下一行多占据一行，纵向占 2 行、横向占 1 列，2-1 占 1 列、2-2 占 1 列、2-3 占 1 列，第二行总共变为 4 列，而第一行还是总共 3 列，最终结果 2-3 这个单元格超出了。
综上，如果需要合并单元格，为了不影响原来的表格大小，合并几个单元格，相应地则需要删除几个多余的单元格。
例如，给 1-1 单元格加上 rowspan 属性并将其值为 2，为保证原来表格大小，则需要删除 2-1 单元格，示例代码如下。
<table border="1">
<tbody>
<tr>
<td rowspan="2"> 1-1 </td>
<td> 1-2 </td>
<td> 1-3 </td>
</tr>
<tr>
<!--删除2-1单元格-->
<!--<td> 2-1 </td-->
<td> 2-2 </td>
<td> 2-3 </td>
</tr>
</tbody>
</table>
合并后正常的单元格如图 2-45 所示。
2.5 表单¶
学完表格，接着学习另一个常用的标签：表单。网页中通常使用表单提交数据，需要从客户端发起请求至服务器端，然后服务器端给出响应。下面，我们对创建表单涉及的标签进行简单介绍。
- <form> 标签：用于创建一个表单。在 <form> 标签内，通常会放置一个或多个专门用于表单的标签，这些表单标签用于提供输入信息的不同方式，如文本框、单选、多选、下拉菜单等。
- <input> 标签：用于创建一个文本框。<input> 标签可以设置 name 属性给该标签命名；设置 type 属性用来定义 <form> 标签中输入数据的类型，包括 4 种属性值，分别是 text（文本输入框）、password（密码框）、radio（单选框）和 checkbox（复选框）；还可以设置 value 属性值，用来表示文本输入框中默认显示的内容。
图 2-46 就是一个经典的用户登录表单，创建 test_form.html 文件，示例代码如下。
<!DOCTYPE html >
<html>
<head>
<title>测试表单标签</title>
<meta charset="UTF-8">
</head>
<body>
<form>
用户名：<input name="username" type="text"/></br/>
密码：<input name="password" type="password"/></br/>
<button>提交</button>
</form>
</body>
</html>
代码中定义了两个文本框，文本框类型分别是文本和密码。运行代码查看效果，如图 2-46 所示。
此时输入信息，在用户名对应文本框中显示的是用户名文本，在密码对应文本框中无论输入什么都以 “*” 来显示，如图 2-47 所示。
需要注意的是，虽然密码框在表单中展示为占位符 “*”，好像被加密了，但是如果提交表单后就会发现实际上并没有被加密。提交表单后，查看浏览器地址栏，如图 2-48 所示。
2.5.1 表单标签的常用属性¶
<form> 标签拥有两个常用属性，分别为 action 属性和 method 属性。
前面案例中，可以发现表单中提交的值都在 URL 中以查询字符串的形式进行传递。其实，这是因为，此时 <form> 标签的 method 属性默认值为 get。method 的值除了 get，还可以为 post。当 method 的值为 get 时，数据将会以查询字符串方式提交；当 method 的值为 post 时，数据将会被打包在请求中。在实际使用中，为了安全起见，更建议在提交表单的时候使用 post 方式。
修改用户登录页面代码，实现登录成功后跳转到 success.html 页面，并设置表单提交方式为 post。
<!DOCTYPE html >
<html>
<head>
<title>测试表单标签</title>
<meta charset="UTF-8">
</head>
<body>
<form action="success.html" method="post">
用户名：<input name="username" type="text" /><br/>
密码：<input name="password" type="password" /><br/>
<button>提交</button>
</form>
</body>
</html>
success.html 页面的代码如下。
<!DOCTYPE html >
<html>
<head>
<title>用户成功登录</title>
<meta charset="UTF-8">
</head>
<body>
登录成功！
</body>
</html>
再次提交表单查看效果，如图 2-49 所示。
结果表明，提交表单后成功跳转至 success.html 页面，并且 URL 中没有显示用户名和密码信息。
2.5.2 表单项标签¶
表单中的每一项，包括文本框、密码框、单选框、多选框等，都称为表单项，一个表单中可以包含多个表单项。
介绍表单项标签前，首先了解一下其常用属性，如 name 属性和 value 属性。
用户在使用一个软件系统时，有时需要一次性提交很多数据，在这种情况下肯定不可能要求用户一个数据一个数据地提交，而是将所有数据填好后一起提交。那么，由此会带来一个问题，服务器端如何从众多数据中识别出具体的用户信息呢（如收货人、所在地区、详细地址、手机号码等）？
很简单，需要给每个数据都起一个名字，发送数据时用名字携带对应的数据，接收数据时通过名字获取对应的数据。在各个具体的表单项标签中，我们通过 name 属性给数据起名字，通过 value 属性来保存要
发送给服务器端的值。
但是，名字和值之间既有可能是一个名字对应一个值，也有可能是一个名字对应多个值。如此看来，这样的关系很像 Java 中的 map 集合，而事实上在服务器端就是使用 Map 类型来接收请求参数的。具体的类型是：Map<String, String []>，即 name 属性就是 Map 的键，value 属性就是 Map 的值。
了解了 name 属性和 value 属性后，下面我们来看具体的表单项标签。前面的用户登录表单中已经介绍了文本框、密码框的用法，下面接着介绍其余表单项。
(1) 单选框。¶
<input> 标签的 type 属性为 radio 表示单选框，name 属性相同的 radio 为一组，组内互斥，即一组只能选择一个值。示例代码如下。
<input type="radio" name="season" value="spring" />春天
<input type="radio" name="season" value="summer" checked="checked" />夏天
<input type="radio" name="season" value="autumn" />秋天
<input type="radio" name="season" value="winter" />冬天
<br/><br/>
<input type="radio" name="animal" value="tiger" />路虎
<input type="radio" name="animal" value="horse" checked />宝马
<input type="radio" name="animal" value="cheetah" />捷豹
上述代码中呈现了两组属性，name 属性为 “season” 代表一组，name 属性为 “animal” 的代表另一组。用户在选择了一个 radio 并提交表单后，这个 radio 的 name 属性和 value 属性将组成一个键值对发送给服务器端。另外，设置 checked 属性，表示该 radio 默认被选。
值得注意的是，如果属性名和属性值一致，可以省略属性值，只写 checked 即可。单选框的页面效果如图 2-50 所示。
(2) 多选框。¶
<input> 标签的 type 属性为 checkbox 表示多选框，与单选框的区别在于，name 属性相同的 checkbox 为一组，组内一次可以选择多个值。示例代码如下。
<input type="checkbox" name="team" value="Brazil"/>巴西队
<input type="checkbox" name="team" value="German" checked/>德团队
<input type="checkbox" name="team" value="France"/>法国队
<input type="checkbox" name="team" value="China" checked="checked"/>中国队
<input type="checkbox" name="team" value="Italian"/>意大利队
同单选框，这里设置 checked 属性，表示该 checkbox 默认被选。多选框的页面效果如图 2-51 所示。
(3) 下拉框。¶
下拉框用到了 2 种标签，其中，<select> 标签用来定义下拉列表，<option> 标签设置列表项。示例代码如下。
你喜欢的运动是：
<select name="interesting">
<option value="swimming">游泳</option>
<option value="running">跑步</option>
<option value="shooting" selected="selected">射击</option>
<option value="skating">滑冰</option>
</select>
name 属性在 <select> 标签中设置。value 属性在 <option> 标签中设置。<option> 标签的标签体是显示出来给用户看的，提交到服务器端的是 value 属性的值。
值得注意的是，通过在 <option> 标签中设置 “selected="selected"” 属性实现默认选中的效果。同理，其可以简化为只写 selected。
下拉框的页面效果如图 2-52 所示。
(4) 按钮。¶
按钮分为普通按钮、重置按钮和提交按钮三种。普通按钮，表示单击后无效果，需要通过 JavaScript 绑定单击响应函数。重置按钮，表示单击后将表单内的所有表单项都恢复为默认值。提交按钮，表示单击后提交表单。
<!--普通按钮-->
<button type="button">普通按钮</button>
或
<input type="button" value="普通按钮"/>
<!--重置按钮-->
<button type="reset">重置按钮</button>
或
<input type="reset" value="重置按钮"/>
<!--提交按钮-->
<button type="submit">提交按钮</button>
或
<input type="submit" value="提交按钮"/>
以上三种按钮分别包含两种形式，下面每种按钮选其一进行演示，按钮的演示效果如图 2-53 所示。
(5) 隐藏域。¶
通过表单，隐藏域设置的表单项不会显示到页面上，用户看不到，但是提交表单时会一起被提交。一
般，隐藏域用来设置一些需要和表单一起提交但是不希望用户看到的数据，如用户 id，示例代码如下。
(6) 多行文本框。¶
<textarea> 标签表示多行文本框。示例代码如下。
多行文本框的页面效果如图 2-54 所示，可以在其中输入多行文本。
值得注意的是，<textarea> 标签没有 value 属性，如果要设置默认值，则其需要写在开始和结束标签之间。自我介绍：<textarea name="desc"> 默认值书写位置 </textarea><br/>
(7) 文件上传。¶
<input> 标签的 type 属性为 file 表示文件上传。示例代码如下。
文件上传的演示效果如图 2-55 所示。
2.6 案例：小尚的个人资料修改¶
本节将结合之前所讲解的知识点，来实现一个经典案例。先来看一下要实现的页面效果，如图 2-56 所示。
观察图片可知，该案例用到了表格和表单的相关知识。表格用来固定布局，表单的相关内容用来标记需要修改的一些选项内容。
下面我们将从结构和表格两部分进行分析。
1. 结构分析¶
将图 2-56 进行划分，如图 2-57 所示。
可以将该案例的整体结构看为一个 10 行 2 列的表格。其中，图中编号①和编号③两部分只有一个单元格，但是占据了 2 列的空间；编号②就是普通 8 行 2 列的表格，在结构上没有什么特殊的部分，这里不
做具体讲解。
由此，创建 section06.html 文件，该案例的结构代码可以书写为如下代码。
<!DOCTYPE html >
<html>
<head>
<title>小尚的个人资料修改</title>
<meta charset="UTF-8">
</head>
<body>
<table border="1">
<thead>
<tr>
<td colspan="2">
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</body>
</html>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
</td>
</tr>
</tfoot>
</table>
</body>
</html>
运行代码查看效果，如图 2-58 所示。
2. 表单分析¶
根据表单中的相关内容对表单进行部分划分，如图 2-59 所示。
图 2-59 中共被划分为了 10 个区域，下面将对每个区域进行详细介绍。
（1）图中编号①是标题部分，可以使用 <h1> 标签来实现。
（2）图中编号②是一个文本输入框，文本输入框内有默认值 “lgzhyan”。登录账号默认是不允许修改的，因此还需要在 <input> 标签上加上 readonly（只读）属性。
（3）图中编号③、编号④是密码框，这里不多做讲解。
（4）图中编号⑤是一个文本输入框，对应的是邮箱地址。
（5）图中编号⑥是单选框，有两个选项：“男”“女”。从图 2-59 中可知，默认选中 “男”，因此在 “男” 对应的标签上需要书写 checked。
（6）图中编号⑦是复选框，有五个选项：“登山”“郊游”“养鱼”“钓鱼”“交友”。其中，“登山” 不允许被选中，因此要使用 disabled 属性禁用；“交友” 为默认选中项，需要使用 checked 属性。
（7）图中编号⑧是下拉列表。其默认项为 “中国”，需要在其对应的 <option> 标签上书写属性 checked。
（8）图中编号⑨是个人简介。因为输入内容较多，所以使用文本域 <textarea> 标签实现比较合适，其中默认值为 “这个人很懒什么都没有留下！”。
（9）图中编号⑩是确认修改按钮，这里不多做讲解。
分析后，代码实现就很简单了。最后整体代码的实现如下。
<!DOCTYPE html >
<html>
<head>
<title>小尚的个人资料修改</title>
<meta charset="UTF-8">
</head>
<body>
<form>
<table>
<tr>
<td colspan="2">
<h1>小尚的个人资料修改</h1>
</td>
</tr>
<tr>
<td>登录账号</td>
<td>
<input type="text" name="userName" id="userName" value="lgzhyan" readonly/>
</td>
</tr>
<tr>
<td>密 码</td>
<td>
<input type="password" name="passwd" id="passwd"/>
</td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input type="password" name="rePasswd" id="repasswd"/>
</td>
</tr>
<tr>
<td>邮箱地址</td>
<td>
<input type="password" name="email" id="email"/>
</td>
</tr>
<tr>
<td>性别</td>
<td>
男
<input type="radio" name="sex" id="radio1" checked/>
女
<input type="radio" name="sex" id="radio2"/>
</td>
</tr>
<tr>
<td>爱好</td>
<td>
登山
<input type="checkbox" name="hobby" id="checkbox1" value="1" disabled/>
郊游
<input type="checkbox" name="hobby" id="checkbox2" value="2"/>
养鱼
<input type="checkbox" name="hobby" id="checkbox3" value="3"/>
钓鱼
<input type="checkbox" name="hobby" id="checkbox4" value="4"/>
交友
<input type="checkbox" name="hobby" id="checkbox5" value="5" checked/>
</td>
</tr>
<tr>
<td>国籍</td>
<td>
<select name="country" id="country">
<option value="N">
--请选择国家--
</option>
<option value="C" selected>中国</option>
<option value="J">日本</option>
<option value="K">韩国</option>
</select>
</td>
</tr>
<tr>
<td>个人简介</td>
<td>
<textarea name="profile" id="profile" cols="30" rows="10">
这个人很懒，什么都没有留下！
</textarea>
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit">确认修改</button>
</td>
</tr>
</table>
</form>
</body>
</html>
运行代码查看效果，如图 2-60 所示。
2.7 本章小结¶
本章介绍了 HTML 相关知识，介绍了 HTML 常用标签，包括标题标签、列表、超链接、图像标签，以及表格标签、表单标签等，并重点介绍了各个标签的简单应用。同时，本章提供了一个综合案例来应用 HTML 不同标签，讲练结合，锻炼读者的动手能力，使读者加速理解 HTML 相关知识。对于 Web 开发阶段，学习前端技术不必深究，掌握如何使用即可，希望初学者多加练习，尽快熟悉起来。