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

以下將簡介HTML的Tags及其呈現出來的效果.

下面就從與文字控制有關的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>

<B> This is Bold Texts </B>

<I>This is Italic Texts</I>

<EM>This is Emphasis Texts</EM>

<STRONG>This is Strong Texts</STRONG>

<KBD>This is Keyboard Input</KBD>

<VAR>This is Variable</VAR>

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

<TT>This is TypeWriter</TT>

<SAMP>This is Sample Text</SAMP>

<ADDRESS>This is for Address</ADDRESS>

Back to Table of Contents

Listing

接下來是有關listing的部份:

Ordered List

<OL>

  1. <LI>西瓜
  2. <LI>香蕉
  3. <LI>蓮霧
</OL>

Unordered List

<UL>

</UL>

Definition List

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

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

Directory

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

  • 西瓜
  • 香蕉
  • 蓮霧

    • Menu

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

  • 西瓜
  • 香蕉
  • 蓮霧

    • Back to Table of Contents

    Others

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

    <P>這個是第二段文字. 

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

    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