3.3 文本格式化标记

在HTML中,还有一些文本格式化标记用来设置文字以特殊的方式显示,如粗体标记、斜体标记和文字的上下标等。

3.3.1 粗体标记b、strong

<b>和<strong>是HTML中格式化粗体文本的最基本元素。在<b>和</b>之间的文字或在<strong>和</strong>之间的文字,在浏览器中都会以粗体字体显示。该元素的首尾部分都是必须的,如果没有结尾标记,则浏览器会认为从<b>开始的所有文字都是粗体。

语法:

image054_2

说明:

在该语法中,粗体的效果可以通过<b>标记来实现,还可以通过<strong>标记来实现。<b>和<strong>是行内元素,它可以插入到一段文本的任何部分。

举例:

image054_3

在代码中加粗部分的标记为设置文字的加粗效果,在浏览器中预览效果,如图3.7所示。在实际网页应用中网站的导航栏目常用加粗来显示,如图3.8所示。

image055_1

图3.7 文字加粗效果

image055_2

图3.8 网页中的加粗文字

3.3.2 斜体标记i、em、cite

<i>、<em>和<cite>是HTML中格式化斜体文本的最基本元素。在<i>和</i>之间的文字、在<em>和</em>之间的文字或在<cite>和</cite>之间的文字,在浏览器中都会以斜体字体显示。

语法:

image055_3

说明:

斜体的效果可以通过<i>标记、<em>标记和<cite>标记来实现。一般在一篇以正体显示的文字中用斜体文字起到醒目、强调或者区别的作用。

举例:

image055_4

在代码中加粗部分的标记为设置文字的斜体效果,在浏览器中预览效果,如图3.9所示。

image056_1

图3.9 斜体文字效果

3.3.3 上标标记sup

上标字体<sup>的英文原名为superscript,在各种数学公式、日常计算应用、书籍文章注解甚至某些外语脚本里都有广泛的运用。<sup>元素也是行内元素,它可以成对出现在一段文字的任何地方,并且允许嵌套使用。因此如果在<sup>里再使用<sup>则会变成“上标的上标”。

语法:

image056_2

说明:

在该语法中,上标标记的效果可以通过<sup>标记来实现。

举例:

image056_3

在代码中加粗部分的标记为设置上标标记,在浏览器中预览效果,可以看到上标标记,如图3.10所示。

image056_4

图3.10 上标标记

3.3.4 下标标记sub

下标字体<sub>的英文原名为subscript,在各种数学公式、化学方程式中,下标字体有着广泛的应用。<sub>元素是行内元素,它可以成对地出现在一段文字的任何地方,并且可以将多个<sub>元素作用于同一段文字,也就是说,如果在<sub>元素里继续使用<sub>,那么被作用的文字将成为“下标的下标”。

语法:

image057_1

说明:

下标标记与上标标记的使用方法相同,只需要将下标内容放置在标记之间即可。

举例:

image057_2

在代码中加粗部分的标记为设置下标标记,在浏览器中预览效果,可以看到下标标记,如图3.11所示。

image057_3

图3.11 下标标记

3.3.5 大字号标记big

Big标记用来增大文本中字号的大小,它所包含的文字都会在原来的字号上增加一级。如果有多个<big>元素作用于同一个文本,则字号会被逐级增大。<big>作为一个行内元素,它可以成对出现在一段文字中的任何位置。

语法:

image057_4

说明:

在该语法中,在<big>与</big>标记之间的内容,可在定义的字号大小的基础上增加一级。

举例:

image058_1

在代码中加粗部分的代码标记为设置大字号,在浏览器中预览效果,如图3.12所示。

image058_2

图3.12 大字号标记

3.3.6 小字号标记small

Small标记所包含的文字,在浏览器里显示会比普通文字小一级。如果有多个<small>元素作用于同一段文本上,则该段文本的字号会逐级缩小。<small>作为一个行内元素,它可以成对出现在一段文本中的任何地方。

语法:

image058_3

说明:

此标记的用法与大字号标记的用法基本相同,可在<small>与</small>标记之间输入小字号的内容。

举例:

image059_1

在代码中加粗部分的代码标记为设置小字号,在浏览器中预览,可以看到小字号的字体效果,如图3.13所示。

image059_2

图3.13 小字号标记

3.3.7 下画线标记u

<u>标记的使用和粗体以及斜体标记类似,它作用于需加下画线的文字。

语法:

image059_3

说明:

该语法与粗体和斜体的语法基本相同。

举例:

image059_4

在代码中加粗部分的代码标记为设置下画线,在浏览器中预览,可以看到文档中文字下面的下画线效果,如图3.14所示。

image060_2

图3.14 下画线效果