標籤解說：我們在寫文章時，有時候在特定的地方會強迫斷行（
），或是在寫完某一段的時候便會分段（

），寫網頁也一樣，而且更需要斷行及分段的功能，以免整個網頁看起來亂糟糟的。
 
使用範例： 原始碼 呈現結果
這是一個斷行的範例
看出來了嗎？ 這是一個斷行的範例
看出來了嗎？
這是一個分段的範例

基本上他會比斷行還多空出一行 這是一個分段的範例
基本上分段會比斷行還多空出一行
【分隔線標籤】
使用方法：上一段文字內容

再加上一些簡單的屬性設定，就可以讓其整個文字段落置左、置中或置右了，就如下表所示：
原始碼 呈現結果

文字靠左

文字置中

文字靠右

的屬性之一，這個屬性將來會常常在不同標籤中看到，它的功能是專門在設定「水平對齊位置」，其常見的設定值有三個，也就是置左（align="left"）、置中（align="center"）、置右（align="right"）。
【置中標籤】
使用方法：

要縮排的文字

縮排1單位

縮排2單位

文字內容

 
標籤解說：利用
這個標籤可以將其包起來的文字排版、格式，原封不動的呈現出來。算是相當好用的標籤之一。
 
使用範例： 原始碼 呈現結果

文　字
格　式
 文　字 　格　式
4.4 字體標籤 <回細說索引>
【標題標籤】
使用方法：
標題內容

 
標籤解說：標題的大小一共有六種，兩個標籤一組，也就是從
到
，
最大，
最小。使用標題標籤時，該標籤會將字體變成粗體字，並且會自成一行。
 
使用範例：
原始碼 呈現結果
標題一
 標題一
標題二
 標題二
標題三
 標題三
標題四
 標題四
標題五
 標題五
標題六
 標題六
【設定字體大小標籤】
使用方法：文字內容
 
標籤解說：標題的大小一共有七種，也就是（最小）到（最大），另外，還有一種寫法：文字內容，其意思就是說：比預設字大一級。當然也可以 font size=+2（比預設字大二級），或是 font size=-1（比預設字小一級），以一般而言，預設字體多為 3。
 
使用範例：
原始碼 呈現結果
字體一 或是
字體一 字體一
字體二 或是
字體二 字體二
字體三 或是
字體三 字體三
字體四 或是
字體四 字體四
字體五 或是
字體五 字體五
字體六 或是
字體六 字體六
字體七 或是
字體七 字體七
【字型變化標籤】
使用方法：文字
 
標籤解說：在文字標籤裡，對於文字的格式也有相當多的變化，如粗體、斜體...等，此外，也定義了一些現成的格式供編者使用，如『強調』、『原始碼』...等，當然，這只是方便您參考用，並無強迫說遇到原始碼就要加上『原始碼』的標籤。
 
使用範例：
原始碼 呈現結果
粗體 粗體
斜體 斜體
底線 底線
上標 上標
下標 下標
打字機 打字機
閃爍（ie沒效果） 閃爍
強調 強調
加強 加強
範例 範例
原始碼 原始碼
變數 變數
定義 定義
引用 引用
所在地址
 所在地址
【文字顏色設定】
使用方法：文字顏色
 
標籤解說：文字也可以設定 顏色喔！至於顏色有哪些....這....哪天我心血來潮再來做個色彩對應表吧！
 
使用範例：
原始碼 呈現結果
紅 紅色的字喔！
橙 橙色的字喔！
黃 黃色的字喔！
綠 綠色的字喔！
藍 藍色的字喔！
靛 靛色的字喔！
紫 紫色的字喔！
黑 黑色的字喔！
灰 灰色的字喔！
4.5 文字標籤 <回細說索引>
【文字字型設定】
使用方法：文字
 
標籤解說：網頁上也可以使用字型喔！唯一的一個限制是：對方也要有該字型！否則看到的仍然還是細明體。另外要說明的是，這個標籤並無法保證在每個瀏覽器上都能正常的顯現，不過這並沒有關係，看不到特殊的字型時，瀏覽器仍會以細明體來顯示，所以不用怕會一團亂！
另外，如果您的網頁中有加上這一行敘述（指定網頁的語言格式，以後我會解釋），那麼，netscape可以正確顯示出中文，但英文無反應。若沒有加該行，那麼英文會正確顯示，但中文卻仍是細明體。至於 ie 系列，均能正常顯示。
 
使用範例：
原始碼 呈現結果
標楷體 標楷體
華康儷中黑 華康儷中黑
【特殊字元】
使用方法： 
 
標籤解說：很多特殊的符號是需要特別處理的，比如說" < "、" > "這兩個符號若想要呈現在網頁上是沒有辦法直接打" < "的，要呈現" < "必須輸入編碼表示法：「<」，常用的如下：
 
使用範例：
原始碼 呈現結果
    ( 代表一個不斷行空白)
< <
> >
& &
" "
【設定文字內定值大小】
使用方法：
 
標籤解說：這個標籤可以改變文字大小的內定值，直接加在標籤之後就行了。一般而言，若是沒有特別設定，文字大小內定值預定值為3。
4.6 影像標籤 <回細說索引>
【影像標籤】
在使用影像標籤時有兩件事值得注意一下，一是檔名，二是路徑。首先要注意的就是，檔名是否正確以及大小寫是否一致！圖檔名稱不正確，任電腦再厲害也找不到您要的圖，檔名大小寫不一致，如Image.gif、image.gif、image.GIF在自己的電腦中看都能正確的顯示，但是一但傳到網路上去時，因為系統不一樣的關係（電腦伺服器的作業系統可比個人用電腦的作業系統嚴謹多了）就變成三個不一樣的檔案了，所以，可別忽略檔名大小寫不一致的影響。
另外一個就是路徑問題了，這個問題也不難，我們在稍後會提到。我們先來看看影像的標籤如何寫。
使用方法：
 
標籤解說：目前常見的網頁圖形格式有兩種就是gif及jpg兩種格式。gif格式只有256色，不過色彩比較鮮豔乾淨漂亮，適合電腦美工圖案。而jpg格式的圖案是全彩失真壓縮，比較適合一大堆顏色的圖片，如照片就較適合用jpg格式來呈現。
 
使用範例：
基本用法 用法：
顯示圖片最基本的方法（就是不加任何屬性啦！）其中 boy.gif 就是圖檔的檔名。
原始碼 嗨！我是本站的模特兒喔！
呈現結果嗨！我是本站的模特兒喔！
長寬設定 用法：
設圖片的大小，其實不用設也可以，但是有設更好，可以加快瀏覽速度，因為瀏覽器就不用在那邊花時間算您的圖片有多大啦！此外您也可以自己隨意設定圖片大小。
原始碼 
呈現結果
加上說明 用法：
滑鼠一到圖上時，說明文字就會自動出現。此外，在圖片未顯示出來或顯示不出來時，也會以這一段字代替，讓使用者知道這個未顯示出來的圖片究竟是幹嘛用的。
原始碼 移到圖上看看。
呈現結果移到圖上看看。
圖片位置 用法：
圖片位置設定！可以靠左放：align=left、靠上align=top、靠下align=bottom、垂直置中align=middle，其中靠左放可以造成『文繞圖』的效果。
原始碼 嗨！我往右邊靠！
呈現結果嗨！我往右邊靠！
原始碼 嗨！我往左邊靠！
呈現結果嗨！我往左邊靠！
原始碼 文字對齊我頭頂！
呈現結果文字對齊我頭頂！
原始碼 文字對齊我腳底！
呈現結果文字對齊我腳底！
原始碼 文字對齊我中間！
呈現結果文字對齊我中間！
原始碼 文字對齊我絕對中間！
呈現結果文字對齊我絕對中間！
邊框設定 用法：
設定邊框大小，通常都設成 0 感覺比較美觀啦！因為內定的框框實在是不怎麼漂亮....。尤其在連結時，設框框簡直是醜斃了...。
原始碼 
呈現結果
左右間距 用法：
離文字的水平距離，通常多少也設一點，以免靠文字太近，看起來才不會有太擠的感覺。
原始碼 左邊的字右邊的字
呈現結果 左邊的字右邊的字
上下間距 用法：
離文字的垂直距離，通常多少也設一點，以免靠文字太近，看起來才不會有太擠的感覺。
原始碼 上面的字

下面的字
呈現結果 上面的字

下面的字
由於此網頁有用css控制版面圖文，故在netscape下觀看，會稍有不正確。
【網頁影像重要觀念】
關於路徑：現在我們來談談圖片路徑的事，路徑不對，不管您的網頁名稱寫的多正確也沒用，因為瀏覽器無法尋著您的路徑去找到該有的圖片，所以，我們來看看該如何正確的使用路徑。有些人並不喜歡將網頁及圖通通放在同一個目錄下，比如說有人將圖檔全放在c:\images裡，而網頁檔放在c:\demo裡，這樣子的話，我們該如何正確的寫圖片的路徑呢？我將幾種常見的情形整理成下表：
html檔的位置 圖檔的位置 寫法 情形說明
c:\demo c:\demo  圖文均在同一目錄
c:\demo c:\demo\images  圖在網頁下一層目錄
c:\demo c:\  圖在網頁上一層
c:\demo c:\image  圖文在同一層但不同目錄
或許有人看到不明就理，我來說明一下，「../」是回到上一層目錄的意思。「images/」則是進入下一層目錄image之意，而「images/」的意思就是，回到上一層目錄，然後再進入目錄images中。以上我們使用的均為「相對路徑」的概念。
 
影像單位：或許您會常常看到px這個單位，沒錯，這是我們在製作最常用的一個單位了。這個單位完整的寫法是「pixels」，我們稱之為「像素」。像素，是螢幕上的一個小光點，然而這一小光點的大小，並非是固定的，舉個例子而言，螢幕本身十五吋，不會因為你的任何設定而變成十七吋。但是，其解析度是可以改變的，我們常見的解析度有以下幾種：「640 ×480」、「800 ×600」、「1024 ×768」。舉其中之一的640 ×480來說，其代表的就是在螢幕上有寬640個光點，高有480光點，若是我們將解析度調整為800 ×600其寬勢必要從640變成800個光點，也因此，該光點便會變小一點，所以，我們看起來就會覺得解析度調高後，螢幕內的東西，變得小小的，很精緻，那就是因為光點變小的原因。
 
影像格式：網頁用的圖檔目前只有gif格式（即副檔名為gif的圖檔，如：bg.gif）以及jpg格式（即副檔名為jpg的圖檔，如：bg.jpg）為一般的瀏覽器所接受。其他如bmp格式或是pcx格式都是無法在網頁上使用的，若非得要用，那就利用影像繪圖軟體來作格式的轉換吧！
圖檔範例 說明
gif格式的圖形只能以256個顏色顯示，雖然其色彩較少，但顏色鮮豔亮麗，若是圖形顏色不多，用gif格式存檔會較漂亮。
jpg格式的圖形是以全彩顯示，適合用在相片或是漸層顏色的圖片上，壓縮比例以75%為適中。
 
4.7 背景標籤 <回細說索引>
【背景標籤】
說穿了，背景標籤只有這個標籤，其餘的效果，只要加上一些簡單的屬性便可做到。
使用方法：
 
標籤解說：這個標籤其實應該老早就要講了，畢竟它是構成網頁不可或缺的基本要素之一（哎哎哎...現在放馬後砲有什麼用！）。我們背景顏色或圖片的設定以及連結字體的顏色，通通都放在這標籤裡面。我就其屬性來一一解說： 背景顏色 用法：
設定背景顏色。有人會說：『我已經設定了背景圖片，那背景顏色還有用嗎？』當然有用！當使用者連結到貴站時，若背景圖案還沒傳輸完之前（有的背景圖蠻大的），就會先顯現背景顏色，您說，是不是比一片灰灰的好看多了呢！
原始碼 




這裡是本文區


呈現結果按下此處觀看結果
背景圖案 用法：
g設定背景圖案。圖檔可以是jpg或gif格式的圖檔，我建議：圖檔不要太大，否則網頁載入會蠻慢的。
原始碼 




這裡是本文區


呈現結果按下此處觀看結果
 
【內文、連結文字顏色設定】
使用方法：
設定一般文字顏色，也就是說，若沒有特別去設定文字顏色的話，瀏覽器就會自動顯現您所設定的顏色。
原始碼 




這裡是本文區


呈現結果按下此處觀看結果
連結顏色 用法：
設定「連結」的顏色。只要是有連結的地方就會出現你指定的顏色，當然，如果按下連結後，那又會變成另一個顏色了，這底下會說明。
原始碼 




連結文字


呈現結果按下此處觀看結果（設定連結為橘色）
連結時顏色 用法：
設定「按下連結」的顏色，也就是當您滑鼠按下那連結的瞬間所呈現的顏色。
原始碼 




連結中文字


呈現結果按下此處觀看結果（滑鼠點下連結瞬間才會出現我們設定的淺藍色）
已連結顏色 用法：
設定「按下鏈結後」的顏色，也就是如果該連結已經有被按過了，那麼就會呈現的顏色。如此的做法，是要讓使用者容易識別到底哪些連結有去過了，哪些沒去過。
原始碼 




連結文字


呈現結果按下此處觀看結果（設定已執行過的連結以紅色顯示）
4.8 連結標籤 <回細說索引>
【】
連結基本概念：一般而言，所謂連結就是，在網頁中有些字會有特別的顏色，而且字的底下會有條線，當游標移到那些字上時，會變成手指形狀，按下去，則會連到別的文章或網站，就像這樣（以上這段是給超級新手看的...）。
扯到連結，最基本來看有『內部連結』及『外部連結』，所謂『內部連結』就是自己網站間網頁的連結，至於外部連結我們稍後再來討論。
要了解內部連結，首先必須先了解一下這兩種東西，一個是『相對路徑』，一個是『絕對路徑』。
現在假設一個情形：我們在自己的電腦裡設計網頁，所有網頁相關的檔案我們通通放在 c:\www 裡面，現在假設 c:\www 裡面目前有 index.htm 、 text1.htm 、 p1.gif 、 p2.gif 這四個檔案。ok！
現在我們想在 index.htm 裡面設一個連結，能夠按一下就連到 text1.htm，那我們該怎麼做呢？基本上，有兩中方式可以做到，在 index.htm 裡面加上下面任一敘述：
 這就是『絕對路徑』
 這就是『相對路徑』
瞧出什麼端倪了沒有？嗯嗯....沒錯，『絕對路徑』要給電腦一個非常詳盡的位置，讓電腦尋著這路徑去找到檔案。而『相對路徑』就簡單多啦！如果沒有特別指定，他就會直接在 index.htm 的所在目錄下找，也就是在 c:\www 底下去找text1.htm。
如果說，今天我們將 c:\www 裡所有的檔案都上傳到網路上的網頁伺服器（總不能做好了只給自己看吧！），且該伺服器是別人的電腦，而非你自己架設的主機，那麼問題就來了！你猜，哪一種連結會出問題？呵呵...答案是『絕對路徑』，您猜對了嗎？
為什麼說『絕對路徑』會出問題呢？因為，當您將檔案上傳到網路上時，您的整個網頁目錄架構一定會變，到時候，電腦可能找不到 c:\ （尤其是unix系列的主機）更可能找不到 www 這目錄（有些會規定要放在特定的目錄下才能顯示網頁），所以說，沒事的話，盡量用『相對路徑』來作連結吧！好寫又不容易出錯。
另外一個情形是：為了整理方便，有些網友喜歡將圖檔通通放到同一個目錄下，如：c:\www\gif\ 底下放進了p1.gif 、 p2.gif兩個圖，而index.htm 、 text1.htm 依舊在 c:\www 底下。現在我們想在 index.htm 下設個連結到 p1.gif 這圖檔（連結不限於只能連html檔，圖檔、文字檔均可），那我們又該如何來使用『相對路徑』呢？他們又不在『同一個目錄』下...？
 這是『絕對路徑』的寫法
 這是『相對路徑』的寫法
如何？不難吧！（只是字有點多，看到腦子發脹）
總整理：很亂嗎？嗯...看看這表，或許會清楚些。
相對路徑表示方式 代表連結位置
 text1.htm在目前的目錄中（就例子而言，就是在c:\www中）
 text1.htm在名為docs的次目錄中（就本例而言，就是在c:\www\docs中）
 text1.htm在目前目錄的上一層目錄中（就本例而言，就是在c:\底下了）
 
【】
使用方法：
先在欲連結處作記號：這裡是你想連結的點
 
設定連結：連結
 
標籤解說：有時候，當某頁的內容很多時，我們可以利用網頁的內部連結，來使使用者快速的找到資料。其原理不過是：在欲連結處做個記號（網頁的任何地方都可以喔！），然後，連結時就尋這記號，就可以快速找到資料。很簡單吧！
 
使用範例：
範例 第一步驟 第二步驟
www連結標籤基本概念 欲連結的位置 www連結標籤基本概念
網頁內部的連結 欲連結的位置 網頁內部的連結
網頁外部的連結 欲連結的位置 網頁外部的連結
 
【】
標籤解說：連結到外面去，可以擴充您網站的實用性及充實性，也正因這功能，才造就了www五彩繽紛的世界。由於網路上的服務五花八門，所以不同的服務有不同的連結方法，我將之整理在下表。
 
使用範例：
網站連結好站 好站
電子郵件連結寫情書給我 寫情書給我
ftp連結下載檔案 下載檔案
news連結seednet news服務 seednet news服務
gopher連結seednet gopher服務 seednet gopher服務
bbs連結seednet gopher服務 seednet bbs服務
 
【連結標籤的參數】
使用方法：在連結後面加入 target=_參數
 
標籤解說：連結的參數並不多，常見的大概就屬 target 這參數了，target 的意思是『目標』，也就是網頁連結的指向目標，這參數在框窗（frame）裡尤為重要！
 
使用範例：
target=框窗名稱：
這在『框架標籤』中也有提到，而且也只有在框架（框窗 or frame）中才用得到。正常而言，框窗有各自的名稱，因此，我們可以利用此標籤，來指定連結的內容顯示到哪一個框窗中。
 
target=_blank：
將連結的畫面內容，開在新的瀏覽視窗中。
 
target=_parent：
將連結的畫面內容，當成文件的上一個畫面。
 
target=_self：
將連結的畫面內容，顯示在目前的視窗中。
 
target=_top：
這個參數可以解決新連結的畫面內容，被舊框窗包圍的困擾，使用這參數，會將整個畫面重新顯示成連結的畫面內容。
4.9 表格標籤 <回細說索引>
【網頁中的表格觀念】
舉個例子來說，如果今天我們要做一個3欄2列的表格，在WORD中，只要設定表格為3欄、2列就完成了，不過，在網頁中做一個3欄2列的表格，可是要分成好幾個步驟的，第一個步驟，利用標籤告訴電腦我要做一個表格；第二個步驟，利用一組標籤先做一個橫列，然後在橫列中利用三組標籤再分出三欄；第三個步驟，重複第二個步驟，再做一橫列然後再分三欄，如此才能得到一個3欄2列的表格。聽不太懂嗎？沒關係，以下咱們就來慢慢的看個仔細：
首先我們來看一個最簡單的表格：
原始碼 呈現結果


1

1
利用這個標籤來告訴電腦，這是一個表格，至於 BORDER=1 這參數是設定此表格的框線粗細為 1。一組是設定一橫列的開始。一組則是設定一個欄位。當然，文字就是要擺在這裡面。
 
現在我們再來增加二個格子：
原始碼 呈現結果


1
2
3

1 2 3
 
看見沒有，沒有增加，卻增加了二組。那如果我要再加上一列呢？很簡單，就像這樣：
原始碼 呈現結果



1
2
3
4
5
6

1 2 3
4 5 6
 
【合併表格欄位】
並非所有的表格都是規規矩矩的只有幾欄、幾列而已，有時候，我們還會希望能夠「合併欄位」，讓表格更美觀、更實用一點，而談到「合併欄位」，我們就必須知道，合併的方向有兩種：一種是上下合併（也就是橫列間的合併），一種是左右合併（也就是直欄間的合併），這兩種合併方式各有不同的屬性設定方法。
 
左右欄位合併：基本上，您的表格已經學會囉！接下來，咱們就來看看，如何將 1、2、3 格通通合併變成一大格：
原始碼 呈現結果



1
4
5
6

1
4 5 6
您應該會發現，怎麼2、3都消失了？只剩下1，而且該欄的標籤還多了一個陌生的臉孔COLSPAN="3"，沒錯，這就是「左右欄位合併」的屬性，COLSPAN="3"的意思就是「這個欄位左右橫跨了3個欄位」，也正因如此，本來的兩個都可以省掉了，因為都被併掉了嘛！
 
上下欄位合併：學會了左右合併！接下來，咱們就來看看，如何上下合併，將 1、4格通通合併變成一大格：
原始碼 呈現結果



1
2
3
5
6

1 2 3
5 6
有了上一次的經驗後，我們就知道，要合併欄位就一定有些欄位會被「犧牲」掉（也就是那些被合併的欄位啦！），這次我們要「上下合併」，我們將1與4合併成一個欄位，那麼被犧牲的是哪一個欄位呢？沒錯就是下面那一個倒楣的4，我們看看上圖，果然4已經刪掉了，而在1的標籤中則多了個生面孔ROWSPAN，這就是「上下欄位合併」的屬性，ROWSPAN=2的意思就是「這個欄位上下連跨了2個欄位」，其結果如下：
 
【表格欄位對齊位置設定】
我可以自己設定表格的大小嗎？當然可以，您可以自由設定表格的「寬」及「高」喔！我們來製作一個寬100、高60的表格，做法如下：
原始碼 呈現結果


1
 1
 
哎呀！怎麼 1 老是在表格的左邊呢？可以弄到中間嗎？當然可以，只要在加入 ALIGN=CENTER 這參數即可：
原始碼 呈現結果


1
 1
此外，利用 ALIGN=RIGHT可以讓表格中物件置右、利用 ALIGN=LEFT可以讓表格中物件置左（預設值），至於為什麼要加在中呢？因為，是一個欄位的意思，我們要指定在這欄位中的東西要置中或置左置右，就必須將ALIGN加在中。
 
既然可以置中，那麼也可以控制表格內文字靠上方、靠下方嗎？可以的，只要利用 VALIGN=TOP 這種屬性即可讓表格內物件靠上方對齊。
原始碼 呈現結果


1
 1
利用VALIGN=MIDDLE可以讓表格中物件垂直置中（預設值），VALIGN=BOTTOM可以H讓表格中物件靠下方。
 
【表格背景、底色設定】
那麼表格可以設定底色嗎？可以的不但表格可以，您也可以指定某欄或某列的顏色，方法和加背景顏色一樣，利用BGCOLOR="顏色碼"就行了。底下是指定整格表格背景顏色的方法：
原始碼 呈現結果



1
2
3
4
 1 2
3 4
將BGCOLOR="顏色碼"加在中，可以指定「一列」的背景顏色：
原始碼 呈現結果



1
2
3
4
 1 2
3 4
將BGCOLOR="顏色碼"加在中，可以指定「一欄」的背景顏色：
原始碼 呈現結果



1
2
3
4
 1 2
3 4
 
表格除了可以設定底色外，也可以用圖片來作背景嗎？當然可以，方法一樣簡單，只要將BACKGROUND="圖片名稱"加到表格中就行了。和表格背景顏色一樣，不但表格可以設定背景圖片，您也可以指定某欄或某列的背景圖片：
原始碼 呈現結果



1
2
3
4
 1 2
3 4
將BACKGROUND="圖片名稱"加在中，可以指定「一欄」的背景顏色：
原始碼 呈現結果



1
2
3
4
 1 2
3 4
 
【表格框線設定】
如何設定表格粗細？只要利用BORDER="粗細值"就行了。
原始碼 呈現結果


1

1
 
如何設定表格顏色？只要利用BORDERCOLOR="顏色碼"就行了。
原始碼 呈現結果


1

1
 
另外，我們也可以設定表格的陰影、亮面顏色，讓表格看起來更有立體感喔！只要利用 BORDERCOLORLIGHT="#顏色碼"（亮面設定） BORDERCOLORDARK="顏色碼"（暗面設定）就行了。
原始碼 呈現結果


1

1
 
【表格欄距設定】
我們可以利用CELLPADDING屬性自由設定表格內文距離格線的距離，這個屬性很好用，保持適當的距離，看起來比較舒服。一般而言內定值為2，不過我建議設定為4比較漂亮。
原始碼 呈現結果


1
2

1 2
 
我們可以利用CELLSPACING屬性設定表格欄位格線之間的距離。一般而言內定值為2，不過我通常習慣設為 0 。
原始碼 呈現結果


1
2

1 2
 
4.10 序列標籤 <回細說索引>
【無序標籤】
序列標籤基本上可分為兩種，一種是「無序條列」，一種是「有序條列」。所謂「無序條列」當然就是意指各條列間並無順序關係，純粹只是利用條列式方法來呈現資料而已，此種無序標籤，在各條列前面均有一符號以示區隔。至於「有序條列」就是指各條列之間是有順序的，從1、2、3…一直延伸下去。
 
我們先來看看「無序列表標籤」如何使用：
原始碼 呈現結果

姓名：傑克昇
生日：1974/11/21
星座：天蠍座
 姓名：傑克昇
生日：1974/11/21
星座：天蠍座
其中
標籤即為「無序列表標籤」，每增加一列內容，就必須加一個
。
 
前面的符號一定是要圓形的嗎？不，我們可以加入TYPE="形狀名稱"屬性來改變其符號形狀，一共有三個選擇：DISK（實心圓）、SQUARE（小正方形）、CIRCLE（空心圓）三種（由於本頁使用CSS故僅於Netscape看得出效果。）：
原始碼 呈現結果

姓名：傑克昇
生日：1974/11/21
星座：天蠍座
 姓名：傑克昇
生日：1974/11/21
星座：天蠍座
 
【有序標籤】
接下來，我們來看看「有序列表標籤」如何使用：
原始碼 呈現結果

姓名：傑克昇
生日：1974/11/21
星座：天蠍座
 姓名：傑克昇
生日：1974/11/21
星座：天蠍座
其中
標籤即為「有序列表標籤」，每增加一列內容，就必須加一個
。
 
和無序列表標籤一樣，我們也可以選擇不同的符號來顯示順序，一樣是用TYPE屬性來作更改，一更有五種符號：1（數字）、A（大寫英文字母）、a（小寫英文字母）、I（大寫羅馬字母）、i（小寫羅馬字母）等五種：
原始碼 呈現結果

姓名：傑克昇
生日：1974/11/21
星座：天蠍座
 姓名：傑克昇
生日：1974/11/21
星座：天蠍座
 
另外，我們亦可指定序列起始的數目，其方法如下：
原始碼 呈現結果

姓名：傑克昇
生日：1974/11/21
星座：天蠍座
 姓名：傑克昇
生日：1974/11/21
星座：天蠍座
 
【定義列表標籤】
接下來我們要說明的這個標籤，是「定義列表標籤」也是屬於序列標籤之一。我們先來舉個例子，我們常常會在文章中看見這樣的格式： CSS（Cascading style sheet） CSS是由W3C於1996年12月所公佈的一項新技術，什麼叫做Cascading style sheet？簡單說來他是一種具有階層性的形式設定，能夠讓網頁設計者在設計網頁時，對於網頁上的任何物件均有更佳的操控性…
網頁裡也有可以做到這種效果的標籤喔！現在要來跟各位說的就是這個標籤。咱們先來看看這標籤的用法：
 
我們先來看看「定義列表標籤」如何使用：
原始碼 呈現結果

小標題
標題的內容說明
 小標題
標題的內容說明
 
4.11 表單標籤 <回細說索引>
【表單的用途】
對於一般的網頁設計初學者而言，表單功能其實並不常用，因為表單通常必須配合著CGI、JAVA Script程式或是ASP程式來運作，不然表單單獨存在的意義並不大。不過，一旦有機會將表單運用到網頁中時，您的網頁將擺脫單向呈現，而開始邁入和使用者互動的階段喔！
本單元純粹以介紹各式表單為主，至於一些CGI或ASP觀念在此我就不提出了，因為提供零碎的觀念，倒不如去看看專門介紹CGI的書籍來的妥當。
【各種輸入類型】
文字輸入列：每個表單之所以會有不同的類型，原因就在於TYPE="表單類型"設定的不同而已，我們就先來看看第一個類型：文字輸入列。文字輸入列的形態就是TYPE="TEXT，其使用方法如下：
呈現結果 姓名： 
原始碼 

姓名：

其有下列可設定之屬性： NAME="名稱"，是設定此一欄位的名稱，程式中常會用到。
SIZE="數值"，是設定此一欄位顯現的寬度。
VALUE="預設內容"，是設定此一欄位的預設內容。
ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
MAXLENGTH="數值"，是設定此一欄位可設定輸入的最大長度。
 
單選核取表單：利用TYPE="RADIO"就會產生單選核取表單，單選核取表單通常是好幾個選項一起擺出來供使用者點選，一次只能從中選一個，故為單選核取表單。
呈現結果 性別：男 女 
原始碼 

性別：
男 
女 

其有下列可設定之屬性： NAME="名稱"，是設定此一欄位的名稱，程式中常會用到。
VALUE="內容"，是設定此一欄位的內容、值或是意義。
ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
CHECKED，是設定此一欄位為預設選取值。
 
複選核取表單：利用TYPE=" CHECKBOX "就會產生複選核取表單，複選核取表單通常是好幾個選項一起擺出來供使用者點選，一次可以同時選好幾個，故為複選核取表單。
呈現結果 喜好： 電影 看書 
原始碼 

喜好：
電影
看書

其有下列可設定之屬性： NAME="名稱"，是設定此一欄位的名稱，程式中常會用到。
VALUE="內容"，是設定此一欄位的內容、值或是意義。
ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
CHECKED，是設定此一欄位為預設選取值。
 
密碼表單：利用TYPE=" PASSWORD "就會產生一個密碼表單，密碼表單和文字輸入表單長得幾乎一樣，差別就在於密碼表單在輸入時全部會以星號來取代輸入的文字，以防他人偷窺。
呈現結果 請輸入密碼： 
原始碼 

請輸入密碼：

其有下列可設定之屬性： NAME="名稱"，是設定此一欄位的名稱，程式中常會用到。
SIZE="數值"，是設定此一欄位顯現的寬度。
VALUE="預設內容"，是設定此一欄位的預設內容，不過呈現出來仍是星號。
ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
MAXLENGTH="數值"，是設定此一欄位可設定輸入的最大長度。
 
送出按鈕：通常我們表單填完之後，都會有一個送出按鈕以及清除重寫的按鈕，分別是利用TYPE=" SUBMIT "及TYPE=" RESET "來產生，相當的簡單易用。
呈現結果 
原始碼 




其有下列可設定之屬性： NAME="名稱"，是設定此一按鈕的名稱。
VALUE="文字"，是設定此一按鈕上要呈現的文字，若是沒有設定，瀏覽器也會自動替您加上「送出查詢」、「重設」等字樣。
ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
 
按鈕元件：表單中或是JAVA SCRIPT常會用到按鈕來作一些效果，因此，我們可以利用TYPE=" BUTTON "來產生一個按鈕，相當簡單。
呈現結果 請按下按鈕： 
原始碼 

請按下按鈕：

其有下列可設定之屬性： NAME="名稱"，是設定此一按鈕的名稱。
VALUE="文字"，是設定此一按鈕上要呈現的文字。
ALIGN="對齊方式"，是設定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
 
隱藏欄位：表單中有時有些東西因為某些因素，不想讓使用者看到，但因程式需要卻又不得不存在，此時，我們就可以利用TYPE=" HIDDEN "來產生一個隱藏的欄位。
呈現結果 隱藏欄位： 
原始碼 

隱藏欄位：

其有下列可設定之屬性： NAME="名稱"，是設定此一欄位的名稱。
VALUE="文字"，是設定此一欄位的值、文字或意義。
 
【大量文字輸入元件】
有時候我們會希望讓使用者輸入比較大量的文字，此時，文字輸入列就顯得不敷使用，因此我們就可以利用來產生一個可以輸入大量文字的元件，夾在兩個標籤中的文字會出現在框框中，可作為預設文字。
呈現結果 請輸入您的意見：

原始碼 

請輸入您的意見：



其有下列可設定之屬性： NAME="名稱"，是設定此一欄位的名稱。
WRAP="設定值"，是設定此一欄位的換行模式。設定值有三種：OFF（輸入文字不會自動換行）、VIRTUAL（輸入文字在螢幕上會自動換行，不過若是使用者沒有自行按下ENTER換行，送出資料時，也視為沒有換行）、PHYSICAL（輸入文字會自動換行，送出資料時，會將螢幕上的自動換行，視為換行效果送出）。
COLS="數值"，是設定此一欄位的行數（橫向字數）。
ROWS="數值"，是設定此一欄位的列數（垂直字數）。
 
【下拉式選單】
下拉式選單令整個網頁看起來有很專業的感覺，我們只要利用便可以產生一個下拉式選單，另外，還需要配合標籤來產生選項，這樣才算完整喔！
呈現結果 您喜歡看書嗎？： 非常喜歡 還算喜歡 不太喜歡 非常討厭 
原始碼 

您喜歡看書嗎？：

非常喜歡
還算喜歡
不太喜歡
非常討厭


其有下列可設定之屬性： SIZE="數值"，是設定此一欄位的大小，預設值為1，若是您的選項有四個，然後您將SIZE設成4，那麼，下拉式選單便會變成選項方塊，將四個選項一起呈現在方塊中。
MULTIPLE，是設定此一欄位為複選，可以一次選好幾個選項。
 
4.12 框架標籤 <回細說索引>
【框架的基本概念】
首先，各位先看看右手邊這張圖，我將利用這張圖來作解說，這樣子，講起來可能會清楚一點。OK！我們可以看見，右邊的這個視窗，一共分為 1 、 2 、 3 三個框架，每一個框架，各有其顯示的內容分別是a.htm、b.htm、c.htm三個檔案。然而左下角的那個 index.htm 是做什麼用的呢？
 
原來，左下角的這個檔案 index.htm，就是要告訴電腦，我們要將畫面分割成這樣，也就是說，所有Frame的標籤，其實都只擺在 index.htm 這個檔案裡。（當然，不是檔名一定要叫做 index.htm 取其他檔名也是可以的。）
 
這樣明白了嗎？總之，您要分割幾個框框，就一定會有幾個對應的html檔案（假如您要分割100個框框，就要有100個html檔就對了。），另外，還會多一個檔案是來告訴電腦要如何分割的。（也就是例中的 index.htm 檔啦！）
【開始分割】
別急、別急，分割視窗可是一門學問，要分割也是要一步一步來的。看看剛剛那例子，想像畫面是一個蛋糕，你要怎麼割，才能割成那樣呢？
原始碼 呈現結果






 
各位會發現，奇怪，在上面的語法中，怎麼都沒見到熟悉的身影？呵呵...沒錯，它已經被待會兒要加進去的標籤給取代了！也就是說，如果我們要分割畫面，就要先用標籤告訴電腦說：『喂！我要開始分割了！』此時，是派不上用場的，所以躲到一旁涼快去了！
 
現在開始動手割割看囉！我們先將畫面分成左右兩邊（左邊就是框窗 1 了，右邊就暫定為 2 等一下還要分割呢！），如下圖：
原始碼 呈現結果










 
在中，我們要告訴電腦到底是要左右分（COLS）？還是上下分（ROWS）。一開始我們是左右分，所以我們寫成。COLS="120,*" 就是說，左邊那一欄強制定為 120點，右邊則隨視窗大小而變。除了直接寫點數外，我們亦可用百分比來表示，例如COLS="20%,80%"也是可以的。
 
然後，再將右邊的框窗再割成上下兩個畫面（也就是框窗 2 和 3 了）。如下圖：
原始碼 呈現結果














 
看見了沒？原本的（在第 3 點的語法中）被另一組所取代了！所以要注意喔！第二組是被第一組所包圍起來的喔！（亂七八糟了對不對？）
 
呵呵...不知不覺就大功告成了，其實只要將最後完成的那些語法存成 index.htm，然後再準備三個檔 a.htm 、b.htm 、c.htm那麼就完工囉！當然，這是一個最陽春的分割法，我會再將一些進階的標籤在底下一一說明。
 
【其他標籤參數說明】

COLS="120,*"
就是垂直切割畫面啦！你可以一次切成左右兩個畫面，當然也可以切成三個，很簡單只要寫成 COLS="30,*,50" （數字隨便您自己調整啦！），依此類推，四個以上當然就是四組數字啦！
 
ROWS="120,*"
就是橫向切割畫面，也就是將畫面上下分開，切法同上。
 
frameborder=0
設定框架的邊框，其值只有 0 和 1 ， 0 就是不要邊框， 1 就是要顯示邊框。邊框是無法調整粗細的。
 
framespacing=5
表示框架與框架間的保留空白的距離，以免看起來太擠。

SRC="a.htm"
設定此框架中要顯示的網頁名稱，每個框架一定要對應一個網頁，否則就會產生錯誤，這裡就是要您填入對應網頁的名稱。（如果該網頁在不同目錄，記得路徑要寫清楚）
 
NAME="1"
設定這個框架的名稱，這樣才能指定框架來作連結，所以一定要設定喔！當然名稱隨你高興取名。
 
frameborder=0
設定框架的邊框，其值只有 0 和 1 ， 0 就是不要邊框， 1 就是要顯示邊框。邊框是無法調整粗細的。
 
scrolling="no"
設定是否要顯示捲軸，YES是要顯示捲軸，NO是無論如何都不要顯示，AUTO是視情況顯示。
 
noresize
設定不讓使用者可以改變這個框框的大小，如果沒有設定這個參數，使用者可以很容易的拉動框架，改變其大小。
 
marginhight=2
表示框架高度部份邊緣所保留的空間。
 
marginwidth=2
表示框架寬度部份邊緣所保留的空間。
【相關用法】
◆ 
使用方法：請換有支援Frame功能的瀏覽器
 
標籤解說：有些瀏覽器較為老舊，無法顯示Frame的功能，因此，就要使用此標籤，讓這些網友知道，該換換瀏覽器了。或者，你也可以在這標籤中，擺上沒有Frame語法的網頁標籤，那麼，沒有支援Frame功能的瀏覽器，便會自動顯示沒有Frame語法的網頁。
◆ target=框窗名稱
使用方法：顯示內容
 
標籤解說：常常有一個情況是，我想在框窗 1 的地方按下連結，但是希望他的內容出現在框窗 3 中（請參照上面那個圖），那應該如何寫呢？就像上面加個 target=框窗名稱 就行啦！
◆ target=_top
使用方法：奇摩站
 
標籤解說：有時候，在框窗裡會連結到別的站，卻發現，新連結的這個站，竟然被框窗包住了，不但難看，而且可能會吃上官司說！所以，這時候你必需加入 target=_top這個參數，那麼，這個新連到的網站，就會重新佔據整個螢幕啦！
4.13 其他技巧 <回細說索引>
■ 網頁配色及背景音樂
首先是網頁的底色，通常是白白的，要怎麼做變化呢？可以做自己的背景圖片。
要注意一點，如果背景和文字顏色一樣～或者顏色相近，天啊～那誰知道你在寫什麼呀？最好文字與背景顏色有對比，像敝人當初，網頁背景是黑的，字是白的紅的，就可以很明顯的突顯出文字。如果圖片中有文字，也要盡量淡化，否則影響內容就不好囉！
內容的東西顏色要配的適宜（除非你想要有奇怪的風格），不然像背景大紅大紅，太刺眼了，有人會想去嗎？剩下的就讓您自己配配看吧！
然後是音樂，有人喜歡用bgsound標籤

可是用NetScape看就沒有聲音了最好用embed標籤 
這樣就可以正常播放了唷～
■ 首頁應有的特質及重要性
About Open Page：打開browser看到網站的第一個部份，有人稱之為Open Page(通常是首頁的一半或三分之一)，這個部份應該包含網站的主功能(亦即使用者上這個網站最希望或者最可能做的事)，ex. 一進入Allproducts.com即可看到「Key word search」及「Search by category」，應該儘量避免讓使用者還要使用mouse上下左右拉才能看到他(她)所想要的功能或資訊，有時資訊太多，在不得已的情況下，頁面可以往下沿申，但切忌右左劃面過大，不符一般人的使用習慣，也會造成列印上的困擾。
主題明確：Open Page應包含公司Logo、網站主題(最好是一段簡短的Slogan，讓使用者一看就知道這個網站主要功能或架站目的,ex. Allproducts.com上的The world's best products directory for volume buyers)
Navigation：讓使用者很明確了解他(她)目前在網站的什麼地方(或功能)，首頁上應該有主要功能的連結，各個icon如果可能的話，儘可能加上一些純文字的說明及link；至於icon或者link的擺放亦應有其相對應的邏輯，如與整個網站或大架構較為相關的，放在較外層，與目前執行的功能或頁面較為相關的link應該放在內層；另外，最好能在首頁上提供Site Map的連結，讓使用者可以很快了解網站的架構；所有的link應該把握 intuitive , obvious , fast的原則。
Color or image：對於顏色的採用，應該考慮到該網站的特性及與其它相關網站的區別，特別是首頁的顏色配置，應該讓使用者感覺很舒服、沒有壓迫感，但又不失其專業性，但切忌過度追求美感而犧牲其功能性，就公司目前的網站設計理念，應該是功能性的考量優於純美術的考量，首頁的設計最好設定在60k以內，而且不要用太多層的table。
Meta tag：該部份不會出現在前端的頁面上，但網站規劃時應該將該部份一併考量，做為網站登錄時使用，網站上線時務必將相關資料加入。
其它：首頁上應該有service account 及 聯絡資料
■ Meta Tag 的簡介
一般常用的格式如下：

這雖說不是meta的一部份，但是也不可忽略，總長度不要超過85個Character (約10個字)。

說明網站的格式及編碼方式，另外這個功能也可以拿來說明網站的名稱。

剷明整個網站的關鍵字，關鍵字間用逗點隔開，總長度最好不要超過1000個Character (約44個字)。

剷明整個網站為何吸引人的地方，可用逗點隔開，總長度最好不要超過200個Character (約15個字)，若文章真的太長，可以切割成兩個部分，較不重要的部分置入下一個Description。

此功能是要給搜尋引擎使用的，是要用來告訴Spider哪些網頁是要去擷取的或不用去擷取的，一般都設定成All(內定值)。