◆今昔HTML
 ◆HTML概念
 ◆標記一覽
 ◆文件標記
 ◆排版標記
 ◆字體標記Here
 ◆清單標記
 ◆表格標記
 ◆表單標記
 ◆圖形標記
 ◆連結標記
 ◆框架標記
 ◆影像地圖
 ◆多媒體
 ◆其他標記
 ◆特殊字元
 ◆調色原理
　
  ■ 本節主要介紹的標記：
<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概念】。

■實體標記與邏輯標記 ：
這一節【字體標記】你必須先明白實體標記與邏輯標記的分別，否則你會迷惑於為何不同 的標記卻有相同的效果。兩者分別有以下兩處：
  1. 實體標記有固定的顯示效果，邏輯標記則依不同瀏覽器而不同。
    例如邏輯標記的 <EM> 由於瀏覽器的不同它所標示的文字不一定出現斜體效果， 它可能是加底線、粗體或反白等，所以這一節是以它們在 IE 和 NC 中的效果作介 紹。

  2. 多個實體標記亦可有效標示同一字句，邏輯標記則通常於舊瀏覽器不能有效顯示多 重的標示。
    例如兩個邏輯標記 <EM> 及 <STRONG> 同時標示一字句於舊瀏覽器常失去作用。

  • 實體標記有：
    <I> <B> <U>
  • 邏輯標記有：
    <STRONG> <EM> <VAR> <CITE> <DFN> <ADDRESS> <CODE> <KBO> <SAMP> <TT>

若要求真確的效果當然以實體標記為佳。

■<STRONG> <B> ：
兩者皆能產生字體加粗的效果，但必須注意的是當文件被設為 Big5 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>：
這些標記於 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>
為方便對照及記認，所以把十個標記於在一起介紹。
  • <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>：
這些是標題標記，由 <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>：
這一節只有這兩個標記具參數設定，且兩者的參數設定是一樣的，都是負責設定文字的大 小、字形及顏色，但各有用處，且看以下比較：
  • <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 內建字 形以外的字形。於沒有設定為 Big5 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