2.2 文本排版

在网页中，如果要把文字都合理地显示出来，就离不开段落标记的使用。对网页中文字段落进行排版，并不像文本编辑软件Word那样可以定义许多模式来安排文字的位置。在网页中要让某一段文字放在特定的地方是通过HTML标记来完成的。

2.2.1 换行标记<br/>与段落标记<p>

浏览器在显示网页时，完全按照HTML标记来解释HTML代码，忽略多余的空格和换行。在HTML文件中，不管输入多少空格（按空格键）都将被视为一个空格，换行（按Enter键）也是无效的。在HTML中，换行使用<br/>标记，换段使用<p>标记。

1. 换行标记<br/>

换行标记<br/>是一个单标记，它没有结束标记，是英文单词break的缩写，作用是将文字在一个段内强制换行。一个<br/>标记代表一个换行，连续的多个标记可以实现多次换行。使用换行标记时，在需要换行的位置添加<br/>标记即可。例如，下面的代码实现了对文本的强制换行。


【例2.4】（实例文件：ch02\2.4.html）

<!DOCTYPE html>
<html>
<head>
<title>文本段换行</title>
</head>
<body>
本节目标<br/>网页中的文字是如何设置的<br/>如何在Dreamweaver中处理文字<br/>如何对
文本进行格式化（CSS）<br/>熟悉使用Dreamweaver进行样式表的创建与应用
</body>
</html>

虽然在HTML源代码中，主体部分的内容在排版上没有换行，但是增加<br/>标记后，在IE 11.0中预览效果如图2-7所示，实现了换行效果。

图2-7 换行标记的使用

2. 段落标记<p>

段落标记是双标记，即<p></p>，在<p>开始标记和</p>结束标记之间的内容形成一个段落。如果省略结束标记，就从<p>标记开始，直到遇见下一个段落标记之前的文本，都在一段段落内。段落标记中的p是英文单词paragraph（段落）的首字母，用来定义网页中的一段文本，文本在一个段落中会自动换行。


【例2.5】（实例文件：ch02\2.5.html）

在IE 11.0中预览效果如图2-8所示，<P>标记将文本分成4个段落。

图2-8 段落标记的使用

2.2.2 标题标记<h1>～<h6>

在HTML文档中，文本的结构除了以行和段出现之外，还可以作为标题存在。通常一篇文档最基本的结构就是由若干不同级别的标题和正文组成的。

HTML文档中包含有各种级别的标题，各种级别的标题由<h1>到<h6>元素来定义，<h1>至<h6>标题标记中的字母h是英文headline（标题行）的简称。其中<h1>代表1级标题，级别最高，文字也最大，其他标题元素依次递减，<h6>级别最低。


【例2.6】（实例文件：ch02\2.6.html）

<!DOCTYPE html>
<html>
<head>
<title>文本段换行</title>
</head>
<body>
<h1>这里是1级标题</h1>
<h2>这里是2级标题</h2>
<h3>这里是3级标题</h3>
<h4>这里是4级标题</h4>
<h5>这里是5级标题</h5>
<h6>这里是6级标题</h6>
</body>
</html>

在IE 11.0中预览效果如图2-9所示。

图2-9 标题标记的使用

技巧提示

作为标题，它们的重要性是有区别的，其中<h1>标题的重要性最高，<h6>的最低。

上一章目录下一章