3.1　段落排版

本节介绍HTML网页的段落排版，包括段落标签、对齐与缩进样式、分割线和段落标题等内容。

3.1.1　段落标签

在HTML网页中，段落是通过<p></p>标签元素来定义的。其实，HTML网页中的段落与文章写作中的自然段是类似的。也可以这样认为，HTML网页中的段落就是为实现文章中的自然段样式效果而设计的。因此，HTML网页中的段落在新闻、报告、文章等情景应用中是一个非常重要的元素。

当我们在HTML网页中设计段落<p></p>标签元素时，浏览器页面会自动为每一个段落的前后添加空行。在使用过程中，建议设计人员不要漏掉段落的结束标签（可能经常会漏掉），以避免浏览器会出现无法正确解析HTML页面的问题。

下面是一个使用段落（<p></p>）标签元素的HTML示例代码（详见源代码ch03/ch03-html-p.html文件）。

【代码3-1】

【代码解析】

第10～14行代码使用<p>标签元素定义了第一个段落。

第16～20行代码使用<p>标签元素定义了第二个段落，不同之处是在<p>标签元素内使用style属性定义了字体样式（font-style: italic;font-size: larger），这样两个段落虽然内容一致，但显示出来的字体风格会有差异。

运行测试网页，效果如图3.1所示。

3.1.2　对齐与缩进

在HTML网页中使用<p></p>标签元素展示自然段落时，很多情况下需要设定对齐（text-align）与缩进（text-intend）样式，这也是为了适应新闻、报告、文章等内容的格式要求。

下面是一个使用段落（<p></p>）标签元素设置对齐与缩进样式的HTML示例代码（详见源代码ch03/ch03-html-p-align.html文件）。

【代码3-2】

【代码解析】

第10～13行代码为第一个段落，在<p>标签元素内使用style属性定义了对齐与缩进样式（text-align: justify;text-indent: 2em;），其中“justify”表示两端对齐，而缩进的尺寸为两个相对字符长度（2em）。

第15～18行代码为第二个段落，在<p>标签元素内使用style属性定义了对齐与缩进样式（text-align: left;text-indent: 0em;），其中“left”表示左对齐，而缩进的尺寸为零个相对字符长度（0em）。

第20～23行代码为第三个段落，在<p>标签元素内使用style属性定义了对齐与缩进样式（text-align: right;text-indent: 4em;），其中“right”表示右对齐，而缩进的尺寸为4个相对字符长度（4em）。

运行测试网页，效果如图3.2所示。

3.1.3　分割线

在HTML网页中使用<hr>分割线标签元素也是很常见的方法，譬如在网页底部通常用一根分割线将公司信息、作者信息、版权信息和注册备案信息分割开来，以示和网页主体部分的区分。

下面是一个使用分割线（<hr>）标签元素的HTML示例代码（详见源代码ch03/ch03-html-p-hr.html文件）。

【代码3-3】

【代码解析】

第09行代码为页面中的第一条分割线，是没有添加任何风格的原始样式分割线，主要用于将页面头部与正文部分进行区分。

第13行代码为页面中的第二条分割线，设置了分割线高度（2px）和虚线（dashed）边框样式。

第14行代码为页面中的第三条分割线，设置了分割线高度（4px）和双实线（double）边框样式。

第15行代码为页面中的最后一条分割线，同样是没有添加任何风格的原始样式分割线，主要用于将页面底部与正文部分进行区分。

运行测试网页，效果如图3.3所示。

3.1.4　标题

在HTML网页中还有一种很常用的标题（<hx>）标签，注意在实际使用<hx>标签时，小写x使用数字1～6代替，分别代表不同的标题字体大小。在HTML网页中，只有段落<p>加上标题<hx>才会组成一篇美观的、完整的网页文章。

下面是一个使用标题（<hx>）标签元素的HTML示例代码（详见源代码ch03/ch03-html-hx.html文件）。

【代码3-4】

运行测试网页，页面如图3.4所示。