This is a test page to show you how differents tags effect a HTML document.

以下將簡介HTML的Tags及其呈現出來的效果.所用的格式是:
所有HTML原始碼會用<CODE>這個Tag包起來, 然後下一行就是其在瀏覽器上所呈現的效果:

<H1> 標題文字一 </H1>

標題文字一

下面就從與文字控制有關的Tags開始.

Back to Table of Contents

Headers

<H1> 標題文字一 </H1>

標題文字一

<H2> 標題文字二 </H2>

標題文字二

<H3> 標題文字三 </H3>

標題文字三

<H4> 標題文字四 </H4>

標題文字四

<H5> 標題文字五 </H5>

標題文字五

<H6> 標題文字六 </H6>

標題文字六

Back to Table of Contents

Phrase Tags

<CITE>This is citation</CITE>
This is citation

<B>This is Bold Texts</B>
This is Bold Texts

<I>This is Italic Texts</I>
This is Italic Texts

<EM>This is Emphasis Texts</EM>
This is Emphasis Texts

<STRONG>This is Strong Texts</STRONG>
This is Strong Texts

<KBD>This is Keyboard Input</KBD>
This is Keyboard Input

<VAR>This is Variable</VAR>
This is Variable

<CODE>This is for program codes</CODE>
This is for program codes

<TT>This is TypeWriter</TT>
This is TypeWriter

<SAMP>This is Sample Text</SAMP>
This is Sample Text

<ADDRESS>This is for Address</ADDRESS>

Back to Table of Contents

Listing

接下來是有關listing的部份:

<OL>
<LI>西瓜
<LI>香蕉
<LI>蓮霧
</OL>

1. 西瓜
2. 香蕉
3. 蓮霧

<UL>
<LI>西瓜
<LI>香蕉
<LI>蓮霧
</UL>

• 西瓜
• 香蕉
• 蓮霧

<DL>
<DT>西瓜
<DD>有紅的跟黃的兩種
<DD>也有無子西瓜!
<DT>香蕉
<DD>芭蕉也算是其中之一
<DT>蓮霧
<DD>黑珍珠那種很好吃!
</DL>

西瓜

有紅的跟黃的兩種

也有無子西瓜!

香蕉

芭蕉也算是其中之一

蓮霧

黑珍珠那種很好吃!

<DIR>
<LI>西瓜
<LI>香蕉
<LI>蓮霧
</DIR>

<MENU>
<LI>西瓜
<LI>香蕉
<LI>蓮霧
</MENU>

Back to Table of Contents

Others

<P>這個Tag是用來標示一段文字.所以應該把這個Tag放在一段文字的前面 表示其後所接的是一段文字.
<P>這個是第二段文字. 每段文字的第一行都會內縮幾個字.


這個Tag是用來標示一段文字.所以應該把這個Tag放在一段文字的前面 表示其後所接的是一段文字.

這個是第二段文字. 每段文字的第一行都會內縮幾個字.

<PRE> 
這個Tag所標示的文字通常是已經有固定格式的文字.
例如:
	在<PRE>這Tag之內, 你的文字可以
			亂跳
				或任意擺放
而在<PRE>這個Tag裡面的文字中,有些事要注意:
	<UL>
	<LI>文中的Line Break在瀏覽器下表現成移動到下一行的開始
	<LI>Anchor還有一些文字的標示可以在文中使用.
	<LI>那些定義段落格式的標示(像標題,address等)都不應該使用!
        </UL>
</PRE>

這個Tag所標示的文字通常是已經有固定格式的文字.
例如:
        在<PRE>這Tag之內, 你的文字可以
                        亂跳
                                或任意擺放
而在<PRE>這個Tag裡面的文字中,有些事要注意:
        

        
文中的Line Break在瀏覽器下表現成移動到下一行的開始
        
Anchor還有一些文字的標示可以在文中使用.
        
那些定義段落格式的標示(像標題,address等)都不應該使用!
        

<BLOCKQUOTE>
<p>這個Tag所標示的是由其他來源所引入的文字.
</BLOCKQUOTE>

這個Tag所標示的是由其他來源所引入的文字.

Back to Table of Contents

Table

<table border>
<caption>一張表</caption>
<tr><th>標題<th>標題<th>標題
<tr><td>資料<td>資料<td>資料
<tr><td>資料<td>資料<td>資料
</table>

<table border>
<caption>比較複雜的表</caption>
<tr><th rowspan=2 colspan=2>標題<th colspan=2>標題<th rowspan=3>標題
<tr><td>資料<td>資料
<tr><td>資料<td>資料<td>資料<td>資料
<tr><td>資料<td>資料<td>資料<td>資料<td>資料
<tr><td>資料<td>資料<th rowspan=2 colspan=2>標題<td>資料
<tr><td>資料<td>資料<td>資料
<tr><td>資料<td>資料<td>資料<td>資料<td>資料
</table>

Back to Table of Contents

Forms

<FORM METHOD="POST" ACTION="http://test.test/test">

<p>輸入文字: <INPUT NAME="entry1">

<p><TEXTAREA NAME="negative" ROWS=2 COLS=20></TEXTAREA> 

<p>多選多:<br>
<INPUT TYPE="checkbox" NAME="topping" VALUE="pepperoni"> 選項一<br>
<INPUT TYPE="checkbox" NAME="topping" VALUE="sausage"> 選項二<br>
<INPUT TYPE="checkbox" NAME="topping" VALUE="anchovies"> 選項三<br>

<p>多選一:<br>
<INPUT TYPE="radio" NAME="paymethod" VALUE="cash" CHECKED> Cash.
<INPUT TYPE="radio" NAME="paymethod" VALUE="check"> Check.
<INPUT TYPE="radio" NAME="paymethod" VALUE="mastercard"> Mastercard.
<INPUT TYPE="radio" NAME="paymethod" VALUE="visa"> Visa.
<INPUT TYPE="radio" NAME="paymethod" VALUE="americanexpress"> American Express.

<p>拉出式選單:<br>
<SELECT NAME="what-to-do">
<OPTION>選項一
<OPTION SELECTED>選項二
<OPTION>選項三
<OPTION>選項四
<OPTION>選項五
</SELECT> <br>

<p>複選式選單:<br>
<SELECT NAME="what-to-do" MULTIPLE SIZE=10>
<OPTION VALUE="drink">Drink Coffee
<OPTION VALUE="read" SELECTED>Read A Book
<OPTION value=walk>Take A Walk
<OPTION> Chop Down Rainforests
<OPTION> Buy A Bagel
<OPTION>Watch TV
<OPTION>Sell Art
<OPTION>Buy Jewelry
<OPTION>Attend A Concert
<OPTION>Read Poetry
<OPTION>Exercise
<OPTION>Whittle
<OPTION>Cook Stir Fry
<OPTION>Sip Espresso
<OPTION value="Pig Out">Munch Teddy Grahams
</SELECT> 

<P><INPUT TYPE="reset" VALUE="重置鍵(或清除)">. 

<P><INPUT TYPE="submit" VALUE="送出資料">. 

</FORM>

Back to Table of Contents

Images

<img src="../big5.gif" alt="Chinese BIG-5 doc" align="bottom">
這是中文文件

Back to Table of Contents

Clickable Map

File "test.conf" :

default		/~chenym/test/test4.html
rect (52,125) (300,249)    /~chenym/test/test1.html 
circ (313,290) 80     /~chenym/test/test2.html 
poly (337,112) (340,180) (421,282) (542,291) (587,190) (504,126) (360,154)  /~chenym/test/test3.html

The Map

<a href="/cgi-bin/htimage/~chenym/test.conf">
<img src="/~chenym/test.gif" ismap>
</a>

Back to Table of Contents

Special Symbols

<

>

&

Back to Table of Contents