HTML中的文字与段落标记之二:文字格式标记

HTML中的文字与段落标记之二:文字格式标记

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

在网页的编辑中,可以直接在文字的主体部分输入文字,而这些文字便会显示在页面中。可以说,这是HTML 语言编辑中最简单的事情,只需要在<body>标记和</body>标记之间输入相应的文字即可。重要的是如何设置不同的文字效果,而这些属性的设置都位于文字格式标记<font>中,下面将逐一进行讲解各种文字格式的设置方式。

1 设置文字字体——face

HTML 语言中,可以通过face 属性设置文字的不同字体效果。而设置的字体效果必须在浏览器安装了相应的字体后才可以正确浏览,否则这些特殊字体会被浏览器中的普通字体所代替。因此,在网页中尽量减少使用过多的特殊字体,以免在用户浏览时无法看到正确的效果。由于浏览器默认情况下都包含了宋体、黑体等几种基本字体,因此网页创作者也应该注意在设计网页时,多利用这几种字体。

语法:<font face="字体1,字体2">应用字体的文字</font>

说明:在该语法中,face 属性的值可以是1 个或者多个。默认情况下,使用第1 种字体进行显示;如果第1 种字体不存在,则使用第2 种字体进行代替,以此类推。如果设置的几种字体在浏览器中都不存在,则会以默认字体显示。

实例代码:

<!--设置不同的文字字体-->

<html>

<head>

<title>不同字体的显示效果</title>

</head>

<body>

<font face="经典空叠圆简">经典空叠圆简的字体效果</font><br>

<font face="黑体">黑体效果</font><br>

<font face="Times New Roman,Times"> English fonts</font>

</body>

</html>

运行这段代码,可以看到几种不同的字体效果。

2 设置字号——size

除了字体外,文字的大小也是吸引用户注意的一个元素。除了使用标题文字标记设置固定大小的字号之外,HTML 语言提供了<font>标记的size 属性来设置普通文字的字号。

语法:<font size="文字字号"></font>

说明:在该语法中,文字的字号可以设置为1~7,也可以是+1~+7 或者是-1~7。这些字号并没有一个固定的大小值,而是相对于默认文字大小来设定的,默认文字的大小与3 号字相同,而数值越大,文字也越大。

实例代码:

<!--设置不同的文字大小-->

<html>

<head>

<title>不同字号文字的效果</title>

</head>

<body>

<font size="1">1 号字体的效果</font><br>

<font size="2">2 号字体的效果</font><br>

<font size="3">3 号字体的效果</font><br>

<font size="4">4 号字体的效果</font><br>

<font size="5">5 号字体的效果</font><br>

<font size="6">6 号字体的效果</font><br>

<font size="7">7 号字体的效果</font><br>

<font size="+2">默认字号+2,也就是5 号字体的效果</font><br>

<font size="-1">默认字号-1,即2 号字体的效果</font>

</body>

</html>

运行这段代码,可以看到文字的大小变化。

3 设置文字颜色——color

HTML 页面中,还可以通过不同的颜色表现不同的文字效果,从而增加网页的亮丽色彩,吸引浏览者的注意。

语法:<font color="颜色代码"></font>

说明:与网页背景色的设置类似,颜色代码也是十六进制的。

实例代码:

<!--设置不同的文字颜色-->

<html>

<head>

<title>不同色彩的文字效果</title>

</head>

<body>

<font face="黑体"color="#0099FF">淡蓝色的黑体效果</font><br>

<font size="2" color="#990000">暗红色的2 号文字效果</font><br>

<font face="经典空叠圆简" size="5" color="#FF6600">桔色的5

经典空叠圆简</font>

</body>

</html>

运行这段代码,可看到不同色彩的文字效果。

4 粗体、斜体、下划线——strongemu

在浏览网页时,还常常可以看到一些特殊效果的文字,例如粗体字、斜体字以及下划线文字。而这些文字效果也可以通过设置HTML 语言的标记来实现。

语法:<strong>粗体的文字</strong>

<em>斜体字</em>

<u>带下划线的文字</u>

说明:这几种效果的语法类似,只是标记不同。粗体的效果也可以通过标记<b>来实现;斜体字也可以使用标记<I>或者<cite>表示。

实例代码:

<!--设置不同的文字效果-->

<html>

<head>

<title>不同的文字样式</title>

</head>

<body>

正常的文字效果<br><br>

<strong>使用strong 标记加粗文字</strong><br>

<b>使用B 标记加粗文字</b><br><br>

<em>使用em 标记的斜体效果</em><br>

<I>使用I 标记的斜体效果</I><br>

<cite>使用cite 标记的斜体效果</cite><br><br>

<u>下划线文字效果</u><br>

</body>

</html>

运行这段代码,可以看到不同的样式效果,且使用不同的标记也可以达到相同的效果。

5 上标与下标——supsub

除了设置不同的文字效果之外,有时候在网页中还需要一种特殊的文字效果,即上标和下标,这在显示公式时常常会出现。在HTML 语言中,也可以通过标记轻松地进行设置。

语法:<sup></sup> 上标标记

<sub></sub> 下标标记

说明:在该语法中,上标标记和下标标记的使用方法基本相同,只需要将文字放在标记中间即可。

实例代码:

<!--使用上标和下标-->

<html>

<head>

<title>上标与下标的效果</title>

</head>

<body>

正常的文字效果<br><br>

在方程式中应用上标的效果<br>

X<sup>3</sup>+ 5X<sup>2</sup>-3=0<br><br>

在文字中应用下标的效果<br>

X<sub>1</sub>-Y<sub>2</sub>=11<br><br>

</body>

</html>

运行这段代码,可以看到在网页中显示了上标与下标的效果。

6 设置删除线——strike

在网页中可以通过strike 参数对文字添加删除线效果。

语法:<strike>文字</strike> <s>文字</s>

说明:这两种标记都可以创建删除线效果,使用起来也很简单,只要把需要设置成删除线效果的文字放置在标记中间即可。

实例代码:

<html>

<head>

<title>文字的删除线效果</title>

</head>

<body>

正常的文字效果<br><br>

在文字上使用 s 标记添加删除线<br>

<s>文字的删除效果</s><br><br>

在文字上使用 strike 标记添加删除线<br>

<strike>文字的删除效果</strike>

</body>

</html>

运行这段代码,可以看到效果。

7 等宽文字标记——code

等宽文字标记常用于英文效果,使用该标记可以实现网页中字体的等宽效果。有时,使用等宽效果能够令页面显得更加整齐。

语法:<code>文字</code>

<samp>文字</samp>

说明:在该语法中的这两种标记都可以实现文字的等宽显示,而在应用时只要把需要等宽显示的文字放置在标记中间即可。

实例代码:

<!--设置等宽文字-->

<html>

<head>

<title>文字的等宽效果</title>

</head>

<body>

在下面将显示两段英文效果,突出等宽文字与普通英文文字的对比效果。<br><br>

普通英文效果<br>

<!--下面这段文字使用了正常的效果显示-->

HTML is the lingua franca for publishing hypertext on the World Wide Web.<br><br>

等宽文字效果<br>

<!--下面这段英文使用了等宽文字的效果显示-->

<code>HTML is the lingua franca for publishing hypertext on the World Wide Web.</code><br><br>

</body>

</html>

运行这段代码,可以看到效果。

8 空格——&nbsp;

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

语法:&nbsp;

说明:在网页中可以有多个空格,一个&nbsp;只代表一个半角空格,多个空格则可以多次使用这一符号。

实例代码:

<html>

<head>

<title>输入空格符号</title>

</head>

<body>

在段落开始输入空格符号的效果:<br>

&nbsp;&nbsp;&nbsp;&nbsp;空格在网页排版中常常应用到,使用空格符号在文字的前方输入几个空格,就可

以实现首行缩进的效果。<br><br>

在文字中间不使用空格符号,直接输入 6 个半角空格的效果:<br>

白日依山尽, 黄河入海流。<br>

欲穷千里目, 更上一层楼。<br><br>

使用空格符号的效果:<br>

白日依山尽,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;黄河入海流。<br>

欲穷千里目,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更上一层楼。<br>

</body>

</html>

运行这段代码,可以清楚地看到不管在两个句子间输入多少个半角空格,其中仅有一个半角的空格符会被接受,其余多出的空格符将被忽略掉。而输入空格代码则可以完整地保留空格的效果。

9 其他特殊符号

除了空格以外,在网页的创作过程中,还有一些特殊的符号也需要使用代码进行代替。一般情况下,特殊符号的代码由前缀“&”、字符名称和后缀“;”组成。使用方法与空格符号类似。在需要输入这些特殊符号的位置时,使用相应的代码代替即可。

特殊符号的代码:

&quot;

& &amp;

< &lt;

> &gt;

× &times;

§ &sect;

© &copy;

® &reg;

™ &trade;

实例代码:

<html>

<head>

<title>输入特殊符号</title>

</head>

<body>

引号:&quot;<br>

左尖括号:&lt;<br>

右尖括号:&gt;<br>

乘号:&times;<br>

小节符号:&sect;<br>

版权所有的符号:&copy;<br>

已注册的符号:&reg;<br>

商标符号:&trade;<br>

</body>

</html>

运行这段代码,可以看到效果。

html专题相关文章

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.liangtzi.net/index.php/post/269.html