■ 字體標記
<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>
若要求真確的效果當然以實體標記為佳。
|
|
|
<B>...</B>
用法: 使文本以粗體顯示
開始/結束標識: 必須/必須
屬性: %coreattrs,%i18n,%events
空: 不允許
兩者皆能產生字體加粗效果,但必須注意的是當文件編碼被設為漢字時,兩者所標示的中文字不會在 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
|
|
<I>...</I>
用法: 使文本以斜體顯示
開始/結束標識: 必須/必須
屬性: %coreattrs,%i18n,%events
空: 不允許
這些標記在 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>...</FONT>
用法: 用以改變字體大小和顏色
開始/結束標識: 必須/必須
屬性: size="..."文本字體大小(從1到7,或者相近的數字)
color="..."文本字體顏色
face="..."文本字體類型
空: 不允許
注釋: 使用樣式表來實現這種設置會更好,提倡使用樣式表
這一節隻有這兩個標記具參數設定,且兩者的參數設定是一樣的,都是負責設定文字的大小、字型及顏色,但各有用處,且看以下比較:
- <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
|
|
網頁教學網--專業的網頁教學站點
|