1.3 文本控制标记
在一个网页中文字往往占有较大的篇幅，为了让文字能够排版整齐、结构清晰，HTML提供了一系列的文本控制标记，如标题标记<h1>～<h6>、段落标记<p>等。本节将对这些标记进行详细讲解。
1.3.1 标题和段落标记
一篇结构清晰的文章通常都有标题和段落，HTML网页也不例外。为了使网页中的文字有条理地显示出来，HTML提供了相应的标记，对它们的具体介绍如下。
1．标题标记
为了使网页更具有语义化，我们经常会在页面中用到标题标记，HTML提供了6个等级的标题，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，从<h1>到<h6>重要性递减。其基本语法格式为：
<hn align="对齐方式">标题文本</hn>
该语法中n的取值为1到6, align属性为可选属性，用于指定标题的对齐方式。下面通过一个案例说明标题标记的使用，如例1-7所示。
例1-7 example07.html
1 <! doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>标题标记的使用</title>
6 </head>
7 <body>
8 <h1>1级标题</h1>
9 <h2>2级标题</h2>
10 <h3>3级标题</h3>
11 <h4>4级标题</h4>
12 <h5>5级标题</h5>
13 <h6>6级标题</h6>
14 </body>
15 </html>
在例1-7中，使用<h1>到<h6>标记设置6种不同级别的标题。
运行例1-7，效果如图1-11所示。
从图1-11可以看出，默认情况下标题文字是加粗左对齐的，并且从<h1>到<h6>字号递减。如果想让标题文字右对齐或居中对齐，就需要使用align属性设置对齐方式，其取值如下。
● left：设置标题文字左对齐（默认值）。
● center：设置标题文字居中对齐。
● right：设置标题文字右对齐。
图1-11 设置标题标记
注意：
（1）一个页面中只能使用一个<h1>标记，常常被用在网站的Logo部分。
（2）由于h元素拥有确切的语义，请慎重选择恰当的标记来构建文档结构。禁止仅仅使用h标记设置文字加粗或更改文字的大小。
2．段落标记
在网页中要把文字有条理地显示出来，离不开段落标记，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标记就是<p>。默认情况下，文本在段落中会根据浏览器窗口的大小自动换行。<p>是HTML文档中最常见的标记，其基本语法格式为：
<p align="对齐方式">段落文本</p>
该语法中align属性为<p>标记的可选属性，和标题标记<h1>～<h6>一样，同样可以使用align属性设置段落文本的对齐方式。
下面通过一个案例来演示段落标记<p>的用法和其对齐方式，如例1-8所示。
例1-8 example08.html
1 <! doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>段落标记的用法和对齐方式</title>
6 </head>
7 <body>
8 <p>“IT问答精灵”为计算机爱好者提供Java、.NET、PHP、C/C++、网页设计、平面
设计、UI设计、iOS、Android方面的技术问题互助问答，由传智播客专业IT讲师在线答疑，致
力做最专业的IT学习互助平台。</p>
9 <p align="left">Java学院</p>
10 <p align="center">网页平面设计学院</p>
11 <p align="right">PHP学院</p>
12 </body>
13 </html>
在例1-8中第一个<p>标记为段落标记的默认对齐方式，第二、三、四个<p>标记分别使用align="left"、align="center"和align="right"设置了段落左对齐、居中对齐和右对齐。
运行例1-8，效果如图1-12所示。
图1-12 段落效果
从图1-12容易看出，通过使用<p>标记，每个段落都会独占一行，并且段落之间拉开了一定的间隔距离。
3．水平线标记<hr />
在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标记来完成，<hr />就是创建横跨网页水平线的标记。其基本语法格式为：
<hr属性="属性值" />
<hr />是单标记，在网页中输入一个<hr />，就添加了一条默认样式的水平线，<hr />标记几个常用的属性如表1-3所示。
表1-3 <hr />标记的常用属性
下面通过使用水平线分割段落文本来演示<hr />标记的用法和属性，如例1-9所示。
例1-9 example09.html
1 <! doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>水平线标记的用法和属性</title>
6 </head>
7 <body>
8 <p>传智播客专业于Java、.NET、PHP、C/C++、网页设计、平面设计、UI设计。从菜
鸟到职场达人的转变就在这里，你还等什么？</p>
9 <hr/>
10 <p align="left">Java学院</p>
11 <hr color="red"align="left"size="5"width="600"/>
12 <p align="center">网页平面设计学院</p>
13 <hr color="#0066FF"align="right"size="2"width="50%"/>
14 <p align="right">PHP学院</p>
15 </body>
16 </html>
在例1-9中，第一个<hr />标记为水平线的默认样式，第二、三个<hr />标记分别设置了不同的颜色、对齐方式、粗细和宽度值。
运行例1-9，效果如图1-13所示。
图1-13 水平线的样式
注意：
在实际工作中，不赞成使用<hr />的所有外观属性，可通过CSS样式进行设置。
4．换行标记<br />
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标记<br />，这时如果还像在Word中直接敲回车键换行就不起作用了，如例1-10所示。
例1-10 example10.html
1 <! doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>使用br标记换行</title>
6 </head>
7 <body>
8 <p>使用HTML制作网页时通过br标记<br/>可以实现换行效果</p>
9 <p>如果像在Word中一样
10 敲回车换行就不起作用了</p>
11 </body>
12 </html>
在例1-10中，分别使用换行标记<br />和回车键两种方式进行换行。
运行例1-10，效果如图1-14所示。
图1-14 换行标记的使用
从图1-14容易看出，使用回车键换行的段落在浏览器实际显示效果中并没有换行，只是多出了一个字符的空白，而使用换行标记<br />的段落却实现了强制换行的效果。
注意：
<br />标记虽然可以实现换行的效果，但并不能取代结构标记<h>、<p>等。
1.3.2 文本格式化标记
在网页中，有时需要为文字设置粗体、斜体或下划线效果，为此HTML准备了专门的文本格式化标记，使文字以特殊的方式显示，常用的文本格式化标记如表1-4所示。
表1-4 常用文本格式化标记
下面通过一个案例来演示其中某些标记的效果，如例1-11所示。
例1-11 example11.html
1 <! doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>文本格式化标记的使用</title>
6 </head>
7 <body>
8 <p>我是正常显示的文本</p>
9 <p><b>我是使用b标记定义的加粗文本</b></p>
10 <p><strong>我是使用strong标记定义的强调文本</strong></p>
11 <p><i>我是使用i标记定义的倾斜文本</i></p>
12 <p><em>我是使用em标记定义的强调文本</em></p>
13 <p><del>我是使用del标记定义的删除线文本</del></p>
14 <p><ins>我是使用del标记定义的下划线文本</ins></p>
15 </body>
16 </html>
在例1-11中，为段落文本分别应用不同的文本格式化标记，从而使文字产生特殊的显示效果。
运行例1-11，效果如图1-15所示。
图1-15 使用文本格式化标记
注意：
以上文本格式化标记均可使用<span>标记配合CSS样式替代，关于<span>标记将在第6章具体讲解。
1.3.3 特殊字符标记
浏览网页时常常会看到一些包含特殊字符的文本，如数学公式、版权信息等。那么如何在网页上显示这些包含特殊字符的文本呢？其实HTML早想到了这一点，并为这些特殊字符准备了专门的替代代码，如表1-5所示。
表1-5 常用特殊字符的表示
