<HTML>
<HEAD>
<!-- 文件檔頭 -->
<TITLE>文件標題</TITLE>
<META HTTP-EQUIV="refresh" CONTENT="秒數; URL=新的網頁.htm">
<META HTTP-EQUIV="Content-Type" CONTENT=" text/html; charset=big5">
<Script Language="Java/VBScript">
Java/VBScript 程式碼
</Script>
</HEAD>
<BODY>
文件本體
</BODY>
</HTML>
檔案延伸名設為 .htm 或 .html
排版標籤<!--這些註解文字不會顯示在瀏覽器中--> 註解
空白字元符號,等於0.5個半形空白字元的寬度
e.g., 這裡有5個空白字元→[ ]
<BR> 換行
e.g., 第一行資料<BR>第二行資料 範例展示
<NOBR>...</NOBR> 取消自動換行
e.g.,
<BOBR>
標籤內的所有資料
不會因瀏覽器的寬度不足
而產生自動換行的現象
</NOBR> 範例展示
<P ALIGN=[left | center | right] TITLE="提示文字">...</P> 段落
e.g.,
<P ALIGN=center TITLE="大學 經一章 大學之道">
大學之道在明明德,在親民,在止於至善。
知止而后有定,定而后能靜,靜而后能安,安而后能慮,慮而后能得,物有本末,事有終始,知所先後,則近道也。<P>
範例展示
<PRE>...</PRE> 保留原始文字排版
e.g.,
床前明月光
疑似地上霜
舉頭望明月
低頭絲故鄉
</B>
</PRE>
<XMP>...</XMP> 保留輸出
e.g.,
<XMP>範例展示
<B>
床前明月光<BR>
疑似地上霜<BR>
舉頭望明月<BR>
低頭絲故鄉<BR>
</B>
</XMP>
<CENTER>...</CENTER> 置中對齊
e.g., <CENTER>測試內容置中</CENTER>
範例展示
<BLOCKQUOTE>...</BLOCKQUOTE> 向右縮排
e.g.,
<BLOCKQUOTE>
第一段測試內容
<BLOCKQUOTE>
第二段測試內容
</BLOCKQUOTE>
</BLOCKQUOTE> 範例展示
<B>...</B> 粗體
e.g., <B>BOLD</B> 範例展示
<STRONG>...</STRONG> 粗體
e.g., <STRONG>STRONG</STRONG>範例展示
<I>...</I> 斜體
e.g., <I>I</I>範例展示
<EM>...</EM> 斜體
e.g., <EM>EM</EM>範例展示
<VAR>...</VAR> 斜體
e.g., <VAR>VAR</VAR>範例展示
<CITE>...</CITE> 斜體
e.g., <CITE>CITE</CITE>範例展示
<TT>...</TT> 打字機字體
e.g., <TT>TeleType Font</TT>範例展示
<U>...</U> 底線
e.g., <U>UNDER</U>範例展示
<S>...</S> 刪除線
e.g., <S>STRIKE</S>範例展示
<STRIKE>...</STRIKE> 刪除線
e.g., <STRIKE>STRIKE</STRIKE>範例展示
<BLINK>...</BLINK> 文字閃爍(Netscape才支援)
e.g., <BLINK>文字閃爍</BLINK>範例展示
<SUB>...</SUB> 文字下標
e.g., H<SUB>1</SUB> 範例展示
<SUP>...</SUP> 文字上標
e.g., H<SUP>2</SUP> 範例展示
<Hx ALIGN=[left | center | right]>...</Hx> x=1,2,...,6 文字標題
e.g.,
<TD><H1>H1</H1>
<TD><H2>H2</H2>
<TD><H3>H3</H3>
<TD><H4>H4</H4>
<TD><H5>H5</H5>
<TD><H6>H6</H6>
</TABLE>
<BASEFONT SIZE=x> x=1,2,...,7 預設字型(標準字型大小等級為3)
<FONT SIZE=x COLOR=#rrggbb FACE="字體名稱"> ... </FONT> 多功能文字排版, x=1,2,...,7, rrggbb(顏色表示法) = 000000(黑)~FFFFFF(白)
e.g,
<FONT SIZE=7 COLOR=#aaccee FACE="華康勘亭流, 標楷體"> 文件內容 </FONT> 範例展示
<BIG>...</BIG> 加大字型一級
e.g., 正常<BIG>加大</BIG> 範例展示
<SMALL>...</SMALL> 縮小字型一級
e.g., 正常<BIG>縮小</BIG> 範例展示
<BODY BGCOLOR = #rrggbb BACKGROUND = "graphics/body.gif" TEXT = #rrggbb LINK = #rrggbb VLINK = #rrggbb ALINK = #rrggbb>...</BODY>
屬性 | 功能說明 |
---|---|
BGCOLOR | 網頁的背景顏色 |
BACKGROUND | 網頁的背景圖片 |
TEXT | 網頁內的文字顏色 |
LINK | 尚未瀏覽過之超連結文字顏色 |
VLINK | 已瀏覽過之超連結文字顏色 |
ALINK | 超連結文字被選取時之顏色 |
BGPROPERTIES | 固定背景圖片(=fixed) |
LEFTMARGIN | 網頁與左、右邊界的距離(pixel) |
TOPMARGIN | 網頁與上、下邊界的距離(pixel) |
特殊符號 | HTML表示法 | 特殊符號 | HTML表示法 |
---|---|---|---|
< | < | © | © |
> | > | ® | ® |
" | " | × | × |
& | & | ÷ | ÷ |
範例展示
<HR>
屬性 | 功能說明 |
---|---|
WIDTH | 水平線寬度 (pixel, or 80%) |
SIZE | 水平線高度 (pixel, default = 2) |
ALIGN | 水平線位置 (LEFT | CENTER | RIGHT) |
NOSHADE | 無內凹,實線顯示 |
COLOR | 水平線顏色 |
e.g.,
<HR>
<HR WIDTH=300 SIZE=4 ALIGN=CENTER>
<HR WIDTH=300 SIZE=5 ALIGN=RIGHT NOSHADE COLOR=#FF0000>
<HR WIDTH=50% SIZE=4 ALIGN=CENTER>
範例展示
─ 符號清單 <LH>
<LH>
<LI>
‧
‧
‧
<LI>
</LH>
e.g.,
三大台灣網路系統:
<LH>
<LI>TANet
<LI>HiNet
<LI>SeedNet
</LH>
─ 符號清單 <UL>
<UL TYPE=[disc(預設) | circle | square]>
<LI>
‧
‧
‧
<LI>
</UL>
e.g.,
三大台灣網路系統:
<UL>
<LI>TANet
<LI>HiNet
<LI>SeedNet
</UL>
範例展示
─ 編號清單 <OL>
<OL TYPE=[1 | a | A | i | I]>
<LI>
‧
‧
‧
<LI
</OL>
e.g.,
三大台灣網路系統:
<OL TYPE=i>
<LI>TANet
<LI>HiNet
<LI>SeedNet
</OL>
範例展示
─ 巢狀清單
<UL>
<LI>
<OL>
<LI>
‧
‧
‧
<LI>
</OL>
<LI>
</UL>
e.g.,
<UL TYPE=square>
<LI>棒球類
<OL TYPE=I>
<LI>中華職棒聯盟
<OL>
<LI>統一獅
<LI>三商虎
</OL>
<LI>中華職籃聯盟
<OL>
<LI>高雄雷公
<LI>台中金剛
</OL>
</OL>
<LI>籃球類
</UL>
範例展示
─ 敘述式清單
<DL>
<DT>項目一
<DD> 項目一的敘述
<DT>項目二
<DD> 項目二的敘述
‧
‧
‧
</DL>
e.g.,
<DL>
<DT><B>台灣學術教育網路</B>(TANet)
<DD>TANet是由教育部所支持的全國學術單位、研究單位和校園所組成的校際網路。
<DT><B>中華電信公司網路</B>(HiNet)
<DD>HiNet是交通部所設立的商用Internet,於83年底建立完成。
<DT><B>資策會種子網路</B>(SeedNet)
<DD>77年經濟部委託財團法人資訊工業策進會進行這項計劃,主要目的在提供各類網路和資料庫的服務。
</DL>
範例展示
範例展示
<TABLE>
<TR>
<TD>...</TD>......<TD>...</TD>
</TR>
<TR>
<TD>...</TD>......<TD>...</TD>
</TR>
‧
‧
‧
<TR>
<TD>...</TD>......<TD>...</TD>
</TR>
<CAPTION>表格範例</CAPTION>
</TABLE>
標籤 | 屬性 | 功能說明 |
<TABLE> | BORDER BGCOLOR WIDTH HEIGHT CELLSPACING CELLPADDING ALIGN | 表格邊框厚度 表格背景顏色 表格寬度 表格高度 儲存格距離 資料與框線距離 表格左右位置(left,center,right) |
<TR> | BGCOLOR ALIGN VALIGN | 列的背景顏色 文字左右位置(left,center,right) 文字上下位置(top,middle,bottom) |
<TD> <TH> | BGCOLOR WIDTH HEIGHT ALIGN VALIGN ROWSPAN COLSPAN | 儲存格背景顏色 儲存格寬度 儲存格高度 文字左右位置(left,center,right) 文字上下位置(top,middle,bottom) 儲存格橫向擴展 儲存格縱向擴展 |
<CAPTION> | ALIGN VALIGN | 標題左右位置(left,center,right) 標題上下位置(top,bottom) |
e.g.,
<TABLE BORDER=2 ALIGN=CENTER WIDTH=400 CELLSPACING=10 CELLPADDING=5>
<TR>
<TD COLSPAN=3 ALIGN=CENTER>CLASS
<TR>
<TD ROWSPAN=2 WIDTH=50 ALIGN=CENTER VALIGN=TOP>LIST
<TH BGCOLOR=lightblue>HEADER1
<TH BGCOLOR=#00FFFF>HEADER2
<TR>
<TD HEIGHT=100 ALIGN=RIGHT VALIGN=MIDDLE>DATA1
<TD VALIGN=BOTTOM>DATA2
<CAPTION ALIGN=RIGHT VALIGN=BOTTOM>表格範例-1
</TABLE>
HTML4.0 的表格擴充規格
<THEAD> 表頭
用來定義表格中要作為表頭的資料列。如果表格資料較長,列印會超過一頁,表頭資料會列印在每一頁的表格開頭。
<TBODY> 表格主體
將表格中的資料以列為單位,細分為幾個小群體。
<TFOOT> 表尾
用來定義表格中要作為表尾的資料列。如果表格資料較長,列印會超過一頁,表尾資料會列印在每一頁的表格結尾。
標籤 | 屬性 | 功能說明 |
<THEAD> | ALIGN VALIGN | 表頭左右位置(left,center,right) 表頭上下位置(top,middle,bottom) |
<TBODY> | ALIGN VALIGN | 主體左右位置(left,center,right) 主體上下位置(top,middle,bottom) |
<TFOOT> | ALIGN VALIGN | 表尾左右位置(left,center,right) 表尾上下位置(top,middle,bottom) |
e.g.,
<TABLE CELLSPACING=0 CELLPADDING=5 RULES=groups>
<THEAD>
<TR>
<TD COLSPAN=2>
<TH COLSPAN=2>早期
<TH COLSPAN=2>近期
<TR>
<TH>區域<TH>國家<TH>70年<TH>75年<TH>80年<TH>90年
</THEAD>
<TBODY ALIGN=RIGHT>
<TR>
<TH ROWSPAN=2>美洲
<TH ALIGN=CENTER>美國<TD>76399<TD>153462<TD>267584<TD>542764
<TR>
<TH>加拿大<TD>1741<TD>3074<TD>15671<TD>139143
</TBODY>
<TBODY ALIGN=RIGHT>
<TR>
<TH ROWSPAN=2>歐洲
<TH ALIGN=CENTER>德國<TD>1345<TD>1845<TD>698<TD>15532
<TR>
<TH ALIGN=CENTER>荷蘭<TD>264<TD>4626<TD>14823<TD>135830
</TBODY>
<TBODY ALIGN=RIGHT>
<TR>
<TH ROWSPAN=2>亞洲
<TH ALIGN=CENTER>日本<TD>218486<TD>253524<TD>653242<TD>741767
<TR>
<TH ALIGN=CENTER>韓國<TD>98241<TD>81644<TD>284902<TD>117821
</TBODY>
<TFOOT>
<TR>
<TH COLSPAN=6>資料來源: 交通部
</TFOOT>
<CAPTION ALIGN=BOTTOM>表格範例-2</CAPTION>
</TABLE>
範例展示
範例展示
─ HTTP協定
<A HREF="超連結URL" TARGET="框架視窗">... 超連結文字 ...</A>
URL(Universal Resource Locator)格式:
絕對路徑:http://主機名稱(或IP位址)/檔名
相對路徑:檔案相對路徑/檔名
TARGET屬性值(英文字母大小寫有別):
框架名稱 | 將所連結之網頁顯示在指定的框架中 |
_self | 將所連結之網頁顯示在目前的框架中 |
_blank | 將所連結之網頁顯示在新開啟的視窗中 |
_parent | 將所連結之網頁顯示在目前文件的父框架中 |
_top | 將所連結之網頁顯示在目前的瀏覽器中,取消所有框架 |
e.g.,
<A HREF="http://www.thit.edu.tw" TARGET="_blank">大華技術學院</A>
<A HREF="login.asp?name=王大華">登入</A> 範例展示
─ FILE協定
類似HTTP協定,不過所連結的目標是本地端的檔案而非遠端伺服器的檔案。
URL(Universal Resource Locator)格式:
絕對路徑:file:///磁碟機代號|/檔案完整路徑/檔名
相對路徑:檔案相對路徑/檔名
e.g.,
<A HREF="file:///C|/inetpub/wwwroot" TARGET="_blank">本地端網頁</A> 範例展示
─ FTP協定
<A HREF="ftp://<使用者名稱>:<使用者密碼>@主機名稱(或IP位址):port/檔名" TARGET="框架視窗">... 超連結文字 ...</A>
有些網站不需要使用者名稱及帳號,則可以省略。FTP預設port號碼為21,如未變動,亦可省略。
e.g.,
<A HREF="ftp://ftp.nctu.edu.tw" TARGET="_blank">國立交通大學校園網路策進會</A>
範例展示
─ TELNET協定
<A HREF="telnet://主機名稱(或IP位址)" TARGET="框架視窗">... 超連結文字 ...</A>
e.g.,
<A HREF="telnet://bbs.iie.ncku.edu.tw" TARGET="_blank">成大資工BBS</A> 範例展示
─ NEWS協定
<A HREF="news://討論區群組名稱">... 超連結文字 ...</A>
<A HREF="news://news.cis.nctu.edu.tw" TARGET= "_blank">新聞主機</A>
範例展示
─ MAILTO協定
<A HREF="mailto:收信人電子郵件位址">... 超連結文字 ...</A>
將啟動瀏覽器已設定的電子郵件程式...
e.g., <A HREF="mailto:test@thit.edu.tw">電子郵件位址</A> 範例展示
─ 內部超連結
如果網頁內容冗長,則可設計內部超連結,例如:<A HREF="#跑馬燈">跑馬燈段落</A>,讓瀏覽者可以隨意跳到指定的段落,但指定的段落前必須設有標籤<A NAME="跑馬燈">。若欲連結之段落標籤位於不同文件中(如test.htm),則超連結語法可為 <A HREF="test.htm#跑馬燈">跑馬燈段落</A>
e.g., <A HREF="#跑馬燈">跑馬燈段落</A> 範例展示
─ 基本路徑
<BASE HREF="基本路徑">
放置於<HEAD>...</HEAD>之間,則網頁中所有以相對路徑表示的超連結目標,都會與所設定的基本路徑結合成完整的絕對路徑。
範例展示<IMG SRC="圖檔URL">
屬性 | 功能說明 |
---|---|
SRC | 圖片來源(內定支援GIF與JPEG兩種格式) |
ALT | 圖片文字說明 |
WIDTH | 圖片寬度 |
HEIGHT | 圖片高度 |
BORDER | 圖片外框的厚度 |
ALIGN | 圖片與文字的相對位置(TOP | MIDDLE | BOTTOM | LEFT | RIGHT) |
HSPACE | 圖片與文字的水平間隔 |
VSPACE | 圖片與文字的垂直間隔 |
LOWSRC | 先顯示的圖片(低解析度)來源 |
USEMAP | 多方超連結所參考的地圖 |
e.g.,
<IMG SRC="home.gif">
<IMG SRC="home.gif" WIDTH=50 HEIGHT=50 BORDER=1 ALIGN=RIGHT ALT="文字說明-->回首頁"> 範例展示
<IMG SRC="home.gif" HSPACE=30>圖片與文字的水平間隔為30像素 範例展示
Client Side 影像地圖
事先在網頁中指定圖片各區域對應的超連結網址,使用者在按滑鼠時,瀏覽器就能決定要連到指定的網址,不需要等待 Server 來決定。
<IMG SRC="圖檔URL" USEMAP="#地圖名稱"> 區域形狀可分為 3 種:RECT(矩形)、CIRCLE(圓形)、POLY(多邊形)。
<MAP NAME="地圖名稱">
<AREA SHAPE="區域形狀" COORDS="座標" HREF="超連結URL">
<AREA SHAPE="區域形狀" COORDS="座標" HREF="超連結URL">
‧
‧
‧
<AREA SHAPE="區域形狀" COORDS="座標" HREF="超連結URL">
</MAP>
─ 矩形
<AREA SHAPE="RECT" COORDS="X1,Y1,X2,Y2" HREF="超連結URL">
X1,Y1 是代表矩形左上角的座標,X2,Y2 是代表矩形右下角的座標。
─ 圓形
<AREA SHAPE="CIRCLE" COORDS="X1,Y1,R" HREF="超連結URL">
X1,Y1 是代表圓形的圓心座標,R 是代表圓形的半徑。
─ 多邊形
<AREA SHAPE="POLY" COORDS="X1,Y1,X2,Y2,...,Xn,Yn" HREF="超連結URL">
X,Y 是代表多邊形的各端點座標。
e.g.,
<IMG SRC="smallrich.jpg" USEMAP="#CITYMAP">
<MAP NAME="CITYMAP">
<AREA SHAPE="RECT" COORDS="10,10,125,120" HREF="http://www.taipei.gov.tw/">
<AREA SHAPE="RECT" COORDS="255,120,340,160" HREF="http://www.tccg.gov.tw/">
<AREA SHAPE="RECT" COORDS="160,270,190,345" HREF="http://www.kcg.gov.tw/">
</MAP>
範例展示
範例展示
水平框架宣告
<FRAMESET ROWS="Y1, Y2, ... ,Yn">
<FRAME SRC="框架檔案來源" NAME="框架名稱">
<FRAME SRC="框架檔案來源" NAME="框架名稱">
‧
‧
‧
<FRAME SRC="框架檔案來源" NAME="框架名稱">
</FRAMESET> Y1, Y2, ... ,Yn代表各水平框架的垂直高度分配,單位為像素(pixel)或百分比。
e.g.,
<FRAMESET ROWS="200,400,200">
<FRAME SRC="top.htm" NAME="TOP">
<FRAME SRC="middle.htm" NAME="MIDDLE">
<FRAME SRC="bottom.htm" NAME="BOTTOM">
</FRAMESET>
垂直框架宣告
<FRAMESET COLS="X1, X2, ... ,Xn">
<FRAME SRC="框架檔案來源" NAME="框架名稱">
<FRAME SRC="框架檔案來源" NAME="框架名稱">
‧
‧
‧
<FRAME SRC="框架檔案來源" NAME="框架名稱">
</FRAMESET> X1, X2, ... ,Xn代表各垂直框架的水平寬度分配,單位為像素(pixel)或百分比。
e.g.,
<FRAMESET COLS="200,400,200">
<FRAME SRC="left.htm" NAME="LEFT">
<FRAME SRC="center.htm" NAME="CENTER">
<FRAME SRC="right.htm" NAME="RIGHT">
</FRAMESET>
範例展示
屬性 | 功能說明 |
---|---|
BORDER | 框線厚度(數值) |
FRAMEBORDER | 顯示分割線與否 (YES | NO) |
FRAMESPACING | 框架間距 |
屬性 | 功能說明 |
---|---|
MARGINHEIGHT | 框架內容與框線的垂直距離 |
MARGINWIDTH | 框架內容與框線的水平距離 |
SCROLLING | 顯示捲軸 (YES | NO | AUTO) |
NORESIZE | 不可調整框架大小 |
e.g.,
<FRAMESET ROWS="30%,*" BORDER=5 FRAMEBORDER=YES FRAMESPACING=5>
<FRAME SRC="top.htm" NAME="TOP" NORESIZE>
<FRAMESET COLS="*,2*">
<FRAME SRC="left.htm" NAME="LEFT">
<FRAME SRC="right.htm" NAME="RIGHT">
</FRAMESET>
<NOFRAMES>
<BODY>
請使用提供 frames 功能的瀏覽器!!
</BODY>
</NOFRAMES>
</FRAMESET>
範例展示
Inline Frames
<IFRAME SRC="框架檔案來源" NAME="框架名稱">
...讓不支援IFRAME標籤的瀏覽器能看到的說明文字...
</IFRAME>
要注意的是,<IFRAME>標籤不是用在<FRAMESET>...</FRAMESET>之中,而是在<BODY>...</BODY>之中。
屬性 | 功能說明 |
---|---|
ALIGN | 框架與文字的對齊方式(LEFT | RIGHT | TOP | MIDDLE |BOTTOM) |
FRAMEBORDER | 框架邊線厚度 |
WIDTH | 框架的寬度 |
HEIGHT | 框架的高度 |
MARGINHEIGHT | 框架內容與框線的垂直距離 |
MARGINWIDTH | 框架內容與框線的水平距離 |
SCROLLING | 顯示捲軸 (YES | NO | AUTO) |
e.g.,
<IFRAME SRC="lesson-43.htm">
請使用MSIE瀏覽器才可以看到IFRAME的效果
</IFRAME>
範例展示
範例展示
<MARQUEE>... 跑馬燈內容文字 ...</MARQUEE>
屬性 | 功能說明 |
---|---|
BGCOLOR | 跑馬燈的背景顏色 |
WIDTH | 跑馬燈看板的寬度 |
HEIGHT | 跑馬燈看板的高度 |
ALIGN | 跑馬燈文字的垂直對齊方式 (TOP | MIDDLE | BOTTOM) |
BEHAVIOR | 跑馬燈文字的移動方式 (SCROLL | ALTERNATE | SLIDE) |
DIRECTION | 跑馬燈文字的移動方向 (LEFT | RIGHT) |
SCROLLDELAY | 跑馬燈文字的移動延遲時間(1/1000秒) |
SCROLLAMOUNT | 跑馬燈文字的移動距離(pixel) |
LOOP | 跑馬燈文字的重複表現次數 |
e.g.,
<MARQUEE BGCOLOR=#8FBC8F BEHAVIOR=SCROLL DIRECTION=LEFT>歡迎光臨首頁製作園地</MARQUEE>
<MARQUEE BGCOLOR=#8FBC8F BEHAVIOR=SLIDE DIRECTION=RIGHT>歡迎光臨首頁製作園地</MARQUEE> 範例展示
<MARQUEE BGCOLOR=#8FBC8F WIDTH=350 HEIGHT=30 BEHAVIOR=ALTERNATE> <FONT COLOR=WHITE>歡迎光臨首頁製作園地</FONT></MARQUEE> 範例展示
<MARQUEE WIDTH=120 SCROLLAMOUNT=100 SCROLLDELAY=500>閃爍文字</MARQUEE> 範例展示
範例展示
<BGSOUND SRC="音樂檔URL" LOOP="INFINITE"> (僅適用於IE)
<EMBED SRC="音樂檔URL" HIDDEN AUTOSTART=TRUE LOOP=TRUE>
e.g.,
<BGSOUND SRC="梁祝.mid" LOOP=INFINITE>
<CENTER><FONT COLOR=RED>現正撥放背景音樂『梁祝』...</FONT></CENTER>
範例展示
<EMBED SRC="視訊檔URL">
屬性 | 功能說明 |
---|---|
SRC | 視訊檔來源 |
WIDTH | 影像的顯示寬度 |
HEIGHT | 影像的顯示高度 |
AUTOSTART | 是否自動開始撥放(TRUE | NO) |
LOOP | 是否無限次撥放(TRUE | NO) |
HIDDEN | 隱藏影像 |
e.g.,
<EMBED SRC="安室.avi" WIDTH=200 HEIGHT=200>
<OBJECT DATA="視訊檔URL" WIDTH=200 HEIGHT=200></OBJECT>
範例展示<FORM> NAME="表單名稱"
ACTION="目標程式URL"
METHOD="傳送格式"
ENCTYPE="編碼方式"
... <各類子標籤> ...
</FORM>
屬性 | 功能說明 |
---|---|
NAME | 表單名稱 |
ACTION | 接收表單資料的目標程式 (位於伺服器端) |
METHOD | 資料傳送的格式 [ GET(預設) | POST ] GET:表單中的資料會附在ACTION屬性所指URL的後面,當做參數一起傳送,資料量不能超過1024個位元組。 POST:表單中的資料是另外傳送到ACTION屬性所指的URL,所以沒有長度的限制。 |
ENCTYPE | 資料傳送的的編碼方式 [ application/x-www-form-urlencoded(預設) | multipart/form-data | text/plain ] |
e.g.,
<FORM ACTION="acceptdata.asp" METHOD=POST NAME="FORM1"> <FIELDSET>
<LEGEND>意見調查</LEGEND><BR>
編號:
<INPUT TYPE=TEXT NAME="no" SIZE=4 VALUE="0001" disabled>
姓名:
<INPUT TYPE=TEXT NAME="user" VALUE="資管系"><BR>
密碼:
<INPUT TYPE=PASSWORD NAME="pwd" SIZE=10 VALUE="123456"><BR>
相片:
<INPUT TYPE=IMAGE NAME="photo" SRC="images/home.gif"><BR>
最高學歷:
<INPUT TYPE=RADIO NAME="diploma" VALUE="1">小學
<INPUT TYPE=RADIO NAME="diploma" VALUE="2">國中
<INPUT TYPE=RADIO NAME="diploma" VALUE="3">高中
<INPUT TYPE=RADIO NAME="diploma" VALUE="4" CHECKED>大學
<INPUT TYPE=RADIO NAME="diploma" VALUE="5">研究所<BR>
語言能力:
<INPUT TYPE=CHECKBOX NAME="lang" VALUE="中文" CHECKED>中文>
<INPUT TYPE=CHECKBOX NAME="lang" VALUE="英文" CHECKED>英文
<INPUT TYPE=CHECKBOX NAME="lang" VALUE="日文">日文
<INPUT TYPE=CHECKBOX NAME="lang" VALUE="德文">德文
<INPUT TYPE=CHECKBOX NAME="lang" VALUE="法文">法文<BR>
常用軟體:<BR>
<SELECT NAME="software" SIZE=3 MULTIPLE>
<OPTION VALUE="Word">Word
<OPTION VALUE="Excel" SELECTED>Excel
<OPTION VALUE="PowerPoint">PowerPoint
<OPTION VALUE="Access">Access
</SELECT><BR>
意見:<BR>
<TEXTAREA NAME="comment" ROWS=5 COLS=30>
第一行文字
第二行文字
</TEXTAREA><BR>
<INPUT TYPE=SUBMIT VALUE="傳送資料">
<INPUT TYPE=RESET VALUE="重新輸入">
<INPUT TYPE=BUTTON VALUE="回上一頁" onClick="default.htm"> <INPUT TYPE=HIDDEN NAME="secret" VALUE="0"> </FIELDSET>
</FORM>
範例展示
─ 格式一:需定義於<HEAD>...</HEAD>之內
<STYLE TYPE="TEXT/CSS">
H1{color:red; font-size:30}
TH, TD{text-align:right}
#N1{color:ff0000; font-style:italic}
H3#N1{color:ff00ff; font-size:30}
*.N2{color:00ff00; font-weight:bold}
H3.N2{color:00ffff; font-size:30}
</STYLE>
e.g.,
<SPAN ID="N1">使用標籤N1的效果</SPAN>
<H3 ID="N1"><H3>中使用標籤N1的效果</H3>
範例展示
<DIV CLASS="N2">使用標籤N2的效果</DIV>
範例展示
<H3 CLASS="N2"><H3>中使用標籤N2的效果</H3>
範例展示
─ 格式二:直接於 HTML 標籤內使用 STYLE 屬性
e.g.,
<P STYLE="background-color:#ffccff; text-align:center">大學之道在明明德,在親民,在止於至善。</P>
範例展示
<DIV STYLE="width:50%;height:100;color:red;background-color:#ffccff;border-style:dashed;font:20 標楷體; overflow:auto;scrollbar-base-color:yellow;scrollbar-track-color:white;scrollbar-arrow-color:red; scrollbar-3dlight-color:blue"> 大學之道在明明德,在親民,在止於至善。知止而后有定,定而后能靜,靜而后能安,安而后能慮,慮而后能得,物有本末,事有終始,知所先後,則近道也。</DIV>
範例展示
※各類 CSS 元素介紹
CSS 元素 | 元素值 |
font-family | 可以設定多個字型,並以","隔開。e.g., font-family: 華康仿宋體, 標楷體 |
font-size | e.g., 10pt, 20px, etc. |
font-style | e.g., normal(正常不做變化), oblique(斜體), italic(斜體) |
font-variant | e.g., normal(正常不做變化), small-caps(小寫字母的大小但大寫的方式) |
font-weight | e.g., normal(正常不做變化), bold, bolder, light, lighter, 100, 200, 300, 400(normal), 500, 600, 700(bold), 800 |
font | font 樣式是上述樣式的綜合表示法,e.g., font:bold 20pt italic |
CSS 元素 | 元素值 |
text-align | 指定文字的對齊方式。e.g., left(靠左), right(靠右), center(置中), justify(左右對齊) |
text-decoration | e.g., none(正常不做變化), underline(加底線), overline(加頂線), line-through(加刪除線), blink(文字閃爍) |
text-ident | 指定段落的首行縮排。e.g., 1cm, 10pt, 3%(每行長度的百分比), etc. |
text-transform | e.g., none(正常不做變化), capitalize(第一個字母改成大寫), uppercase(改成大寫), lowercase(改成小寫) |
letter-spacing | 指定字元間距。e.g., normal(正常不做變化), 2px, 3pt, etc. |
word-spacing | 指定文字(單字)間距。e.g., normal(正常不做變化), 2px, 3pt, etc. |
line-height | 指定文字行距。e.g., normal(正常不做變化), 5px, 5pt, 2(兩倍行高), 150%(行高的150%), etc. |
CSS 元素 | 元素值 |
list-style-type | 指定清單的符號或序號。e.g., none(無清單符號或序號), disc(圓形實心), circle(圓形空心), square(正方形實心), decimal(數字 1,2,3...), decimal-leading-zero(數字 01,02,03,...), lower-roman(小寫羅馬字 i,ii,iii,iv,...), upper-roman(大寫羅馬字母 I,II,III,IV,...), lower-alpha(小寫英文字母 a,b,c...), upper-alpha(大寫英文字母 A,B,C,...), CJK-ideographic(中文數字 一,二,三,...), lower-latin(小寫拉丁字母), upper-latin(大寫拉丁字母), lower-greek(小寫希臘字母), etc. |
list-style-position | 指定清單項目的符號或圖片是否向外凸排。e.g., outside(清單項目的第二行內容向右縮排), inside(清單項目的第二行內容與清單符號對齊) |
list-style-image | 指定圖片做為清單符號。e.g., url(ball.gif) |
list-style | list-style 樣式是上述樣式的綜合表示法,e.g., list-style:upper-roman inside url("ball.gif") |
CSS 元素 | 元素值 |
background-color | 指定HTML元件的背景顏色。e.g., yellow, #ff0000, etc. |
background-image | 指定HTML元件的背景圖片。e.g., url(bg.gif) |
background-repeat | 指定是否重複以背景圖片填滿區域。e.g., repeat(在水平方向及垂直方向重複排列背景圖片), no-repeat(不做重複排列圖片), repeat-x(在水平方向重複排列背景圖片), repeat-y(在垂直方向重複排列背景圖片) |
background-attachment | 指定背景圖片是否隨捲軸移動。e.g., scroll(背景圖片隨捲軸移動), fixed(背景圖片不隨捲軸移動) |
background-position | 指定背景圖片開始顯示的位置。e.g., 5cm 10cm(水平方向5公分處及垂直方向10公分處), 10% 20%(水平方向10%處及垂直方向20%處), left(區域左邊), right(區域右邊), center(區域中間), top(區域頂部), bottom(區域底部) |
background | background 樣式是上述樣式的綜合表示法,e.g., background:url(bg.gif) no-repeat top right |
CSS 元素 | 元素值 |
width | 指定區塊的寬度。e.g., 300px, 60%(視窗寬度之60%), etc. |
height | 指定區塊的高度。e.g., 200px, 40%(視窗高度之40%), etc. |
padding-top | 區塊文字與區塊上邊框的間距(預設值為0)。 |
padding-right | 區塊文字與區塊右邊框的間距(預設值為0)。 |
padding-bottom | 區塊文字與區塊下邊框的間距(預設值為0)。 |
padding-left | 區塊文字與區塊左邊框的間距(預設值為0)。 |
padding | padding 樣式是上述4樣式的綜合表示法,e.g., padding:1cm 2cm 3cm 4cm 表 區塊文字與區塊上邊框、右邊框、下邊框、左邊框的間距為1、2、3、4公分。 |
border-style | 指定區塊的邊框樣式。e.g., none(不顯示邊框,此為預設值), dotted(虛線點狀), dashed(虛線), solid(實線), double(雙實線), groove(立體內凹實線), ridge(立體外凸實線), inset(內凹實線), outset(外凸實線) |
border-color | 指定區塊的邊框顏色。 |
border-width | 指定區塊的邊框寬度。e.g., thin(細), medium(預設值), thick(粗), 0.5cm, etc. |
border | 指定區塊四周的邊框樣式、顏色、寬度。e.g., border:solid red thick |
margin-top | 指定區塊上邊框外的空白寬度。 |
margin-right | 指定區塊右邊框外的空白寬度。 |
margin-bottom | 指定區塊下邊框外的空白寬度。 |
margin-left | 指定區塊左邊框外的空白寬度。 |
margin | 指定區塊四周邊框外的空白寬度。e.g., margin:1cm 2cm 3cm 4cm 表 區塊上邊框、右邊框、下邊框、左邊框外的空白寬度為1、2、3、4公分。 |
overflow | 設定區塊捲軸。e.g., visible(無捲軸且區塊內容不會被裁減), hidden(無捲軸且區塊內容會被裁減), scroll(有捲軸), auto(由瀏覽器決定是否有捲軸) |
overflow-x | 元素值與 overflow 相同,但效果僅限於水平捲軸。 |
overflow-y | 元素值與 overflow 相同,但效果僅限於垂直捲軸。 |
scrollbar-arrow-color | 指定捲軸方塊箭頭的顏色。 |
scrollbar-face-color | 指定捲軸方塊及捲動軸的顏色。 |
scrollbar-base-color | 指定捲軸方塊及捲動軸的顏色。 |
scrollbar-track-color | 指定捲動軸背景的顏色。 |
scrollbar-3dlight-color | 指定捲軸方塊及捲動軸的左邊框與上邊框顏色。 |
scrollbar-darkshadow-color | 指定捲軸方塊及捲動軸的右邊框與下邊框顏色。 |
留言列表