HTML之字体标记

■ 字体标记

<STRONG> <B>
<I> <EM> <VAR> <CITE> <DFN> <ADDRESS>
<TT> <SAMP> <CODE> <KBD> <U> <STRIKE> <BIG> <SMALL> <SUP> <SUB>
<H1> <H2> <H3> <H4> <H5> <H6>
<FONT> <BASEFONT>

  欲明白本篇【HTML彻底剖析】之标记分类,请看 【标记一览】。
  也请先明白围堵标记与空标记的分别,请看 【HTML概念】。

■实体标记与逻辑标记 : ▲Top

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

  1、实体标记有固定的显示效果,逻辑标记标记则依不同浏览器而不同。

  例如逻辑标记的 <EM> 由于浏览器的不同它所标示的文字不一定出现斜体效果, 它可能是加底线、粗体或反白等,所以这一节是以它们在 IE 和 NC 中的效果作介绍。

  2、多个实体标记也可有效标示同一字句,逻辑标记则通常于浏览器不能有效显示多 重的标示。

  例如两个逻辑标记 <EM> 及 <STRONG> 同时标示一字句于旧浏览器常失去作用。

实体标记有:
<I> <B> <U> 逻辑标记有:
<STRONG> <EM> <VAR> <CITE> <DFN> <ADDRESS> <CODE> <KBO> <SAMP> <TT>
  若要求真确的效果当然以实体标记为佳。

■<STRONG> <B> : ▲Top

  两者皆能产生字体加粗效果,但必须注意的是当文件编码被设为汉字时,两者所标示的中文字不会在 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
123457 67899

■<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 附带字 体以外的字体。对于没有设定为中文代码的中文网页,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
时间: 2024-09-11 14:47:07

HTML之字体标记的相关文章

逻辑性字体标记

     HTML作为一种用于展示文档的语言,包含了一些使用其功能而不是效果来命名的标记,这就是逻辑型字体标记.逻辑型字体标记一般适用于英文字体.另外,一般主页制作时很少使用这些标记,因为他们的显示结果,一般都可以使用<FONT>.<B>.<I>等这些标记达到.不过,稍微了解一下,可以帮助我们看懂别人的HTML代码.BIG和 SMALLBIG和SMALL改变字体的大小.例子:正常 <BIG>大字</BIG> <SMALL>小字<

HTML彻底剖析(5)字体标记

■ 字体标记 <STRONG> <B> <I> <EM> <VAR> <CITE> <DFN> <ADDRESS> <TT> <SAMP> <CODE> <KBD> <U> <STRIKE> <BIG> <SMALL> <SUP> <SUB> <H1> <H2> <

网页制作学习用好HTML字体标记及属性

网页 我们在这里将要谈的是有关文字的标记,包括字体大小.颜色.字型...等变化,适当的应用可以增加页面的美观! 常用字体标记 <Hn>...</Hn> 标题 ,设定标题字体大小, n = 1 ( 大 ) ~ 6 ( 小 ) 会自动跳下一行.通常用在如章节.段落等标题上. 如 : <H2> 标题 </H2> 标题 如 : <H3 ALIGN = CENTER> 标题 </H3> ( 标题置中 ) 标题 <B>...</

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

HTML语言剖析 字体标记 <STRONG> <B> <I> <EM> <VAR> <CITE> <DFN> <ADDRESS> <TT> <SAMP> <CODE> <KBD> <U> <STRIKE> <BIG> <SMALL> <SUP> <SUB> <H1> <H2&

HTML字体标记及属性

我们在这里将要谈的是有关文字的标记,包括字体大小.颜色.字型...等变化,适当的应用可以增加页面的美观! 常用字体标记 <Hn>...</Hn> 标题 ,设定标题字体大小, n = 1 ( 大 ) ~ 6 ( 小 ) 会自动跳下一行.通常用在如章节.段落等标题上. 如 : <H2> 标题 </H2> 标题 如 : <H3 ALIGN = CENTER> 标题 </H3> ( 标题置中 ) 标题 <B>...</B&g

字体标记

    字体标记 作者:unknown 更新时间: 2http://www.alixixi.com/web/a/0http://www.alixixi.com/web/a/05-http://www.alixixi.com/web/a/03-15     <STRONG> <B> <I> <EM> <VAR> <CITE> <DFN> <ADDRESS> <TT> <SAMP> <

HTML彻底剖析(2)标记一览

标记 类型 名称或意义 作用 备注 文件标记 <HTML> ● 文件宣告 让浏览器知道这是 HTML 文件   <HEAD> ● 开头 提供文件整体信息   <TITLE> ● 标题 定义文件标题,将显示于浏览器顶端   <BODY> ● 主体 设计文件格式及内容所在   排版标记 <!--注解--> ○ 说明标记 为文件加上说明,但不被显示   <P> ○ 段落标记 为字.图.表格等之间留下一空白行   <BR> ○ 换

HTML 标记总览

文件标记 <HTML>  文件声明 让浏览器知道这是 HTML 文件   <HEAD>  开头 提供文件整体资讯   <TITLE>  标题 定义文件标题,将显示于浏览顶端   <BODY>   本文 设计文件格式及内文所在   排版标记 <!--注解--> 说明标记 为文件加上说明,但不被显示   <P>   段落标记 为字.画.表格等之间留一空白行   <BR>  换行标记 令字.画.表格等显示于下一行   <H

HTML 标记一览

■ HTML 标记一览: 标记 类型 名称或意义 作用 备注 文件标记 <HTML> ● 文件宣告 让浏览器知道这是 HTML 文件   <HEAD> ● 开头 提供文件整体信息   <TITLE> ● 标题 定义文件标题,将显示于浏览器顶端   <BODY> ● 主体 设计文件格式及内容所在   排版标记 <!--注解--> ○ 说明标记 为文件加上说明,但不被显示   <P> ○ 段落标记 为字.图.表格等之间留下一空白行   &