文本、段落与标题

文本是网页中最基本的组成部分，本文将讨论文本及特殊字符，段落、标题和pre元素；文本样式设置，如缩进、行高、字体、装饰效果、文本阴影、水平对齐、垂直对齐等。

标题

页面中的标题元素，按字体从大到小分别是h1、h2、h3、h4、h5、h6，其在Chrome浏览器中的默认显示效果如下图所示。

标题元素

本文稍后会介绍文本的样式设置，在实际应用中可以根据需要修改标题的默认样式。

文本

页面中的文本内容可以直接放置所需的元素中，如标题、段落等元素。下面介绍一些常用的字符和格式元素。

首先是br元素，这是一个单标记元素，表示换行符，可以使用<br>或<br />标记，不需要使用属性和样式。

下面是几个基本的格式元素：

b元素，加粗（bold）。
i元素，斜体（italic）。
u元素，下画线（underline）。
sup元素，上标（superscript）。
sub元素，下标（subscript）。

下图是这几种元素在Chrome浏览器中的显示效果。

常用文本格式

转义字符

在HTML代码中，可以通过转义字符显示一些特殊字符；转义字符可以按字符名称，也可以按字符编码。实际应用中，按名称更便于记忆，下表中给出了一些常用的字符及转义名称。

字符	名称转义	说明
"	"	双引号
&	&	与符号
<	<	小于号
>	>	大于号
		空格符
¡	¡	倒惊叹号
¥	¥	元符号
§	§	章节符号
©	©	版权符号
®	®	注册符号
°	°	单位度
±	±	正负号
²	²	上标2
³	³	上标3
¼	¼	分数1/4
½	½	分数1/2
¾	¾	分数3/4

名称转义字符使用&符号开始，然后是字符名称，最后以分号（;）结束。使用Unicode编码转义字符时，使用&#开始，然后是编码数值，最后以分号结束，如"表示双引号。对于有名称的字符，使用名称转义更直观，对于在HTML中没有命名的字符，可以通过编码转义。

段落

页面中，文本段落使用p元素定义。对于中文段落，经常使用首行缩进两个字符的格式，此时可以使用CSS中的text-indent属性设置，如下面的代码。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        p{
            text-indent:2em;
        }
    </style>
</head>
<body>
    <p>随着大数据和AI（人工智
能）时代的来临，各行各业会越来越多的依赖数据开展工作，这就对从业人员的数
据处理能力有了更高的要求。工作中不但要求能够处理数据，更需要了解数据的本
质，分析数据并能够理解数据所反映的现实意义，最终帮助我们做出正确的决策。
</p>
</body>
</html>

页面显示效果如下图所示。

段落首行缩进2个字符

需要设置段落中的行间距时，可以使用line-height属性，此属性用于设置行高，假如使用单位em，如果行间距设置为n，则行高应设置为1+n，如下面的代码。

HTML

<style>
    p {
        text-indent: 2em;
        line-height:2em;
    }
</style>

本例，设置行高为2em，即行间隔为1em，页面显示效果如下图所示。

设置行高

下面介绍更多关于文本的样式应用。

字体

字体相关样式可以使用如下属性：

font-style属性，默认值为normal，显示斜体时可以使用italic值。
font-weight属性，设置字体的粗细效果。使用数值时从细到粗可以是100到900的整百数值。使用名称属性值时，默认值为normal，还可以使用bold、bolder、lighter等值。
font-size，可以使用px、em、rem等单位指定字体的尺寸。
font-family，可指定一个字体名称，也可以使用逗号分隔指定多个候选字体名称。如果字体名称中包含中文或空格等特殊字符，可以使用一对单引号定义。
font属性，属性值的设置顺序为font-style（可省略）、font-weight（可省略）、font-size、font-family。

下面的代码演示了font属性的设置。

HTML

<style>
    p{
        font:italic 100 2em '华文行楷';
    }
</style>

字体的显示效果如下图所示。

设置字体

文本装饰

text-decoration属性可以设置文本的装饰效果，其属性值包括：

none，常规文本，无任何特殊效果，这是文本的默认效果。
underline，下画线
overline，上画线
line-through，中间贯穿线。

下面的代码演示了text-decoration属性的应用。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <p>常规文本</p>
    <p style="text-decoration:underline">下画线</p>
    <p style="text-decoration:line-through;">贯穿线</p>
    <p style="text-decoration:overline;">上画线</p>
</body>
</html>

页面显示效果如下图所示。

文本装饰效果

请注意，下画线效果可以使用u元素实现，而中间贯穿线的效果可以使用语义元素del或s元素实现，后续文章会有语义元素的介绍。

文本阴影

text-shadow属性可以设置文本的阴影效果，其值设置顺序为水平方向偏移、垂直方向偏移、模糊距离和阴影颜色。下面的代码演示了文本阴影的应用。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        h1 {
            text-shadow:10px 10px 5px blue;
        }
    </style>
</head>
<body>
    <h1>关于文本阴影的应用</h1>
</body>
</html>

页面显示效果如下图所示。

文本阴影效果

文本水平对齐方式

text-align属性可以文本在容器元素中的对齐方式，常用属性值包括：

lef
center
right

下面的代码演示了text-align属性的应用。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <h1 style="text-align:center;">水平居中对齐</h1>
    <h1 style="text-align:left;">左对齐</h1>
    <h1 style="text-align:right;">右对齐</h1>
</body>
</html>

页面显示效果如下图所示。

水平对齐

实际应用中，text-align属性不但可以文本的水平对齐方式，还可以设置容器内的其它元素水平对齐方式，在后续的文章中会有更多应用演示。

文本的垂直对齐方式

元素的垂直对齐方式可以使用vertical-align属性设置，常用属性值包括：

baseline，默认值，以容器基线对齐。
super，上标。
sub，下标。
text-top，容器字体顶部对齐。
text-bottom，容器字体底部对齐。
top，容器顶部对齐。
middle，容器垂直剧中对齐。
bottom，容器底部对齐。

文本垂直对应的默认属性值是baseline（基线），不同英文字体的基线是不同的，所以，实际应用中，特别是中英文混排时，文本的垂直对齐效果需要实际观测来确定。

此外，vertical-align属性还可以设置容器中元素的垂直对齐方式，如表格中单元格内容的垂直对齐等场景。关于vertical-align属性在布局和排版中的应用，后续文章中会有相关演示。

pre元素

pre元素可以保留文本中的空白字符和换行符等特殊字符，无需使用br元素和转义字符；默认情况下，当一行文本超出pre元素允许范围时不会自动换行。实际上，pre元素非常适合显示代码，特别是以行为单位的脚本代码。下面的代码演示了pre元素的应用。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <pre>
int sum = 0;
for(int i = 1; i <= 100; i++)
{
    sum += i;
}
printf("%d", sum);
</pre>
</body>
</html>

页面显示效果如下图所示。

pre元素