2.2 设置段落效果
网页中文字的排列在很大程度上决定了一个网页是否美观。对于网页中的大段文字，通常采用分段、分行和加空格等方式进行规划。本节从段落的细节设置入手，使读者学习后能利用标签轻松自如地规划文字排版。
2.2.1 文本分段<p>标签
HTML标签中最常用的标签是段落标签<p>，这个标签非常简单，但是却非常重要，因为这是一个用来划分段落的标签，几乎在所有网页中都会用到。
<p>标签的基本语法如下。
<p>段落文字</p>
2.2.2 文本分行<br>标签
当文字到达浏览器的边界后将自动换行，但是当调整浏览器的宽度时，文字换行的位置也相应发生变化，格式就会显得混乱，因此在网页中添加换行标签是必要的。换行标签的基本语法如下。
<br>
在网页中，如果某一行的文本过长，浏览器会自动对这行文字进行换行，如果想取消浏览器的换行处理，可以使用<nobr>标签来禁止自动换行，该标签是成对出现的，有开始标签就有结束标签。
实战 为网页中的文本进行分段和分行处理
最终文件：最终文件\第2章\2-2-2.html 视频：视频\第2章\2-2-2.mp4
01 执行“文件>打开”命令，打开页面“源文件\第2章\2-2-2.html”，效果如图2-21所示，切换到代码视图中，可以看到相应的HTML代码，如图2-22所示。
图2-21 打开页面
图2-22 网页HTML代码
02 为页面中相应的文本添加<p>标签进行分段，如图2-23所示。保存页面，在浏览器中预览页面，可以看到为文本进行分段的效果，如图2-24所示。
图2-23 添加段落标签
图2-24 预览文字内容分段效果
提示
在网页中使用<p>标签对网页文本内容进行分段处理，默认情况下，段落与段落之间会有一点的空隙，便于用户区分不同的段落。
03 返回网页HTML代码中，在页面中的相应位置输入换行标签，如图2-25所示。保存页面，在浏览器中预览页面，可以看到为文本进行换行处理的效果，如图2-26所示。
图2-25 添加换行标签
图2-26 预览文字换行效果
提示
<br>标签是一个单标签，也叫空标签，不包含任何内容，在HTML代码中的任意位置中添加了<br>标签，当网页在浏览器中显示时，该标签之后的内容将会在下一行显示。
2.2.3 标签<h1>至<h6>标签
标题是网页中不可缺少的元素，为了凸显标题的重要性，标题的样式比较特殊。HTML技术保存了一套针对标题的样式标签，按照文字尺寸从大到小排列分别是从<h1>到<h6>。标题标签的基本语法如下。
<hx>这是标题</hx>
这里的下标x为数字从1到6，<hx>标签用于设置文章的标题，标题标签的特点是独占一行和文字加粗。在进行网页设计时，可以根据标题的等级来选择合适的标题，并设置多级标题。
实战 设置网页文本标题
最终文件：最终文件\第2章\2-2-3.html 视频：视频\第2章\2-2-3.mp4
01 执行“文件>打开”命令，打开页面“源文件\第2章\2-2-3.html”，效果如图2-27所示，切换到代码视图中，可以看到相应的HTML代码，如图2-28所示。
图2-27 打开页面
图2-28 网页HTML代码
02 为页面中相应的文字分别添加标题标签<h1>至<h6>，如图2-29所示。保存页面，在浏览器中预览页面，可以看到各标题文字的效果，如图2-30所示。
图2-29 添加标题标签
图2-30 预览默认的标题文字效果
提示
在HTML页面中通过<h1>至<h6>标签定义页面中的文字为标题文字，可以通过CSS样式分别设置<h1>至<h6>标签的CSS样式，从而修改<h1>至<h6>标签在网页中显示的效果。
2.2.4 水平线<hr>标签
HTML提供了修饰用的水平分割线，在很多场合中可以轻松使用，不需要另外作图。同时可以在HTML中为水平线添加颜色、大小和粗细等属性。
<hr>标签的基本语法如下。
<hr>
在网页中输入一个<hr>标签，就添加了一条默认样式的水平线，且在页面中占据一行。
标签<hr>有多种属性，常用的属性有width、size、align、color和title，分别可以设置水平线的宽度、高度、对齐方式和鼠标指针悬停在分割线上时出现的内容提示。
实战 在网页中插入水平线
最终文件：最终文件\第2章\2-2-4.html 视频：视频\第2章\2-2-4.mp4
01 执行“文件>打开”命令，打开页面“源文件\第2章\2-2-4.html”，效果如图2-31所示，切换到代码视图中，可以看到相应的HTML代码，如图2-32所示。
图2-31 打开页面
图2-32 网页HTML代码
02 在网页中标题文字之后添加<hr>标签，并对相关属性进行设置，如图2-33所示。保存页面，在浏览器中预览页面，可以看到所添加的水平线的效果，如图2-34所示。
图2-33 添加水平线标签及属性设置
图2-34 预览所插入的水平线效果
技巧
默认的水平线是空心立体的效果，可以在水平线标签<hr>中添加noshade属性，noshade是布尔值的属性，如果在<hr>标签中添加该属性，则浏览器不会显示立体形状的水平线，反之如果不添加该属性，则浏览器默认显示一条立体形状带有阴影的水平线。
2.2.5 文本对齐设置
段落文字在不同的时候需要不同的对齐方式，默认的对齐方式是左对齐。<p>标签的对齐属性为align，align属性的基本语法如下。
align="对齐方式"
align属性需要设置在段落或其他标签中，通过设置align属性为left、right或center值实现左对齐、右对齐和居中对齐。
实战 设置网页文本的对齐
最终文件：最终文件\第2章\2-2-5.html 视频：视频\第2章\2-2-5.mp4
01 执行“文件>打开”命令，打开页面“源文件\第2章\2-2-5.html”，效果如图2-35所示，切换到代码视图中，可以看到相应的HTML代码，如图2-36所示。
图2-35 打开页面
图2-36 网页HTML代码
02 在页面中id名称为title的<div>标签中添加align属性设置，如图2-37所示。保存页面，在浏览器中预览页面，可以看到文字水平居右对齐的效果，如图2-38所示。
图2-37 添加align属性设置
图2-38 预览文字水平右对齐效果
03 返回代码视图中，修改刚添加的align属性的属性值，如图2-39所示。保存页面，在浏览器中预览页面，可以看到文字水平居中对齐的效果，如图2-40所示。
图2-39 修改align属性设置
图2-40 预览文字水平居中对齐效果