基本架構

<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

排版標籤

<!--這些註解文字不會顯示在瀏覽器中-->　註解

&nbsp;　空白字元符號,等於0.5個半形空白字元的寬度
e.g., 這裡有5個空白字元→[&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;]

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

&lt;PRE&gt;&lt;B&gt; 床前明月光 疑似地上霜 舉頭望明月 低頭絲故鄉 &lt;/B&gt; &lt;/PRE&gt; 範例展示

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

&lt;TABLE&gt;&lt;TR&gt; &lt;TD&gt;&lt;H1&gt;H1&lt;/H1&gt; &lt;TD&gt;&lt;H2&gt;H2&lt;/H2&gt; &lt;TD&gt;&lt;H3&gt;H3&lt;/H3&gt; &lt;TD&gt;&lt;H4&gt;H4&lt;/H4&gt; &lt;TD&gt;&lt;H5&gt;H5&lt;/H5&gt; &lt;TD&gt;&lt;H6&gt;H6&lt;/H6&gt; &lt;/TABLE&gt; 範例展示

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

<BODY>的屬性
屬性 功能說明
BGCOLOR 網頁的背景顏色
BACKGROUND 網頁的背景圖片
TEXT 網頁內的文字顏色
LINK 尚未瀏覽過之超連結文字顏色
VLINK 已瀏覽過之超連結文字顏色
ALINK 超連結文字被選取時之顏色
BGPROPERTIES  固定背景圖片(=fixed)
LEFTMARGIN 網頁與左、右邊界的距離(pixel)
TOPMARGIN 網頁與上、下邊界的距離(pixel)

特殊符號語法
特殊符號 HTML表示法 特殊符號 HTML表示法
< &lt; © &copy;
> &gt; ® &reg;
" &quot; × &times;
& &amp; ÷ &divide;

 

範例展示



清單

─ 符號清單 <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>　表尾
用來定義表格中要作為表尾的資料列。如果表格資料較長，列印會超過一頁，表尾資料會列印在每一頁的表格結尾。

 

HTML4.0 規格的表格屬性
標籤 屬性 功能說明
<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>
範例展示

 

<FRAMESET>的其他屬性
屬性 功能說明
BORDER 框線厚度(數值)
FRAMEBORDER 顯示分割線與否 (YES | NO)
FRAMESPACING  框架間距

<FRAME>的其他屬性
屬性 功能說明
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>之中。

<IFRAME>的屬性
屬性 功能說明
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>
範例展示

 

範例展示

跑馬燈(僅適用於IE)

<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> 範例展示

 

 

範例展示



表單

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

 

範例展示

CSS樣式表

─ 格式一：需定義於<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 元素
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 元素
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 元素
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 元素
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 元素
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 指定捲軸方塊及捲動軸的右邊框與下邊框顏色。

範例展示
創作者介紹
創作者 【開源節流】--> "開源" & "節流" 的頭像
sleepingwolf

【開源節流】--> "開源" & "節流"

sleepingwolf 發表在 痞客邦 留言(0) 人氣( 1998 )

▲top

請先 登入 以發表留言。

Recommended

你可能也喜歡

為你精選 3 篇值得延伸閱讀的內容

載入推薦文章中...
目前沒有推薦文章