2-1 嚙踝蕭r (Texts)

HTML 中，最常見到的媒體就是文字，因此與文字相關的標籤也最多。本節先說明一些基本的標籤。
<p> 代表「段落」 (Paragraph) ，其目的在於讓個個段落分明，使整個文章看起來整齊美觀。< br> 代表「中斷」 (Break) ，其目的在強迫文字呈現於瀏覽器時，能夠切換到下一列。舉例來說：
Example（text01.htm）：
上述範例的原始檔如下：
原始檔（text01.htm）：（灰色區域按兩下即可拷貝）
<html>
<body>
此句話會從此<br>
斷開，就是因為加了 &lt;br&gt; 的緣故。
<p>
這是新的一個段落，所以會和前面的文字隔開一列。
<p align=center>
這是靠中的段落。
<p align=right>
這是靠右的段落。
</body>
</html>
Hint
為了不讓「小於」及「大於」符號被瀏覽器解譯，因此要寫成「＆lt;」和「＆gt;」。相關的對照表，會在後續章節說明。

表頭（Heading）常用在強調文字的重要性，讓使用者可以透過不同的 Heading 來區分所在的章節。Heading 以 H1 字型最大，H6 字型最小，預設的 align 屬性是置左的，例如：
Example（heading01.htm）：
上述範例的原始檔如下：
原始檔（heading01.htm）：（灰色區域按兩下即可拷貝）
<html>
<body>
	<h1 align="left">H1在左邊</h1>
	<h1 align="center">H1在中間</h1>
	<h1 align="right">H1在右邊</h1>
	<h2>H2較H1字型稍小</h2>
	<h3>H3較H2字型稍小</h3>
	<h4>H4較H3字型稍小</h4>
	<h5>H5較H4字型稍小</h5>
	<h6>H6是最小的</h6>
</body>
</html>
有關表頭標籤，可以整理如下：

標籤語法屬性
Hn, n=1, 2, 3, 4, 5, 6 <Hn> </Hn> ALIGN = left|right|center
和 HEADING 不同的地方在於，FONT 只會指定字體的大小以及顏色 (除非使用者另加一些標籤)，而 HEADING 卻會同時加粗字體且在其文字上下空白兩行。為了一些不必要的麻煩，我們可使用 <FONT SIZE="+1"> 來代替放大字型：同理，也可使用 <FONT SIZE="-1"> 來縮小字型。同時我們可以使用 <BASEFONT> 來宣告以下文字的字型大小，以方便 <FONT> 使用。例如：
Example（font01.htm）：
上述範例的原始檔如下：
原始檔（font01.htm）：（灰色區域按兩下即可拷貝）
<HTML>
<HEAD>    
	<TITLE>FONT 範例程式</TITLE>
</HEAD>
<BODY>
	FONT 由 小 到 大 七 種 SIZE <br>
	<FONT SIZE=1>size=1</FONT>, <FONT SIZE=2>size=2</FONT>,  
	<FONT SIZE=3>size=3</FONT>, <FONT SIZE=4>size=4</FONT>,
	<FONT SIZE=5>size=5</FONT>, <FONT SIZE=6>size=6</FONT>,
	<FONT SIZE=7>size=7</FONT>, <br>
	<FONT SIZE=8>size=8</FONT>, 雖然 FONT size=8 但只能表現到size=7
	<hr>
	<BASEFONT SIZE=5>    另外一種 FONT 表現方式 <br>
	<FONT SIZE="-4">size=-4</FONT>, <FONT SIZE="-3">size=-3</FONT>,
	<FONT SIZE="-2">size=-2</FONT>, <FONT SIZE="-1">size=-1</FONT>,    size=5,  
	<FONT SIZE="+1">size=+1</FONT>, <FONT SIZE="+2">size=+2</FONT>. 
	<hr>
	<BASEFONT SIZE=3>    將字型還原成原本的字型大小。    
	<hr>
	利用 FACE 的功能，你可以顯示一些特殊的字型，例如： 
	<br>
	FACE="Symbol" 你便可以顯示羅馬字母 <FONT FACE="Symbol">a, b, c, d</FONT>
	<br>
	或者，用 FACE="標楷體" 來顯示 <FONT FACE="標楷體">中文標楷體</FONT> 。
</BODY>
</HTML>
有關 FONT 標籤，可以整理如下：

標籤語法屬性
FONT <FONT> </FONT> SIZE=string, COLOR=#RRGGBB, FACE=font names
雖然在 HTML 很難表現複雜的數學式，但我們只要善用 face="symbol"，並善用上下標，就可以產生一些基本的數學算式，例如：
Example（font02.htm）：
上述範例的原始檔如下：
原始檔（font02.htm）：（灰色區域按兩下即可拷貝）
<HTML>
<BODY>
一個 d 維的高斯機率密度函數（Gaussian probability density function）可以表示成：
<center>
g(x, <font face=symbol>m</font>, <font face=symbol>S</font>) = 
(2<font face=symbol>p</font>)<sup>-d/2</sup> *
det(<font face=symbol>S</font>)<sup>-0.5</sup> *
exp[-(x-<font face=symbol>m</font>)<sup>T</sup><font face=symbol>S</font><sup>-1</sup>(x-<font face=symbol>m</font>)/2]
</center>
其中 <font face=symbol>m</font> 是此高斯機率密度函數的平均向量（Mean vector），
<font face=symbol>S</font> 則是其共變異矩陣（Covariance matrix）。
</BODY>
</HTML>
<pre> (Preformatted Text) 所標記起來的是預先已排版過的文章，使其以原貌表現在網頁上。雖然 <pre> 可以將所標記的文字以原貌呈現出來，但文章中如果有 HTML 的標籤，瀏覽器仍會對其進行處理後，才會呈現出來。但如果我們只是要顯示標籤但不想要處理顯現標籤時，就可以改用 <XMP> 標籤，此標籤會將所有其它的 HTML 標籤原封不動地呈現出來。例如：
Example（xmp01.htm）：
上述範例的原始檔如下：
原始檔（xmp01.htm）：（灰色區域按兩下即可拷貝）
<html>
<body>
PRE 所產生的效果:
<pre>
	This is a test by <a href="/jang">Roger Jang</a>.
</pre>
XMP 所產生的效果:
<xmp>
	This is a test by <a href="/jang">Roger Jang</a>.
</xmp>
</body>
</html>
<blockquote> 常被用於引述他人的語句，被引述的文字會自成一個段落，並以縮排的方式表現出來，而且與上下文章保留一段空白，例如：
Example（blockquote01.htm）：
上述範例的原始檔如下：
原始檔（blockquote01.htm）：（灰色區域按兩下即可拷貝）
<html>
<body>
  八國聯軍的庚子賠款，美國退還我國的部分，是當時的一千多萬美元，
  從那時起即存放於美國，這筆錢隨著國民政府遷台一起到了台灣，其作
  為發展教育費用的宗旨不變，因此設置了清華大學，而這筆錢從那時候
  至今一直是清大發展的經費。清大主任秘書林永隆表示，
  <blockquote>
  庚子賠款現存於美國銀行，每年固定撥大約新台幣一千萬元
  的利息給清大，隸屬清華基金。這筆錢最終的目的在幫助清
  大發展，所以數十年來，清大憑藉這筆錢創校、成立各學院
  ，現在則是用於研究儀器的購買、學生出國補助等。
  </blockquote>
  但是每年還是與校內其他經費一樣，必須在擬定經費項目後，經教育部
  核准才能使用，運用的結果也必須再呈報教育部。
</body>
</html>
<hr> 可用來劃水平線，以便將網頁文字進行區隔，摘要如下：

標籤 hr
功能劃水平線
語法 <hr>
屬性及說明
ALIGN=left|right|center 水平線位置的設定，可選擇置左、置中、置右三種方式
NOSHADE 沒有陰影效果的水平線
SIZE=n 水平線的粗細，n 值為整數
WIDTH=n|p% 水平線的長度，可給 Pixel 值也可給百分比值。
其它說明水平線的顏色跟文件的背景顏色是有相關性的，當背景顏色是白色時，水平線是灰色；當背景顏色是藍色時，水平線是淺藍色。
例如：
Example（hr01.htm）：
上述範例的原始檔如下：
原始檔（hr01.htm）：（灰色區域按兩下即可拷貝）
<HTML>
<HEAD>    
	<TITLE> HR 水平線 </TITLE>
</HEAD>
<BODY>
<P>
長度是視窗寬度一半的水平線:<br>
<HR width="50%">
<P>
粗細大小是10的水平線:<br>
<HR size=10>
<P>  
無陰影且粗細大小是10的水平線:<br>
<HR noshade size=10>
<P>  
置右且長度是視窗寬度70%、粗細大小是4的水平線:<br>
<HR align=right width="70%" size=4>    
</BODY>
</HTML>
其他對文字處理的標籤，可以整理如下：

標籤說明及範例
<B> 將所標記的文字字型加粗
<I> 將所標記的文字變成斜體
<U> 將所標記的文字加上底線
<STRIKE> 將所標記的文字~~畫線刪除~~
<BIG> 將所標記的文字放大
<SMALL> 將所標記的文字縮小
<SUP> 將所標記的文字^變成上標
<SUB> 將所標記的文字_變成下標
<EM> 將所標記的文字加以強調
<STRONG> 將所標記的文字加重語氣
<TT> 將所標記的文字以 Teletype font 字型表現，常用在固定大小的文字上
<CODE> 將所標記的文字以 Code Fragment 字型表現，常用在程式碼的敘述上
<VAR> 將所標記的文字以 Variable 字型表現，常用在算數式的變數上

此外，IE 也提供了 marquee 標籤，可以達到「跑馬燈」的效果，請見下列範例：
Example（marquee01.htm）：
上述範例的原始檔如下：
原始檔（marquee01.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>    
<title>跑馬燈</title>
</head>
<body>
<marquee direction=left  bgcolor="#ff9999" behavior=scroll    scrollamount=10 scrolldelay=100>嗨！我是一號跑馬燈</marquee> 
<marquee direction=right bgcolor="#99ff99" behavior=slide     scrollamount=20 scrolldelay=100>Hello！我是二號跑馬燈</marquee> 
<marquee direction=left  bgcolor="#9999ff" behavior=alternate scrollamount=30 scrolldelay=100>嘿嘿！我是三號跑馬燈</marquee> 
</body>
</html>
有關跑馬燈的屬性和其意義，讀者大概可以從上述範例猜出來吧？（若真的猜不出來，到搜尋引擎找找，應該可以找到答案。）
如果結合 Cascading Style Sheet 和 JavaScript/VBScript，就可以對文字進行更複雜的處理和呈現，例如我們可以對文字加入各種陰影特效，請見下列範例：
Example（filter01.htm）：
上述範例的原始檔如下：
原始檔（filter01.htm）：（灰色區域按兩下即可拷貝）
<HTML>
<HEAD>
<TITLE>濾鏡特效</TITLE>
<STYLE>
.s1 {height:100; width:300; FILTER: Shadow(Color=#FF0000, Direction=100)}
.s2 {height:100; width:300; FILTER: Shadow(Color=#FF0000, Direction=150)}
.s3 {height:100; width:300; FILTER: Shadow(Color=#FF0000, Direction=200)}
.s4 {height:100; width:300; FILTER: Shadow(Color=#FF0000, Direction=250)}
.s5 {height:100; width:300; FILTER: Shadow(Color=#00FF00, Direction=250)}
.s6 {height:100; width:300; FILTER: Shadow(Color=#0000FF, Direction=250)}
</STYLE>
</HEAD>

<BODY>

<center>
<div ID=text1 CLASS=s1><font size=20 face="標楷體">濾鏡特效</font></div>
</center>	

<SCRIPT LANGUAGE=VBScript>
i = 1
sub Trans1()
	text1.className = "s" & i

	if i = 6 then
		i = 1
	else
		i = i + 1
	end if
	id1=setTimeout("Trans1()", 100)
end sub
Trans1()
</SCRIPT>

</BODY>
</HTML>
上述範例所用到的程式碼，會在後續章節說明。
以下是試驗區，你可以直接填入 HTML 的內容，按「送出測試」後，即可在新網頁看到呈現的結果。
Example（htmlTestText.htm）：

HTML 簡介與應用

標籤	hr
功能	劃水平線
語法	<hr>
屬性及說明
	ALIGN=left\|right\|center	水平線位置的設定，可選擇置左、置中、置右三種方式
	NOSHADE	沒有陰影效果的水平線
	SIZE=n	水平線的粗細，n 值為整數
	WIDTH=n\|p%	水平線的長度，可給 Pixel 值也可給百分比值。
其它說明	水平線的顏色跟文件的背景顏色是有相關性的，當背景顏色是白色時，水平線是灰色；當背景顏色是藍色時，水平線是淺藍色。

標籤	說明及範例
<B>	將所標記的文字字型加粗
<I>	將所標記的文字變成斜體
<U>	將所標記的文字加上底線
<STRIKE>	將所標記的文字~~畫線刪除~~
<BIG>	將所標記的文字放大
<SMALL>	將所標記的文字縮小
<SUP>	將所標記的文字^變成上標
<SUB>	將所標記的文字_變成下標
<EM>	將所標記的文字加以強調
<STRONG>	將所標記的文字加重語氣
<TT>	將所標記的文字以 `Teletype font` 字型表現，常用在固定大小的文字上
<CODE>	將所標記的文字以 `Code Fragment 字型表現，常用在程式碼的敘述上`
<VAR>	將所標記的文字以 `Variable` 字型表現，常用在算數式的變數上