2.1 HTML网页段落排版
无论是视频网站还是门户网站，网页中都避免不了段落文字。门户网站就是我们常说的新浪、搜狐等，网页中多是一些图文性质的新闻，如果不进行排版，我们估计就要看花眼了。
2.1.1 设置段落样式的标记
HTML网页中的段落是通过<p></p>标签来定义的。HTML网页中的段落类似于我们常说的文章写作中的自然段，是HTML网页中一个非常重要的元素。
在浏览器中展示段落<p></p>标签时会自动为每一个段落的前后添加空行。同时，建议带上结束标签（即使不小心忘了使用结束标签，目前的浏览器也会将HTML网页正确显示出来），一是保持良好的代码习惯；二是浏览器有可能会出现无法正确解析HTML页面的问题。
下面我们看一段设置段落样式标记的代码，这段代码（参见源代码chapter02/ch02-htmltag-pstyle.html文件）给出一种设置段落样式标记的方法。
【示例2-1】设置段落样式的标记
01 <!DOCTYPE html> 02 <html lang="zh-cn"> 03 <head> 04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 05 <title>HTML之设置段落样式的标记</title> 06 </head> 07 <body> 08 <!-- 添加文档主体内容 --> 09 <h3>HTML之设置段落样式的标记</h3> 10 <!-- 添加文档主体内容 --> 11 <p>当前网页：ch01-htmltag-p-style.html</p> 12 <!-- 添加文档主体内容 --> 13 <p style="font-style: italic;font-size: larger"> 14 当前网页：ch01-htmltag-p-style.html 15 </p> 16 </body> 17 </html>
在这段HTML代码中，对段落p标签设置了样式：第11行代码使用p标签定义了一个段落，其内容介绍了当前的HTML页面名称；第13～15行代码与第11行代码一样定义了一个段落，不同之处是在<p>标签内使用style属性定义了字体样式（font-style: italic;font-size: larger），虽然这两个段落的内容一致，但显示出来的字体风格会有差异。
运行测试这个页面，效果如图2.1所示。从图中看到，由于第13～15行代码定义了段落样式，因此页面中显示出来的字体风格产生了变化。
图2.1 设置段落样式标记的效果
2.1.2 设置对齐与缩进的标记
在页面中使用<p></p>标签展示段落时，对齐（text-align）与缩进（text-intend）功能设置是必不可少的，就像小学生写作文一样，老师会强调作文的格式。
下面我们看一段设置对齐与缩进标记的代码，这段代码（参见源代码chapter02/ch02-htmltag-p-intend.html文件）给出一种设置段落对齐与缩进标记的方法。
【示例2-2】设置对齐与缩进的标记
01 <!DOCTYPE html> 02 <html lang="zh-cn"> 03 <head> 04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 05 <title>HTML之设置段落对齐与缩进</title> 06 </head> 07 <body> 08 <!-- 添加文档主体内容 --> 09 <h3>HTML之设置段落对齐与缩进</h3> 10 <!-- 添加文档主体内容 --> 11 <p style="text-align: justify;text-indent: 2em;"> 12 段落的对齐和缩进是排版最常用的方法，也是要求学生重点掌握的内容。 13 这部分内容有“段落对齐”、“段落缩进”等几个知识点。 14 </p> 15 <p style="text-align: left;text-indent: 0em;"> 16 “段落对齐”中对齐方式有“左对齐”、“居中”、 17 “右对齐”、“两端对齐”、“分散对齐”几种。 18 </p> 19 <p style="text-align: right;text-indent: 4em;"> 20 “段落缩进”主要包括“左缩进”、“右缩进”等几种， 21 使用“段落缩进”方法可以让自然段落更美观。 22 </p> 23 </body> 24 </html>
在这段HTML代码中，对3个段落的p标签设置了对齐与缩进。下面我们详细介绍。
第11～14行代码为第一个段落，在<p>标签内使用style属性定义了对齐与缩进样式（text-align: justify;text-indent: 2em;），其中justify表示两端对齐，而缩进的尺寸为两个相对字符长度（2em）。
第15～18行代码为第二个段落，在<p>标签内使用style属性定义了对齐与缩进样式（text-align: left;text-indent: 0em;），其中left表示左对齐，而缩进的尺寸为零个相对字符长度（0em）。
第19～22行代码为第三个段落，在<p>标签内使用style属性定义了对齐与缩进样式（text-align: right;text-indent: 4em;），其中right表示右对齐，而缩进的尺寸为零个相对字符长度（4em）。
运行测试这个页面，效果如图2.2所示。从图中看到，两端对齐的风格是比较美观的，而左右对齐的风格可以应用到特殊的场景中。同时，缩进的长度不宜过大或过小，本段代码中设置的两个相对字符长度还是比较合适的。
图2.2 设置对齐与缩进标记的效果
2.1.3 添加分割线
在页面中使用hr分割线标签是很常见的，譬如在网页底部通常用一条分割线将公司信息、作者信息、版权信息和注册备案信息分割开来，以示和网页主体部分的区分。
下面我们看一段设置分割线的代码，这段代码（参见源代码chapter02/ch02-htmltag-hr.html文件）给出一种设置页面底部分割线的方法。
【示例2-3】添加分割线
01 <!DOCTYPE html> 02 <html lang="zh-cn"> 03 <head> 04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 05 <title>HTML之设置分割线</title> 06 </head> 07 <body> 08 <!-- 添加文档主体内容 --> 09 <h3>HTML之设置分割线</h3> 10 <!-- 添加文档主体内容 --> 11 <p>页面正文</p> 12 <!-- 添加文档底部内容 --> 13 <hr> 14 <hr style="height:2px;border:dashed;"> 15 <hr style="height:4px;border:double;"> 16 <div style="text-align: center"> 17 <p class="copyright">© 2019 HTML CSS JavaScript 18 <a href="#" target="_blank" title="KING">KING</a> 19 </p> 20 </div> 21 </body> 22 </html>
在这段HTML代码中，在页面底部（第16～20行代码）上方添加了3条不同风格的分割线：第13行代码添加第一条分割线，是没有添加任何风格的原始样式分割线；14行代码添加第二条分割线，设置了分割线高度（2px）和虚线（dashed）边框样式；第15行代码添加第三条分割线，设置了分割线高度（4px）和双虚线（double）边框样式。
运行测试这个页面，效果如图2.3所示。
图2.3 添加分割线的效果
2.1.4 设置段落标题
前面几个小节介绍了段落的相关内容，这个小节介绍为段落添加标题的方法，段落加上标题才会组成完整的文章。
下面这段代码（参见源代码chapter02/ch02-htmltag-p-hx.html文件）给出一种设置段落标题的方法。
【示例2-4】设置段落标题
01 <!DOCTYPE html> 02 <html lang="zh-cn"> 03 <head> 04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 05 <title>HTML之设置段落标题</title> 06 </head> 07 <body> 08 <!-- 添加文档主体内容 --> 09 <h3 style="text-align: center">文章大标题</h3> 10 <h4>段落标题</h4> 11 <p style="text-align: justify;text-indent: 2em;"> 12 段落的对齐和缩进是排版最常用的方法，也是要求学生重点掌握的内容。 13 这部分内容有“段落对齐”、“段落缩进”等几个知识点。 14 </p> 15 <h4>段落标题</h4> 16 <p style="text-align: justify;text-indent: 2em;"> 17 段落的对齐和缩进是排版最常用的方法，也是要求学生重点掌握的内容。 18 这部分内容有“段落对齐”、“段落缩进”等几个知识点。 19 </p> 20 </body> 21 </html>
在这段HTML代码中，添加了文章大标题和段落小标题：第09行代码为文章添加了居中对齐的大标题；第10行与第15行代码为两个段落添加了小标题。
运行测试这个页面，效果如图2.4所示。
图2.4 添加段落标题的效果