HTML

自學課程:

HTML電子書

作者王天利先生簡介: 台灣著名電腦雜誌專欄作家及電腦書籍作家, 通曉 Dbase 、Clipper、Cobol、QB、HTML、ASP程式設計及各式軟件應用等。

作者E-mail

一) 何謂HTML

二) html文件架構

三) 我的第一份HTML文件

四) 控制標題字元大小的指令

五) 表格的運用

六) 清單

七) 美美的圖片

八) 畫面分割frameset

九) 超鏈結

十) 拋錨(anchor)

十一)FORM

十二) 補遺

一、何謂HTML

當我們逛InterNet時所看到的可能是一堆介紹的文字或一些美麗的圖片，而它的背後其實就是幾頁的文件和一些的圖檔，而這些文件就是所謂的 HTML文件，如果我們用一般的文書處理軟體，如Word、Wordpad來觀看這些文件，其實它只是一些中英文或數字符號夾雜的文章而已，但如果我們透過所謂的瀏覽器（Browser，如Netscape Navigator、Microsoft Explorer等）來欣賞，我們所看到的可就是圖文並茂的畫面了。
因此，簡單的說，HTML是一種直譯式語言，它是一個標示出文字、圖形、聲音....等物件在網頁（Web Page）上要如何顯示的規格，我們透過瀏覽器的翻譯而看到圖文並茂的畫面，但透過一般的文書處理軟體則只能用來撰寫或修改HTML文件。

<Top>

二、HTML文件架構

<html>
    <head>
        <title>標題</title>
    </head>
    <body>
        主要HTML文件的內容寫在這裡
    </body>
</html>

備註：

HTML的指令都是成對的，以<指令>開始以</指令>結束。如下：
<FONT SIZE=5>本指令在設定字型大小 </FONT>
在HTML中我們所下的指令都必須用到<（小於）和>（大於）
和""（雙引號），所以在文件中要顯示這些符號就得用下表所列字元：

HTML特殊字元
HTML字元	實際顯示
&	&
"	"
<	<
>	>
	代表空白

<Top>

三、我的第一份HTML文件


<HTML>
<HEAD>
<TITLE>我的第一份HTML文件</TITLE>
</HEAD>
<BODY>
正常文字<B>粗體字體</B><BR>
正常文字<I>斜體字體</I><BR>
正常文字<U>底線字體</U>
正常文字<BIG>放大字體</BIG>
正常文字<SUP>上標文字</SUP>
正常文字<SUB>下標文字</SUB>
正常文字<TT>打字機字體</TT>
</BODY>
</HTML>

備註：關於BODY的設定請看補遺3

範例1輸出結果

 <Top>

四、控制標題字元大小的指令


    一般當我們在設計Web Page時都會有一個較為醒目的標題來讓訪客知曉本
Web Page的重點所在，對於標題的處理方式，HTML提供了六種標題大小的格式
選擇方式。使用語法如下：


    其中Hn分別可使用H1到H6，其字型分別由大到小，而ALIGN屬選用性質，
它可調整標題在螢幕的左、中、右等位置。範例如下：

<H3 ALIGN=center>H3的標題並置中</H3>
<H4 ALIGN=right>H4的標題並置右</H4>
<H5 ALIGN=left>H5的標題並置左</H5>

範例2輸出結果


    另外也可利用功能更為強大的字型指令<FONT></FONT>語法如下：

<FONT SIZE=[+|-]1|2|3|4|5|6|7 COLOR = "#rrggbb">文字內容</FONT>

    你可以利用SIZE=n的方式來直接指定字型大小，也可利用SIZE=+n或SIZE=-n
來顯示比原來字型增大或縮小的字體。
　至於色彩的指定方式則採以rrggbb，紅綠藍三色以十六進位比例混合的方式
來設定，當然你也可採用指定名稱的方式，例如"Black"、"Blue"、
"Pink"等顏色。


<HTML>
<HEAD>
<TITLE>字體測試</TITLE>
</HEAD>
<BODY>
<FONT SIZE=3 COLOR="#ff0000">紅色文字，３號字體</FONT>
<FONT SIZE=+2 COLOR="#00ff00">綠色文字，５號字體（相對加大２號）</FONT>
<FONT SIZE=-3 COLOR="#0000ff">藍色文字，２號字體（相對縮小３號）</FONT>
<FONT SIZE=6 COLOR="#000000">黑色文字，６號字體</FONT>
</BODY>
</HTML>

範例3輸出結果

<回目錄>

五、表格的運用

表格的基本語法如下：


<TABLE>
<CAPTION>表格標題</CAPTION>
<TR>
<TH>項目標題第一欄</TH>
<TH>項目標題第二欄</TH>
<TH>項目標題第三欄</TH>
</TR>
<TR>
<TD>項目內容第一列第一欄</TD>
<TD>項目內容第一列第二欄</TD>
<TD>項目內容第一列第三欄</TD>
</TR>
<TR>
<TD>項目內容第二列第一欄</TD>
<TD>項目內容第二列第二欄</TD>
<TD>項目內容第二列第三欄</TD>
</TR>
             .
             .
             .
</TABLE>

例子如下：


<HTML>
<HEAD>
<TITLE>表格測試一</TITLE>
</HEAD>
<BODY>
<TABLE>
<CAPTION>表格標題</CAPTION>
<TR>
<TH>項目標題第一欄</TH>
<TH>項目標題第二欄</TH>
<TH>項目標題第三欄</TH>
</TR>
<TR>
<TD>項目內容第一列第一欄</TD>
<TD>項目內容第一列第二欄</TD>
<TD>項目內容第一列第三欄</TD>
</TR>
<TR>
<TD>項目內容第二列第一欄</TD>
<TD>項目內容第二列第二欄</TD>
<TD>項目內容第二列第三欄</TD>
</TR>
</TABLE>
</BODY>
</HTML>

範例4輸出結果


    其中我們會發現表格沒有框線，看起來蠻不好看的，因此我們可以將<TABLE>
改為<TABLE BORDER=n>其中n愈大外框愈粗。
    以下例子我們設為<TABLE BORDER=3>：

範例5輸出結果


    另外我們可加上以下指令：
<TABLE CELLSPACING=n>調整表格內框線與外框線間的距離。
<TABLE CELLPADDING=n>調整表格內框線與資料內容間的距離。
當然這兩個指令須和BORER指令相配合才有作用。
    以下例子我們設為<TABLE BORDER=3 CELLSPACING=10 CELLPADDING=10>：

範例6輸出結果


    當然我們也可在<TH>、<TD>的指令中加入對其內容控制的屬性，指令如下：
<TH ALIGN=left|right|center VALIGN=top|middle|bottom>
<TD ALIGN=left|right|center VALIGN=top|middle|bottom>
    其中ALIGN表示資料內容置於表格左、右、中；
       VALIGN表示資料內容置於表格上、中、下。
如果我們的資料內容想要跨欄或跨列呢？那可試試以下指令：
ROWSPAN=x（x視你要跨幾列而定）
COLSPAN=y（y視你要跨幾欄而定）
例子如下：


<HTML>
<HEAD>
<TITLE>表格測試</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=3 CELLSPACING=10 CELLSPADDING=10>
<CAPTION>表格標題</CAPTION>

<TR>
<TH COLSPAN=3>我是項目標題我跨三欄</TH>
</TR>

<TR>
<TD ROWSPAN=3 VALIGN=TOP>我跨三列並靠上</TD>
<TD ALIGN=CENTER COLSPAN=2>我跨兩欄並靠中</TD>
</TR>

<TR>
<TD ROWSPAN=2 VALIGN=BOTTOM>我跨二列並靠下</TD>
<TD>項目內容</TD>
</TR>

<TR>
<TD>項目內容</TD>
</TR>
</TABLE>
</BODY>
</HTML>

範例7輸出結果


  如果要讓表格內可以有顏色呢？那加上<gbcolor="#rrggbb">就沒錯了，例如：
<TD BGCOLOR="#CCFFFF"></TD>或<TH BGCOLOR="#CCFFFF"></TH>
其結果就像這樣：

這裡是#00ffff的顏色
這裡是#ccffff的顏色

<回目錄>

六、清單


    清單可分為三種型態：順序式清單<OL>、無順序清單<UL>、定義清單<DL>；
其中順序式清單和無順序清單差別在於順序式清單會自動加上序號，而無順序清單
則會自動加上符號；其語法如下：
（一）順序式清單：
    <HTML>
    <HEAD>
    <TITLE>清單測試一</TITLE>
    </HEAD>
    <BODY>
    <OL>
    <LI>第一項
    <LI>第二項
    <LI>第三項
         .
         .
         .
    </OL>
    </BODY>
    </HTML>

範例8輸出結果

    其中除了數字外，我們也可加上TYPE=A | a | I | i的屬性來選擇以英文字母或是
羅馬數字來作為項目的編號，並且也可以START = n來指定從那一個字母或數字開始；
請看以下範例：
    <HTML>
    <HEAD>
    <TITLE>清單測試二</TITLE>
    </HEAD>
    <BODY>
    <OL TYPE=A START=5>
    <LI>第一項
    <LI>第二項
    <LI>第三項
         .
         .
         .
    </OL>
    </BODY>
    </HTML>

範例9輸出結果

（二）無順序清單：
    <HTML>
    <HEAD>
    <TITLE>清單測試三</TITLE>
    </HEAD>
    <BODY>
    <UL>
    <LI>第一項
    <LI>第二項
    <LI>第三項
         .
         .
         .
    </UL>
    </BODY>
    </HTML>

範例10輸出結果

    無順序式清單我們可以加上TYPE= disc | circle | square的屬性來指定符號為
實心圓、空心圓或實心方塊；請看以下範例：
    <HTML>
    <HEAD>
    <TITLE>清單測試四</TITLE>
    </HEAD>
    <BODY>
    <UL>
    <LI TYPE=disc>第一項
    <LI TYPE=circle>第二項
    <LI TYPE=square>第三項
         .
         .
         .
    </UL>
    </BODY>
    </HTML>

範例11輸出結果

    如果我們將順序式清單和無順序清單混合使用，可製作出更佳的顯示效果；
如下範例；其中縮排是為了看得清楚，沒其他意義。 
　<HTML>
    <HEAD>
    <TITLE>清單測試五</TITLE>
    </HEAD>
    <BODY>
    <OL>
    <LI>台北總公司
       <UL>
           <LI>管理部
           <LI>財務部
           <LI>業務部
       </UL>
    <LI>台中分公司
       <UL>
           <LI>管理部
           <LI>財務部
           <LI>業務部
       </UL>
    <LI>高雄分公司
       <UL>
           <LI>管理部
           <LI>財務部
           <LI>業務部
       </UL>
    </OL>
    </BODY>
    </HTML>

範例12輸出結果

（三）定義式清單：
    定義式清單沒有使用編號或符號，但其次要項目會自動縮排，請看以下範例；
其中<DT>表示主要項目、<DD>表示次要項目，而縮排是為了看得清楚，沒其他意義。
<HTML>
<HEAD>
<TITLE>清單測試六</TITLE>
</HEAD>
<BODY>
<DL>
<DT>台北總公司
        <DD>管理部
        <DD>財務部
        <DD>業務部
<DT>台中分公司
        <DD>管理部
        <DD>財務部
        <DD>業務部
<DT>高雄分公司
        <DD>管理部
        <DD>財務部
        <DD>業務部
</DL>
</BODY>
</HTML>

範例13輸出結果

<回目錄>

七、美美的圖片

    WWW吸引之處就在於它可以放上很多美麗的圖片，你可在自己的Home Page裡擺上自
己的成長照片，或你得意的攝影作品，其簡單語法如下：
<IMG SRC="圖檔名稱">說明文字；請看以下例子
<IMG SRC="arrback.gif">這是一個三角形喲

範例14輸出結果

    我們可加上border的屬性來設定圖片的邊框粗細，例如：
<IMG SRC="arrback.gif" border=2>這是一個加了框的三角形喲

範例15輸出結果

    加上align的屬性則可調整圖片和說明文字的排列方式；
<IMG SRC="arrback.gif" align=left>圖片在左，說明文字在右
<IMG SRC="arrback.gif" align=right>圖片在右，說明文字在左

範例16輸出結果

    若訪客將瀏覽器的顯示圖片選項給關閉，則訪客將看不到圖片內容，
此時我們可加上ALT屬性在圖片位置顯示文字說明，如下例子，當然您得試著將
Netscape～Options～Auto Load Images或IE～檢視～選項～多媒體～顯示圖片前的
打勾給拿掉，才可感受到結果喲。
<IMG SRC="arrback.gif" alt="這是三角形啦">這是三角形

範例17輸出結果

加上width和height屬性可設定圖檔大小，例如：
<img src="mvhome.gif" border=0 width=100 height=30>
加上了這個屬性可讓瀏灠器先預算出圖片的放置空間大小，而不必等到每張圖片
都得從主機傳輸過來後才能排版，如此可加速文字的顯示速度。

範例18輸出結果

<回目錄>

八、畫面分割frameset

關於畫面分割，我們由以下例子看起：

<html>
<head>
<title>FRAMESET測試</title>
</head>
<frameset rows="50%,50%">
　<frameset cols="30%,70%">
　　　<frame src="frame1.htm" name="upleft">
　　　<frame src="frame2.htm" name="upright">
　</frameset>
　<frameset cols="40%,60%">
　　　<frame src="frame3.htm" name="downleft">
　　　<frame src="frame4.htm" name="downright">
　</frameset>
</frameset>

<noframe> <body bgcolor=#ffffff> <center> 如果您看到這個訊息，表示您用的browser未支援frame，請趕快昇級，不然您就落伍了！！ </center> </body> </noframe> </html>

說明如下，請以顏色對照著看：

<frameset rows="50%,50%">
    這一串指令的意思是我們要將畫面分割成上下兩個視窗，
其中上面視窗占整個畫面的50%，下面視窗占整個畫面的50%，
指令裡rows的意思是列，也就是水平分割的意思。

<frameset cols="30%,70%">
    這一串指令的意思是我們要將上半部視窗再分割成左右兩個視窗，
其中左邊視窗占30%，右邊視窗占70%，指令裡cols的意思是欄，
也就是垂直分割的意思。

<frame src="frame1.htm" name="upleft">
    其中src的意思在於定義左上半部視窗出現的第一個檔案，也就是
frame1.htm，而name則在於將這個視窗命名為upleft
，當然這個名字可隨您高興，其主要用意在於方便我們將某個檔案
link到這個視窗來。

<frameset cols="40%,60%">
    這一串指令的意思是我們要將下半部視窗再分割成左右兩個視窗，
其中左邊視窗占40%，右邊視窗占60%，指令裡cols的意思是欄，
也就是垂直分割的意思。

<noframe></noframe>

    這是為了不支援frame的瀏覽程式而設定的，
如果訪客用的瀏覽器不支援frame語法，則frameset的語法會被忽略，在
<noframe> </noframe>
裏面的指令便會被瀏覽器執行；反過來說，若訪客使用有支援frame語法
的瀏覽器觀看本文件，則<noframe> </noframe>
裏面的指令便會被忽略。

範例19輸出結果

<回目錄>

九、超鏈結

    剛上網的人士通常會有一個疑問就是： ”WEB站台那麼多，我怎麼知道
他們的網址在那裡？”於是乎超鏈結就派上用場了，只要介紹一個提供連結
點最多的網站就可了，在台灣我們第一個想到的大概非番薯藤莫屬了。
所以我們也可在我們的WEB站裡建立通往番薯藤的超鏈結，其語法如下：
<A HREF="http://taiwan.csie.ntu.edu.tw/b5/yam" TARGET="_new">蕃薯藤</A>
醬子夠簡單了吧。
    
    其中TARGET="_new"的意思在於以開啟第二個視窗的方式連結到番薯藤，
這樣可確保訪客不會因此連結就跑掉了。
    
    而蕃薯藤三個字則會以加底線的方式顯示在畫面上來介紹所要連結的站台
您可試看看不加字的結果，呵呵，怎麼什麼都看不到。
    
    除了以文字來說明我們要連結的點外，也可和<IMG SRC="圖檔名稱">
共用來達到更佳的顯示效果；也就是說可寫成：
<IMG SRC="圖檔名稱"><A HREF="http://..........." TARGET="_new">說明文字</A>
此時就算沒有說明文字至少也有個漂漂的圖片，您說是嗎？

<回目錄>

十、拋錨(anchor)

    上面所講的超鏈結是連結到其它的網頁去，如果說我們寫了一份很長的文件
(像HTML電子書)，我們想在這一份文件的內容裡跳來跳去，該如何達成呢？
那就得用anchor了，做法如下：

先下錨---也就是說將可能會連結的段落先命名，語法為<a name="錨的名稱"></a>

超連結至下錨處---語法為<a href="#錨的名稱">說明文字</a>

以本HTML電子書為例：
<a name="m1"></a>一、<a href="#b1">何謂HTML</a><p>
                 .
                 .
                 .
<a name="b1"></a><b><font size=+2 color="#0055ff">一、何謂HTML</font></b>
                 .
                 .
<a href="#m1">回目錄</a>




<回目錄>

十一、FORM

    常在別人的Home Page裡看到留言板嗎？怎麼樣才能讓我的Home Page裡
也有留言板呢？沒錯，那就需要FORM了，FORM就是為了讓參觀者能夠與
WWW的伺服器做雙向交流而設計的，為了達到雙向交流的目的，除了在
我們的Home Page裡要設計一些填寫表格外，相對的在伺服器端就要有CGI
 （Common Gateway Interface）程式相對應，那我不會寫那個什麼CGI程式怎麼辦？
所以我們就要利用一些善心人士寫好放在伺服器上的免費CGI程式了，
例如Lpage提供的留言板，以下簡單的為FORM做個介紹；FORM的基本語法如下：
<FORM METHOD="SUBMIT_METHOD" ACTION="URL">
     .
     .
     .
</FORM>
最簡單的一個例子：
<form action="html.htm">
<input type="submit" value="回HTML電子書"></form>

ACTION：指明在WWW伺服器端CGI程式所在的URL位址；如沒特別指明URL
        則以FORM所在文件的URL為內定值。

METHOD：設定將FORM的資料項傳遞到WWW伺服器端的方法，建議方法是用"POST"。

INPUT：就是讓我們輸入資料的標籤，它的格式如下；
       <INPUT TYPE="輸入欄位的種類" NAME="欄位名稱" VALUE="欄位初始值">
       而TYPE有以下幾種屬性：

"TEXT"：文數字輸入型態，這是內定值。

範例 
<FORM>
請輸入您的姓名：<INPUT NAME="name">
</FORM>

```
結果
```
請輸入您的姓名：

若要限制輸入方框的長度可加上SIZE屬性；
若要限制輸入字元長度則可加上MAXLENGTH屬性。

範例 
<FORM>
請輸入您的姓名：<INPUT NAME="name" SIZE=16 MAXLENGTH=8>
</FORM>

```
結果
```
請輸入您的姓名：

"PASSWORD"：文數字輸入欄位，但是輸入的資料會用*顯示出來，可用來輸入密碼。

範例 
<FORM>
<INPUT TYPE="PASSWORD" NAME="password" SIZE=20 MAXLENGTH=8>
</FORM>

```
結果
```

"SUBMIT"：送出資料按鈕。

範例 
<FORM>
<INPUT TYPE="SUBMIT" VALUE="確定留言">
</FORM>

```
結果
```

由於SUBMIT只用在確認資料輸出，因此可以不必加上NAME屬性，
而按鈕的大小則會依VALUE中文字的多寡自動調整。

"RESET"：清除填寫表格內容，也就是重新填寫之意。

範例 
<FORM>
請輸入您的姓名：<INPUT NAME="name" SIZE=16 MAXLENGTH=8>
<INPUT TYPE="RESET" VALUE="重新輸入">
</FORM>

```
結果
```
請輸入您的姓名：

"RADIO"：單選，多選一。

範例 
<FORM>
請選擇您的身份：
<INPUT NAME="profession" TYPE=radio VALUE="student">學生
<INPUT NAME="profession" TYPE=radio VALUE="worker">上班族
<INPUT NAME="profession" TYPE=radio VALUE="free">自由業
</FORM>

```
結果
```
請選擇您的身份：學生上班族自由業

"CHECKBOX"：多選。

範例 
<FORM>
請選擇您的興趣：
<INPUT NAME="interesting" TYPE=checkbox VALUE="movie">看電影
<INPUT NAME="interesting" TYPE=checkbox VALUE="music">聽音樂
<INPUT NAME="interesting" TYPE=checkbox VALUE="tv">看電視
<INPUT NAME="interesting" TYPE=checkbox VALUE="climbing">爬山
</FORM>

```
結果
```
請選擇您的興趣：看電影聽音樂看電視爬山

下拉式選單：可單選或複選，只差在有無MULTIPLE標籤。
- 單選範例 <FORM> 您如何得知本網站？ <SELECT NAME="reference"> <OPTION>由蕃薯藤連結 <OPTION>由ISP連結 <OPTION>由私人網站連結 <OPTION>Internet News <OPTION>朋友介紹 <OPTION>誤闖進來 <OPTION>其它，請留言說明 <SELECT> </FORM>
- 單選結果您如何得知本網站？
- 其中第一個OPTION為內定的選項，我們可加上SELECTED 將某個OPTION變為預設選項。
- 單選範例，加上SELECTED <FORM> 您如何得知本網站？ <SELECT NAME="reference"> <OPTION>由蕃薯藤連結 <OPTION>由ISP連結 <OPTION SELECTED>由私人網站連結 <OPTION>Internet News <OPTION>朋友介紹 <OPTION>誤闖進來 <OPTION>其它，請留言說明 <SELECT> </FORM>
- 單選結果，加上SELECTED
  您如何得知本網站？
- 複選範例，加上MULTIPLE，可按[Ctrl]及滑鼠左鍵來選擇一個以上項目。 <FORM> 您的興趣？ <SELECT NAME="reference" MULTIPLE> <OPTION>看電影 <OPTION>聽音樂 <OPTION>看電視 <OPTION>爬山 <OPTION>打保齡球 </SELECT> </FORM>
- 複選結果，加上MULTIPLE，可按[Ctrl]及滑鼠左鍵來選擇一個以上項目。
  您的興趣？
- 其中第一個OPTION為內定的選項，我們可加上SELECTED 將某幾個OPTION變為預設選項。
- 複選範例，加上MULTIPLE及SELECTED，可按[Ctrl]及滑鼠左鍵來選擇一個以上項目。 <FORM> 您的興趣？ <SELECT NAME="reference" MULTIPLE> <OPTION>看電影 <OPTION SELECTED>聽音樂 <OPTION>看電視 <OPTION>爬山 <OPTION SELECTED>打保齡球 </SELECT> </FORM>
- 複選結果，加上MULTIPLE及SELECTED，可按[Ctrl]及滑鼠左鍵來選擇一個以上項目。
  您的興趣？
"TEXTAREA"：文字輸入區，與"TEXT"不同的是，TEXTAREA可以有多列，分別以 ROWS來指定列數（高度），以COLS來指定欄數（寬度）。
- 範例 <FORM> 請輸入您的留言： <TEXTAREA NAME="Comments" ROWS=8 COLS=40> </TEXTAREA> </FORM>
- 結果
  請輸入您的留言：
- 我們也可加上預設的留言，記得是加在<TEXTAREA>和</TEXTAREA>之間。
- 範例 <FORM> 請輸入您的留言： <TEXTAREA NAME="Comments" ROWS=8 COLS=40>我很喜歡您的HTML電子書 </TEXTAREA> </FORM>
- 結果
  請輸入您的留言：我很喜歡您的HTML電子書

<回目錄>

十二、補遺

如果希望畫面每隔一段時間自動作更新或是自動連結到另一網頁可用以下標籤，記得這是放在<HEAD>......</HEAD>之間喔：
<meta http-equiv="refresh" content="秒數; url=文件名">
在文件中加入註解或是某些標籤目前不用又捨不得清除則可用以下標籤：
設定文件的背景顏色標籤
<BODY bgcolor="#rrggbb" text="#rrggbb" link="#rrggbb" vlink="#rrggbb" alink="#rrggbb"> ；其中bgcolor設定文件背景顏色；text設定畫面文字顏色；link設定文件中可連結網站的說明文字顏色（內定為藍色#0000FF）；vlink設定已連結過網站的說明文字顏色（內定為紫色#400040）；alink設定目前正在連結網站的說明文字顏色（內定為紅色#FF0000）。
此外我們也可利用圖檔來當做背景，此時可用<BODY background="圖檔名稱" bgproperties=fixed text="#rrggbb" link="#rrggbb" vlink="#rrggbb" alink="#rrggbb">。其中bgproperties只在InterNet Explorer裡有作用，它會將圖片如印在視窗般一樣，不會隨著捲軸的移動而移動。
自動播放背景音樂
<EMBED SRC="MIDI檔名" autostart=true HIDDEN=TRUE LOOP=TRUE>
<BGSOUND SRC="MIDI檔名" LOOP=INFINITE>
其中<EMBED>以前為Netscape專用，現我測試InterNet Explorer 4.0已有支援，您可自行試試，但為了配合有人還用舊版瀏覽器，所以建議兩組標籤還是一起加入；加上LOOP屬性則音樂會不間斷播放，HIDDEN屬性則不會顯示播放面板。
<BR>、<HR>
加上<BR>會強迫換列，加上<HR>則會顯示一條分隔線。
<PRE>、<P>
通常瀏覽器會將空白省略，因此如要瀏覽器將您的文章照原先樣式陳列則可在文章前後加上<PRE>...........</PRE>。
如果您在每一列文字的末尾加上<P>則在兩列文字中間會多空出一列空白列。
在HomePage擺上E-mail電子信箱好方便訪客隨手一點就可來信。
<a href="mailto:您的E-mail信箱?subject=E-mail信件的主題">作者姓名等說明文字</a>
您也可以直接擺上個信箱的圖，而不必任何的說明文字，例如： <a href="mailto:您的E-mail信箱?subject=E-mail信件的主題"><IMG SRC="圖檔" alt="寫信給XXX"></a>

備註：以上紅色文字表自己要修改的地方。
Microsoft Internet Exploer專有之<Marquee>跑馬燈（Nescape 4.0尚未支援）

範例一：最簡單的語法 <MARQUEE>MARQUEE最簡單的語法</MARQUEE>
結果：

MARQUEE最簡單的語法

範例二：加上背景顏色 <MARQUEE bgcolor="#aaff00">這裡加上背景顏色，顏色可以自己改喔</MARQUEE>
結果：

這裡加上背景顏色，顏色可以自己改喔

範例三：加上寬度、高度，height=30%指占螢幕畫面高度的百分比，width=70%指占螢幕畫面寬度的百分比 <CENTER> <MARQUEE width=50% height=30% bgcolor="#aaff00">這裡加上高度和寬度</MARQUEE> </CENTER>
結果：

這裡加上高度和寬度，如果您要置中請記得加<CENTER>

範例四：加上DIRECTION=RIGHT可使由右到左的的文字變成由左到右，預設是LEFT <MARQUEE bgcolor="#aaff00" DIRECTION=RIGHT>這裡的文字是由左到右喔</MARQUEE>
結果：

這裡的文字是由左到右喔

範例五：加上LOOP可設定捲動的次數 <MARQUEE bgcolor="#aaff00" LOOP=2>這裡的文字只會捲動兩次</MARQUEE>
結果：

這裡的文字只會捲動兩次

範例六：加上BEHAVIOR可設定不一樣的捲動效果，分別有SCROLL、SLIDE、ALTERNATE三種 <MARQUEE bgcolor="#aaff00" BEHAVIOR=SCROLL>這裡的文字捲動效果為SCROLL，為內定選項</MARQUEE>
結果：

這裡的文字捲動效果為SCROLL，為內定選項，也就是有沒有加都可以

<MARQUEE bgcolor="#aaff00" BEHAVIOR=SLIDE>這裡的文字捲動效果為SLIDE，當文字碰到左邊就會停止</MARQUEE>
結果：

這裡的文字捲動效果為SLIDE，當文字碰到左邊就會停止

<MARQUEE bgcolor="#aaff00" BEHAVIOR=ALTERNATE>這裡的文字捲動效果為ALTERNATE，會在左右兩邊彈來彈去</MARQUEE>
結果：

這裡的文字捲動效果為ALTERNATE，會在左右兩邊彈來彈去

範例七：加上SCROLLDELAY可設定文字跑的速度 <MARQUEE bgcolor="#aaff00" SCROLLDELAY=1000>這裡的文字SCROLLDELAY=1000亳秒</MARQUEE>
結果：

這裡的文字SCROLLDELAY=1000亳秒

範例七：加上SCROLLAMOUNT可設定文字跨的步伐大小 <MARQUEE bgcolor="#aaff00" SCROLLAMOUNT=10>這裡的文字SCROLLAMOUNT=10像點</MARQUEE>
結果：

這裡的文字SCROLLAMOUNT=10像點

Top