回到學院首頁選擇製網課程教學與製網有關的語言選擇輔助課程選擇網頁材料了解 HKIWC
The Best Web Hosting Company
 今昔HTML
 HTML概念
 標記一覽
 文件標記
 排版標記
 字體標記Here
 清單標記
 表格標記
 表單標記
 圖形標記
 連結標記
 框架標記
 影像地圖
 多媒體
 其他標記
 特殊字元
 調色原理
 StyleSheets
 加入實例
 疑難討論
 聯絡學院
 網絡辭典
歡迎到訪 PenPal Garden
ICQ 國際交友會
  ■ 本節主要介紹的標記:
<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

The Best Web Hosting Company
Download Internet Explorer Download Netscape Netvigator