当前位置:网络资源中心文章中心网页设计HTML/CSS → 文章内容

HTML语言剖析(五)字体标记 (1)

减小字体 增大字体 作者:阿阳  来源:网咯收集  发布时间:2008-5-16 15:43:47
%26lt;STRONG%26gt; %26lt;B%26gt;
%26lt;I%26gt; %26lt;EM%26gt; %26lt;VAR%26gt; %26lt;CITE%26gt; %26lt;DFN%26gt; %26lt;ADDRESS%26gt;
%26lt;TT%26gt; %26lt;SAMP%26gt; %26lt;CODE%26gt; %26lt;KBD%26gt; %26lt;U%26gt; %26lt;STRIKE%26gt; %26lt;BIG%26gt; %26lt;SMALL%26gt; %26lt;SUP%26gt; %26lt;SUB%26gt;
%26lt;H1%26gt; %26lt;H2%26gt; %26lt;H3%26gt; %26lt;H4%26gt; %26lt;H5%26gt; %26lt;H6%26gt;
%26lt;FONT%26gt; %26lt;BASEFONT%26gt; ■实体标记与逻辑标记 ▲Top这一节你必须先明白实体标记逻辑标记的分别,否则你会迷惑于为何不同 的标记却有相同的效果。两者分别有以下两处
    实体标记有固定的显示效果,逻辑标记则依不同浏览器而不同。
    例如逻辑标记的 %26lt;EM%26gt; 由于浏览器的不同它所标示的文字不一定出现斜体效果, 它可能是加底线、粗体或反白等,所以这一节是以它们在 IE 和 NC 中的效果作介 绍。

    多个实体标记亦可有效标示同一字句,逻辑标记则通常于旧浏览器不能有效显示多 重的标示。
    例如两个逻辑标记 %26lt;EM%26gt; 及 %26lt;STRONG%26gt; 同时标示一字句于旧浏览器常失去作用。

实体标记有
%26lt;I%26gt; %26lt;B%26gt; %26lt;U%26gt; 逻辑标记有
%26lt;STRONG%26gt; %26lt;EM%26gt; %26lt;VAR%26gt; %26lt;CITE%26gt; %26lt;DFN%26gt; %26lt;ADDRESS%26gt; %26lt;CODE%26gt; %26lt;KBO%26gt; %26lt;SAMP%26gt; %26lt;TT%26gt;

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

■%26lt;STRONG%26gt; %26lt;B%26gt; ▲Top两者皆能产生字体加粗的效果,但必须注重的是当文件被设为 gb2312 Encoding 时,两者所 标示的中文字不会于 Netscape Netvigator 显示粗体效果。

例子 (第一行是没有任何字体标记的,作对照之用) HTML Source Code (原始码)浏览器显示结果Creation of Webpage
%26lt;br%26gt;%26lt;STRONG%26gt;Creation of Webpage%26lt;/STRONG%26gt;
%26lt;br%26gt;%26lt;B%26gt;Creation of Webpage%26lt;/B%26gt; Creation of Webpage
Creation of Webpage
Creation of Webpage

■%26lt;I%26gt; %26lt;EM%26gt; %26lt;VAR%26gt; %26lt;CITE%26gt; %26lt;DFN%26gt; %26lt;ADDRESS%26gt;▲Top这些标记于 Internet Explorer 都产生斜体效果,而只有 %26lt;/DFN%26gt; 于 Netscape Netvigator 失去作 用。这些标记中只有 %26lt;ADDRESS%26gt; 较为非凡,因它包括换行效果所以不必在它前面加上 %26lt;BR%26gt; 标记。

例子 HTML Source Code (原始码)浏览器显示结果%26lt;I%26gt;Creation of Webpage%26lt;/I%26gt;
%26lt;br%26gt;%26lt;EM%26gt;Creation of Webpage%26lt;/EM%26gt;
%26lt;br%26gt;%26lt;VAR%26gt;Creation of Webpage%26lt;/VAR%26gt;
%26lt;br%26gt;%26lt;CITE%26gt;Creation of Webpage%26lt;/CITE%26gt;
%26lt;br%26gt;%26lt;DFN%26gt;Creation of Webpage%26lt;/DFN%26gt;
%26lt;ADDRESS%26gt;Creation of Webpage%26lt;/ADDRESS%26gt; Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage
Creation of Webpage Creation of Webpage

■%26lt;TT%26gt; %26lt;SAMP%26gt; %26lt;CODE%26gt; %26lt;KBD%26gt; %26lt;U%26gt; %26lt;STRIKE%26gt; %26lt;BIG%26gt; %26lt;SMALL%26gt; %26lt;SUP%26gt; %26lt;SUB%26gt;▲Top为方便对照及记认,所以把十个标记于在一起介绍。
    %26lt;TT%26gt; %26lt;SAMP%26gt; %26lt;CODE%26gt; %26lt;KBD%26gt; 可令每字母有相等宽度且每字母之间的距离稍为加 宽。但于 NC 不见得如此。 %26lt;U%26gt; 是加底线的标记,一些非凡的浏览器并不支援,因顾虑到与连结混淆。 %26lt;STRIKE%26gt; 加上删除线的标记。 %26lt;BIG%26gt; 令字体加大。 %26lt;SMALL%26gt; 令字体变细。 %26lt;SUB%26gt; 为下标字, %26lt;SUP%26gt; 则为上标字,仅剩的数学标记。

    例子 (第一行是没有任何字体标记的,作对照之用) HTML Source Code (原始码)浏览器显示结果Creation of Webpage
    %26lt;br%26gt;%26lt;TT%26gt;Creation of Webpage%26lt;/TT%26gt;
    %26lt;br%26gt;%26lt;SAMP%26gt;Creation of Webpage%26lt;/SAMP%26gt;
    %26lt;br%26gt;%26lt;CODE%26gt;Creation of Webpage%26lt;/CODE%26gt;
    %26lt;br%26gt;%26lt;KBD%26gt;Creation of Webpage%26lt;/KBD%26gt;
    %26lt;br%26gt;%26lt;U%26gt;Creation of Webpage%26lt;/U%26gt;
    %26lt;br%26gt;%26lt;STRIKE%26gt;Creation of Webpage%26lt;/STRIKE%26gt;
    %26lt;br%26gt;%26lt;BIG%26gt;Creation of Webpage%26lt;/BIG%26gt;
    %26lt;br%26gt;%26lt;SMALL%26gt;Creation of Webpage%26lt;/SMALL%26gt;
    %26lt;br%26gt;12345%26lt;SUB%26gt;7%26lt;/SUB%26gt; 6789%26lt;SUP%26gt;9%26lt;/SUP%26gt; 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
    123457 67899

    ■%26lt;H1%26gt; %26lt;H2%26gt; %26lt;H3%26gt; %26lt;H4%26gt; %26lt;H5%26gt; %26lt;H6%26gt;▲Top这些是标题标记,由 %26lt;H1%26gt; 至 %26lt;H6%26gt; 变粗变大加宽的程度逐渐减小。每个标题标记所标示 的字句将独占一行且上下留一空白行。

    例子 原始码%26lt;H1%26gt;Header Level 1%26lt;/H1%26gt;
    %26lt;H2%26gt;Header Level 2%26lt;/H2%26gt;
    %26lt;H3%26gt;Header Level 3%26lt;/H3%26gt;
    %26lt;H4%26gt;Header Level 4%26lt;/H4%26gt;
    %26lt;H5%26gt;Header Level 5%26lt;/H5%26gt;
    %26lt;H6%26gt;Header Level 6%26lt;/H6%26gt; 显示结果

    Header Level 1

    Header Level 2

    Header Level 3

    Header Level 4

    Header Level 5
    Header Level 6

    ■%26lt;FONT%26gt; %26lt;BASEFONT%26gt;▲Top这一节只有这两个标记具参数设定,且两者的参数设定是一样的,都是负责设定文字的大 小、字形及颜色,但各有用处,且看以下比较 %26lt;BASEFONT%26gt; 可以用于文件的开头部分,即 %26lt;HEAD%26gt; 与 %26lt;/HEAD%26gt; 之间的位置,将 影响全文字句,是一个空标记,用以改变字体显示的内定值。
    %26lt;FONT%26gt; 是应用于文件的内文部分,即 %26lt;BODY%26gt; 与 %26lt;/BODY%26gt; 之间的位置,只影响 所标示的字句,是一个围堵标记。 两标记可同时存在,唯没被 %26lt;FONT%26gt; 所标示的字句才直接受 %26lt;BASEFONT%26gt; 所影 响,而 %26lt;FONT%26gt; 本身亦受 %26lt;BASEFONT%26gt; 的影响。

    %26lt;FONT%26gt;的参数设定
    例子 %26lt;font face="Arial" size="+2" color="#008000"%26gt;Creation of Webpage%26lt;/font%26gt;

      face="Arial"
      设定文字的字形。Arial 是常用的一种,请不要使用 Window 内建字 形以外的字形。于没有设定为 Gb2312 Encoding 的中文网页,Netscape Netvigator 不会显示此标记 所指明的任何中文字形。 size="+2"
      设定文字的大小。其值可以是绝对相对
      绝对的意思便是标记自己决定文字的大小,不受 %26lt;BASEFONT%26gt; 的影响,如
      size="5" 表示其大小便是 5, 而html内定值为 3,即 size="3"和没有设定是一样的。
      相对的意思便是在内定值 3 的基础上增加或减少大小级数,如 size="+2" 便等同绝 对表示法的 size="5",但若已设定 %26lt;BASEFONT size="n"%26gt; 则其实际大小便是 n+2 不 再是 3+2 了。%26lt;BASEFONT%26gt;只有绝对表示法。 color="#008000"
      设定文字的颜色。#008000 表示绿色

      例子 原始码%26lt;font size="+1"%26gt;I love Creation of Webpage%26lt;/font%26gt;
      %26lt;br%26gt;%26lt;font size="+2" color="#800080"%26gt;I love Creation of Webpage%26lt;/font%26gt;
      %26lt;br%26gt;%26lt;font face="Times New Roman" size="5" color="#008000"%26gt;I love Creation of Webpage%26lt;/font%26gt; 显示结果I love Creation of Webpage
      I love Creation of Webpage
      I love Creation of Webpage