樣式：
| 標籤名稱 | 簡介 | 範例 | 執行結果 |
| <B></B> | 粗體字 | <B>粗體字</B> | 粗體字 |
| <I></I> | 斜體字 | <I>斜體字</I> | 斜體字 |
| <span style="text-decoration:overline"></span> | 頂線字(IE 才看的到效果) | <span style ="text-decoration:overline"> 頂線字</span> | 頂線字 |
| <s></s> | 中線字 | <s>中線字</s> | 中線字 |
| <u></u> | 底線字 | <u>底線字</u> | 底線字 |
| <TT></TT> | 打字機 | <TT>打字機</TT> | 打字機 |
| <BLINK></BLINK> | 閃爍(Netscape才看的到效果) | <BLINK>閃爍</BLINK> | |
| <EM></EM> | 強調 | <EM>強調</EM> | 強調 |
| <STRONG> | 加強 | <STRONG>加強</STRONG> | 加強 |
| <SAMP></SAMP> | 範例 | <SAMP>範例</SAMP> | 範例 |
| <CODE></CODE> | 原始碼 | <CODE>原始碼</CODE> | 原始碼 |
| <VAR></VAR> | 變數 | <VAR>變數</VAR> | 變數 |
| <DFN></DFN> | 定義 | <DFN>定義</DFN> | 定義 |
| <CITE></CITE> | 引用 | <CITE>引用</CITE> | 引用 |
| <ADDRESS></ADDRESS> | 所在地址 | <ADDRESS>所在地址</ADDRESS> | 所在地址 |
Address 的用法有下列幾種：
| 範例 | 執行結果 | 範例 | 執行結果 |
<address>張菁華
<br>花蓮師範學院
<br>chchang@sparc2.nhltc.edu.tw</address> | 張菁華
花蓮師範學院
chchang@sparc2.nhltc.edu.tw | <address>張菁華
<br>花蓮師範學院
<br><a href ="mailto:chchang@sparc2.nhltc.edu. tw">chchang@sparc2.nhltc.edu.tw </a></address> | 張菁華
花蓮師範學院
chchang@sparc2.nhltc.edu.tw |
<address>張菁華
<br>花蓮師範學院
<br><a href="mailto:chchang@sparc2.nhltc. edu.tw?subject=想請你看電影喝咖啡"> chchang@sparc2.nhltc.edu.tw</a></address> | 張菁華
花蓮師範學院
chchang@sparc2.nhltc.edu. tw | <address>張菁華
<br>花蓮師範學院
<br><a href="mailto:chchang@sparc2.nhltc.edu.tw?subject =請你喝咖啡&body=今天晚上在希爾頓不見不散">chchang@sparc2.nhltc.edu.tw</a></address> | 張菁華
花蓮師範學院
chchang@sparc2.nhltc.edu.tw |
<address>張菁華
<br>花蓮師範學院
<br><a href="mailto:d827203@math.nthu.edu.tw, chchang@sparc2.nhltc. edu.tw?subject =請你喝咖啡&body今天晚上在希爾頓不見不散"> chchang@sparc2.nhltc.edu.tw</a></address> | 張菁華
花蓮師範學院
chchang@sparc2.nhltc.edu.tw |
上下標：具有強調文字的效果。
|
標籤名稱 |
範例 |
執行結果 |
|
<sup></sup> |
<sup>上標</sup> |
上標 |
|
<sub></sub> |
<sub>下標</sub> |
下標 |
大小：代表標題文字的大小，<FONT SIZE=n>文字區域</FONT>，n為1,2,…6，<FONT SIZE=6>為最大，<FONT SIZE=1>為最小。也可用<H1>第一級標題</H1>、<H2>第二級標題</H2>、<H3>第三級標題</H3>、<H4>第四級標題</H4>、<H5>第五級標題</H5>、<H6>第六級標題</H6>等，字的大小大致可分為6個等級，由大至小分別為<H1>~<H6>，一般常用字的大小是<H3>。<FONT SIZE=1> 與<H1>所代表的標題文字的大小是不同的。
|
標籤名稱 |
範例 |
執行結果 |
|
<font size=1></font>
<font size=2></font>
<font size=3></font>
<font size=4></font>
<font size=5></font>
<font size=6></font>
|
<font size=1>花間一壺酒</font>
<font size=2>獨酌無相親</font>
<font size=3>舉杯邀明月</font>
<font size=4>對影成三人</font>
<font size=5>月既不解飲</font>
<font size=6>影徒隨我身</font>
|
花間一壺酒
獨酌無相親
舉杯邀明月
對影成三人
月既不解飲
影徒隨我身
|
|
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
|
<h1>花間一壺酒</h1>
<h2>獨酌無相親</h2>
<h3>舉杯邀明月</h3>
<h4>對影成三人</h4>
<h5>月既不解飲</h5>
<h6>影徒隨我身</h6>
|
花間一壺酒
獨酌無相親
舉杯邀明月
對影成三人
月既不解飲
影徒隨我身
|
顏色：如綠色、紅色等，<FONT COLOR=GREEN>文字區域</FONT>、<FONT COLOR=RED>文字區域</FONT>，也可用色碼表示如<FONT COLOR=#xxxxxx> 文字區域</FONT>
螢幕上的顏色由紅(R)、綠(G)、藍(B)三個原色所組成，利用RGB三原色來搭配出所想要的顏色，其格式為#RRGGBB，其中的RRGGBB分別代表紅綠藍三色的顏色色碼，00為最暗、FF為最亮。例如要使用「最亮的紅色」，指定的方式就為#ff0000，若為「最亮的藍色」則指定為#0000ff。色碼屬性為16進制。
| 顏色名稱 | 顏色 | 色碼 | 執行結果 |
| 綠色 | GREEN | #00FF00 | |
| 紅色 | RED | #FF0000 | | |
| 黑色 | BLACK | #000000 | |
| 藍色 | BLUE | #0000FF | |
| 黃色 | YELLOW | #FFFF00 | |
| 白色 | WHITE | #FFFFFF | |
後面有顏色及色碼參考資料，請自行參閱。
段落分明可讓別人更了解你所要表達的意思。文件裡的空行並不代表段落的結束（這與一般中文文件檔的習慣不同）。除了在某些特別情況下，HTML 對多重空白、Tab 與斷行都視若無睹，所以你必須使用標籤才能指定文字的格式。
| 標籤名稱 | 範例 | 執行結果 |
| <P>…</P> | <P>花</P>
<P>蓮</P>
<P>師</P>
<P>院</P> | 花 蓮 師 院 |
| <BR>…</BR> | <BR>花
<BR>蓮
<BR>師
<BR>院 | 花
蓮
師
院 |
沒有</BR>這種標籤，請勿自行添加。
分隔線可以幫助在看文章內容，
這是一條基本的橫線<HR>
橫線寬度 380<HR WIDTH=380>
橫線寬度 60%，向左對齊<HR WIDTH=60% ALIGN=left>
橫線寬度 60%，向中對齊<HR WIDTH=60% ALIGN=center>
橫線寬度 60%，向右對齊<HR WIDTH=60% ALIGN=right>
橫線SIZE=10<HR SIZE=10>
橫線SIZE=2<HR SIZE=2>
橫線COLOR=紅色(#FF0000)<HR COLOR=#FF0000>
橫線COLOR=藍色(#0000FF)<HR COLOR=#0000FF>
NOSHADE 沒有陰影的橫線<HR NOSHADE>
Marquee也就是大家常說的跑馬燈，此一指令目前只有微軟的IE有支援！其語法如下：
<MARQUEE
[ ALIGN = LEFT | CENTER | RIGHT | TOP | BOTTOM ]
[ BEHAVIOR = SCROLL | SLIDE | ALTERNATE ]
[ BGCOLOR = COLORVALUE ]
[ DIRECTION = LEFT | RIGHT ]
[ HEIGHT = LENGHT ]
[ HSPACE = PIXELS ]
[ LOOP = NUMBER | INFINITE ]
[ SCROLLAMOUNT = PIXELS ]
[ SCROLLDELAY = MILLISECONDS ]
[ VSPACE = PIXELS ]
[ WIDTH = LENGHT ] >.........
</MARQUEE>
- ALIGN： 用來指定文字對齊跑馬燈方框的位置，預設值是靠左(LEFT) 。
- BEHAVIOR： 指定捲動的方式。
- SCROLL：會等文字整個捲出跑馬燈的一端後，再從另一端出現 ；
- SLIDE：是以展示幻燈片 的方式呈現文字 ；
- ALTERNATE：會讓文字在左右範圍之間來 回移動。預設值是scrol1。
- BGCOLOR：指定跑馬燈的背景顏色，可用16進位RGB值或色彩名稱。
- DIRECTION：指定文字移動的方向，預設值是left，表示由右向左移動。
- HEIGHT：以像素值( 如HEIGHT=200)來設定跑馬燈的高度。
- WIDTH：以像素值( 如WIDTH=500)或視窗的百分比值(如WIDTH="80%) 來設定跑馬燈的寬度。
- LOOP：指定跑馬燈捲動的次數，譬如LOOP=s可捲動五次，LOOP=infinite， ( 或LOOP=-1) 則會永不停止 。
- SCROLLAMOUNT：設定跑馬燈文字每次更新畫面時的位移距離，以像素值為單位。
- SCORLLDELEY：設定跑馬燈每次更新畫面之間的暫停時間，以千分之一秒為單位。
範例：
<MARQUEE DIRECTION=RIGHT BEHAVIOR=SCROLL SCROLLAMOUNT=10 BGCOLOR=ffffff
SCROLLDELAY=200>我是一隻可愛的小烏龍</MARQUEE>
若要引述別人曾經說過的話，只要在引述內容之前加上 <blockquote>之後加上</blockquote>就可以了。
列表時有下列格式：
| 列表名稱 | 基本格式 | 執行結果 |
| 無序列表 | <UL>
<LH>標題</LH>
<LI>第一項</LI>
<LI>第二項</LI>
</UL> |
|
<UL>
<LH>標題</LH>
<LI TYPE=CIRCLE>第一項</LI>
<LI TYPE=DISK>第二項</LI>
<LI TYPE=SQUARE>第三項</LI>
</UL> |
|
|
有序列表 |
<OL>
<LH>標題</LH>
<LI>第一項</LI>
<LI>第二項</LI>
</OL> |
標題
- 第一項
- 第二項
|
<OL START=5>
<LH>標題</LH>
<LI>第一項</LI>
<LI>第二項</LI>
</OL> |
標題
- 第一項
- 第二項
|
<OL TYPE=A>
<LH>標題</LH>
<LI>第一項</LI>
<LI>第二項</LI>
</OL> |
標題
- 第一項
- 第二項
|
<OL TYPE=a>
<LH>標題</LH>
<LI>第一項</LI>
<LI>第二項</LI>
</OL> |
標題
- 第一項
- 第二項
|
<OL TYPE=I>
<LH>標題</LH>
<LI>第一項</LI>
<LI>第二項</LI>
</OL> |
標題
- 第一項
- 第二項
|
<OL TYPE=i>
<LH>標題</LH>
<LI>第一項</LI>
<LI>第二項</LI>
</OL> |
標題
- 第一項
- 第二項
|
|
巢狀列表 |
<OL>
<LI>第一項
<UL>
<LI>第一點
<LI>第二點
</UL>
<LI>第二項
<LI>第三項
</OL> |
- 第一項
- 第二項
- 第三項
|
|
定義列表 |
<DL>
<LH>標題
<DT>第一個專有名詞
<DD>定義內容
<DT>第二個專有名詞
<DD>定義內容
</DL> |
標題
- 第一個專有名詞
- 定義內容
- 第二個專有名詞
- 定義內容
|
表格：
| 標籤名稱與說明 | 範例 |
<table border=n>
<caption>表格標題</caption>
<tr><td>列一行</td>
<td>列一行二</td>
</tr><tr><td>列二</td>
<td>列二行</td></tr>
</table>
除了<TD></TD>還可用<TH> …</TH>，差別是TH=Table Header，TD=Table Data，<TH>…. </TH>中的字是粗體字且置中邊框的顏色 Bordercolor = colorname，<caption Align=top/bottom>表格標題</caption>，內定值是top。表格大小是以實際內容所佔大小作分配，也可以指定大小，做法如下<table width=50% height=200> |
<table border=0>
<caption>花蓮師範學院</caption>
<tr><td></td>
<td>導師</td>
<td>人數</td> </tr>
<tr><td>數一</td>
<td>張菁華</td>
<td> 39 </td> </tr>
<tr><td>數二</td>
<td>張子貴</td>
<td> 38 </td> </tr>
</table> |
花蓮師範學院
| | 導師 | 人數 |
| 數一 | 張菁華 | 39 |
| 數二 | 張子貴 | 38 |
製作表格時，常有合併欄及合併列等，可以用ROWSPAN=n及COLSPAN=n來完成。
| 標籤名稱與簡介 | 範例 |
<th colspan=2>合併行</th>
<th rowspan=4>合併列</th>
表格中資料的對齊格式：
<tr align=XX valign=YY>內容</tr>
<th align=XX valign=YY>內容</th>
<td align=XX valign=YY>內容</td>
XX=left, center, right
YY=top, middle, bottom
<th bgcolor=red>表格內的背景顏色</th>，表格裡的格子英文叫做cell，而格子間的距離叫做space，所以可以用 cellspacing 來指定表格內格子間的距離。假如沒有指定則內定值為1。cellpadding就是用來設定表格內格子內容與邊緣的距離。
|
<center><p>
<table border=10 cellspacing=7 cellpadding=5 bgcolor=#FFC1C1>
<tr><th colspan=2>行事表</th><th align=center>星期一</th><th align=center >星期二</th><th align=center >星期三</th><th align=center >星期四</th><th align=center >星期五</th></tr>
<tr><th rowspan=4>上午</th><th>8:00~8:50</th><td rowspan=4>學術研討</td> <td> </td><td> </td><td> </td> <td rowspan=2>音教普通數學</td></tr>
<tr> <th>9:00~9:50 </th><td> </td><td> </td> <td> </td> </tr>
<tr> <th>10:10~11:00</th><td> </td> <td rowspan=2>微分方程</td><td> </td> <td rowspan=2>美勞普通數學</td></tr>
<tr><th>11:10~12:00</th><td> </td> <td> </td></tr>
<tr><th rowspan=4>下午</th><th>13:30~14:20</th><td rowspan=5> 學術研討 </td > <td> </td><td> </td><td>微分方程</td> <td> </td></tr>
<tr><th>14:30~15:20</th><td> </td><td> </td> <td> </td> <td> </td></tr>
<tr><th>15:40~16:30</th> <td> </td><td rowspan=2>班會</td> <td> </td> <td> </td></tr>
<tr><th>16:40~17:30</th> <td> </td><td> </td> <td> </td></tr>
<tr> <th>晚上</th><th>18:30~20:00</th> <td> </td><td>計算機概論</td><td> </td> <td> </td></tr>
</table>
</center>
|
| 行事表 | 星期一 | 星期二 | 星期三 | 星期四 | 星期五 |
|---|
| 上午 | 8:00~8:50 | 學術研討 | | | | 音教普通數學 |
|---|
| 9:00~9:50 | | | |
| 10:10~11:00 | | 微分方程 | | 美勞普通數學 |
| 11:10~12:00 | | |
| 下午 | 13:30~14:20 | 學術研討 | | | 微分方程 | |
|---|
| 14:30~15:20 | | | | |
| 15:40~16:30 | | 班會 | | |
| 16:40~17:30 | | | |
| 晚上 | 18:30~20:00 | | 計算機概論 | | |
請自行做好統一發票兌獎表。
先為每個視窗都取名字然後在超連結中指定HTML文件內容顯示所命名的視窗即可以至作出分割視窗了。例如希望所看到的畫面總共劃分為二個縱向的視窗，左邊窗框取名為left，右邊窗框取名為right。
範例：
<HTML>
<HEAD>
<TITLE>Frame</TITLE>
</HEAD>
<FRAMESET COLS=2*,7*>
<FRAME SRC="frameleft.htm" NAME="left">
<FRAME SRC="frameright.htm" NAME="right">
</FRAMESET>
</HTML>
frameright.htm裡面的每一個超連結都指明要將內容顯示在名稱為right的視窗中。ＨＴＭＬ內容為：
<a href=f1.htm target=right>f1.htm</a>
<a href=f2.htm target=right>f2.htm</a>
<a href=f3.htm target=right>f3.htm</a>
<a href=f4.htm target=right>f4.htm</a>
<a href=f5.htm target=right>f5.htm</a>
- 看FRAMESET COLS後面接的字串裡面有幾個逗號就知道螢幕劃分為幾個欄了。
- 可以指定每一欄的寬度，但是有時因不知道整個螢幕有多大所以並不好用，另一種方法是用百分比的方式來表示。例如：<FRAMESET COLS=25%,75%>，如此一來就可以對不同螢幕大小有所變化，百分比的總合必須是一百。有的時候要將螢幕切成
三等分，三除以一百是永遠除不盡的，所以可以用另一種表示法 <FRAMESET COLS=1*,1*,1*>，一個星號代表一個單位，瀏覽器會將螢幕大小除以總星號數再依比例
分配給各個視窗。
- 若要將多個分割視窗回復到原來一個視窗，則要將target指定為_top。
例如：<a href="content.htm" target="_top" >HOME的圖形</a>
| 範例 | 說明 |
<html>
<head>
<title>平時作業</title>
</head>
<frameset cols="50%,50%">
<frameset rows="50%,50%">
<frame src="f1.htm"><frame src="f2.htm">
</frameset>
<frameset rows="1*,1*,1*">
<frame src="f3.htm">
<frame src="f4.htm">
<frame src="f5.htm">
</frameset></frameset>
</html> |
<frameset cols="50%,50%">
是說螢幕畫面要劃分為兩欄。接下來的：
<frameset rows="50%,50%">
<frame src="f1.htm">
<frame src="f2.htm">
</frameset>
是說左邊那一欄要再劃分為兩列。接下來的：
<frameset rows="1*,1*,1*">
<frame src="f3.htm">
<frame src="f4.htm">
<frame src="f5.htm">
</frameset>
是說右邊那一欄要再劃分為三列。 |
下拉式選單：
生日： 123456789101112月
|
範例 |
生日：<form>
<select name="MONTH">
<option>1
<option>2
<option>3
<option>4
<option>5
<option>6
<option>7
<option>8
<option>9
<option>10
<option>11
<option>12
</select>月
</form> |
<form>
生日：<select name="MONTH">
<option>1
<option>2
<option>3
<option>4
<option>5
<option selected>6
<option>7
<option>8
<option>9
<option>10
<option>11
<option>12
</select>月
</form> |
<form>
生日：<select name="MONTH" size=3>
<option>1
<option>2
<option>3
<option>4
<option>5
<option>6
<option>7
<option>8
<option>9
<option>10
<option>11
<option>12
</select>月
</form> |
<form>生日：<select name="MONTH" size=3 multiple>
<option>1
<option>2
<option>3
<option>4
<option>5
<option>6
<option>7
<option>8
<option>9
<option>10
<option>11
<option>12
</select>月
</form> |
|
說明 |
|
|
假如要看到多個選項,可以利用size參數達成 |
能作複選,可以利用multiple參數達成記得用shift及ctrl鍵配合滑鼠做點選 |
|
執行結果 |
生日： |
|
|
|
常用 HTML 標籤
