HTML语言剖析（五）字体标记

最新推荐文章于 2025-02-17 20:27:33 发布

转载最新推荐文章于 2025-02-17 20:27:33 发布 · 558 阅读

文章标签：

#html #语言 #header #浏览器 #encoding #internet

HTML 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了HTML中的各种字体标记，包括实体标记与逻辑标记的区别、具体应用实例以及不同标记在浏览器中的显示效果对比。

■实体标记与逻辑标记：

▲TOP

这一节【字体标记】你必须先明白实体标记与逻辑标记的分别，否则你会迷惑于为何不同的标记却有相同的效果。两者分别有以下两处：

实体标记有固定的显示效果，逻辑标记则依不同浏览器而不同。
例如逻辑标记的 <EM> 由于浏览器的不同它所标示的文字不一定出现斜体效果，它可能是加底线、粗体或反白等，所以这一节是以它们在 IE 和 NC 中的效果作介绍。
多个实体标记亦可有效标示同一字句，逻辑标记则通常于旧浏览器不能有效显示多重的标示。
例如两个逻辑标记 <EM> 及 <STRONG> 同时标示一字句于旧浏览器常失去作用。

实体标记有：
<I> <B> <U>
逻辑标记有：
<STRONG> <EM> <VAR> <CITE> <DFN> <ADDRESS> <CODE> <KBO> <SAMP> <TT>

若要求真确的效果当然以实体标记为佳。

■<STRONG> <B> ：

▲TOP

两者皆能产生字体加粗的效果，但必须注意的是当文件被设为 GB2312 ENCODING 时，两者所标示的中文字不会于 NETSCAPE NETVIGATOR 显示粗体效果。

例子：（第一行是没有任何字体标记的，作对照之用）

HTML SOURCE CODE （原始码）	浏览器显示结果
CREATION OF WEBPAGE <BR><STRONG>CREATION OF WEBPAGE</STRONG> <BR><B>CREATION OF WEBPAGE</B>	CREATION OF WEBPAGE CREATION OF WEBPAGE CREATION OF WEBPAGE

■<I> <EM> <VAR> <CITE> <DFN> <ADDRESS>：

▲TOP

这些标记于 INTERNET EXPLORER 都产生斜体效果，而只有 </DFN> 于 NETSCAPE NETVIGATOR 失去作用。这些标记中只有 <ADDRESS> 较为特别，因它包括换行效果所以不必在它前面加上 <BR> 标记。

例子：

HTML SOURCE CODE （原始码）	浏览器显示结果
<I>CREATION OF WEBPAGE</I> <BR><EM>CREATION OF WEBPAGE</EM> <BR><VAR>CREATION OF WEBPAGE</VAR> <BR><CITE>CREATION OF WEBPAGE</CITE> <BR><DFN>CREATION OF WEBPAGE</DFN> <ADDRESS>CREATION OF WEBPAGE</ADDRESS>	CREATION OF WEBPAGE CREATION OF WEBPAGE `CREATION OF WEBPAGE` CREATION OF WEBPAGE CREATION OF WEBPAGE CREATION OF WEBPAGE

■<TT> <SAMP> <CODE> <KBD> <U> <STRIKE> <BIG> <SMALL> <SUP> <SUB>

▲TOP

为方便对照及记认，所以把十个标记于在一起介绍。

<TT> <SAMP> <CODE> <KBD> 可令每字母有相等宽度且每字母之间的距离稍为加宽。但于 NC 不见得如此。
<U> 是加底线的标记，一些特别的浏览器并不支援，因顾虑到与连结混淆。
<STRIKE> 加上删除线的标记。
<BIG> 令字体加大。
<SMALL> 令字体变细。
<SUB> 为下标字， <SUP> 则为上标字，仅剩的数学标记。

例子：（第一行是没有任何字体标记的，作对照之用）

HTML SOURCE CODE （原始码）	浏览器显示结果
CREATION OF WEBPAGE <BR><TT>CREATION OF WEBPAGE</TT> <BR><SAMP>CREATION OF WEBPAGE</SAMP> <BR><CODE>CREATION OF WEBPAGE</CODE> <BR><KBD>CREATION OF WEBPAGE</KBD> <BR><U>CREATION OF WEBPAGE</U> <BR><STRIKE>CREATION OF WEBPAGE</STRIKE> <BR><BIG>CREATION OF WEBPAGE</BIG> <BR><SMALL>CREATION OF WEBPAGE</SMALL> <BR>12345<SUB>7</SUB> 6789<SUP>9</SUP>	CREATION OF WEBPAGE `CREATION OF WEBPAGE` `CREATION OF WEBPAGE` `CREATION OF WEBPAGE` `CREATION OF WEBPAGE` CREATION OF WEBPAGE ~~CREATION OF WEBPAGE~~ CREATION OF WEBPAGE CREATION OF WEBPAGE 12345₇ 6789⁹

■<H1> <H2> <H3> <H4> <H5> <H6>：

▲TOP

这些是标题标记，由 <H1> 至 <H6> 变粗变大加宽的程度逐渐减小。每个标题标记所标示的字句将独占一行且上下留一空白行。

例子：

原始码

<H1>HEADER LEVEL 1</H1>
<H2>HEADER LEVEL 2</H2>
<H3>HEADER LEVEL 3</H3>
<H4>HEADER LEVEL 4</H4>
<H5>HEADER LEVEL 5</H5>
<H6>HEADER LEVEL 6</H6>

显示结果

HEADER LEVEL 1

HEADER LEVEL 2

HEADER LEVEL 3

HEADER LEVEL 4

HEADER LEVEL 5

HEADER LEVEL 6

■<FONT> <BASEFONT>：

▲TOP

这一节只有这两个标记具参数设定，且两者的参数设定是一样的，都是负责设定文字的大小、字形及颜色，但各有用处，且看以下比较：

<BASEFONT> 可以用于文件的开头部分，即 <HEAD> 与 </HEAD> 之间的位置，将影响全文字句，是一个空标记，用以改变字体显示的内定值。
<FONT> 是应用于文件的内文部分，即 <BODY> 与 </BODY> 之间的位置，只影响所标示的字句，是一个围堵标记。
两标记可同时存在，唯没被 <FONT> 所标示的字句才直接受 <BASEFONT> 所影响，而 <FONT> 本身亦受 <BASEFONT> 的影响。

<FONT>的参数设定：
例子： <FONT FACE="ARIAL" SIZE="+2" COLOR="#008000">CREATION OF WEBPAGE</FONT>

FACE="ARIAL"
设定文字的字形。ARIAL 是常用的一种，请不要使用 WINDOW 内建字形以外的字形。于没有设定为 GB2312 ENCODING 的中文网页，NETSCAPE NETVIGATOR 不会显示此标记所指明的任何中文字形。
SIZE="+2"
设定文字的大小。其值可以是绝对或相对，
绝对的意思便是标记自己决定文字的大小，不受 <BASEFONT> 的影响，如
SIZE="5" 表示其大小便是 5，而HTML内定值为 3，即 SIZE="3"和没有设定是一样的。
相对的意思便是在内定值 3 的基础上增加或减少大小级数，如 SIZE="+2" 便等同绝对表示法的 SIZE="5"，但若已设定 <BASEFONT SIZE="N"> 则其实际大小便是 N+2 不再是 3+2 了。<BASEFONT>只有绝对表示法。
COLOR="#008000"
设定文字的颜色。#008000 表示绿色

例子：

原始码	<FONT SIZE="+1">I LOVE CREATION OF WEBPAGE</FONT> <BR><FONT SIZE="+2" COLOR="#800080">I LOVE CREATION OF WEBPAGE</FONT> <BR><FONT FACE="TIMES NEW ROMAN" SIZE="5" COLOR="#008000">I LOVE CREATION OF WEBPAGE</FONT>
显示结果	I LOVE CREATION OF WEBPAGE I LOVE CREATION OF WEBPAGE I LOVE CREATION OF WEBPAGE