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>

This is for 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裡面的文字中,有些事要注意:
            
    

    <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.
    

    多選一:
    Cash. Check. Mastercard. Visa. 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">
    這是中文文件
    
    Chinese BIG-5 doc 這是中文文件

    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

    
    &lt;
    
    <
    
    &gt;
    
    >
    
    &amp;
    
    &

    Back to Table of Contents