3.2　设置文字格式

除了标题文字，普通的文字信息在网页中也是不可缺少的。多种多样的文字效果可以使网页变得更加绚丽。

在设计HTML网页时，你可以直接在文字的主体部分（即<body>和</body>之间）输入文字，这些文字会以默认的样式和大小显示在页面中，但你可以根据实际需求对文字的样式进行设置，下面将逐一讲解各种文字格式的设置方式。

3.2.1　粗体、斜体、下画线标签—<strong>、<em>、<u>

在浏览网页时，常常可以看到一些特殊效果的文字，如粗体字、斜体字或者下画线文字，这些文字效果通过设置HTML中的相应标签来实现。语法格式如下。

     <strong>粗体的文字</strong>
     <em>斜体字</em>
     <u>带下画线的文字</u>

【例3.3】使用文本标签装饰文本。（实例位置：资源包\TM\sl\3\3）

本实例通过显示一则图书打折活动信息，综合使用<strong>标签、<em>标签以及<u>标签设置文字的不同样式。具体代码如下。

     <!--显示商品图片-->
     <img src="book.jpg" width="200"/><br>
     <!--显示图书名称，书名文字用斜体效果-->
     书名：<em>《Python树莓派开发从入门到精通》</em><br>
     <!--显示图书作者-->
     作者：明日科技<br>
     <!--显示出版社-->
     出版社：清华大学出版社<br>
     <!--显示出版时间，文字用下画线效果-->
     出版时间：<u>2021年10月</u><br>
     <!--显示页数-->
     页数：400页<br>
     <!--显示图书价格，促销价格使用使用粗体文字效果-->
     原价：89.80元  促销价格：<strong>69.80</strong>元<br>

运行这段代码，效果如图3.3所示。

图3.3　设置文字的不同显示样式

说明

文字的粗体效果也可通过<b>标签来实现，斜体字也可使用<I>标签或者<cite>标签来实现。

3.2.2　上标与下标标签—<sup>、<sub>

网页中除了设置不同的文字效果，有时候还需要设置一种特殊的文字效果，即上标和下标，这种效果在显示公式时常常会出现。在HTML语言中，你可以通过<sup>和<sub>标签分别设置上标和下标，它们的语法格式如下。

     <sup>…</sup>  <!--上标标签-->
     <sub>…</sub>  <!--下标标签-->

使用这两个标签时，你只需要将文字放在标签中间即可。

【例3.4】使用上标与下标展示数学方程式。（实例位置：资源包\TM\sl\3\4）

本实例使用<sub>和<sup>标签在网页中显示两个数学方程式，具体实现时，首先输入用到的全部数学符号，然后将需要置上或者置下的符号放入上标和下标标签中。具体代码如下。

     <!--表示文章标题-->
     <h1 align="center">上标和下标标签</h1>
     <h3 align="center">在数学计算中:</h3>
     <!--使用上标标签，将文字置上-->
     <h3 align="center">
          上标：X<sup>3</sup>+9X<sup>2</sup>-3=0
     </h3>
     <!--使用下标标签，将文字置下-->
     <h3 align="center">
          下标：3X<sub>1</sub>+2X<sub>2</sub>=10
     </h3>

运行这段代码，可以看到如图3.4所示的效果。

图3.4　设置文字的上标与下标

3.2.3　设置删除线标签—<del>/<s>

你可以通过<del>标签或<s>标签为网页中的文字添加删除线效果。语法格式如下。?

     <del>文字</del>
     <s>文字</s>

这两种标签都可以实现删除线效果，它们的区别是，<s>标签用于定义不正确或者没有用的文本，<del>标签用于定义已删除的文本。

【例3.5】删除线的使用。（实例位置：资源包\TM\sl\3\5）

本实例演示了删除线标签<del>和<s>标签的使用。具体代码如下。

     正常的文字效果<br />
     在文字上使用<s>标签定义不正确文本<br />
     <s>删除文字的效果</s><br/><br/>
     在文字上使用<del>标签来添加删除线<br />
     <del>删除文字的效果</del>

运行这段代码，可以看到如图3.5所示的效果。

图3.5　删除线效果

3.2.4　等宽文字标签—<code>

等宽文字标签<code>常用于英文中，该标签可以用来实现网页中字体的等宽效果，使页面显得更加整齐。语法格式如下。

     <code>文字</code>

在使用<code>标签时，只要把需要等宽显示的文字放置在标签中间即可。

【例3.6】等宽文字标签的效果展示。（实例位置：资源包\TM\sl\3\6）

在网页中添加两句英文，其中第二句英文使用等宽文字标签，代码如下。

     <!DOCTYPE html>
     <html>
     <head>
          <meta charset="utf-8">
          <title>设置等宽文字</title>
     </head>
     <body>
          下面将显示两段相同的英文效果，突出等宽文字与普通英文文字的对比效果。<br/><br/>
          <!--下面这段英文使用了正常的效果显示-->
          普通英文效果<br/>
          A day without sunshine is like night.<br/><br/>
          <!--下面这段英文使用了等宽效果的效果显示-->
          等宽文字效果<br/>
          <code>A day without sunshine is like night.</code>
     </body>
     </html>

运行这段代码，可以看到如图3.6所示的效果。

图3.6　等宽文字的效果

3.2.5　空格与其他特殊符号

一般情况下，在网页中输入文字时，如果在段落开始增加了空格，在浏览器中进行浏览时往往看不到这些空格。这主要是因为在HTML文件中，浏览器本身会将两个句子之间的所有半角空格仅当作一个空格来看待。如果需要保留空格的效果，一般需要使用全角空格符号，或者通过空格码来代替。下面将介绍如何应用空格码来输入保留文字中的空格效果。语法格式如下。

     &nbsp;

在网页中可以有多个空格，一个&nbsp;代表一个半角空格，多个空格则多次使用该符号即可。

另外，在网页设计过程中，除了可以使用代码表示空格，还可以使用代码表示一些其他的特殊符号。一般情况下，表示特殊符号的代码由前缀“&”、字符名称和后缀“;”组成。网页中常用的特殊符号及其代码表示形式如表3.2所示。

表3.2　网页中常用的特殊符号及其代码表示形式

说明

在需要输入这些特殊符号的位置处，使用相应的代码代替即可。

【例3.7】使用特殊符号实现字符画。（实例位置：资源包\TM\sl\3\7）

本实例综合使用各种特殊字符实现在网页中显示一个小狗字符画。关键代码如下。

说明

上面代码中使用<pre>标签，该标签用来保留网页中的原始排版方式，详解参见第3.3.3节。

运行这段代码，可以看到由空格及多个特殊字符组成的小狗字符画，如图3.7所示。

图3.7　使用特殊符号实现字符画

编程训练（答案位置：资源包\TM\sl\3\编程训练）

【训练3】显示一元二次方程　在网页中显示一元二次方程2x2+4x=16。

【训练4】显示打折商品清单　在网页中显示一个打折商品清单，其中显示原价时，以添加删除线的效果显示，参考数据如下。

     【帽子】原价：25.00元，打折：15.00元
     【衣服】原价：50.00元，打折：20.00元
     【裤子】原价：75.00元，打折：30.00元
上一章目录下一章