■ 細說(shuō)HTML標籤
在HTML語(yǔ)法中，大致上可以分為： ( 節錄自『
網(wǎng)站建置百寶箱』)
網(wǎng)頁(yè)架構：主要網(wǎng)頁(yè)主架構的介紹
分隔標籤：也就是所謂的水平線(xiàn)
排版標籤：針對標籤的屬性，可做適當的版面編排
字體標籤：教導您設定文字的字體。
文字標籤：教導您設定文字的顏色、行距、變化.....等等。
影像標籤：教導您如何在網(wǎng)頁(yè)中，植入圖像。
背景標籤：教導您如何設定背景顏色或是背景圖像。
連結標籤：教導您如何設定超連結，以及開(kāi)視窗的條件。
表格標籤：教導您如何在網(wǎng)頁(yè)中運用表格。
序列標籤：教導您如何設定文字序列或圖形序列。
表單標籤：教導您如何製作可填寫(xiě)用的表單。
框架標籤：可讓同一個(gè)視窗由多個(gè)網(wǎng)頁(yè)一起組成。
其他技巧：讓您的整個(gè)網(wǎng)頁(yè)背景可以讓您設定為圖片或是聲音。
4.1 網(wǎng)頁(yè)架構 <
回細說(shuō)索引>
<HTML>
<HEAD>
<TITLE>網(wǎng)頁(yè)製作教學(xué)</TITLE>
<Meta>
</HEAD>
<BODY>
BODY之間則為主要語(yǔ)法所在，也是網(wǎng)頁(yè)的主要呈現部分。
</BODY>
</HTML>
【標籤解說(shuō)】
以上看到的就是一篇最簡(jiǎn)單架構的網(wǎng)頁(yè)。沒(méi)錯，網(wǎng)頁(yè)其實(shí)就是一堆標籤（所謂標籤就是指被<>包起來(lái)的語(yǔ)法）集合起來(lái)的，透過(guò)瀏覽器的消化整理，就便成了美侖美奐的網(wǎng)頁(yè)了。
簡(jiǎn)單而言，通常一份完整的網(wǎng)頁(yè)包含了二個(gè)部份：抬頭（HEAD）、文件本體（BODY）。也就是各位在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。
在抬頭的部份<HEAD></HEAD>中，有另一組標籤<TITLE></TITLE>。打在<TITLE></TITLE>這裡面的文字會(huì )出現在瀏覽器視窗最上頭藍色部份裡，當作一篇網(wǎng)頁(yè)的主題。
您可能會(huì )發(fā)現，為什麼我一直沒(méi)提到<HTML></HTML>這一組標籤，嗯！因為它可有可無(wú)。這一組標籤是告訴瀏覽器說(shuō)：我是一份HTML文件喔！也就是說(shuō)它是一個(gè)網(wǎng)頁(yè)的格式啦！通常都包在網(wǎng)頁(yè)的最上下兩端，將所有的原始碼都包起來(lái)。
4.2 分隔標籤 <
回細說(shuō)索引>
【文字上的分隔標籤】
或許你已經(jīng)發(fā)現這個(gè)問(wèn)題了：天??！我不是在記事本裡排版排得很漂亮，為何透過(guò)瀏覽器看起來(lái)一切都走了樣？對??！別太訝異，在網(wǎng)頁(yè)的編排裡，並不像漢書(shū)或WORD一樣，只要拼命按Enter鍵或空白鍵，便能完成分段或分行，因為，HTML語(yǔ)言是不認識我們所謂的Enter鍵或空白鍵，所以不管您按了多少次的空白或Enter，瀏覽器都會(huì )當作沒(méi)看見(jiàn)啦！
使用方法：強制斷行標籤<br>、強制分段標籤<p>
標籤解說(shuō)：我們在寫(xiě)文章時(shí)，有時(shí)候在特定的地方會(huì )強迫斷行（<br>），或是在寫(xiě)完某一段的時(shí)候便會(huì )分段（<p>），寫(xiě)網(wǎng)頁(yè)也一樣，而且更需要斷行及分段的功能，以免整個(gè)網(wǎng)頁(yè)看起來(lái)亂糟糟的。
使用範例： 原始碼 呈現結果
這是一個(gè)斷行的範例<br>看出來(lái)了嗎？ 這是一個(gè)斷行的範例
看出來(lái)了嗎？
這是一個(gè)分段的範例<p>基本上他會(huì )比斷行還多空出一行 這是一個(gè)分段的範例
基本上分段會(huì )比斷行還多空出一行
【分隔線(xiàn)標籤】
使用方法：上一段文字內容<hr>下一段文字內容
標籤解說(shuō)：利用<hr>這個(gè)標籤便可產(chǎn)生一條橫分隔線(xiàn)。另外，其有些屬性分別說(shuō)明如下：
使用範例：
一般用法 尚未加任何屬性。
原始碼 普通分隔線(xiàn)<hr>
呈現結果 普通分隔線(xiàn)
顏色屬性 用法：<hr color="顏色碼或顏色名稱(chēng)">
原始碼 橘色分隔線(xiàn)<hr color="#ff8000">
呈現結果 橘色分隔線(xiàn)
寬度屬性 用法：<hr width="寬度">，其單位為px（像素），寬度亦可用百分比來(lái)作設定，如50%即意為寬度佔螢幕50%。
原始碼 寬度為240px的分隔線(xiàn)<hr width="240">
呈現結果 寬度為240px分隔線(xiàn)
厚度屬性 用法：<hr size="厚度">
原始碼 厚度為5的分隔線(xiàn)<hr size="5">
呈現結果 厚度為5分隔線(xiàn)
位置屬性 用法：<hr align="水平對齊位置">，其設定值有三個(gè)，也就是置左align="left"、置中align="center"、置右align="right"
原始碼 靠右的分隔線(xiàn)<hr align="right">
呈現結果 靠右的分隔線(xiàn)
陰影屬性 用法：<hr noshade>，無(wú)設定值，只要將 noshade 加入即可，通常會(huì )配合顏色設定，效果較佳。
原始碼 實(shí)心分隔線(xiàn)（無(wú)陰影）<hr noshade>
呈現結果 實(shí)心分隔線(xiàn)（無(wú)陰影）
4.3 排版標籤 <
回細說(shuō)索引>
【文字置左、置中、置右】
使用方法：老實(shí)說(shuō)，剛剛我們學(xué)過(guò)的分段標籤<p>再加上一些簡(jiǎn)單的屬性設定，就可以讓其整個(gè)文字段落置左、置中或置右了，就如下表所示：
原始碼 呈現結果
<p align="left">文字靠左</p> 文字靠左
<p align="center">文字置中</p> 文字置中
<p align="right">文字靠右</p> 文字靠右
標籤解說(shuō)：嗯！祕訣就在於「align=對齊位置」而已啦！align是分段標籤<p>的屬性之一，這個(gè)屬性將來(lái)會(huì )常常在不同標籤中看到，它的功能是專(zhuān)門(mén)在設定「水平對齊位置」，其常見(jiàn)的設定值有三個(gè)，也就是置左（align="left"）、置中（align="center"）、置右（align="right"）。
【置中標籤】
使用方法：<center>這是置中</center>
標籤解說(shuō)：這個(gè)標籤是最常用到的標籤了，除了文字，對於圖片、表格，任何可以顯現在網(wǎng)頁(yè)上的東西都可以置中喔！
使用範例： 原始碼 呈現結果
<center>這是最中間</center> 這是最中間
【向右縮排標籤】
使用方法：<blockquote>要縮排的文字</blockquote>
標籤解說(shuō)：利用<blockquote></blockquote>這個(gè)標籤可以將其包起來(lái)的文字，全部往右縮排。而且加一組標籤，往右縮排一單位，加兩組標籤，往右縮排兩單位，依此類(lèi)推。
使用範例： 原始碼 呈現結果
<blockquote>縮排1單位</blockquote> 縮排1單位
<blockquote><blockquote>縮排2單位</blockquote></blockquote> 縮排2單位
【保存原始格式標籤】
使用方法：<pre>文字內容<pre>
標籤解說(shuō)：利用<pre></pre>這個(gè)標籤可以將其包起來(lái)的文字排版、格式，原封不動(dòng)的呈現出來(lái)。算是相當好用的標籤之一。
使用範例： 原始碼 呈現結果
<pre>
文 字
格 式
</pre> 文 字 格 式
4.4 字體標籤 <
回細說(shuō)索引>
【標題標籤】
使用方法：<h1>標題內容</h1>
標籤解說(shuō)：標題的大小一共有六種，兩個(gè)標籤一組，也就是從<h1>到<h6>，<h1>最大，<h6>最小。使用標題標籤時(shí)，該標籤會(huì )將字體變成粗體字，並且會(huì )自成一行。
使用範例：
原始碼 呈現結果
<h1>標題一</h1> 標題一
<h2>標題二</h2> 標題二
<h3>標題三</h3> 標題三
<h4>標題四</h4> 標題四
<h5>標題五</h5> 標題五
<h6>標題六</h6> 標題六
【設定字體大小標籤】
使用方法：<font size=3>文字內容</font>
標籤解說(shuō)：標題的大小一共有七種，也就是<font size=1>（最?。┑?lt;font size=7>（最大），另外，還有一種寫(xiě)法：<font size=+1>文字內容</font>，其意思就是說(shuō)：比預設字大一級。當然也可以 font size=+2（比預設字大二級），或是 font size=-1（比預設字小一級），以一般而言，預設字體多為 3。
使用範例：
原始碼 呈現結果
<font size=1>字體一</font> 或是
<font size=-2>字體一</font> 字體一
<font size=2>字體二</font> 或是
<font size=-1>字體二</font> 字體二
<font size=3>字體三</font> 或是
<font size=+0>字體三</font> 字體三
<font size=4>字體四</font> 或是
<font size=+1>字體四</font> 字體四
<font size=5>字體五</font> 或是
<font size=+2>字體五</font> 字體五
<font size=6>字體六</font> 或是
<font size=+3>字體六</font> 字體六
<font size=6>字體七</font> 或是
<font size=+4>字體七</font> 字體七
【字型變化標籤】
使用方法：<b>文字</b>
標籤解說(shuō)：在文字標籤裡，對於文字的格式也有相當多的變化，如粗體、斜體...等，此外，也定義了一些現成的格式供編者使用，如『強調』、『原始碼』...等，當然，這只是方便您參考用，並無(wú)強迫說(shuō)遇到原始碼就要加上『原始碼』的標籤。
使用範例：
原始碼 呈現結果
<b>粗體</b> 粗體
<i>斜體</i> 斜體
<u>底線(xiàn)</u> 底線(xiàn)
<sup>上標</sup> 上標
<sub>下標</sub> 下標
<tt>打字機</tt> 打字機
<blink>閃爍</blink>（ie沒(méi)效果） 閃爍
<em>強調</em> 強調
<strong>加強</strong> 加強
<samp>範例</samp> 範例
<code>原始碼</code> 原始碼
<var>變數</var> 變數
<dfn>定義</dfn> 定義
<cite>引用</cite> 引用
<address>所在地址</address> 所在地址
【文字顏色設定】
使用方法：<font color="#fefecb">文字顏色</font>
標籤解說(shuō)：文字也可以設定 顏色喔！至於顏色有哪些....這....哪天我心血來(lái)潮再來(lái)做個(gè)色彩對應表吧！
使用範例：
原始碼 呈現結果
<font color="#ff0000">紅</font> 紅色的字喔！
<font color="#ff8000">橙</font> 橙色的字喔！
<font color="#ffff00">黃</font> 黃色的字喔！
<font color="#00ff00">綠</font> 綠色的字喔！
<font color="#0080ff">藍</font> 藍色的字喔！
<font color="#0000a0">靛</font> 靛色的字喔！
<font color="#8000ff">紫</font> 紫色的字喔！
<font color="#000000">黑</font> 黑色的字喔！
<font color="#c0c0c0">灰</font> 灰色的字喔！
4.5 文字標籤 <
回細說(shuō)索引>
【文字字型設定】
使用方法：<font face="字型名稱(chēng)">文字</font>
標籤解說(shuō)：網(wǎng)頁(yè)上也可以使用字型喔！唯一的一個(gè)限制是：對方也要有該字型！否則看到的仍然還是細明體。另外要說(shuō)明的是，這個(gè)標籤並無(wú)法保證在每個(gè)瀏覽器上都能正常的顯現，不過(guò)這並沒(méi)有關(guān)係，看不到特殊的字型時(shí)，瀏覽器仍會(huì )以細明體來(lái)顯示，所以不用怕會(huì )一團亂！
另外，如果您的網(wǎng)頁(yè)中有加上這一行敘述<meta http-equiv="content-type" content="text/html;charset=big5">（指定網(wǎng)頁(yè)的語(yǔ)言格式，以後我會(huì )解釋?zhuān)?，那麼，netscape可以正確顯示出中文，但英文無(wú)反應。若沒(méi)有加該行，那麼英文會(huì )正確顯示，但中文卻仍是細明體。至於 ie 系列，均能正常顯示。
使用範例：
原始碼 呈現結果
<font face="標楷體">標楷體</font> 標楷體
<font face="華康儷中黑">華康儷中黑</font> 華康儷中黑
【特殊字元】
使用方法：
標籤解說(shuō)：很多特殊的符號是需要特別處理的，比如說(shuō)" < "、" > "這兩個(gè)符號若想要呈現在網(wǎng)頁(yè)上是沒(méi)有辦法直接打" < "的，要呈現" < "必須輸入編碼表示法：「<」，常用的如下：
使用範例：
原始碼 呈現結果
( 代表一個(gè)不斷行空白)
< <
> >
& &
" "
【設定文字內定值大小】
使用方法：<basefont size="1~7">
標籤解說(shuō)：這個(gè)標籤可以改變文字大小的內定值，直接加在<body>標籤之後就行了。一般而言，若是沒(méi)有特別設定，文字大小內定值預定值為3。
4.6 影像標籤 <
回細說(shuō)索引>
【影像標籤】
在使用影像標籤時(shí)有兩件事值得注意一下，一是檔名，二是路徑。首先要注意的就是，檔名是否正確以及大小寫(xiě)是否一致！圖檔名稱(chēng)不正確，任電腦再厲害也找不到您要的圖，檔名大小寫(xiě)不一致，如Image.gif、image.gif、image.GIF在自己的電腦中看都能正確的顯示，但是一但傳到網(wǎng)路上去時(shí)，因為系統不一樣的關(guān)係（電腦伺服器的作業(yè)系統可比個(gè)人用電腦的作業(yè)系統嚴謹多了）就變成三個(gè)不一樣的檔案了，所以，可別忽略檔名大小寫(xiě)不一致的影響。
另外一個(gè)就是路徑問(wèn)題了，這個(gè)問(wèn)題也不難，我們在稍後會(huì )提到。我們先來(lái)看看影像的標籤如何寫(xiě)。
使用方法：<img src="boy.gif" alt="本站特約模特兒" align=right border=0 hspace=2 vspace=2 height=56 width=32>
標籤解說(shuō)：目前常見(jiàn)的網(wǎng)頁(yè)圖形格式有兩種就是gif及jpg兩種格式。gif格式只有256色，不過(guò)色彩比較鮮豔乾淨漂亮，適合電腦美工圖案。而jpg格式的圖案是全彩失真壓縮，比較適合一大堆顏色的圖片，如照片就較適合用jpg格式來(lái)呈現。
使用範例：
基本用法 用法：<img src="圖檔名稱(chēng)、路徑">
顯示圖片最基本的方法（就是不加任何屬性啦?。┢渲?boy.gif 就是圖檔的檔名。
原始碼 <img src="images/G-FASE4.GIF">嗨！我是本站的模特兒喔！
呈現結果
嗨！我是本站的模特兒喔！
長(cháng)寬設定 用法：<img src="圖檔" height="高度" width="寬度">
設圖片的大小，其實(shí)不用設也可以，但是有設更好，可以加快瀏覽速度，因為瀏覽器就不用在那邊花時(shí)間算您的圖片有多大啦！此外您也可以自己隨意設定圖片大小。
原始碼 <img src="images/G-FASE4.GIF" height=32 width=32>
呈現結果
加上說(shuō)明 用法：<img src="圖檔" alt="說(shuō)明文字">
滑鼠一到圖上時(shí)，說(shuō)明文字就會(huì )自動(dòng)出現。此外，在圖片未顯示出來(lái)或顯示不出來(lái)時(shí)，也會(huì )以這一段字代替，讓使用者知道這個(gè)未顯示出來(lái)的圖片究竟是幹嘛用的。
原始碼 <img src="images/G-FASE4.GIF" alt="本站特約模特兒">移到圖上看看。
呈現結果
移到圖上看看。
圖片位置 用法：<img src="圖檔" align="位置">
圖片位置設定！可以靠左放：align=left、靠上align=top、靠下align=bottom、垂直置中align=middle，其中靠左放可以造成『文繞圖』的效果。
原始碼 <img src="images/G-FASE4.GIF" align=right>嗨！我往右邊靠！
呈現結果
嗨！我往右邊靠！
原始碼 <img src="images/G-FASE4.GIF" align=left>嗨！我往左邊靠！
呈現結果
嗨！我往左邊靠！
原始碼 <img src="images/G-FASE4.GIF" align=top>文字對齊我頭頂！
呈現結果
文字對齊我頭頂！
原始碼 <img src="images/G-FASE4.GIF" align=bottom>文字對齊我腳底！
呈現結果
文字對齊我腳底！
原始碼 <img src="images/G-FASE4.GIF" align=middle>文字對齊我中間！
呈現結果
文字對齊我中間！
原始碼 <img src="images/G-FASE4.GIF" align=absmiddle>文字對齊我絕對中間！
呈現結果
文字對齊我絕對中間！
邊框設定 用法：<img src="圖檔" border="邊框粗細">
設定邊框大小，通常都設成 0 感覺(jué)比較美觀(guān)啦！因為內定的框框實(shí)在是不怎麼漂亮....。尤其在連結時(shí)，設框框簡(jiǎn)直是醜斃了...。
原始碼 <img src="images/G-FASE4.GIF" border="4">
呈現結果
左右間距 用法：<img src="圖檔" hspace="離左右物件的距離">
離文字的水平距離，通常多少也設一點(diǎn)，以免靠文字太近，看起來(lái)才不會(huì )有太擠的感覺(jué)。
原始碼 左邊的字<img src="images/G-FASE4.GIF" hspace="15">右邊的字
呈現結果 左邊的字
右邊的字
上下間距 用法：<img src="圖檔" vspace="離上下物件的距離">
離文字的垂直距離，通常多少也設一點(diǎn)，以免靠文字太近，看起來(lái)才不會(huì )有太擠的感覺(jué)。
原始碼 上面的字<br><img src="images/G-FASE4.GIF" vspace="15"><br>下面的字
呈現結果 上面的字
下面的字
由於此網(wǎng)頁(yè)有用css控制版面圖文，故在netscape下觀(guān)看，會(huì )稍有不正確。
【網(wǎng)頁(yè)影像重要觀(guān)念】
關(guān)於路徑：現在我們來(lái)談?wù)剤D片路徑的事，路徑不對，不管您的網(wǎng)頁(yè)名稱(chēng)寫(xiě)的多正確也沒(méi)用，因為瀏覽器無(wú)法尋著(zhù)您的路徑去找到該有的圖片，所以，我們來(lái)看看該如何正確的使用路徑。有些人並不喜歡將網(wǎng)頁(yè)及圖通通放在同一個(gè)目錄下，比如說(shuō)有人將圖檔全放在c:\images裡，而網(wǎng)頁(yè)檔放在c:\demo裡，這樣子的話(huà)，我們該如何正確的寫(xiě)圖片的路徑呢？我將幾種常見(jiàn)的情形整理成下表：
html檔的位置 圖檔的位置 寫(xiě)法 情形說(shuō)明
c:\demo c:\demo <img src="tad.gif"> 圖文均在同一目錄
c:\demo c:\demo\images <img src="images/tad.gif"> 圖在網(wǎng)頁(yè)下一層目錄
c:\demo c:\ <img src=" ../tad.gif"> 圖在網(wǎng)頁(yè)上一層
c:\demo c:\image <img src=" image/tad.gif"> 圖文在同一層但不同目錄
或許有人看到不明就理，我來(lái)說(shuō)明一下，「../」是回到上一層目錄的意思?！竔mages/」則是進(jìn)入下一層目錄image之意，而「images/」的意思就是，回到上一層目錄，然後再進(jìn)入目錄images中。以上我們使用的均為「相對路徑」的概念。
影像單位：或許您會(huì )常?？吹絧x這個(gè)單位，沒(méi)錯，這是我們在製作最常用的一個(gè)單位了。這個(gè)單位完整的寫(xiě)法是「pixels」，我們稱(chēng)之為「像素」。像素，是螢幕上的一個(gè)小光點(diǎn)，然而這一小光點(diǎn)的大小，並非是固定的，舉個(gè)例子而言，螢幕本身十五吋，不會(huì )因為你的任何設定而變成十七吋。但是，其解析度是可以改變的，我們常見(jiàn)的解析度有以下幾種：「640 ×480」、「800 ×600」、「1024 ×768」。舉其中之一的640 ×480來(lái)說(shuō)，其代表的就是在螢幕上有寬640個(gè)光點(diǎn)，高有480光點(diǎn)，若是我們將解析度調整為800 ×600其寬勢必要從640變成800個(gè)光點(diǎn)，也因此，該光點(diǎn)便會(huì )變小一點(diǎn)，所以，我們看起來(lái)就會(huì )覺(jué)得解析度調高後，螢幕內的東西，變得小小的，很精緻，那就是因為光點(diǎn)變小的原因。
影像格式：網(wǎng)頁(yè)用的圖檔目前只有g(shù)if格式（即副檔名為gif的圖檔，如：bg.gif）以及jpg格式（即副檔名為jpg的圖檔，如：bg.jpg）為一般的瀏覽器所接受。其他如bmp格式或是pcx格式都是無(wú)法在網(wǎng)頁(yè)上使用的，若非得要用，那就利用影像繪圖軟體來(lái)作格式的轉換吧！
圖檔範例 說(shuō)明
gif格式的圖形只能以256個(gè)顏色顯示，雖然其色彩較少，但顏色鮮豔亮麗，若是圖形顏色不多，用gif格式存檔會(huì )較漂亮。
jpg格式的圖形是以全彩顯示，適合用在相片或是漸層顏色的圖片上，壓縮比例以75%為適中。
4.7 背景標籤 <
回細說(shuō)索引>
【背景標籤】
說(shuō)穿了，背景標籤只有<BODY>這個(gè)標籤，其餘的效果，只要加上一些簡(jiǎn)單的屬性便可做到。
使用方法：<body bgcolor="#ffffff" background="bg.jpg">
標籤解說(shuō)：這個(gè)標籤其實(shí)應該老早就要講了，畢竟它是構成網(wǎng)頁(yè)不可或缺的基本要素之一（哎哎哎...現在放馬後砲有什麼用?。?。我們背景顏色或圖片的設定以及連結字體的顏色，通通都放在<body>這標籤裡面。我就其屬性來(lái)一一解說(shuō)： 背景顏色 用法：<body bgcolor="顏色碼">
設定背景顏色。有人會(huì )說(shuō)：『我已經(jīng)設定了背景圖片，那背景顏色還有用嗎？』當然有用！當使用者連結到貴站時(shí)，若背景圖案還沒(méi)傳輸完之前（有的背景圖蠻大的），就會(huì )先顯現背景顏色，您說(shuō)，是不是比一片灰灰的好看多了呢！
原始碼 <html>
<head>
<title>這是標題</title>
</head>
<body bgcolor="#f9e6a2">
這裡是本文區
</body>
</html>
呈現結果
按下此處觀(guān)看結果背景圖案 用法：<body background="圖檔名稱(chēng)、路徑">
g設定背景圖案。圖檔可以是jpg或gif格式的圖檔，我建議：圖檔不要太大，否則網(wǎng)頁(yè)載入會(huì )蠻慢的。
原始碼 <html>
<head>
<title>這是標題</title>
</head>
<body background="bg.jpg">
這裡是本文區
</body>
</html>
呈現結果
按下此處觀(guān)看結果【內文、連結文字顏色設定】
使用方法：<body text="#000000" link="#0000ff" vlink="#ff00ff" alink="#ff0000>
標籤解說(shuō)：用字體標籤中的顏色屬性，可以設定文字的顏色，不過(guò)，卻沒(méi)有提到文字的顏色內定值該如何修改，這個(gè)<body>標籤中，便有設定內文、連結等文字的顏色內定值功能。用法如下：
內文顏色 用法：<body text="顏色碼">
設定一般文字顏色，也就是說(shuō)，若沒(méi)有特別去設定文字顏色的話(huà)，瀏覽器就會(huì )自動(dòng)顯現您所設定的顏色。
原始碼 <html>
<head>
<title>這是標題</title>
</head>
<body text="#0906a2">
這裡是本文區
</body>
</html>
呈現結果
按下此處觀(guān)看結果連結顏色 用法：<body link="顏色碼">
設定「連結」的顏色。只要是有連結的地方就會(huì )出現你指定的顏色，當然，如果按下連結後，那又會(huì )變成另一個(gè)顏色了，這底下會(huì )說(shuō)明。
原始碼 <html>
<head>
<title>這是標題</title>
</head>
<body link="#ff6600">
<a href="index.htm">連結文字</a>
</body>
</html>
呈現結果
按下此處觀(guān)看結果（設定連結為橘色）
連結時(shí)顏色 用法：<body alink="顏色碼">
設定「按下連結」的顏色，也就是當您滑鼠按下那連結的瞬間所呈現的顏色。
原始碼 <html>
<head>
<title>這是標題</title>
</head>
<body alink="#0099ff">
<a href="index.htm">連結中文字</a>
</body>
</html>
呈現結果
按下此處觀(guān)看結果（滑鼠點(diǎn)下連結瞬間才會(huì )出現我們設定的淺藍色）
已連結顏色 用法：<body vlink="顏色碼">
設定「按下鏈結後」的顏色，也就是如果該連結已經(jīng)有被按過(guò)了，那麼就會(huì )呈現的顏色。如此的做法，是要讓使用者容易識別到底哪些連結有去過(guò)了，哪些沒(méi)去過(guò)。
原始碼 <html>
<head>
<title>這是標題</title>
</head>
<body vlink="red">
<a href="demo1-10-6.htm">連結文字</a>
</body>
</html>
呈現結果
按下此處觀(guān)看結果（設定已執行過(guò)的連結以紅色顯示）
4.8 連結標籤 <
回細說(shuō)索引>
【】
連結基本概念：一般而言，所謂連結就是，在網(wǎng)頁(yè)中有些字會(huì )有特別的顏色，而且字的底下會(huì )有條線(xiàn)，當游標移到那些字上時(shí)，會(huì )變成手指形狀，按下去，則會(huì )連到別的文章或網(wǎng)站，
就像這樣（以上這段是給超級新手看的...）。
扯到連結，最基本來(lái)看有『內部連結』及『外部連結』，所謂『內部連結』就是自己網(wǎng)站間網(wǎng)頁(yè)的連結，至於外部連結我們稍後再來(lái)討論。
要了解內部連結，首先必須先了解一下這兩種東西，一個(gè)是『相對路徑』，一個(gè)是『絕對路徑』。
現在假設一個(gè)情形：我們在自己的電腦裡設計網(wǎng)頁(yè)，所有網(wǎng)頁(yè)相關(guān)的檔案我們通通放在 c:\www 裡面，現在假設 c:\www 裡面目前有 index.htm 、 text1.htm 、 p1.gif 、 p2.gif 這四個(gè)檔案。ok！
現在我們想在 index.htm 裡面設一個(gè)連結，能夠按一下就連到 text1.htm，那我們該怎麼做呢？基本上，有兩中方式可以做到，在 index.htm 裡面加上下面任一敘述：
<a href="/c|/www/text1.htm"> 這就是『絕對路徑』
<a href="text1.htm"> 這就是『相對路徑』
瞧出什麼端倪了沒(méi)有？嗯嗯....沒(méi)錯，『絕對路徑』要給電腦一個(gè)非常詳盡的位置，讓電腦尋著(zhù)這路徑去找到檔案。而『相對路徑』就簡(jiǎn)單多啦！如果沒(méi)有特別指定，他就會(huì )直接在 index.htm 的所在目錄下找，也就是在 c:\www 底下去找text1.htm。
如果說(shuō)，今天我們將 c:\www 裡所有的檔案都上傳到網(wǎng)路上的網(wǎng)頁(yè)伺服器（總不能做好了只給自己看吧?。?，且該伺服器是別人的電腦，而非你自己架設的主機，那麼問(wèn)題就來(lái)了！你猜，哪一種連結會(huì )出問(wèn)題？呵呵...答案是『絕對路徑』，您猜對了嗎？
為什麼說(shuō)『絕對路徑』會(huì )出問(wèn)題呢？因為，當您將檔案上傳到網(wǎng)路上時(shí)，您的整個(gè)網(wǎng)頁(yè)目錄架構一定會(huì )變，到時(shí)候，電腦可能找不到 c:\ （尤其是unix系列的主機）更可能找不到 www 這目錄（有些會(huì )規定要放在特定的目錄下才能顯示網(wǎng)頁(yè)），所以說(shuō)，沒(méi)事的話(huà)，盡量用『相對路徑』來(lái)作連結吧！好寫(xiě)又不容易出錯。
另外一個(gè)情形是：為了整理方便，有些網(wǎng)友喜歡將圖檔通通放到同一個(gè)目錄下，如：c:\www\gif\ 底下放進(jìn)了p1.gif 、 p2.gif兩個(gè)圖，而index.htm 、 text1.htm 依舊在 c:\www 底下?，F在我們想在 index.htm 下設個(gè)連結到 p1.gif 這圖檔（連結不限於只能連html檔，圖檔、文字檔均可），那我們又該如何來(lái)使用『相對路徑』呢？他們又不在『同一個(gè)目錄』下...？
<a href="/c|/www/gif/p1.gif"> 這是『絕對路徑』的寫(xiě)法
<a href="gif/p1.gif"> 這是『相對路徑』的寫(xiě)法
如何？不難吧?。ㄖ皇亲钟悬c(diǎn)多，看到腦子發(fā)脹）
總整理：很亂嗎？嗯...看看這表，或許會(huì )清楚些。
相對路徑表示方式 代表連結位置
<a href="text1.htm"> text1.htm在目前的目錄中（就例子而言，就是在c:\www中）
<a href="docs/text1.htm"> text1.htm在名為docs的次目錄中（就本例而言，就是在c:\www\docs中）
<a href="../text1.htm"> text1.htm在目前目錄的上一層目錄中（就本例而言，就是在c:\底下了）
【】
使用方法：
先在欲連結處作記號：<a name="here1">這裡是你想連結的點(diǎn)</a>
設定連結：<a href="#here1">連結</a>
標籤解說(shuō)：有時(shí)候，當某頁(yè)的內容很多時(shí)，我們可以利用網(wǎng)頁(yè)的內部連結，來(lái)使使用者快速的找到資料。其原理不過(guò)是：在欲連結處做個(gè)記號（網(wǎng)頁(yè)的任何地方都可以喔?。?，然後，連結時(shí)就尋這記號，就可以快速找到資料。很簡(jiǎn)單吧！
使用範例：
範例 第一步驟 第二步驟
www連結標籤基本概念 <a name="m1">欲連結的位置</a> <a href="#m1">www連結標籤基本概念</a>
網(wǎng)頁(yè)內部的連結 <a name="m2">欲連結的位置</a> <a href="#m2">網(wǎng)頁(yè)內部的連結</a>
網(wǎng)頁(yè)外部的連結 <a name="m3">欲連結的位置</a> <a href="#m3">網(wǎng)頁(yè)外部的連結</a>
【】
標籤解說(shuō)：連結到外面去，可以擴充您網(wǎng)站的實(shí)用性及充實(shí)性，也正因這功能，才造就了www五彩繽紛的世界。由於網(wǎng)路上的服務(wù)五花八門(mén)，所以不同的服務(wù)有不同的連結方法，我將之整理在下表。
使用範例：
網(wǎng)站連結
好站 <a >好站</a>
電子郵件連結
寫(xiě)情書(shū)給我 <a href="mailto:tad@ms1.url.com.tw">寫(xiě)情書(shū)給我</a>
ftp連結
下載檔案 <a href="ftp://ftp.ntu.edu.tw">下載檔案</a>
news連結
seednet news服務(wù) <a href="news:news.seed.net.tw">seednet news服務(wù)</a>
gopher連結
seednet gopher服務(wù) <a href="gopher://gopher.seed.net.tw/">seednet gopher服務(wù)</a>
bbs連結
seednet gopher服務(wù) <a href="telnet://bbs.seed.net.tw/">seednet bbs服務(wù)</a>
【連結標籤的參數】
使用方法：在連結後面加入 target=_參數
標籤解說(shuō)：連結的參數並不多，常見(jiàn)的大概就屬 target 這參數了，target 的意思是『目標』，也就是網(wǎng)頁(yè)連結的指向目標，這參數在框窗（frame）裡尤為重要！
使用範例：
target=框窗名稱(chēng)：
這在『框架標籤』中也有提到，而且也只有在框架（框窗 or frame）中才用得到。正常而言，框窗有各自的名稱(chēng)，因此，我們可以利用此標籤，來(lái)指定連結的內容顯示到哪一個(gè)框窗中。
target=_blank：
將連結的畫(huà)面內容，開(kāi)在新的瀏覽視窗中。
target=_parent：
將連結的畫(huà)面內容，當成文件的上一個(gè)畫(huà)面。
target=_self：
將連結的畫(huà)面內容，顯示在目前的視窗中。
target=_top：
這個(gè)參數可以解決新連結的畫(huà)面內容，被舊框窗包圍的困擾，使用這參數，會(huì )將整個(gè)畫(huà)面重新顯示成連結的畫(huà)面內容。
4.9 表格標籤 <
回細說(shuō)索引>
【網(wǎng)頁(yè)中的表格觀(guān)念】
舉個(gè)例子來(lái)說(shuō)，如果今天我們要做一個(gè)3欄2列的表格，在WORD中，只要設定表格為3欄、2列就完成了，不過(guò)，在網(wǎng)頁(yè)中做一個(gè)3欄2列的表格，可是要分成好幾個(gè)步驟的，第一個(gè)步驟，利用<TABLE></TABLE>標籤告訴電腦我要做一個(gè)表格；第二個(gè)步驟，利用一組<TR></TR>標籤先做一個(gè)橫列，然後在橫列中利用三組<TD></TD>標籤再分出三欄；第三個(gè)步驟，重複第二個(gè)步驟，再做一橫列然後再分三欄，如此才能得到一個(gè)3欄2列的表格。聽(tīng)不太懂嗎？沒(méi)關(guān)係，以下咱們就來(lái)慢慢的看個(gè)仔細：
首先我們來(lái)看一個(gè)最簡(jiǎn)單的表格：
原始碼 呈現結果
<TABLE BORDER=1>
<TR><TD>1</TD></TR>
</TABLE>
1
利用<TABLE>這個(gè)標籤來(lái)告訴電腦，這是一個(gè)表格，至於 BORDER=1 這參數是設定此表格的框線(xiàn)粗細為 1。一組<TR></TR>是設定一橫列的開(kāi)始。一組<TD></TD>則是設定一個(gè)欄位。當然，文字就是要擺在這裡面。
現在我們再來(lái)增加二個(gè)格子：
原始碼 呈現結果
<TABLE BORDER=1>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
</TABLE>
1 2 3
看見(jiàn)沒(méi)有，<TR></TR>沒(méi)有增加，<TD></TD>卻增加了二組。那如果我要再加上一列呢？很簡(jiǎn)單，就像這樣：
原始碼 呈現結果
<TABLE BORDER=1>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>
</TABLE>
1 2 3
4 5 6
【合併表格欄位】
並非所有的表格都是規規矩矩的只有幾欄、幾列而已，有時(shí)候，我們還會(huì )希望能夠「合併欄位」，讓表格更美觀(guān)、更實(shí)用一點(diǎn)，而談到「合併欄位」，我們就必須知道，合併的方向有兩種：一種是上下合併（也就是橫列間的合併），一種是左右合併（也就是直欄間的合併），這兩種合併方式各有不同的屬性設定方法。
左右欄位合併：基本上，您的表格已經(jīng)學(xué)會(huì )囉！接下來(lái)，咱們就來(lái)看看，如何將 1、2、3 格通通合併變成一大格：
原始碼 呈現結果
<TABLE BORDER=1>
<TR><TD COLSPAN=3>1</TD></TR>
<TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>
</TABLE>
1
4 5 6
您應該會(huì )發(fā)現，怎麼2、3都消失了？只剩下1，而且該欄的<TD>標籤還多了一個(gè)陌生的臉孔COLSPAN="3"，沒(méi)錯，這就是「左右欄位合併」的屬性，COLSPAN="3"的意思就是「這個(gè)欄位左右橫跨了3個(gè)欄位」，也正因如此，本來(lái)的兩個(gè)<TD>都可以省掉了，因為都被併掉了嘛！
上下欄位合併：學(xué)會(huì )了左右合併！接下來(lái)，咱們就來(lái)看看，如何上下合併，將 1、4格通通合併變成一大格：
原始碼 呈現結果
<TABLE BORDER=1>
<TR><TD ROWSPAN=2>1</TD><TD>2</TD><TD>3</TD></TR>
<TR><TD>5</TD><TD>6</TD></TR>
</TABLE>
1 2 3
5 6
有了上一次的經(jīng)驗後，我們就知道，要合併欄位就一定有些欄位會(huì )被「犧牲」掉（也就是那些被合併的欄位啦?。?，這次我們要「上下合併」，我們將1與4合併成一個(gè)欄位，那麼被犧牲的是哪一個(gè)欄位呢？沒(méi)錯就是下面那一個(gè)倒楣的4，我們看看上圖，果然4已經(jīng)刪掉了，而在1的<TD>標籤中則多了個(gè)生面孔ROWSPAN，這就是「上下欄位合併」的屬性，ROWSPAN=2的意思就是「這個(gè)欄位上下連跨了2個(gè)欄位」，其結果如下：
【表格欄位對齊位置設定】
我可以自己設定表格的大小嗎？當然可以，您可以自由設定表格的「寬」及「高」喔！我們來(lái)製作一個(gè)寬100、高60的表格，做法如下：
原始碼 呈現結果
<TABLE WIDTH="100" BORDER="1" HEIGHT="60">
<TR><TD>1</TD></TR>
</TABLE> 1
哎呀！怎麼 1 老是在表格的左邊呢？可以弄到中間嗎？當然可以，只要在<TD>加入 ALIGN=CENTER 這參數即可：
原始碼 呈現結果
<TABLE WIDTH="100" BORDER="1" HEIGHT="60">
<TR><TD ALIGN=CENTER>1</TD></TR>
</TABLE> 1
此外，利用 ALIGN=RIGHT可以讓表格中物件置右、利用 ALIGN=LEFT可以讓表格中物件置左（預設值），至於為什麼要加在<TD>中呢？因為，<TD>是一個(gè)欄位的意思，我們要指定在這欄位中的東西要置中或置左置右，就必須將ALIGN加在<TD>中。
既然可以置中，那麼也可以控制表格內文字靠上方、靠下方嗎？可以的，只要利用 VALIGN=TOP 這種屬性即可讓表格內物件靠上方對齊。
原始碼 呈現結果
<TABLE WIDTH="100" BORDER="1" HEIGHT="60">
<TR><TD ALIGN=CENTER VALIGN=TOP>1</TD></TR>
</TABLE> 1
利用VALIGN=MIDDLE可以讓表格中物件垂直置中（預設值），VALIGN=BOTTOM可以H讓表格中物件靠下方。
【表格背景、底色設定】
那麼表格可以設定底色嗎？可以的不但表格可以，您也可以指定某欄或某列的顏色，方法和加背景顏色一樣，利用BGCOLOR="顏色碼"就行了。底下是指定整格表格背景顏色的方法：
原始碼 呈現結果
<TABLE BORDER="1" BGCOLOR=#FFCC33>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE> 1 2
3 4
將BGCOLOR="顏色碼"加在<TR>中，可以指定「一列」的背景顏色：
原始碼 呈現結果
<TABLE BORDER="1" >
<TR BGCOLOR=#FFCC33><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE> 1 2
3 4
將BGCOLOR="顏色碼"加在<TD>中，可以指定「一欄」的背景顏色：
原始碼 呈現結果
<TABLE BORDER="1" >
<TR><TD BGCOLOR=#FFCC33>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE> 1 2
3 4
表格除了可以設定底色外，也可以用圖片來(lái)作背景嗎？當然可以，方法一樣簡(jiǎn)單，只要將BACKGROUND="圖片名稱(chēng)"加到表格中就行了。和表格背景顏色一樣，不但表格可以設定背景圖片，您也可以指定某欄或某列的背景圖片：
原始碼 呈現結果
<TABLE BORDER="1" BGCOLOR=#FFCC33>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE> 1 2
3 4
將BACKGROUND="圖片名稱(chēng)"加在<TD>中，可以指定「一欄」的背景顏色：
原始碼 呈現結果
<TABLE BORDER="1">
<TR><TD BGCOLOR=#FFCC33>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE> 1 2
3 4
【表格框線(xiàn)設定】
如何設定表格粗細？只要利用BORDER="粗細值"就行了。
原始碼 呈現結果
<TABLE BORDER=5>
<TR><TD>1</TD></TR>
</TABLE>
1
如何設定表格顏色？只要利用BORDERCOLOR="顏色碼"就行了。
原始碼 呈現結果
<TABLE BORDER="5" BORDERCOLOR="#0080FF">
<TR><TD>1</TD></TR>
</TABLE>
1
另外，我們也可以設定表格的陰影、亮面顏色，讓表格看起來(lái)更有立體感喔！只要利用 BORDERCOLORLIGHT="#顏色碼"（亮面設定） BORDERCOLORDARK="顏色碼"（暗面設定）就行了。
原始碼 呈現結果
<TABLE BORDER="5" BORDERCOLOR="#0080FF" BORDERCOLORLIGHT="#62B0FF" BORDERCOLORDARK="#004B97">
<TR><TD>1</TD></TR>
</TABLE>
1
【表格欄距設定】
我們可以利用CELLPADDING屬性自由設定表格內文距離格線(xiàn)的距離，這個(gè)屬性很好用，保持適當的距離，看起來(lái)比較舒服。一般而言?xún)榷ㄖ禐?，不過(guò)我建議設定為4比較漂亮。
原始碼 呈現結果
<TABLE BORDER="1" CELLPADDING="10">
<TR><TD>1</TD><TD>2</TD></TR>
</TABLE>
1 2
我們可以利用CELLSPACING屬性設定表格欄位格線(xiàn)之間的距離。一般而言?xún)榷ㄖ禐?，不過(guò)我通常習慣設為 0 。
原始碼 呈現結果
<TABLE BORDER="1" CELLSPACING="5">
<TR><TD>1</TD><TD>2</TD></TR>
</TABLE>
1 2
4.10 序列標籤 <
回細說(shuō)索引>
【無(wú)序標籤】
序列標籤基本上可分為兩種，一種是「無(wú)序條列」，一種是「有序條列」。所謂「無(wú)序條列」當然就是意指各條列間並無(wú)順序關(guān)係，純粹只是利用條列式方法來(lái)呈現資料而已，此種無(wú)序標籤，在各條列前面均有一符號以示區隔。至於「有序條列」就是指各條列之間是有順序的，從1、2、3…一直延伸下去。
我們先來(lái)看看「無(wú)序列表標籤」如何使用：
原始碼 呈現結果
<UL>
<LI>姓名：傑克昇
<LI>生日：1974/11/21
<LI>星座：天蠍座
</UL> 姓名：傑克昇
生日：1974/11/21
星座：天蠍座
其中<UL>標籤即為「無(wú)序列表標籤」，每增加一列內容，就必須加一個(gè)<LI>。
前面的符號一定是要圓形的嗎？不，我們可以加入TYPE="形狀名稱(chēng)"屬性來(lái)改變其符號形狀，一共有三個(gè)選擇：DISK（實(shí)心圓）、SQUARE（小正方形）、CIRCLE（空心圓）三種（由於本頁(yè)使用CSS故僅於Netscape看得出效果。）：
原始碼 呈現結果
<UL TYPE="CIRCLE">
<LI>姓名：傑克昇
<LI>生日：1974/11/21
<LI>星座：天蠍座
</UL> 姓名：傑克昇
生日：1974/11/21
星座：天蠍座
【有序標籤】
接下來(lái)，我們來(lái)看看「有序列表標籤」如何使用：
原始碼 呈現結果
<OL>
<LI>姓名：傑克昇
<LI>生日：1974/11/21
<LI>星座：天蠍座
</OL> 姓名：傑克昇
生日：1974/11/21
星座：天蠍座
其中<OL>標籤即為「有序列表標籤」，每增加一列內容，就必須加一個(gè)<LI>。
和無(wú)序列表標籤一樣，我們也可以選擇不同的符號來(lái)顯示順序，一樣是用TYPE屬性來(lái)作更改，一更有五種符號：1（數字）、A（大寫(xiě)英文字母）、a（小寫(xiě)英文字母）、I（大寫(xiě)羅馬字母）、i（小寫(xiě)羅馬字母）等五種：
原始碼 呈現結果
<OL TYPE="A">
<LI>姓名：傑克昇
<LI>生日：1974/11/21
<LI>星座：天蠍座
</OL> 姓名：傑克昇
生日：1974/11/21
星座：天蠍座
另外，我們亦可指定序列起始的數目，其方法如下：
原始碼 呈現結果
<OL START="8">
<LI>姓名：傑克昇
<LI>生日：1974/11/21
<LI>星座：天蠍座
</OL> 姓名：傑克昇
生日：1974/11/21
星座：天蠍座
【定義列表標籤】
接下來(lái)我們要說(shuō)明的這個(gè)標籤，是「定義列表標籤」也是屬於序列標籤之一。我們先來(lái)舉個(gè)例子，我們常常會(huì )在文章中看見(jiàn)這樣的格式： CSS（Cascading style sheet） CSS是由W3C於1996年12月所公佈的一項新技術(shù)，什麼叫做Cascading style sheet？簡(jiǎn)單說(shuō)來(lái)他是一種具有階層性的形式設定，能夠讓網(wǎng)頁(yè)設計者在設計網(wǎng)頁(yè)時(shí)，對於網(wǎng)頁(yè)上的任何物件均有更佳的操控性…
網(wǎng)頁(yè)裡也有可以做到這種效果的標籤喔！現在要來(lái)跟各位說(shuō)的就是這個(gè)標籤。咱們先來(lái)看看這標籤的用法：
我們先來(lái)看看「定義列表標籤」如何使用：
原始碼 呈現結果
<DL>
<DT>小標題
<DD>標題的內容說(shuō)明
</DL> 小標題
標題的內容說(shuō)明
4.11 表單標籤 <
回細說(shuō)索引>
【表單的用途】
對於一般的網(wǎng)頁(yè)設計初學(xué)者而言，表單功能其實(shí)並不常用，因為表單通常必須配合著(zhù)CGI、JAVA Script程式或是ASP程式來(lái)運作，不然表單單獨存在的意義並不大。不過(guò)，一旦有機會(huì )將表單運用到網(wǎng)頁(yè)中時(shí)，您的網(wǎng)頁(yè)將擺脫單向呈現，而開(kāi)始邁入和使用者互動(dòng)的階段喔！
本單元純粹以介紹各式表單為主，至於一些CGI或ASP觀(guān)念在此我就不提出了，因為提供零碎的觀(guān)念，倒不如去看看專(zhuān)門(mén)介紹CGI的書(shū)籍來(lái)的妥當。
【各種輸入類(lèi)型】
文字輸入列：每個(gè)表單之所以會(huì )有不同的類(lèi)型，原因就在於TYPE="表單類(lèi)型"設定的不同而已，我們就先來(lái)看看第一個(gè)類(lèi)型：文字輸入列。文字輸入列的形態(tài)就是TYPE="TEXT，其使用方法如下：
呈現結果 姓名：
原始碼 <FORM>
姓名：<INPUT TYPE="TEXT" NAME="NAME" SIZE="20">
</FORM>
其有下列可設定之屬性： NAME="名稱(chēng)"，是設定此一欄位的名稱(chēng)，程式中常會(huì )用到。
SIZE="數值"，是設定此一欄位顯現的寬度。
VALUE="預設內容"，是設定此一欄位的預設內容。
ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
MAXLENGTH="數值"，是設定此一欄位可設定輸入的最大長(cháng)度。
單選核取表單：利用TYPE="RADIO"就會(huì )產(chǎn)生單選核取表單，單選核取表單通常是好幾個(gè)選項一起擺出來(lái)供使用者點(diǎn)選，一次只能從中選一個(gè)，故為單選核取表單。
呈現結果 性別：男 女
原始碼 <FORM>
性別：
男 <INPUT TYPE="RADIO" NAME="SEX" VALUE="BOY">
女 <INPUT TYPE="RADIO" NAME="SEX" VALUE="GIRL">
</FORM>
其有下列可設定之屬性： NAME="名稱(chēng)"，是設定此一欄位的名稱(chēng)，程式中常會(huì )用到。
VALUE="內容"，是設定此一欄位的內容、值或是意義。
ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
CHECKED，是設定此一欄位為預設選取值。
複選核取表單：利用TYPE=" CHECKBOX "就會(huì )產(chǎn)生複選核取表單，複選核取表單通常是好幾個(gè)選項一起擺出來(lái)供使用者點(diǎn)選，一次可以同時(shí)選好幾個(gè)，故為複選核取表單。
呈現結果 喜好： 電影 看書(shū)
原始碼 <FORM>
喜好：
<INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="MOVIE">電影
<INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="BOOK">看書(shū)
</FORM>
其有下列可設定之屬性： NAME="名稱(chēng)"，是設定此一欄位的名稱(chēng)，程式中常會(huì )用到。
VALUE="內容"，是設定此一欄位的內容、值或是意義。
ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
CHECKED，是設定此一欄位為預設選取值。
密碼表單：利用TYPE=" PASSWORD "就會(huì )產(chǎn)生一個(gè)密碼表單，密碼表單和文字輸入表單長(cháng)得幾乎一樣，差別就在於密碼表單在輸入時(shí)全部會(huì )以星號來(lái)取代輸入的文字，以防他人偷窺。
呈現結果 請輸入密碼：
原始碼 <FORM>
請輸入密碼：<INPUT TYPE="PASSWORD" NAME="INPUT">
</FORM>
其有下列可設定之屬性： NAME="名稱(chēng)"，是設定此一欄位的名稱(chēng)，程式中常會(huì )用到。
SIZE="數值"，是設定此一欄位顯現的寬度。
VALUE="預設內容"，是設定此一欄位的預設內容，不過(guò)呈現出來(lái)仍是星號。
ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
MAXLENGTH="數值"，是設定此一欄位可設定輸入的最大長(cháng)度。
送出按鈕：通常我們表單填完之後，都會(huì )有一個(gè)送出按鈕以及清除重寫(xiě)的按鈕，分別是利用TYPE=" SUBMIT "及TYPE=" RESET "來(lái)產(chǎn)生，相當的簡(jiǎn)單易用。
呈現結果
原始碼 <FORM>
<INPUT TYPE="SUBMIT" VALUE="送出資料">
<INPUT TYPE="RESET" VALUE="重新填寫(xiě)">
</FORM>
其有下列可設定之屬性： NAME="名稱(chēng)"，是設定此一按鈕的名稱(chēng)。
VALUE="文字"，是設定此一按鈕上要呈現的文字，若是沒(méi)有設定，瀏覽器也會(huì )自動(dòng)替您加上「送出查詢(xún)」、「重設」等字樣。
ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
按鈕元件：表單中或是JAVA SCRIPT常會(huì )用到按鈕來(lái)作一些效果，因此，我們可以利用TYPE=" BUTTON "來(lái)產(chǎn)生一個(gè)按鈕，相當簡(jiǎn)單。
呈現結果 請按下按鈕：
原始碼 <FORM>
請按下按鈕：<INPUT TYPE="BUTTON" NAME="OK" VALUE="我同意">
</FORM>
其有下列可設定之屬性： NAME="名稱(chēng)"，是設定此一按鈕的名稱(chēng)。
VALUE="文字"，是設定此一按鈕上要呈現的文字。
ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
隱藏欄位：表單中有時(shí)有些東西因為某些因素，不想讓使用者看到，但因程式需要卻又不得不存在，此時(shí)，我們就可以利用TYPE=" HIDDEN "來(lái)產(chǎn)生一個(gè)隱藏的欄位。
呈現結果 隱藏欄位：
原始碼 <FORM>
隱藏欄位：<INPUT TYPE="HIDDEN" NAME="NOSEE" VALUE="看不到">
</FORM>
其有下列可設定之屬性： NAME="名稱(chēng)"，是設定此一欄位的名稱(chēng)。
VALUE="文字"，是設定此一欄位的值、文字或意義。
【大量文字輸入元件】
有時(shí)候我們會(huì )希望讓使用者輸入比較大量的文字，此時(shí)，文字輸入列就顯得不敷使用，因此我們就可以利用<TEXTAREA></TEXTAREA>來(lái)產(chǎn)生一個(gè)可以輸入大量文字的元件，夾在兩個(gè)標籤中的文字會(huì )出現在框框中，可作為預設文字。
呈現結果 請輸入您的意見(jiàn)：
原始碼 <FORM>
請輸入您的意見(jiàn)：<BR>
<TEXTAREA NAME="TALK" COLS="20" ROWS="3"></TEXTAREA>
</FORM>
其有下列可設定之屬性： NAME="名稱(chēng)"，是設定此一欄位的名稱(chēng)。
WRAP="設定值"，是設定此一欄位的換行模式。設定值有三種：OFF（輸入文字不會(huì )自動(dòng)換行）、VIRTUAL（輸入文字在螢幕上會(huì )自動(dòng)換行，不過(guò)若是使用者沒(méi)有自行按下ENTER換行，送出資料時(shí)，也視為沒(méi)有換行）、PHYSICAL（輸入文字會(huì )自動(dòng)換行，送出資料時(shí)，會(huì )將螢幕上的自動(dòng)換行，視為換行效果送出）。
COLS="數值"，是設定此一欄位的行數（橫向字數）。
ROWS="數值"，是設定此一欄位的列數（垂直字數）。
【下拉式選單】
下拉式選單令整個(gè)網(wǎng)頁(yè)看起來(lái)有很專(zhuān)業(yè)的感覺(jué)，我們只要利用<SELECT NAME="名稱(chēng)">便可以產(chǎn)生一個(gè)下拉式選單，另外，還需要配合<OPTION>標籤來(lái)產(chǎn)生選項，這樣才算完整喔！
呈現結果 您喜歡看書(shū)嗎？：
原始碼 <FORM>
您喜歡看書(shū)嗎？：
<SELECT NAME="LIKE">
<OPTION VALUE="非常喜歡">非常喜歡
<OPTION VALUE="還算喜歡">還算喜歡
<OPTION VALUE="不太喜歡">不太喜歡
<OPTION VALUE="非常討厭">非常討厭
</SELECT>
</FORM>
其有下列可設定之屬性： SIZE="數值"，是設定此一欄位的大小，預設值為1，若是您的選項有四個(gè)，然後您將SIZE設成4，那麼，下拉式選單便會(huì )變成選項方塊，將四個(gè)選項一起呈現在方塊中。
MULTIPLE，是設定此一欄位為複選，可以一次選好幾個(gè)選項。
4.12 框架標籤 <
回細說(shuō)索引>
【框架的基本概念】
首先，各位先看看右手邊這張圖，我將利用這張圖來(lái)作解說(shuō)，這樣子，講起來(lái)可能會(huì )清楚一點(diǎn)。
OK！我們可以看見(jiàn)，右邊的這個(gè)視窗，一共分為 1 、 2 、 3 三個(gè)框架，每一個(gè)框架，各有其顯示的內容分別是a.htm、b.htm、c.htm三個(gè)檔案。然而左下角的那個(gè) index.htm 是做什麼用的呢？
原來(lái)，左下角的這個(gè)檔案 index.htm，就是要告訴電腦，我們要將畫(huà)面分割成這樣，也就是說(shuō)，所有Frame的標籤，其實(shí)都只擺在 index.htm 這個(gè)檔案裡。（當然，不是檔名一定要叫做 index.htm 取其他檔名也是可以的。）
這樣明白了嗎？總之，您要分割幾個(gè)框框，就一定會(huì )有幾個(gè)對應的html檔案（假如您要分割100個(gè)框框，就要有100個(gè)html檔就對了。），另外，還會(huì )多一個(gè)檔案是來(lái)告訴電腦要如何分割的。（也就是例中的 index.htm 檔啦?。?div style="height:15px;">
別急、別急，分割視窗可是一門(mén)學(xué)問(wèn)，要分割也是要一步一步來(lái)的?？纯磩倓偰抢?，想像畫(huà)面是一個(gè)蛋糕，你要怎麼割，才能割成那樣呢？
各位會(huì )發(fā)現，奇怪，在上面的語(yǔ)法中，怎麼都沒(méi)見(jiàn)到<BODY></BODY>熟悉的身影？呵呵...沒(méi)錯，它已經(jīng)被待會(huì )兒要加進(jìn)去的<FRAMESET></FRAMESET>標籤給取代了！也就是說(shuō)，如果我們要分割畫(huà)面，就要先用<FRAMESET>標籤告訴電腦說(shuō)：『喂！我要開(kāi)始分割了！』此時(shí)，<BODY>是派不上用場(chǎng)的，所以躲到一旁涼快去了！
在<FRAMESET>中，我們要告訴電腦到底是要左右分（COLS）？還是上下分（ROWS）。一開(kāi)始我們是左右分，所以我們寫(xiě)成<FRAMESET COLS="120,*" >。COLS="120,*" 就是說(shuō)，左邊那一欄強制定為 120點(diǎn)，右邊則隨視窗大小而變。除了直接寫(xiě)點(diǎn)數外，我們亦可用百分比來(lái)表示，例如COLS="20%,80%"也是可以的。
看見(jiàn)了沒(méi)？原本的<FRAME SRC="b.htm" NAME="2">（在第 3 點(diǎn)的語(yǔ)法中）被另一組<FRAMESET ROWS="100,*" >所取代了！所以要注意喔！第二組<FRAMESET ROWS="100,*" >是被第一組<FRAMESET COLS="120,*" >所包圍起來(lái)的喔?。▉y七八糟了對不對？）
呵呵...不知不覺(jué)就大功告成了，其實(shí)只要將最後完成的那些語(yǔ)法存成 index.htm，然後再準備三個(gè)檔 a.htm 、b.htm 、c.htm那麼就完工囉！當然，這是一個(gè)最陽(yáng)春的分割法，我會(huì )再將一些進(jìn)階的標籤在底下一一說(shuō)明。
就是垂直切割畫(huà)面啦！你可以一次切成左右兩個(gè)畫(huà)面，當然也可以切成三個(gè)，很簡(jiǎn)單只要寫(xiě)成 COLS="30,*,50" （數字隨便您自己調整啦?。?，依此類(lèi)推，四個(gè)以上當然就是四組數字啦！
<FRAME SRC="a.htm" NAME="1" frameborder=0 scrolling="no" noresize marginhight=2 marginwidth=2>
設定此框架中要顯示的網(wǎng)頁(yè)名稱(chēng)，每個(gè)框架一定要對應一個(gè)網(wǎng)頁(yè)，否則就會(huì )產(chǎn)生錯誤，這裡就是要您填入對應網(wǎng)頁(yè)的名稱(chēng)。（如果該網(wǎng)頁(yè)在不同目錄，記得路徑要寫(xiě)清楚）
標籤解說(shuō)：有些瀏覽器較為老舊，無(wú)法顯示Frame的功能，因此，就要使用此標籤，讓這些網(wǎng)友知道，該換換瀏覽器了?；蛘?，你也可以在這標籤中，擺上沒(méi)有Frame語(yǔ)法的網(wǎng)頁(yè)標籤，那麼，沒(méi)有支援Frame功能的瀏覽器，便會(huì )自動(dòng)顯示沒(méi)有Frame語(yǔ)法的網(wǎng)頁(yè)。
標籤解說(shuō)：常常有一個(gè)情況是，我想在框窗 1 的地方按下連結，但是希望他的內容出現在框窗 3 中（請參照上面那個(gè)圖），那應該如何寫(xiě)呢？就像上面加個(gè) target=框窗名稱(chēng) 就行啦！
標籤解說(shuō)：有時(shí)候，在框窗裡會(huì )連結到別的站，卻發(fā)現，新連結的這個(gè)站，竟然被框窗包住了，不但難看，而且可能會(huì )吃上官司說(shuō)！所以，這時(shí)候你必需加入 target=_top這個(gè)參數，那麼，這個(gè)新連到的網(wǎng)站，就會(huì )重新佔據整個(gè)螢幕啦！
要注意一點(diǎn)，如果背景和文字顏色一樣～或者顏色相近，天啊～那誰(shuí)知道你在寫(xiě)什麼呀？最好文字與背景顏色有對比，像敝人當初，網(wǎng)頁(yè)背景是黑的，字是白的紅的，就可以很明顯的突顯出文字。如果圖片中有文字，也要盡量淡化，否則影響內容就不好囉！
About Open Page：打開(kāi)browser看到網(wǎng)站的第一個(gè)部份，有人稱(chēng)之為Open Page(通常是首頁(yè)的一半或三分之一)，這個(gè)部份應該包含網(wǎng)站的主功能(亦即使用者上這個(gè)網(wǎng)站最希望或者最可能做的事)，ex. 一進(jìn)入Allproducts.com即可看到「Key word search」及「Search by category」，應該儘量避免讓使用者還要使用mouse上下左右拉才能看到他(她)所想要的功能或資訊，有時(shí)資訊太多，在不得已的情況下，頁(yè)面可以往下沿申，但切忌右左劃面過(guò)大，不符一般人的使用習慣，也會(huì )造成列印上的困擾。
主題明確：Open Page應包含公司Logo、網(wǎng)站主題(最好是一段簡(jiǎn)短的Slogan，讓使用者一看就知道這個(gè)網(wǎng)站主要功能或架站目的,ex. Allproducts.com上的The world's best products directory for volume buyers)
Navigation：讓使用者很明確了解他(她)目前在網(wǎng)站的什麼地方(或功能)，首頁(yè)上應該有主要功能的連結，各個(gè)icon如果可能的話(huà)，儘可能加上一些純文字的說(shuō)明及l(fā)ink；至於icon或者link的擺放亦應有其相對應的邏輯，如與整個(gè)網(wǎng)站或大架構較為相關(guān)的，放在較外層，與目前執行的功能或頁(yè)面較為相關(guān)的link應該放在內層；另外，最好能在首頁(yè)上提供Site Map的連結，讓使用者可以很快了解網(wǎng)站的架構；所有的link應該把握 intuitive , obvious , fast的原則。
Color or image：對於顏色的採用，應該考慮到該網(wǎng)站的特性及與其它相關(guān)網(wǎng)站的區別，特別是首頁(yè)的顏色配置，應該讓使用者感覺(jué)很舒服、沒(méi)有壓迫感，但又不失其專(zhuān)業(yè)性，但切忌過(guò)度追求美感而犧牲其功能性，就公司目前的網(wǎng)站設計理念，應該是功能性的考量?jì)?yōu)於純美術(shù)的考量，首頁(yè)的設計最好設定在60k以?xún)?，而且不要用太多層的table。
Meta tag：該部份不會(huì )出現在前端的頁(yè)面上，但網(wǎng)站規劃時(shí)應該將該部份一併考量，做為網(wǎng)站登錄時(shí)使用，網(wǎng)站上線(xiàn)時(shí)務(wù)必將相關(guān)資料加入。
剷明整個(gè)網(wǎng)站的關(guān)鍵字，關(guān)鍵字間用逗點(diǎn)隔開(kāi)，總長(cháng)度最好不要超過(guò)1000個(gè)Character (約44個(gè)字)。
剷明整個(gè)網(wǎng)站為何吸引人的地方，可用逗點(diǎn)隔開(kāi)，總長(cháng)度最好不要超過(guò)200個(gè)Character (約15個(gè)字)，若文章真的太長(cháng)，可以切割成兩個(gè)部分，較不重要的部分置入下一個(gè)Description。
