字體標(biāo)簽：教導(dǎo)您設(shè)定文字的字體。
文字標(biāo)簽：教導(dǎo)您設(shè)定文字的顏色、行距、變化.....等等。
影像標(biāo)簽：教導(dǎo)您如何在網(wǎng)頁中，植入圖像。
背景標(biāo)簽：教導(dǎo)您如何設(shè)定背景顏色或是背景圖像。
連結(jié)標(biāo)簽：教導(dǎo)您如何設(shè)定超連結(jié)，以及開視窗的條件。
表格標(biāo)簽：教導(dǎo)您如何在網(wǎng)頁中運(yùn)用表格。
序列標(biāo)簽：教導(dǎo)您如何設(shè)定文字序列或圖形序列。
表單標(biāo)簽：教導(dǎo)您如何制作可填寫用的表單。
框架標(biāo)簽：可讓同一個視窗由多個網(wǎng)頁一起組成。
其他技巧：讓您的整個網(wǎng)頁背景可以讓您設(shè)定為圖片或是聲音。
4.1 網(wǎng)頁架構(gòu) <
回細(xì)說索引>
<HTML>
<HEAD>
<TITLE>網(wǎng)頁制作教學(xué)</TITLE>
<Meta>
</HEAD>
<BODY>
BODY之間則為主要語法所在，也是網(wǎng)頁的主要呈現(xiàn)部分。
</BODY>
</HTML>
【標(biāo)簽解說】
以上看到的就是一篇最簡單架構(gòu)的網(wǎng)頁。沒錯，網(wǎng)頁其實(shí)就是一堆標(biāo)簽（所謂標(biāo)簽就是指被<>包起來的語法）集合起來的，透過瀏覽器的消化整理，就便成了美侖美奐的網(wǎng)頁了。
簡單而言，通常一份完整的網(wǎng)頁包含了二個部份：抬頭（HEAD）、文件本體（BODY）。也就是各位在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。
在抬頭的部份<HEAD></HEAD>中，有另一組標(biāo)簽<TITLE></TITLE>。打在<TITLE></TITLE>這里面的文字會出現(xiàn)在瀏覽器視窗最上頭藍(lán)色部份里，當(dāng)作一篇網(wǎng)頁的主題。
您可能會發(fā)現(xiàn)，為什么我一直沒提到<HTML></HTML>這一組標(biāo)簽，嗯！因?yàn)樗捎锌蔁o。這一組標(biāo)簽是告訴瀏覽器說：我是一份HTML文件喔！也就是說它是一個網(wǎng)頁的格式啦！通常都包在網(wǎng)頁的最上下兩端，將所有的原始碼都包起來。
4.2 分隔標(biāo)簽 <
回細(xì)說索引>
【文字上的分隔標(biāo)簽】
或許你已經(jīng)發(fā)現(xiàn)這個問題了：天??！我不是在記事本里排版排得很漂亮，為何透過瀏覽器看起來一切都走了樣？對?。e太訝異，在網(wǎng)頁的編排里，并不像漢書或WORD一樣，只要拼命按Enter鍵或空白鍵，便能完成分段或分行，因?yàn)?，HTML語言是不認(rèn)識我們所謂的Enter鍵或空白鍵，所以不管您按了多少次的空白或Enter，瀏覽器都會當(dāng)作沒看見啦！
使用方法：強(qiáng)制斷行標(biāo)簽<br>、強(qiáng)制分段標(biāo)簽<p>
標(biāo)簽解說：我們在寫文章時，有時候在特定的地方會強(qiáng)迫斷行（<br>），或是在寫完某一段的時候便會分段（<p>），寫網(wǎng)頁也一樣，而且更需要斷行及分段的功能，以免整個網(wǎng)頁看起來亂糟糟的。
使用范例： 原始碼 呈現(xiàn)結(jié)果
這是一個斷行的范例<br>看出來了嗎？ 這是一個斷行的范例
看出來了嗎？
這是一個分段的范例<p>基本上他會比斷行還多空出一行 這是一個分段的范例
基本上分段會比斷行還多空出一行
【分隔線標(biāo)簽】
使用方法：上一段文字內(nèi)容<hr>下一段文字內(nèi)容
標(biāo)簽解說：利用<hr>這個標(biāo)簽便可產(chǎn)生一條橫分隔線。另外，其有些屬性分別說明如下：
使用范例：
一般用法 尚未加任何屬性。
原始碼 普通分隔線<hr>
呈現(xiàn)結(jié)果 普通分隔線
顏色屬性 用法：<hr color="顏色碼或顏色名稱">
原始碼 橘色分隔線<hr color="#ff8000">
呈現(xiàn)結(jié)果 橘色分隔線
寬度屬性 用法：<hr width="寬度">，其單位為px（像素），寬度亦可用百分比來作設(shè)定，如50%即意為寬度占螢?zāi)?0%。
原始碼 寬度為240px的分隔線<hr width="240">
呈現(xiàn)結(jié)果 寬度為240px分隔線
厚度屬性 用法：<hr size="厚度">
原始碼 厚度為5的分隔線<hr size="5">
呈現(xiàn)結(jié)果 厚度為5分隔線
位置屬性 用法：<hr align="水平對齊位置">，其設(shè)定值有三個，也就是置左align="left"、置中align="center"、置右align="right"
原始碼 靠右的分隔線<hr align="right">
呈現(xiàn)結(jié)果 靠右的分隔線
陰影屬性 用法：<hr noshade>，無設(shè)定值，只要將 noshade 加入即可，通常會配合顏色設(shè)定，效果較佳。
原始碼 實(shí)心分隔線（無陰影）<hr noshade>
呈現(xiàn)結(jié)果 實(shí)心分隔線（無陰影）
4.3 排版標(biāo)簽 <
回細(xì)說索引>
【文字置左、置中、置右】
使用方法：老實(shí)說，剛剛我們學(xué)過的分段標(biāo)簽<p>再加上一些簡單的屬性設(shè)定，就可以讓其整個文字段落置左、置中或置右了，就如下表所示：
原始碼 呈現(xiàn)結(jié)果
<p align="left">文字靠左</p> 文字靠左
<p align="center">文字置中</p> 文字置中
<p align="right">文字靠右</p> 文字靠右
標(biāo)簽解說：嗯！秘訣就在于“align=對齊位置”而已啦！align是分段標(biāo)簽<p>的屬性之一，這個屬性將來會常常在不同標(biāo)簽中看到，它的功能是專門在設(shè)定“水平對齊位置”，其常見的設(shè)定值有三個，也就是置左（align="left"）、置中（align="center"）、置右（align="right"）。
【置中標(biāo)簽】
使用方法：<center>這是置中</center>
標(biāo)簽解說：這個標(biāo)簽是最常用到的標(biāo)簽了，除了文字，對于圖片、表格，任何可以顯現(xiàn)在網(wǎng)頁上的東西都可以置中喔！
使用范例： 原始碼 呈現(xiàn)結(jié)果
<center>這是最中間</center> 這是最中間
【向右縮排標(biāo)簽】
使用方法：<blockquote>要縮排的文字</blockquote>
標(biāo)簽解說：利用<blockquote></blockquote>這個標(biāo)簽可以將其包起來的文字，全部往右縮排。而且加一組標(biāo)簽，往右縮排一單位，加兩組標(biāo)簽，往右縮排兩單位，依此類推。
使用范例： 原始碼 呈現(xiàn)結(jié)果
<blockquote>縮排1單位</blockquote> 縮排1單位
<blockquote><blockquote>縮排2單位</blockquote></blockquote> 縮排2單位
【保存原始格式標(biāo)簽】
使用方法：<pre>文字內(nèi)容<pre>
標(biāo)簽解說：利用<pre></pre>這個標(biāo)簽可以將其包起來的文字排版、格式，原封不動的呈現(xiàn)出來。算是相當(dāng)好用的標(biāo)簽之一。
使用范例： 原始碼 呈現(xiàn)結(jié)果
<pre>
文 字
格 式
</pre> 文 字 格 式
4.4 字體標(biāo)簽 <
回細(xì)說索引>
【標(biāo)題標(biāo)簽】
使用方法：<h1>標(biāo)題內(nèi)容</h1>
標(biāo)簽解說：標(biāo)題的大小一共有六種，兩個標(biāo)簽一組，也就是從<h1>到<h6>，<h1>最大，<h6>最小。使用標(biāo)題標(biāo)簽時，該標(biāo)簽會將字體變成粗體字，并且會自成一行。
使用范例：
原始碼 呈現(xiàn)結(jié)果
<h1>標(biāo)題一</h1> 標(biāo)題一
<h2>標(biāo)題二</h2> 標(biāo)題二
<h3>標(biāo)題三</h3> 標(biāo)題三
<h4>標(biāo)題四</h4> 標(biāo)題四
<h5>標(biāo)題五</h5> 標(biāo)題五
<h6>標(biāo)題六</h6> 標(biāo)題六
【設(shè)定字體大小標(biāo)簽】
使用方法：<font size=3>文字內(nèi)容</font>
標(biāo)簽解說：標(biāo)題的大小一共有七種，也就是<font size=1>（最?。┑?lt;font size=7>（最大），另外，還有一種寫法：<font size=+1>文字內(nèi)容</font>，其意思就是說：比預(yù)設(shè)字大一級。當(dāng)然也可以 font size=+2（比預(yù)設(shè)字大二級），或是 font size=-1（比預(yù)設(shè)字小一級），以一般而言，預(yù)設(shè)字體多為 3。
使用范例：
原始碼 呈現(xiàn)結(jié)果
<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> 字體七
【字型變化標(biāo)簽】
使用方法：<b>文字</b>
標(biāo)簽解說：在文字標(biāo)簽里，對于文字的格式也有相當(dāng)多的變化，如粗體、斜體...等，此外，也定義了一些現(xiàn)成的格式供編者使用，如‘強(qiáng)調(diào)’、‘原始碼’...等，當(dāng)然，這只是方便您參考用，并無強(qiáng)迫說遇到原始碼就要加上‘原始碼’的標(biāo)簽。
使用范例：
原始碼 呈現(xiàn)結(jié)果
<b>粗體</b> 粗體
<i>斜體</i> 斜體
<u>底線</u> 底線
<sup>上標(biāo)</sup> 上標(biāo)
<sub>下標(biāo)</sub> 下標(biāo)
<tt>打字機(jī)</tt> 打字機(jī)
<blink>閃爍</blink>（ie沒效果） 閃爍
<em>強(qiáng)調(diào)</em> 強(qiáng)調(diào)
<strong>加強(qiáng)</strong> 加強(qiáng)
<samp>范例</samp> 范例
<code>原始碼</code> 原始碼
<var>變數(shù)</var> 變數(shù)
<dfn>定義</dfn> 定義
<cite>引用</cite> 引用
<address>所在地址</address> 所在地址
【文字顏色設(shè)定】
使用方法：<font color="#fefecb">文字顏色</font>
標(biāo)簽解說：文字也可以設(shè)定 顏色喔！至于顏色有哪些....這....哪天我心血來潮再來做個色彩對應(yīng)表吧！
使用范例：
原始碼 呈現(xiàn)結(jié)果
<font color="#ff0000">紅</font> 紅色的字喔！
<font color="#ff8000">橙</font> 橙色的字喔！
<font color="#ffff00">黃</font> 黃色的字喔！
<font color="#00ff00">綠</font> 綠色的字喔！
<font color="#0080ff">藍(lán)</font> 藍(lán)色的字喔！
<font color="#0000a0">靛</font> 靛色的字喔！
<font color="#8000ff">紫</font> 紫色的字喔！
<font color="#000000">黑</font> 黑色的字喔！
<font color="#c0c0c0">灰</font> 灰色的字喔！
4.5 文字標(biāo)簽 <
回細(xì)說索引>
【文字字型設(shè)定】
使用方法：<font face="字型名稱">文字</font>
標(biāo)簽解說：網(wǎng)頁上也可以使用字型喔！唯一的一個限制是：對方也要有該字型！否則看到的仍然還是宋體。另外要說明的是，這個標(biāo)簽并無法保證在每個瀏覽器上都能正常的顯現(xiàn)，不過這并沒有關(guān)系，看不到特殊的字型時，瀏覽器仍會以宋體來顯示，所以不用怕會一團(tuán)亂！
另外，如果您的網(wǎng)頁中有加上這一行敘述<meta http-equiv="content-type" content="text/html;charset=big5">（指定網(wǎng)頁的語言格式，以后我會解釋），那么，netscape可以正確顯示出中文，但英文無反應(yīng)。若沒有加該行，那么英文會正確顯示，但中文卻仍是宋體。至于 ie 系列，均能正常顯示。
使用范例：
原始碼 呈現(xiàn)結(jié)果
<font face="楷體_GB2312">楷體_GB2312</font> 楷體_GB2312
<font face="華康儷中黑">華康儷中黑</font> 華康儷中黑
【特殊字元】
使用方法：
標(biāo)簽解說：很多特殊的符號是需要特別處理的，比如說" < "、" > "這兩個符號若想要呈現(xiàn)在網(wǎng)頁上是沒有辦法直接打" < "的，要呈現(xiàn)" < "必須輸入編碼表示法：“<”，常用的如下：
使用范例：
原始碼 呈現(xiàn)結(jié)果
( 代表一個不斷行空白)
< <
> >
& &
" "
【設(shè)定文字內(nèi)定值大小】
使用方法：<basefont size="1~7">
標(biāo)簽解說：這個標(biāo)簽可以改變文字大小的內(nèi)定值，直接加在<body>標(biāo)簽之后就行了。一般而言，若是沒有特別設(shè)定，文字大小內(nèi)定值預(yù)定值為3。
4.6 影像標(biāo)簽 <
回細(xì)說索引>
【影像標(biāo)簽】
在使用影像標(biāo)簽時有兩件事值得注意一下，一是檔名，二是路徑。首先要注意的就是，檔名是否正確以及大小寫是否一致！圖檔名稱不正確，任電腦再厲害也找不到您要的圖，檔名大小寫不一致，如Image.gif、image.gif、image.GIF在自己的電腦中看都能正確的顯示，但是一但傳到網(wǎng)路上去時，因?yàn)橄到y(tǒng)不一樣的關(guān)系（電腦伺服器的作業(yè)系統(tǒng)可比個人用電腦的作業(yè)系統(tǒng)嚴(yán)謹(jǐn)多了）就變成三個不一樣的檔案了，所以，可別忽略檔名大小寫不一致的影響。
另外一個就是路徑問題了，這個問題也不難，我們在稍后會提到。我們先來看看影像的標(biāo)簽如何寫。
使用方法：<img src="boy.gif" alt="本站特約模特兒" align=right border=0 hspace=2 vspace=2 height=56 width=32>
標(biāo)簽解說：目前常見的網(wǎng)頁圖形格式有兩種就是gif及jpg兩種格式。gif格式只有256色，不過色彩比較鮮艷干凈漂亮，適合電腦美工圖案。而jpg格式的圖案是全彩失真壓縮，比較適合一大堆顏色的圖片，如照片就較適合用jpg格式來呈現(xiàn)。
使用范例：
基本用法 用法：<img src="圖檔名稱、路徑">
顯示圖片最基本的方法（就是不加任何屬性啦！）其中 boy.gif 就是圖檔的檔名。
原始碼 <img src="images/G-FASE4.GIF">嗨！我是本站的模特兒喔！
呈現(xiàn)結(jié)果
嗨！我是本站的模特兒喔！
長寬設(shè)定 用法：<img src="圖檔" height="高度" width="寬度">
設(shè)圖片的大小，其實(shí)不用設(shè)也可以，但是有設(shè)更好，可以加快瀏覽速度，因?yàn)闉g覽器就不用在那邊花時間算您的圖片有多大啦！此外您也可以自己隨意設(shè)定圖片大小。
原始碼 <img src="images/G-FASE4.GIF" height=32 width=32>
呈現(xiàn)結(jié)果
加上說明 用法：<img src="圖檔" alt="說明文字">
滑鼠一到圖上時，說明文字就會自動出現(xiàn)。此外，在圖片未顯示出來或顯示不出來時，也會以這一段字代替，讓使用者知道這個未顯示出來的圖片究竟是干嘛用的。
原始碼 <img src="images/G-FASE4.GIF" alt="本站特約模特兒">移到圖上看看。
呈現(xiàn)結(jié)果
移到圖上看看。
圖片位置 用法：<img src="圖檔" align="位置">
圖片位置設(shè)定！可以靠左放：align=left、靠上align=top、靠下align=bottom、垂直置中align=middle，其中靠左放可以造成‘文繞圖’的效果。
原始碼 <img src="images/G-FASE4.GIF" align=right>嗨！我往右邊靠！
呈現(xiàn)結(jié)果
嗨！我往右邊靠！
原始碼 <img src="images/G-FASE4.GIF" align=left>嗨！我往左邊靠！
呈現(xiàn)結(jié)果
嗨！我往左邊靠！
原始碼 <img src="images/G-FASE4.GIF" align=top>文字對齊我頭頂！
呈現(xiàn)結(jié)果
文字對齊我頭頂！
原始碼 <img src="images/G-FASE4.GIF" align=bottom>文字對齊我腳底！
呈現(xiàn)結(jié)果
文字對齊我腳底！
原始碼 <img src="images/G-FASE4.GIF" align=middle>文字對齊我中間！
呈現(xiàn)結(jié)果
文字對齊我中間！
原始碼 <img src="images/G-FASE4.GIF" align=absmiddle>文字對齊我絕對中間！
呈現(xiàn)結(jié)果
文字對齊我絕對中間！
邊框設(shè)定 用法：<img src="圖檔" border="邊框粗細(xì)">
設(shè)定邊框大小，通常都設(shè)成 0 感覺比較美觀啦！因?yàn)閮?nèi)定的框框?qū)嵲谑遣辉趺雌?...。尤其在連結(jié)時，設(shè)框框簡直是丑斃了...。
原始碼 <img src="images/G-FASE4.GIF" border="4">
呈現(xiàn)結(jié)果
左右間距 用法：<img src="圖檔" hspace="離左右物件的距離">
離文字的水平距離，通常多少也設(shè)一點(diǎn)，以免靠文字太近，看起來才不會有太擠的感覺。
原始碼 左邊的字<img src="images/G-FASE4.GIF" hspace="15">右邊的字
呈現(xiàn)結(jié)果 左邊的字
右邊的字
上下間距 用法：<img src="圖檔" vspace="離上下物件的距離">
離文字的垂直距離，通常多少也設(shè)一點(diǎn)，以免靠文字太近，看起來才不會有太擠的感覺。
原始碼 上面的字<br><img src="images/G-FASE4.GIF" vspace="15"><br>下面的字
呈現(xiàn)結(jié)果 上面的字
下面的字
由于此網(wǎng)頁有用css控制版面圖文，故在netscape下觀看，會稍有不正確。
【網(wǎng)頁影像重要觀念】
關(guān)于路徑：現(xiàn)在我們來談?wù)剤D片路徑的事，路徑不對，不管您的網(wǎng)頁名稱寫的多正確也沒用，因?yàn)闉g覽器無法尋著您的路徑去找到該有的圖片，所以，我們來看看該如何正確的使用路徑。有些人并不喜歡將網(wǎng)頁及圖通通放在同一個目錄下，比如說有人將圖檔全放在c:\images里，而網(wǎng)頁檔放在c:\demo里，這樣子的話，我們該如何正確的寫圖片的路徑呢？我將幾種常見的情形整理成下表：
html檔的位置 圖檔的位置 寫法 情形說明
c:\demo c:\demo <img src="tad.gif"> 圖文均在同一目錄
c:\demo c:\demo\images <img src="images/tad.gif"> 圖在網(wǎng)頁下一層目錄
c:\demo c:\ <img src=" ../tad.gif"> 圖在網(wǎng)頁上一層
c:\demo c:\image <img src=" image/tad.gif"> 圖文在同一層但不同目錄
或許有人看到不明就理，我來說明一下，“../”是回到上一層目錄的意思?！癷mages/”則是進(jìn)入下一層目錄image之意，而“images/”的意思就是，回到上一層目錄，然后再進(jìn)入目錄images中。以上我們使用的均為“相對路徑”的概念。
影像單位：或許您會常?？吹絧x這個單位，沒錯，這是我們在制作最常用的一個單位了。這個單位完整的寫法是“pixels”，我們稱之為“像素”。像素，是螢?zāi)簧系囊粋€小光點(diǎn)，然而這一小光點(diǎn)的大小，并非是固定的，舉個例子而言，螢?zāi)槐旧硎宕?，不會因?yàn)槟愕娜魏卧O(shè)定而變成十七寸。但是，其解析度是可以改變的，我們常見的解析度有以下幾種：“640 ×480”、“800 ×600”、“1024 ×768”。舉其中之一的640 ×480來說，其代表的就是在螢?zāi)簧嫌袑?40個光點(diǎn)，高有480光點(diǎn)，若是我們將解析度調(diào)整為800 ×600其寬勢必要從640變成800個光點(diǎn)，也因此，該光點(diǎn)便會變小一點(diǎn)，所以，我們看起來就會覺得解析度調(diào)高后，螢?zāi)粌?nèi)的東西，變得小小的，很精致，那就是因?yàn)楣恻c(diǎn)變小的原因。
影像格式：網(wǎng)頁用的圖檔目前只有g(shù)if格式（即副檔名為gif的圖檔，如：bg.gif）以及jpg格式（即副檔名為jpg的圖檔，如：bg.jpg）為一般的瀏覽器所接受。其他如bmp格式或是pcx格式都是無法在網(wǎng)頁上使用的，若非得要用，那就利用影像繪圖軟體來作格式的轉(zhuǎn)換吧！
圖檔范例 說明
gif格式的圖形只能以256個顏色顯示，雖然其色彩較少，但顏色鮮艷亮麗，若是圖形顏色不多，用gif格式存檔會較漂亮。
jpg格式的圖形是以全彩顯示，適合用在相片或是漸層顏色的圖片上，壓縮比例以75%為適中。
4.7 背景標(biāo)簽 <
回細(xì)說索引>
【背景標(biāo)簽】
說穿了，背景標(biāo)簽只有<BODY>這個標(biāo)簽，其余的效果，只要加上一些簡單的屬性便可做到。
使用方法：<body bgcolor="#ffffff" background="bg.jpg">
標(biāo)簽解說：這個標(biāo)簽其實(shí)應(yīng)該老早就要講了，畢竟它是構(gòu)成網(wǎng)頁不可或缺的基本要素之一（哎哎哎...現(xiàn)在放馬后炮有什么用?。?。我們背景顏色或圖片的設(shè)定以及連結(jié)字體的顏色，通通都放在<body>這標(biāo)簽里面。我就其屬性來一一解說： 背景顏色 用法：<body bgcolor="顏色碼">
設(shè)定背景顏色。有人會說：‘我已經(jīng)設(shè)定了背景圖片，那背景顏色還有用嗎？’當(dāng)然有用！當(dāng)使用者連結(jié)到貴站時，若背景圖案還沒傳輸完之前（有的背景圖蠻大的），就會先顯現(xiàn)背景顏色，您說，是不是比一片灰灰的好看多了呢！
原始碼 <html>
<head>
<title>這是標(biāo)題</title>
</head>
<body bgcolor="#f9e6a2">
這里是本文區(qū)
</body>
</html>
呈現(xiàn)結(jié)果
按下此處觀看結(jié)果背景圖案 用法：<body background="圖檔名稱、路徑">
g設(shè)定背景圖案。圖檔可以是jpg或gif格式的圖檔，我建議：圖檔不要太大，否則網(wǎng)頁載入會蠻慢的。
原始碼 <html>
<head>
<title>這是標(biāo)題</title>
</head>
<body background="bg.jpg">
這里是本文區(qū)
</body>
</html>
呈現(xiàn)結(jié)果
按下此處觀看結(jié)果【內(nèi)文、連結(jié)文字顏色設(shè)定】
使用方法：<body text="#000000" link="#0000ff" vlink="#ff00ff" alink="#ff0000>
標(biāo)簽解說：用字體標(biāo)簽中的顏色屬性，可以設(shè)定文字的顏色，不過，卻沒有提到文字的顏色內(nèi)定值該如何修改，這個<body>標(biāo)簽中，便有設(shè)定內(nèi)文、連結(jié)等文字的顏色內(nèi)定值功能。用法如下：
內(nèi)文顏色 用法：<body text="顏色碼">
設(shè)定一般文字顏色，也就是說，若沒有特別去設(shè)定文字顏色的話，瀏覽器就會自動顯現(xiàn)您所設(shè)定的顏色。
原始碼 <html>
<head>
<title>這是標(biāo)題</title>
</head>
<body text="#0906a2">
這里是本文區(qū)
</body>
</html>
呈現(xiàn)結(jié)果
按下此處觀看結(jié)果連結(jié)顏色 用法：<body link="顏色碼">
設(shè)定“連結(jié)”的顏色。只要是有連結(jié)的地方就會出現(xiàn)你指定的顏色，當(dāng)然，如果按下連結(jié)后，那又會變成另一個顏色了，這底下會說明。
原始碼 <html>
<head>
<title>這是標(biāo)題</title>
</head>
<body link="#ff6600">
<a href="index.htm">連結(jié)文字</a>
</body>
</html>
呈現(xiàn)結(jié)果
按下此處觀看結(jié)果（設(shè)定連結(jié)為橘色）
連結(jié)時顏色 用法：<body alink="顏色碼">
設(shè)定“按下連結(jié)”的顏色，也就是當(dāng)您滑鼠按下那連結(jié)的瞬間所呈現(xiàn)的顏色。
原始碼 <html>
<head>
<title>這是標(biāo)題</title>
</head>
<body alink="#0099ff">
<a href="index.htm">連結(jié)中文字</a>
</body>
</html>
呈現(xiàn)結(jié)果
按下此處觀看結(jié)果（滑鼠點(diǎn)下連結(jié)瞬間才會出現(xiàn)我們設(shè)定的淺藍(lán)色）
已連結(jié)顏色 用法：<body vlink="顏色碼">
設(shè)定“按下鏈結(jié)后”的顏色，也就是如果該連結(jié)已經(jīng)有被按過了，那么就會呈現(xiàn)的顏色。如此的做法，是要讓使用者容易識別到底哪些連結(jié)有去過了，哪些沒去過。
原始碼 <html>
<head>
<title>這是標(biāo)題</title>
</head>
<body vlink="red">
<a href="demo1-10-6.htm">連結(jié)文字</a>
</body>
</html>
呈現(xiàn)結(jié)果
按下此處觀看結(jié)果（設(shè)定已執(zhí)行過的連結(jié)以紅色顯示）
4.8 連結(jié)標(biāo)簽 <
回細(xì)說索引>
【】
連結(jié)基本概念：一般而言，所謂連結(jié)就是，在網(wǎng)頁中有些字會有特別的顏色，而且字的底下會有條線，當(dāng)游標(biāo)移到那些字上時，會變成手指形狀，按下去，則會連到別的文章或網(wǎng)站，
就像這樣（以上這段是給超級新手看的...）。
扯到連結(jié)，最基本來看有‘內(nèi)部連結(jié)’及‘外部連結(jié)’，所謂‘內(nèi)部連結(jié)’就是自己網(wǎng)站間網(wǎng)頁的連結(jié)，至于外部連結(jié)我們稍后再來討論。
要了解內(nèi)部連結(jié)，首先必須先了解一下這兩種東西，一個是‘相對路徑’，一個是‘絕對路徑’。
現(xiàn)在假設(shè)一個情形：我們在自己的電腦里設(shè)計(jì)網(wǎng)頁，所有網(wǎng)頁相關(guān)的檔案我們通通放在 c:\www 里面，現(xiàn)在假設(shè) c:\www 里面目前有 index.htm 、 text1.htm 、 p1.gif 、 p2.gif 這四個檔案。ok！
現(xiàn)在我們想在 index.htm 里面設(shè)一個連結(jié)，能夠按一下就連到 text1.htm，那我們該怎么做呢？基本上，有兩中方式可以做到，在 index.htm 里面加上下面任一敘述：
<a href="/c|/www/text1.htm"> 這就是‘絕對路徑’
<a href="text1.htm"> 這就是‘相對路徑’
瞧出什么端倪了沒有？嗯嗯....沒錯，‘絕對路徑’要給電腦一個非常詳盡的位置，讓電腦尋著這路徑去找到檔案。而‘相對路徑’就簡單多啦！如果沒有特別指定，他就會直接在 index.htm 的所在目錄下找，也就是在 c:\www 底下去找text1.htm。
如果說，今天我們將 c:\www 里所有的檔案都上傳到網(wǎng)路上的網(wǎng)頁伺服器（總不能做好了只給自己看吧?。以撍欧魇莿e人的電腦，而非你自己架設(shè)的主機(jī)，那么問題就來了！你猜，哪一種連結(jié)會出問題？呵呵...答案是‘絕對路徑’，您猜對了嗎？
為什么說‘絕對路徑’會出問題呢？因?yàn)?，?dāng)您將檔案上傳到網(wǎng)路上時，您的整個網(wǎng)頁目錄架構(gòu)一定會變，到時候，電腦可能找不到 c:\ （尤其是unix系列的主機(jī)）更可能找不到 www 這目錄（有些會規(guī)定要放在特定的目錄下才能顯示網(wǎng)頁），所以說，沒事的話，盡量用‘相對路徑’來作連結(jié)吧！好寫又不容易出錯。
另外一個情形是：為了整理方便，有些網(wǎng)友喜歡將圖檔通通放到同一個目錄下，如：c:\www\gif\ 底下放進(jìn)了p1.gif 、 p2.gif兩個圖，而index.htm 、 text1.htm 依舊在 c:\www 底下?，F(xiàn)在我們想在 index.htm 下設(shè)個連結(jié)到 p1.gif 這圖檔（連結(jié)不限于只能連html檔，圖檔、文字檔均可），那我們又該如何來使用‘相對路徑’呢？他們又不在‘同一個目錄’下...？
<a href="/c|/www/gif/p1.gif"> 這是‘絕對路徑’的寫法
<a href="gif/p1.gif"> 這是‘相對路徑’的寫法
如何？不難吧?。ㄖ皇亲钟悬c(diǎn)多，看到腦子發(fā)脹）
總整理：很亂嗎？嗯...看看這表，或許會清楚些。
相對路徑表示方式 代表連結(jié)位置
<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:\底下了）
【】
使用方法：
先在欲連結(jié)處作記號：<a name="here1">這里是你想連結(jié)的點(diǎn)</a>
設(shè)定連結(jié)：<a href="#here1">連結(jié)</a>
標(biāo)簽解說：有時候，當(dāng)某頁的內(nèi)容很多時，我們可以利用網(wǎng)頁的內(nèi)部連結(jié)，來使使用者快速的找到資料。其原理不過是：在欲連結(jié)處做個記號（網(wǎng)頁的任何地方都可以喔！），然后，連結(jié)時就尋這記號，就可以快速找到資料。很簡單吧！
使用范例：
范例 第一步驟 第二步驟
www連結(jié)標(biāo)簽基本概念 <a name="m1">欲連結(jié)的位置</a> <a href="#m1">www連結(jié)標(biāo)簽基本概念</a>
網(wǎng)頁內(nèi)部的連結(jié) <a name="m2">欲連結(jié)的位置</a> <a href="#m2">網(wǎng)頁內(nèi)部的連結(jié)</a>
網(wǎng)頁外部的連結(jié) <a name="m3">欲連結(jié)的位置</a> <a href="#m3">網(wǎng)頁外部的連結(jié)</a>
【】
標(biāo)簽解說：連結(jié)到外面去，可以擴(kuò)充您網(wǎng)站的實(shí)用性及充實(shí)性，也正因這功能，才造就了www五彩繽紛的世界。由于網(wǎng)路上的服務(wù)五花八門，所以不同的服務(wù)有不同的連結(jié)方法，我將之整理在下表。
使用范例：
網(wǎng)站連結(jié)
好站 <a >好站</a>
電子郵件連結(jié)
寫情書給我 <a href="mailto:tad@ms1.url.com.tw">寫情書給我</a>
ftp連結(jié)
下載檔案 <a href="ftp://ftp.ntu.edu.tw">下載檔案</a>
news連結(jié)
seednet news服務(wù) <a href="news:news.seed.net.tw">seednet news服務(wù)</a>
gopher連結(jié)
seednet gopher服務(wù) <a href="gopher://gopher.seed.net.tw/">seednet gopher服務(wù)</a>
bbs連結(jié)
seednet gopher服務(wù) <a href="telnet://bbs.seed.net.tw/">seednet bbs服務(wù)</a>
【連結(jié)標(biāo)簽的參數(shù)】
使用方法：在連結(jié)后面加入 target=_參數(shù)
標(biāo)簽解說：連結(jié)的參數(shù)并不多，常見的大概就屬 target 這參數(shù)了，target 的意思是‘目標(biāo)’，也就是網(wǎng)頁連結(jié)的指向目標(biāo)，這參數(shù)在框窗（frame）里尤為重要！
使用范例：
target=框窗名稱：
這在‘框架標(biāo)簽’中也有提到，而且也只有在框架（框窗 or frame）中才用得到。正常而言，框窗有各自的名稱，因此，我們可以利用此標(biāo)簽，來指定連結(jié)的內(nèi)容顯示到哪一個框窗中。
target=_blank：
將連結(jié)的畫面內(nèi)容，開在新的瀏覽視窗中。
target=_parent：
將連結(jié)的畫面內(nèi)容，當(dāng)成文件的上一個畫面。
target=_self：
將連結(jié)的畫面內(nèi)容，顯示在目前的視窗中。
target=_top：
這個參數(shù)可以解決新連結(jié)的畫面內(nèi)容，被舊框窗包圍的困擾，使用這參數(shù)，會將整個畫面重新顯示成連結(jié)的畫面內(nèi)容。
4.9 表格標(biāo)簽 <
回細(xì)說索引>
【網(wǎng)頁中的表格觀念】
舉個例子來說，如果今天我們要做一個3欄2列的表格，在WORD中，只要設(shè)定表格為3欄、2列就完成了，不過，在網(wǎng)頁中做一個3欄2列的表格，可是要分成好幾個步驟的，第一個步驟，利用<TABLE></TABLE>標(biāo)簽告訴電腦我要做一個表格；第二個步驟，利用一組<TR></TR>標(biāo)簽先做一個橫列，然后在橫列中利用三組<TD></TD>標(biāo)簽再分出三欄；第三個步驟，重復(fù)第二個步驟，再做一橫列然后再分三欄，如此才能得到一個3欄2列的表格。聽不太懂嗎？沒關(guān)系，以下咱們就來慢慢的看個仔細(xì)：
首先我們來看一個最簡單的表格：
原始碼 呈現(xiàn)結(jié)果
<TABLE BORDER=1>
<TR><TD>1</TD></TR>
</TABLE>
1
利用<TABLE>這個標(biāo)簽來告訴電腦，這是一個表格，至于 BORDER=1 這參數(shù)是設(shè)定此表格的框線粗細(xì)為 1。一組<TR></TR>是設(shè)定一橫列的開始。一組<TD></TD>則是設(shè)定一個欄位。當(dāng)然，文字就是要擺在這里面。
現(xiàn)在我們再來增加二個格子：
原始碼 呈現(xiàn)結(jié)果
<TABLE BORDER=1>
<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR>
</TABLE>
1 2 3
看見沒有，<TR></TR>沒有增加，<TD></TD>卻增加了二組。那如果我要再加上一列呢？很簡單，就像這樣：
原始碼 呈現(xiàn)結(jié)果
<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
【合并表格欄位】
并非所有的表格都是規(guī)規(guī)矩矩的只有幾欄、幾列而已，有時候，我們還會希望能夠“合并欄位”，讓表格更美觀、更實(shí)用一點(diǎn)，而談到“合并欄位”，我們就必須知道，合并的方向有兩種：一種是上下合并（也就是橫列間的合并），一種是左右合并（也就是直欄間的合并），這兩種合并方式各有不同的屬性設(shè)定方法。
左右欄位合并：基本上，您的表格已經(jīng)學(xué)會啰！接下來，咱們就來看看，如何將 1、2、3 格通通合并變成一大格：
原始碼 呈現(xiàn)結(jié)果
<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
您應(yīng)該會發(fā)現(xiàn)，怎么2、3都消失了？只剩下1，而且該欄的<TD>標(biāo)簽還多了一個陌生的臉孔COLSPAN="3"，沒錯，這就是“左右欄位合并”的屬性，COLSPAN="3"的意思就是“這個欄位左右橫跨了3個欄位”，也正因如此，本來的兩個<TD>都可以省掉了，因?yàn)槎急徊⒌袅寺铮?div style="height:15px;">
有了上一次的經(jīng)驗(yàn)后，我們就知道，要合并欄位就一定有些欄位會被“犧牲”掉（也就是那些被合并的欄位啦！），這次我們要“上下合并”，我們將1與4合并成一個欄位，那么被犧牲的是哪一個欄位呢？沒錯就是下面那一個倒楣的4，我們看看上圖，果然4已經(jīng)刪掉了，而在1的<TD>標(biāo)簽中則多了個生面孔ROWSPAN，這就是“上下欄位合并”的屬性，ROWSPAN=2的意思就是“這個欄位上下連跨了2個欄位”，其結(jié)果如下：
此外，利用 ALIGN=RIGHT可以讓表格中物件置右、利用 ALIGN=LEFT可以讓表格中物件置左（預(yù)設(shè)值），至于為什么要加在<TD>中呢？因?yàn)椋?lt;TD>是一個欄位的意思，我們要指定在這欄位中的東西要置中或置左置右，就必須將ALIGN加在<TD>中。
那么表格可以設(shè)定底色嗎？可以的不但表格可以，您也可以指定某欄或某列的顏色，方法和加背景顏色一樣，利用BGCOLOR="顏色碼"就行了。底下是指定整格表格背景顏色的方法：
表格除了可以設(shè)定底色外，也可以用圖片來作背景嗎？當(dāng)然可以，方法一樣簡單，只要將BACKGROUND="圖片名稱"加到表格中就行了。和表格背景顏色一樣，不但表格可以設(shè)定背景圖片，您也可以指定某欄或某列的背景圖片：
另外，我們也可以設(shè)定表格的陰影、亮面顏色，讓表格看起來更有立體感喔！只要利用 BORDERCOLORLIGHT="#顏色碼"（亮面設(shè)定） BORDERCOLORDARK="顏色碼"（暗面設(shè)定）就行了。
<TABLE BORDER="5" BORDERCOLOR="#0080FF" BORDERCOLORLIGHT="#62B0FF" BORDERCOLORDARK="#004B97">
我們可以利用CELLPADDING屬性自由設(shè)定表格內(nèi)文距離格線的距離，這個屬性很好用，保持適當(dāng)?shù)木嚯x，看起來比較舒服。一般而言內(nèi)定值為2，不過我建議設(shè)定為4比較漂亮。
序列標(biāo)簽基本上可分為兩種，一種是“無序條列”，一種是“有序條列”。所謂“無序條列”當(dāng)然就是意指各條列間并無順序關(guān)系，純粹只是利用條列式方法來呈現(xiàn)資料而已，此種無序標(biāo)簽，在各條列前面均有一符號以示區(qū)隔。至于“有序條列”就是指各條列之間是有順序的，從1、2、3…一直延伸下去。
前面的符號一定是要圓形的嗎？不，我們可以加入TYPE="形狀名稱"屬性來改變其符號形狀，一共有三個選擇：DISK（實(shí)心圓）、SQUARE（小正方形）、CIRCLE（空心圓）三種（由于本頁使用CSS故僅于Netscape看得出效果。）：
和無序列表標(biāo)簽一樣，我們也可以選擇不同的符號來顯示順序，一樣是用TYPE屬性來作更改，一更有五種符號：1（數(shù)字）、A（大寫英文字母）、a（小寫英文字母）、I（大寫羅馬字母）、i（小寫羅馬字母）等五種：
接下來我們要說明的這個標(biāo)簽，是“定義列表標(biāo)簽”也是屬于序列標(biāo)簽之一。我們先來舉個例子，我們常常會在文章中看見這樣的格式： CSS（Cascading style sheet） CSS是由W3C于1996年12月所公布的一項(xiàng)新技術(shù)，什么叫做Cascading style sheet？簡單說來他是一種具有階層性的形式設(shè)定，能夠讓網(wǎng)頁設(shè)計(jì)者在設(shè)計(jì)網(wǎng)頁時，對于網(wǎng)頁上的任何物件均有更佳的操控性…
對于一般的網(wǎng)頁設(shè)計(jì)初學(xué)者而言，表單功能其實(shí)并不常用，因?yàn)楸韱瓮ǔ１仨毰浜现鳦GI、JAVA Script程式或是ASP程式來運(yùn)作，不然表單單獨(dú)存在的意義并不大。不過，一旦有機(jī)會將表單運(yùn)用到網(wǎng)頁中時，您的網(wǎng)頁將擺脫單向呈現(xiàn)，而開始邁入和使用者互動的階段喔！
文字輸入列：每個表單之所以會有不同的類型，原因就在于TYPE="表單類型"設(shè)定的不同而已，我們就先來看看第一個類型：文字輸入列。文字輸入列的形態(tài)就是TYPE="TEXT，其使用方法如下：
ALIGN="對齊方式"，是設(shè)定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
單選核取表單：利用TYPE="RADIO"就會產(chǎn)生單選核取表單，單選核取表單通常是好幾個選項(xiàng)一起擺出來供使用者點(diǎn)選，一次只能從中選一個，故為單選核取表單。
ALIGN="對齊方式"，是設(shè)定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
復(fù)選核取表單：利用TYPE=" CHECKBOX "就會產(chǎn)生復(fù)選核取表單，復(fù)選核取表單通常是好幾個選項(xiàng)一起擺出來供使用者點(diǎn)選，一次可以同時選好幾個，故為復(fù)選核取表單。
ALIGN="對齊方式"，是設(shè)定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
密碼表單：利用TYPE=" PASSWORD "就會產(chǎn)生一個密碼表單，密碼表單和文字輸入表單長得幾乎一樣，差別就在于密碼表單在輸入時全部會以星號來取代輸入的文字，以防他人偷窺。
ALIGN="對齊方式"，是設(shè)定此一欄位的對齊方式，其值有：TOP（向上對齊）、MIDDLE（向中對齊）、BOTTOM（向下對齊）、RIGHT（向右對齊）、LEFT（向左對齊）、TEXTTOP（向文字頂部對齊）、BASELINE（向文字底部對齊）、ABSMIDDLE（絕對置中）、ABSBOTTOM（絕對置下）等。
送出按鈕：通常我們表單填完之后，都會有一個送出按鈕以及清除重寫的按鈕，分別是利用TYPE=" SUBMIT "及TYPE=" RESET "來產(chǎn)生，相當(dāng)?shù)暮唵我子谩?div style="height:15px;">
