或許你已經(jīng)發(fā)現(xiàn)這個(gè)問題了：天??！我不是在記事本里排版排得很漂亮,，為何透過瀏覽器看起來(lái)一切都走了樣？對(duì)??！別太訝異，在網(wǎng)頁(yè)的編排里,，并不像漢書或WORD一樣,，只要拼命按Enter鍵或空白鍵，便能完成分段或分行,，因?yàn)椋琀TML語(yǔ)言是不認(rèn)識(shí)我們所謂的Enter鍵或空白鍵,，所以不管您按了多少次的空白或Enter,，瀏覽器都會(huì)當(dāng)作沒看見啦！

1. 使用方法：強(qiáng)制斷行標(biāo)簽<br>,、強(qiáng)制分段標(biāo)簽<p>

    

2. 標(biāo)簽解說(shuō)：我們?cè)趯懳恼聲r(shí),，有時(shí)候在特定的地方會(huì)強(qiáng)迫斷行（<br>），或是在寫完某一段的時(shí)候便會(huì)分段（<p>）,，寫網(wǎng)頁(yè)也一樣,，而且更需要斷行及分段的功能，以免整個(gè)網(wǎng)頁(yè)看起來(lái)亂糟糟的,。

    

3. 使用范例：

   原始碼	呈現(xiàn)結(jié)果
   這是一個(gè)斷行的范例<br>看出來(lái)了嗎,？	這是一個(gè)斷行的范例 看出來(lái)了嗎？
   這是一個(gè)分段的范例<p>基本上他會(huì)比斷行還多空出一行	這是一個(gè)分段的范例 基本上分段會(huì)比斷行還多空出一行

1. 使用方法：上一段文字內(nèi)容<hr>下一段文字內(nèi)容

    

2. 標(biāo)簽解說(shuō)：利用<hr>這個(gè)標(biāo)簽便可產(chǎn)生一條橫分隔線,。另外,，其有些屬性分別說(shuō)明如下：

    

3. 使用范例：
   

   一般用法	尚未加任何屬性。
   原始碼	普通分隔線<hr>
   呈現(xiàn)結(jié)果	普通分隔線

   顏色屬性	用法：<hr color="顏色碼或顏色名稱">
   原始碼	橘色分隔線<hr color="#ff8000">
   呈現(xiàn)結(jié)果	橘色分隔線

   寬度屬性	用法：<hr width="寬度">,，其單位為px（像素）,，寬度亦可用百分比來(lái)作設(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="水平對(duì)齊位置">,，其設(shè)定值有三個(gè)，也就是置左align="left",、置中align="center",、置右align="right"
   原始碼	靠右的分隔線<hr align="right">
   呈現(xiàn)結(jié)果	靠右的分隔線

   陰影屬性	用法：<hr noshade>，無(wú)設(shè)定值,，只要將 noshade 加入即可,，通常會(huì)配合顏色設(shè)定，效果較佳,。
   原始碼	實(shí)心分隔線（無(wú)陰影）<hr noshade>
   呈現(xiàn)結(jié)果	實(shí)心分隔線（無(wú)陰影）

    

1. 使用方法：老實(shí)說(shuō)，剛剛我們學(xué)過的分段標(biāo)簽<p>再加上一些簡(jiǎn)單的屬性設(shè)定,，就可以讓其整個(gè)文字段落置左,、置中或置右了，就如下表所示：

   原始碼	呈現(xiàn)結(jié)果
   <p align="left">文字靠左</p>	文字靠左
   <p align="center">文字置中</p>	文字置中
   <p align="right">文字靠右</p>	文字靠右

   標(biāo)簽解說(shuō)：嗯,！秘訣就在于“align=對(duì)齊位置”而已啦,！align是分段標(biāo)簽<p>的屬性之一，這個(gè)屬性將來(lái)會(huì)常常在不同標(biāo)簽中看到,，它的功能是專門在設(shè)定“水平對(duì)齊位置”,，其常見的設(shè)定值有三個(gè)，也就是置左（align="left"）,、置中（align="center"）,、置右（align="right"）,。

1. 使用方法：<center>這是置中</center>

    

2. 標(biāo)簽解說(shuō)：這個(gè)標(biāo)簽是最常用到的標(biāo)簽了，除了文字，對(duì)于圖片,、表格，任何可以顯現(xiàn)在網(wǎng)頁(yè)上的東西都可以置中喔,！

    

3. 使用范例：

   原始碼	呈現(xiàn)結(jié)果
   <center>這是最中間</center>	這是最中間

1. 使用方法：<blockquote>要縮排的文字</blockquote>

    

2. 標(biāo)簽解說(shuō)：利用<blockquote></blockquote>這個(gè)標(biāo)簽可以將其包起來(lái)的文字，全部往右縮排,。而且加一組標(biāo)簽,，往右縮排一單位，加兩組標(biāo)簽,，往右縮排兩單位,，依此類推。

    

3. 使用范例：

   原始碼	呈現(xiàn)結(jié)果
   <blockquote>縮排1單位</blockquote>	縮排1單位
   <blockquote><blockquote>縮排2單位</blockquote></blockquote>	縮排2單位

1. 使用方法：<pre>文字內(nèi)容<pre>

    

2. 標(biāo)簽解說(shuō)：利用<pre></pre>這個(gè)標(biāo)簽可以將其包起來(lái)的文字排版,、格式,，原封不動(dòng)的呈現(xiàn)出來(lái)。算是相當(dāng)好用的標(biāo)簽之一,。

    

3. 使用范例：

   原始碼	呈現(xiàn)結(jié)果
   <pre> 文　字 　格　式 </pre>	文　字 　格　式

1. 使用方法：<h1>標(biāo)題內(nèi)容</h1>

    

2. 標(biāo)簽解說(shuō)：標(biāo)題的大小一共有六種,，兩個(gè)標(biāo)簽一組，也就是從<h1>到<h6>,，<h1>最大,，<h6>最小。使用標(biāo)題標(biāo)簽時(shí),，該標(biāo)簽會(huì)將字體變成粗體字,，并且會(huì)自成一行。

    

3. 使用范例：
   

   原始碼	呈現(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)題六

1. 使用方法：<font size=3>文字內(nèi)容</font>

    

2. 標(biāo)簽解說(shuō)：標(biāo)題的大小一共有七種,，也就是<font size=1>（最?。┑?lt;font size=7>（最大），另外,，還有一種寫法：<font size=+1>文字內(nèi)容</font>,，其意思就是說(shuō)：比預(yù)設(shè)字大一級(jí)。當(dāng)然也可以 font size=+2（比預(yù)設(shè)字大二級(jí)），或是 font size=-1（比預(yù)設(shè)字小一級(jí)）,，以一般而言,，預(yù)設(shè)字體多為 3。

    

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>	字體七

1. 使用方法：<b>文字</b>

    

2. 標(biāo)簽解說(shuō)：在文字標(biāo)簽里,，對(duì)于文字的格式也有相當(dāng)多的變化，如粗體,、斜體...等,，此外，也定義了一些現(xiàn)成的格式供編者使用,，如‘強(qiáng)調(diào)’,、‘原始碼’...等，當(dāng)然,，這只是方便您參考用,，并無(wú)強(qiáng)迫說(shuō)遇到原始碼就要加上‘原始碼’的標(biāo)簽。

    

3. 使用范例：
   

   原始碼	呈現(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>	所在地址

1. 使用方法：<font color="#fefecb">文字顏色</font>

    

2. 標(biāo)簽解說(shuō)：文字也可以設(shè)定 顏色喔,！至于顏色有哪些....這....哪天我心血來(lái)潮再來(lái)做個(gè)色彩對(duì)應(yīng)表吧,！

    

3. 使用范例：
   

   原始碼	呈現(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>	灰色的字喔,！

1. 使用方法：<font face="字型名稱">文字</font>

    

2. 標(biāo)簽解說(shuō)：網(wǎng)頁(yè)上也可以使用字型喔！唯一的一個(gè)限制是：對(duì)方也要有該字型,！否則看到的仍然還是宋體。另外要說(shuō)明的是,，這個(gè)標(biāo)簽并無(wú)法保證在每個(gè)瀏覽器上都能正常的顯現(xiàn),，不過這并沒有關(guān)系，看不到特殊的字型時(shí),，瀏覽器仍會(huì)以宋體來(lái)顯示,，所以不用怕會(huì)一團(tuán)亂！

   另外,，如果您的網(wǎng)頁(yè)中有加上這一行敘述<meta http-equiv="content-type" content="text/html;charset=big5">（指定網(wǎng)頁(yè)的語(yǔ)言格式,，以后我會(huì)解釋），那么，netscape可以正確顯示出中文,，但英文無(wú)反應(yīng),。若沒有加該行，那么英文會(huì)正確顯示,，但中文卻仍是宋體,。至于 ie 系列，均能正常顯示,。

    

3. 使用范例：
   

   原始碼	呈現(xiàn)結(jié)果
   <font face="楷體_GB2312">楷體_GB2312</font>	楷體_GB2312
   <font face="華康儷中黑">華康儷中黑</font>	華康儷中黑

1. 使用方法： 

    

2. 標(biāo)簽解說(shuō)：很多特殊的符號(hào)是需要特別處理的,，比如說(shuō)" < "、" > "這兩個(gè)符號(hào)若想要呈現(xiàn)在網(wǎng)頁(yè)上是沒有辦法直接打" < "的,，要呈現(xiàn)" < "必須輸入編碼表示法：“<”,，常用的如下：

    

3. 使用范例：
   

   原始碼	呈現(xiàn)結(jié)果
   	( 代表一個(gè)不斷行空白)
   <	<
   >	>
   &	&
   "	"

1. 使用方法：<basefont size="1~7">

    

2. 標(biāo)簽解說(shuō)：這個(gè)標(biāo)簽可以改變文字大小的內(nèi)定值，直接加在<body>標(biāo)簽之后就行了,。一般而言,，若是沒有特別設(shè)定，文字大小內(nèi)定值預(yù)定值為3,。

在使用影像標(biāo)簽時(shí)有兩件事值得注意一下,，一是檔名，二是路徑,。首先要注意的就是,，檔名是否正確以及大小寫是否一致！圖檔名稱不正確,，任電腦再厲害也找不到您要的圖,，檔名大小寫不一致，如Image.gif,、image.gif,、image.GIF在自己的電腦中看都能正確的顯示，但是一但傳到網(wǎng)路上去時(shí),，因?yàn)橄到y(tǒng)不一樣的關(guān)系（電腦伺服器的作業(yè)系統(tǒng)可比個(gè)人用電腦的作業(yè)系統(tǒng)嚴(yán)謹(jǐn)多了）就變成三個(gè)不一樣的檔案了,，所以，可別忽略檔名大小寫不一致的影響,。

另外一個(gè)就是路徑問題了,，這個(gè)問題也不難，我們?cè)谏院髸?huì)提到,。我們先來(lái)看看影像的標(biāo)簽如何寫,。

1. 使用方法：<img src="boy.gif" alt="本站特約模特兒" align=right border=0 hspace=2 vspace=2 height=56 width=32>

    

2. 標(biāo)簽解說(shuō)：目前常見的網(wǎng)頁(yè)圖形格式有兩種就是gif及jpg兩種格式。gif格式只有256色,，不過色彩比較鮮艷干凈漂亮,，適合電腦美工圖案。而jpg格式的圖案是全彩失真壓縮，比較適合一大堆顏色的圖片,，如照片就較適合用jpg格式來(lái)呈現(xiàn),。

    

3. 使用范例：

   基本用法	用法：<img src="圖檔名稱、路徑"> 顯示圖片最基本的方法（就是不加任何屬性啦?。┢渲?boy.gif 就是圖檔的檔名,。
   原始碼	<img src="images/G-FASE4.GIF">嗨！我是本站的模特兒喔,！
   呈現(xiàn)結(jié)果	嗨,！我是本站的模特兒喔！

   長(zhǎng)寬設(shè)定	用法：<img src="圖檔" height="高度" width="寬度"> 設(shè)圖片的大小,，其實(shí)不用設(shè)也可以,，但是有設(shè)更好，可以加快瀏覽速度,，因?yàn)闉g覽器就不用在那邊花時(shí)間算您的圖片有多大啦,！此外您也可以自己隨意設(shè)定圖片大小。
   原始碼	<img src="images/G-FASE4.GIF" height=32 width=32>
   呈現(xiàn)結(jié)果

   加上說(shuō)明	用法：<img src="圖檔" alt="說(shuō)明文字"> 滑鼠一到圖上時(shí),，說(shuō)明文字就會(huì)自動(dòng)出現(xiàn),。此外，在圖片未顯示出來(lái)或顯示不出來(lái)時(shí),，也會(huì)以這一段字代替,，讓使用者知道這個(gè)未顯示出來(lái)的圖片究竟是干嘛用的。
   原始碼	<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>文字對(duì)齊我頭頂！
   呈現(xiàn)結(jié)果	文字對(duì)齊我頭頂！
   原始碼	<img src="images/G-FASE4.GIF" align=bottom>文字對(duì)齊我腳底,！
   呈現(xiàn)結(jié)果	文字對(duì)齊我腳底,！
   原始碼	<img src="images/G-FASE4.GIF" align=middle>文字對(duì)齊我中間！
   呈現(xiàn)結(jié)果	文字對(duì)齊我中間,！
   原始碼	<img src="images/G-FASE4.GIF" align=absmiddle>文字對(duì)齊我絕對(duì)中間,！
   呈現(xiàn)結(jié)果	文字對(duì)齊我絕對(duì)中間！

   邊框設(shè)定	用法：<img src="圖檔" border="邊框粗細(xì)"> 設(shè)定邊框大小,，通常都設(shè)成 0 感覺比較美觀啦,！因?yàn)閮?nèi)定的框框?qū)嵲谑遣辉趺雌?...。尤其在連結(jié)時(shí),，設(shè)框框簡(jiǎn)直是丑斃了...,。
   原始碼	<img src="images/G-FASE4.GIF" border="4">
   呈現(xiàn)結(jié)果

   左右間距	用法：<img src="圖檔" hspace="離左右物件的距離"> 離文字的水平距離，通常多少也設(shè)一點(diǎn),，以免靠文字太近,，看起來(lái)才不會(huì)有太擠的感覺。
   原始碼	左邊的字<img src="images/G-FASE4.GIF" hspace="15">右邊的字
   呈現(xiàn)結(jié)果	左邊的字右邊的字

   上下間距	用法：<img src="圖檔" vspace="離上下物件的距離"> 離文字的垂直距離,，通常多少也設(shè)一點(diǎn),，以免靠文字太近，看起來(lái)才不會(huì)有太擠的感覺,。
   原始碼	上面的字<br><img src="images/G-FASE4.GIF" vspace="15"><br>下面的字
   呈現(xiàn)結(jié)果	上面的字 下面的字

   由于此網(wǎng)頁(yè)有用css控制版面圖文,，故在netscape下觀看，會(huì)稍有不正確,。

1. 關(guān)于路徑：現(xiàn)在我們來(lái)談?wù)剤D片路徑的事,，路徑不對(duì)，不管您的網(wǎng)頁(yè)名稱寫的多正確也沒用,，因?yàn)闉g覽器無(wú)法尋著您的路徑去找到該有的圖片,，所以，我們來(lái)看看該如何正確的使用路徑,。有些人并不喜歡將網(wǎng)頁(yè)及圖通通放在同一個(gè)目錄下,，比如說(shuō)有人將圖檔全放在c:\images里，而網(wǎng)頁(yè)檔放在c:\demo里,，這樣子的話,，我們?cè)撊绾握_的寫圖片的路徑呢？我將幾種常見的情形整理成下表：
   

   html檔的位置	圖檔的位置	寫法	情形說(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中,。以上我們使用的均為“相對(duì)路徑”的概念,。

    

2. 影像單位：或許您會(huì)常常看到px這個(gè)單位,，沒錯(cuò),，這是我們?cè)谥谱髯畛Ｓ玫囊粋€(gè)單位了。這個(gè)單位完整的寫法是“pixels”,，我們稱之為“像素”,。像素，是螢?zāi)簧系囊粋€(gè)小光點(diǎn),，然而這一小光點(diǎn)的大小,，并非是固定的，舉個(gè)例子而言,，螢?zāi)槐旧硎宕?，不?huì)因?yàn)槟愕娜魏卧O(shè)定而變成十七寸。但是,，其解析度是可以改變的,，我們常見的解析度有以下幾種：“640 ×480”、“800 ×600”,、“1024 ×768”,。舉其中之一的640 ×480來(lái)說(shuō)，其代表的就是在螢?zāi)簧嫌袑?40個(gè)光點(diǎn),，高有480光點(diǎn),，若是我們將解析度調(diào)整為800 ×600其寬勢(shì)必要從640變成800個(gè)光點(diǎn)，也因此,，該光點(diǎn)便會(huì)變小一點(diǎn),，所以，我們看起來(lái)就會(huì)覺得解析度調(diào)高后,，螢?zāi)粌?nèi)的東西,，變得小小的，很精致,，那就是因?yàn)楣恻c(diǎn)變小的原因,。

    

3. 影像格式：網(wǎng)頁(yè)用的圖檔目前只有g(shù)if格式（即副檔名為gif的圖檔，如：bg.gif）以及jpg格式（即副檔名為jpg的圖檔,，如：bg.jpg）為一般的瀏覽器所接受,。其他如bmp格式或是pcx格式都是無(wú)法在網(wǎng)頁(yè)上使用的，若非得要用,，那就利用影像繪圖軟體來(lái)作格式的轉(zhuǎn)換吧,！

   圖檔范例	說(shuō)明
   	gif格式的圖形只能以256個(gè)顏色顯示,，雖然其色彩較少，但顏色鮮艷亮麗,，若是圖形顏色不多，用gif格式存檔會(huì)較漂亮,。
   	jpg格式的圖形是以全彩顯示,，適合用在相片或是漸層顏色的圖片上，壓縮比例以75%為適中,。

    

說(shuō)穿了,，背景標(biāo)簽只有<BODY>這個(gè)標(biāo)簽，其余的效果,，只要加上一些簡(jiǎn)單的屬性便可做到,。

1. 使用方法：<body bgcolor="#ffffff" background="bg.jpg">

    

2. 標(biāo)簽解說(shuō)：這個(gè)標(biāo)簽其實(shí)應(yīng)該老早就要講了，畢竟它是構(gòu)成網(wǎng)頁(yè)不可或缺的基本要素之一（哎哎哎...現(xiàn)在放馬后炮有什么用?。?/font>,。我們背景顏色或圖片的設(shè)定以及連結(jié)字體的顏色，通通都放在<body>這標(biāo)簽里面,。我就其屬性來(lái)一一解說(shuō)：

   背景顏色	用法：<body bgcolor="顏色碼"> 設(shè)定背景顏色,。有人會(huì)說(shuō)：‘我已經(jīng)設(shè)定了背景圖片，那背景顏色還有用嗎,？’當(dāng)然有用,！當(dāng)使用者連結(jié)到貴站時(shí)，若背景圖案還沒傳輸完之前（有的背景圖蠻大的）,，就會(huì)先顯現(xiàn)背景顏色,，您說(shuō)，是不是比一片灰灰的好看多了呢,！
   原始碼	<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)頁(yè)載入會(huì)蠻慢的。
   原始碼	<html> <head> <title>這是標(biāo)題</title> </head> <body background="bg.jpg"> 這里是本文區(qū) </body> </html>
   呈現(xiàn)結(jié)果	按下此處觀看結(jié)果

    

1. 連結(jié)基本概念：一般而言,，所謂連結(jié)就是，在網(wǎng)頁(yè)中有些字會(huì)有特別的顏色,，而且字的底下會(huì)有條線,，當(dāng)游標(biāo)移到那些字上時(shí)，會(huì)變成手指形狀,，按下去,，則會(huì)連到別的文章或網(wǎng)站，就像這樣（以上這段是給超級(jí)新手看的...）,。

   扯到連結(jié),，最基本來(lái)看有‘內(nèi)部連結(jié)’及‘外部連結(jié)’，所謂‘內(nèi)部連結(jié)’就是自己網(wǎng)站間網(wǎng)頁(yè)的連結(jié),，至于外部連結(jié)我們稍后再來(lái)討論,。

   要了解內(nèi)部連結(jié)，首先必須先了解一下這兩種東西,，一個(gè)是‘相對(duì)路徑’,，一個(gè)是‘絕對(duì)路徑’。

   現(xiàn)在假設(shè)一個(gè)情形：我們?cè)谧约旱碾娔X里設(shè)計(jì)網(wǎng)頁(yè),，所有網(wǎng)頁(yè)相關(guān)的檔案我們通通放在 c:\www 里面,，現(xiàn)在假設(shè) c:\www 里面目前有 index.htm 、 text1.htm ,、 p1.gif ,、 p2.gif 這四個(gè)檔案,。ok！

   現(xiàn)在我們想在 index.htm 里面設(shè)一個(gè)連結(jié),，能夠按一下就連到 text1.htm,，那我們?cè)撛趺醋瞿兀炕旧?，有兩中方式可以做到,，?index.htm 里面加上下面任一敘述：

   <a href="/c|/www/text1.htm">	這就是‘絕對(duì)路徑’
   <a href="text1.htm">	這就是‘相對(duì)路徑’

   瞧出什么端倪了沒有？嗯嗯....沒錯(cuò),，‘絕對(duì)路徑’要給電腦一個(gè)非常詳盡的位置，讓電腦尋著這路徑去找到檔案,。而‘相對(duì)路徑’就簡(jiǎn)單多啦,！如果沒有特別指定，他就會(huì)直接在 index.htm 的所在目錄下找,，也就是在 c:\www 底下去找text1.htm,。

   如果說(shuō)，今天我們將 c:\www 里所有的檔案都上傳到網(wǎng)路上的網(wǎng)頁(yè)伺服器（總不能做好了只給自己看吧?。?/font>,，且該伺服器是別人的電腦，而非你自己架設(shè)的主機(jī),，那么問題就來(lái)了,！你猜，哪一種連結(jié)會(huì)出問題,？呵呵...答案是‘絕對(duì)路徑’,，您猜對(duì)了嗎？

   為什么說(shuō)‘絕對(duì)路徑’會(huì)出問題呢,？因?yàn)?，?dāng)您將檔案上傳到網(wǎng)路上時(shí)，您的整個(gè)網(wǎng)頁(yè)目錄架構(gòu)一定會(huì)變,，到時(shí)候,，電腦可能找不到 c:\ （尤其是unix系列的主機(jī)）更可能找不到 www 這目錄（有些會(huì)規(guī)定要放在特定的目錄下才能顯示網(wǎng)頁(yè)），所以說(shuō),，沒事的話,，盡量用‘相對(duì)路徑’來(lái)作連結(jié)吧,！好寫又不容易出錯(cuò),。

   另外一個(gè)情形是：為了整理方便，有些網(wǎng)友喜歡將圖檔通通放到同一個(gè)目錄下,，如：c:\www\gif\ 底下放進(jìn)了p1.gif ,、 p2.gif兩個(gè)圖,，而index.htm 、 text1.htm 依舊在 c:\www 底下?，F(xiàn)在我們想在 index.htm 下設(shè)個(gè)連結(jié)到 p1.gif 這圖檔（連結(jié)不限于只能連html檔,，圖檔、文字檔均可）,，那我們又該如何來(lái)使用‘相對(duì)路徑’呢,？他們又不在‘同一個(gè)目錄’下...？

   <a href="/c|/www/gif/p1.gif">	這是‘絕對(duì)路徑’的寫法
   <a href="gif/p1.gif">	這是‘相對(duì)路徑’的寫法

   如何,？不難吧,！（只是字有點(diǎn)多，看到腦子發(fā)脹）

2. 總整理：很亂嗎,？嗯...看看這表,，或許會(huì)清楚些。

   相對(duì)路徑表示方式	代表連結(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:\底下了）

    

1. 使用方法：

   1. 先在欲連結(jié)處作記號(hào)：<a name="here1">這里是你想連結(jié)的點(diǎn)</a>

       

   2. 設(shè)定連結(jié)：<a href="#here1">連結(jié)</a>

    

2. 標(biāo)簽解說(shuō)：有時(shí)候,，當(dāng)某頁(yè)的內(nèi)容很多時(shí),，我們可以利用網(wǎng)頁(yè)的內(nèi)部連結(jié)，來(lái)使使用者快速的找到資料,。其原理不過是：在欲連結(jié)處做個(gè)記號(hào)（網(wǎng)頁(yè)的任何地方都可以喔?。?/font>，然后,，連結(jié)時(shí)就尋這記號(hào),，就可以快速找到資料。很簡(jiǎn)單吧,！

    

3. 使用范例：

   范例	第一步驟	第二步驟
   www連結(jié)標(biāo)簽基本概念	<a name="m1">欲連結(jié)的位置</a>	<a href="#m1">www連結(jié)標(biāo)簽基本概念</a>
   網(wǎng)頁(yè)內(nèi)部的連結(jié)	<a name="m2">欲連結(jié)的位置</a>	<a href="#m2">網(wǎng)頁(yè)內(nèi)部的連結(jié)</a>
   網(wǎng)頁(yè)外部的連結(jié)	<a name="m3">欲連結(jié)的位置</a>	<a href="#m3">網(wǎng)頁(yè)外部的連結(jié)</a>

    

舉個(gè)例子來(lái)說(shuō),，如果今天我們要做一個(gè)3欄2列的表格,，在WORD中，只要設(shè)定表格為3欄,、2列就完成了,，不過，在網(wǎng)頁(yè)中做一個(gè)3欄2列的表格,，可是要分成好幾個(gè)步驟的,，第一個(gè)步驟，利用<TABLE></TABLE>標(biāo)簽告訴電腦我要做一個(gè)表格,；第二個(gè)步驟,，利用一組<TR></TR>標(biāo)簽先做一個(gè)橫列，然后在橫列中利用三組<TD></TD>標(biāo)簽再分出三欄,；第三個(gè)步驟,，重復(fù)第二個(gè)步驟，再做一橫列然后再分三欄,，如此才能得到一個(gè)3欄2列的表格,。聽不太懂嗎？沒關(guān)系,，以下咱們就來(lái)慢慢的看個(gè)仔細(xì)：

1. 首先我們來(lái)看一個(gè)最簡(jiǎn)單的表格：

   原始碼	呈現(xiàn)結(jié)果
   <TABLE BORDER=1> <TR><TD>1</TD></TR> </TABLE>	1

   利用<TABLE>這個(gè)標(biāo)簽來(lái)告訴電腦,，這是一個(gè)表格，至于 BORDER=1 這參數(shù)是設(shè)定此表格的框線粗細(xì)為 1。一組<TR></TR>是設(shè)定一橫列的開始,。一組<TD></TD>則是設(shè)定一個(gè)欄位,。當(dāng)然，文字就是要擺在這里面,。

    

2. 現(xiàn)在我們?cè)賮?lái)增加二個(gè)格子：

   原始碼	呈現(xiàn)結(jié)果
   <TABLE BORDER=1> <TR><TD>1</TD><TD>2</TD><TD>3</TD></TR> </TABLE>	1 2 3

    

3. 看見沒有,，<TR></TR>沒有增加，<TD></TD>卻增加了二組,。那如果我要再加上一列呢,？很簡(jiǎn)單，就像這樣：

   原始碼	呈現(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

    

1. 并非所有的表格都是規(guī)規(guī)矩矩的只有幾欄,、幾列而已,，有時(shí)候，我們還會(huì)希望能夠“合并欄位”,，讓表格更美觀,、更實(shí)用一點(diǎn)，而談到“合并欄位”,，我們就必須知道,，合并的方向有兩種：一種是上下合并（也就是橫列間的合并），一種是左右合并（也就是直欄間的合并）,，這兩種合并方式各有不同的屬性設(shè)定方法,。

    

2. 左右欄位合并：基本上，您的表格已經(jīng)學(xué)會(huì)啰,！接下來(lái),，咱們就來(lái)看看，如何將 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)該會(huì)發(fā)現(xiàn)，怎么2,、3都消失了,？只剩下1，而且該欄的<TD>標(biāo)簽還多了一個(gè)陌生的臉孔COLSPAN="3",，沒錯(cuò),，這就是“左右欄位合并”的屬性，COLSPAN="3"的意思就是“這個(gè)欄位左右橫跨了3個(gè)欄位”,，也正因如此,，本來(lái)的兩個(gè)<TD>都可以省掉了，因?yàn)槎急徊⒌袅寺铮?/font>

    

3. 上下欄位合并：學(xué)會(huì)了左右合并,！接下來(lái),，咱們就來(lái)看看,，如何上下合并，將 1,、4格通通合并變成一大格：

   原始碼	呈現(xiàn)結(jié)果
   <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)驗(yàn)后,，我們就知道，要合并欄位就一定有些欄位會(huì)被“犧牲”掉（也就是那些被合并的欄位啦?。?，這次我們要“上下合并”，我們將1與4合并成一個(gè)欄位,，那么被犧牲的是哪一個(gè)欄位呢,？沒錯(cuò)就是下面那一個(gè)倒楣的4，我們看看上圖,，果然4已經(jīng)刪掉了,，而在1的<TD>標(biāo)簽中則多了個(gè)生面孔R(shí)OWSPAN，這就是“上下欄位合并”的屬性,，ROWSPAN=2的意思就是“這個(gè)欄位上下連跨了2個(gè)欄位”,，其結(jié)果如下：

    

1. 那么表格可以設(shè)定底色嗎？可以的不但表格可以,，您也可以指定某欄或某列的顏色,，方法和加背景顏色一樣，利用BGCOLOR="顏色碼"就行了,。底下是指定整格表格背景顏色的方法：

   原始碼	呈現(xiàn)結(jié)果
   <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>中,，可以指定“一列”的背景顏色：

   原始碼	呈現(xiàn)結(jié)果
   <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>中，可以指定“一欄”的背景顏色：

   原始碼	呈現(xiàn)結(jié)果
   <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

    

2. 表格除了可以設(shè)定底色外,，也可以用圖片來(lái)作背景嗎,？當(dāng)然可以，方法一樣簡(jiǎn)單,，只要將BACKGROUND="圖片名稱"加到表格中就行了,。和表格背景顏色一樣，不但表格可以設(shè)定背景圖片,，您也可以指定某欄或某列的背景圖片：

   原始碼	呈現(xiàn)結(jié)果
   <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="圖片名稱"加在<TD>中,，可以指定“一欄”的背景顏色：

   原始碼	呈現(xiàn)結(jié)果
   <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

    

1. 如何設(shè)定表格粗細(xì)？只要利用BORDER="粗細(xì)值"就行了,。

   原始碼	呈現(xiàn)結(jié)果
   <TABLE BORDER=5> <TR><TD>1</TD></TR> </TABLE>	1

    

2. 如何設(shè)定表格顏色,？只要利用BORDERCOLOR="顏色碼"就行了。

   原始碼	呈現(xiàn)結(jié)果
   <TABLE BORDER="5" BORDERCOLOR="#0080FF"> <TR><TD>1</TD></TR> </TABLE>	1

    

3. 另外,，我們也可以設(shè)定表格的陰影,、亮面顏色，讓表格看起來(lái)更有立體感喔,！只要利用 BORDERCOLORLIGHT="#顏色碼"（亮面設(shè)定） BORDERCOLORDARK="顏色碼"（暗面設(shè)定）就行了。

   原始碼	呈現(xiàn)結(jié)果
   <TABLE BORDER="5" BORDERCOLOR="#0080FF" BORDERCOLORLIGHT="#62B0FF" BORDERCOLORDARK="#004B97"> <TR><TD>1</TD></TR> </TABLE>	1

    

1. 我們可以利用CELLPADDING屬性自由設(shè)定表格內(nèi)文距離格線的距離,，這個(gè)屬性很好用，保持適當(dāng)?shù)木嚯x,，看起來(lái)比較舒服,。一般而言內(nèi)定值為2，不過我建議設(shè)定為4比較漂亮,。

   原始碼	呈現(xiàn)結(jié)果
   <TABLE BORDER="1" CELLPADDING="10"> <TR><TD>1</TD><TD>2</TD></TR> </TABLE>	1 2

    

2. 我們可以利用CELLSPACING屬性設(shè)定表格欄位格線之間的距離,。一般而言內(nèi)定值為2，不過我通常習(xí)慣設(shè)為 0 ,。

   原始碼	呈現(xiàn)結(jié)果
   <TABLE BORDER="1" CELLSPACING="5"> <TR><TD>1</TD><TD>2</TD></TR> </TABLE>	1 2

    

1. 序列標(biāo)簽基本上可分為兩種,，一種是“無(wú)序條列”，一種是“有序條列”,。所謂“無(wú)序條列”當(dāng)然就是意指各條列間并無(wú)順序關(guān)系,，純粹只是利用條列式方法來(lái)呈現(xiàn)資料而已,，此種無(wú)序標(biāo)簽，在各條列前面均有一符號(hào)以示區(qū)隔,。至于“有序條列”就是指各條列之間是有順序的,，從1、2,、3…一直延伸下去,。

    

2. 我們先來(lái)看看“無(wú)序列表標(biāo)簽”如何使用：

   原始碼	呈現(xiàn)結(jié)果
   <UL> <LI>姓名：杰克升 <LI>生日：1974/11/21 <LI>星座：天蝎座 </UL>	姓名：杰克升 生日：1974/11/21 星座：天蝎座

   其中<UL>標(biāo)簽即為“無(wú)序列表標(biāo)簽”，每增加一列內(nèi)容,，就必須加一個(gè)<LI>,。

    

3. 前面的符號(hào)一定是要圓形的嗎？不,，我們可以加入TYPE="形狀名稱"屬性來(lái)改變其符號(hào)形狀,，一共有三個(gè)選擇：DISK（實(shí)心圓）、SQUARE（小正方形）,、CIRCLE（空心圓）三種（由于本頁(yè)使用CSS故僅于Netscape看得出效果,。）：

   原始碼	呈現(xiàn)結(jié)果
   <UL TYPE="CIRCLE"> <LI>姓名：杰克升 <LI>生日：1974/11/21 <LI>星座：天蝎座 </UL>	姓名：杰克升凱 生日：1974/11/21 星座：天蝎座

    

1. 接下來(lái)，我們來(lái)看看“有序列表標(biāo)簽”如何使用：

   原始碼	呈現(xiàn)結(jié)果
   <OL> <LI>姓名：杰克升 <LI>生日：1974/11/21 <LI>星座：天蝎座 </OL>	姓名：杰克升 生日：1974/11/21 星座：天蝎座

   其中<OL>標(biāo)簽即為“有序列表標(biāo)簽”,，每增加一列內(nèi)容,，就必須加一個(gè)<LI>。

    

2. 和無(wú)序列表標(biāo)簽一樣,，我們也可以選擇不同的符號(hào)來(lái)顯示順序,，一樣是用TYPE屬性來(lái)作更改，一更有五種符號(hào)：1（數(shù)字）,、A（大寫英文字母）,、a（小寫英文字母）、I（大寫羅馬字母）,、i（小寫羅馬字母）等五種：

   原始碼	呈現(xiàn)結(jié)果
   <OL TYPE="A"> <LI>姓名：杰克升 <LI>生日：1974/11/21 <LI>星座：天蝎座 </OL>	姓名：杰克升 生日：1974/11/21 星座：天蝎座

    

3. 另外,，我們亦可指定序列起始的數(shù)目，其方法如下：

   原始碼	呈現(xiàn)結(jié)果
   <OL START="8"> <LI>姓名：杰克升 <LI>生日：1974/11/21 <LI>星座：天蝎座 </OL>	姓名：杰克升 生日：1974/11/21 星座：天蝎座

    

1. 接下來(lái)我們要說(shuō)明的這個(gè)標(biāo)簽,，是“定義列表標(biāo)簽”也是屬于序列標(biāo)簽之一,。我們先來(lái)舉個(gè)例子,，我們常常會(huì)在文章中看見這樣的格式：

   CSS（Cascading style sheet） CSS是由W3C于1996年12月所公布的一項(xiàng)新技術(shù),，什么叫做Cascading style sheet？簡(jiǎn)單說(shuō)來(lái)他是一種具有階層性的形式設(shè)定,，能夠讓網(wǎng)頁(yè)設(shè)計(jì)者在設(shè)計(jì)網(wǎng)頁(yè)時(shí),，對(duì)于網(wǎng)頁(yè)上的任何物件均有更佳的操控性…

   
   網(wǎng)頁(yè)里也有可以做到這種效果的標(biāo)簽喔！現(xiàn)在要來(lái)跟各位說(shuō)的就是這個(gè)標(biāo)簽,。咱們先來(lái)看看這標(biāo)簽的用法：

    

2. 我們先來(lái)看看“定義列表標(biāo)簽”如何使用：

   原始碼	呈現(xiàn)結(jié)果
   <DL> <DT>小標(biāo)題 <DD>標(biāo)題的內(nèi)容說(shuō)明 </DL>	小標(biāo)題 標(biāo)題的內(nèi)容說(shuō)明

    

對(duì)于一般的網(wǎng)頁(yè)設(shè)計(jì)初學(xué)者而言,，表單功能其實(shí)并不常用,，因?yàn)楸韱瓮ǔ１仨毰浜现鳦GI、JAVA Script程式或是ASP程式來(lái)運(yùn)作,，不然表單單獨(dú)存在的意義并不大,。不過，一旦有機(jī)會(huì)將表單運(yùn)用到網(wǎng)頁(yè)中時(shí),，您的網(wǎng)頁(yè)將擺脫單向呈現(xiàn),，而開始邁入和使用者互動(dòng)的階段喔！

本單元純粹以介紹各式表單為主,，至于一些CGI或ASP觀念在此我就不提出了,，因?yàn)樘峁┝闼榈挠^念，倒不如去看看專門介紹CGI的書籍來(lái)的妥當(dāng),。

【各種輸入類型】

1. 文字輸入列：每個(gè)表單之所以會(huì)有不同的類型,，原因就在于TYPE="表單類型"設(shè)定的不同而已，我們就先來(lái)看看第一個(gè)類型：文字輸入列,。文字輸入列的形態(tài)就是TYPE="TEXT,，其使用方法如下：

   呈現(xiàn)結(jié)果	姓名：
   原始碼	<FORM> 姓名：<INPUT TYPE="TEXT" NAME="NAME" SIZE="20"> </FORM>

   其有下列可設(shè)定之屬性：

   • NAME="名稱"，是設(shè)定此一欄位的名稱,，程式中常會(huì)用到,。
   • SIZE="數(shù)值"，是設(shè)定此一欄位顯現(xiàn)的寬度,。
   • VALUE="預(yù)設(shè)內(nèi)容",，是設(shè)定此一欄位的預(yù)設(shè)內(nèi)容。
   • ALIGN="對(duì)齊方式",，是設(shè)定此一欄位的對(duì)齊方式,，其值有：TOP（向上對(duì)齊）,、MIDDLE（向中對(duì)齊）,、BOTTOM（向下對(duì)齊）、RIGHT（向右對(duì)齊）,、LEFT（向左對(duì)齊）,、TEXTTOP（向文字頂部對(duì)齊）、BASELINE（向文字底部對(duì)齊）,、ABSMIDDLE（絕對(duì)置中）,、ABSBOTTOM（絕對(duì)置下）等。
   • MAXLENGTH="數(shù)值",，是設(shè)定此一欄位可設(shè)定輸入的最大長(zhǎng)度,。

   ---

    

2. 單選核取表單：利用TYPE="RADIO"就會(huì)產(chǎn)生單選核取表單,，單選核取表單通常是好幾個(gè)選項(xiàng)一起擺出來(lái)供使用者點(diǎn)選,，一次只能從中選一個(gè),，故為單選核取表單,。

   呈現(xiàn)結(jié)果	性別：男 女
   原始碼	<FORM> 性別： 男 <INPUT TYPE="RADIO" NAME="SEX" VALUE="BOY"> 女 <INPUT TYPE="RADIO" NAME="SEX" VALUE="GIRL"> </FORM>

   其有下列可設(shè)定之屬性：

   • NAME="名稱"，是設(shè)定此一欄位的名稱,，程式中常會(huì)用到,。
   • VALUE="內(nèi)容"，是設(shè)定此一欄位的內(nèi)容,、值或是意義。
   • ALIGN="對(duì)齊方式",，是設(shè)定此一欄位的對(duì)齊方式，其值有：TOP（向上對(duì)齊）,、MIDDLE（向中對(duì)齊）、BOTTOM（向下對(duì)齊）,、RIGHT（向右對(duì)齊）、LEFT（向左對(duì)齊）,、TEXTTOP（向文字頂部對(duì)齊）,、BASELINE（向文字底部對(duì)齊）、ABSMIDDLE（絕對(duì)置中）,、ABSBOTTOM（絕對(duì)置下）等,。
   • CHECKED，是設(shè)定此一欄位為預(yù)設(shè)選取值,。

   ---

    

3. 復(fù)選核取表單：利用TYPE=" CHECKBOX "就會(huì)產(chǎn)生復(fù)選核取表單,，復(fù)選核取表單通常是好幾個(gè)選項(xiàng)一起擺出來(lái)供使用者點(diǎn)選，一次可以同時(shí)選好幾個(gè),，故為復(fù)選核取表單,。

   呈現(xiàn)結(jié)果	喜好： 電影 看書
   原始碼	<FORM> 喜好： <INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="MOVIE">電影 <INPUT TYPE="CHECKBOX" NAME="SEX" VALUE="BOOK">看書 </FORM>

   其有下列可設(shè)定之屬性：

   • NAME="名稱"，是設(shè)定此一欄位的名稱,，程式中常會(huì)用到,。
   • VALUE="內(nèi)容",，是設(shè)定此一欄位的內(nèi)容,、值或是意義,。
   • ALIGN="對(duì)齊方式"，是設(shè)定此一欄位的對(duì)齊方式,，其值有：TOP（向上對(duì)齊）,、MIDDLE（向中對(duì)齊）、BOTTOM（向下對(duì)齊）,、RIGHT（向右對(duì)齊）、LEFT（向左對(duì)齊）,、TEXTTOP（向文字頂部對(duì)齊）、BASELINE（向文字底部對(duì)齊）,、ABSMIDDLE（絕對(duì)置中）,、ABSBOTTOM（絕對(duì)置下）等。
   • CHECKED,，是設(shè)定此一欄位為預(yù)設(shè)選取值。

   ---

    

4. 密碼表單：利用TYPE=" PASSWORD "就會(huì)產(chǎn)生一個(gè)密碼表單,，密碼表單和文字輸入表單長(zhǎng)得幾乎一樣，差別就在于密碼表單在輸入時(shí)全部會(huì)以星號(hào)來(lái)取代輸入的文字,，以防他人偷窺,。

   呈現(xiàn)結(jié)果	請(qǐng)輸入密碼：
   原始碼	<FORM> 請(qǐng)輸入密碼：<INPUT TYPE="PASSWORD" NAME="INPUT"> </FORM>

   其有下列可設(shè)定之屬性：

   • NAME="名稱"，是設(shè)定此一欄位的名稱,，程式中常會(huì)用到,。
   • SIZE="數(shù)值"，是設(shè)定此一欄位顯現(xiàn)的寬度,。
   • VALUE="預(yù)設(shè)內(nèi)容",，是設(shè)定此一欄位的預(yù)設(shè)內(nèi)容，不過呈現(xiàn)出來(lái)仍是星號(hào),。
   • ALIGN="對(duì)齊方式",，是設(shè)定此一欄位的對(duì)齊方式，其值有：TOP（向上對(duì)齊）,、MIDDLE（向中對(duì)齊）,、BOTTOM（向下對(duì)齊）、RIGHT（向右對(duì)齊）,、LEFT（向左對(duì)齊）,、TEXTTOP（向文字頂部對(duì)齊）、BASELINE（向文字底部對(duì)齊）,、ABSMIDDLE（絕對(duì)置中）,、ABSBOTTOM（絕對(duì)置下）等,。
   • MAXLENGTH="數(shù)值"，是設(shè)定此一欄位可設(shè)定輸入的最大長(zhǎng)度,。

   ---

    

5. 送出按鈕：通常我們表單填完之后,，都會(huì)有一個(gè)送出按鈕以及清除重寫的按鈕，分別是利用TYPE=" SUBMIT "及TYPE=" RESET "來(lái)產(chǎn)生,，相當(dāng)?shù)暮?jiǎn)單易用,。

   呈現(xiàn)結(jié)果
   原始碼	<FORM> <INPUT TYPE="SUBMIT" VALUE="送出資料"> <INPUT TYPE="RESET" VALUE="重新填寫"> </FORM>

   其有下列可設(shè)定之屬性：

   • NAME="名稱"，是設(shè)定此一按鈕的名稱,。
   • VALUE="文字",，是設(shè)定此一按鈕上要呈現(xiàn)的文字，若是沒有設(shè)定,，瀏覽器也會(huì)自動(dòng)替您加上“送出查詢”,、“重設(shè)”等字樣。
   • ALIGN="對(duì)齊方式",，是設(shè)定此一欄位的對(duì)齊方式,，其值有：TOP（向上對(duì)齊）、MIDDLE（向中對(duì)齊）,、BOTTOM（向下對(duì)齊）,、RIGHT（向右對(duì)齊）、LEFT（向左對(duì)齊）,、TEXTTOP（向文字頂部對(duì)齊）,、BASELINE（向文字底部對(duì)齊）、ABSMIDDLE（絕對(duì)置中）,、ABSBOTTOM（絕對(duì)置下）等,。

   ---

    

6. 按鈕元件：表單中或是JAVA SCRIPT常會(huì)用到按鈕來(lái)作一些效果，因此,，我們可以利用TYPE=" BUTTON "來(lái)產(chǎn)生一個(gè)按鈕,，相當(dāng)簡(jiǎn)單。

   呈現(xiàn)結(jié)果	請(qǐng)按下按鈕：
   原始碼	<FORM> 請(qǐng)按下按鈕：<INPUT TYPE="BUTTON" NAME="OK" VALUE="我同意"> </FORM>

   其有下列可設(shè)定之屬性：

   • NAME="名稱",，是設(shè)定此一按鈕的名稱,。
   • VALUE="文字"，是設(shè)定此一按鈕上要呈現(xiàn)的文字,。
   • ALIGN="對(duì)齊方式",，是設(shè)定此一欄位的對(duì)齊方式，其值有：TOP（向上對(duì)齊）,、MIDDLE（向中對(duì)齊）,、BOTTOM（向下對(duì)齊）、RIGHT（向右對(duì)齊）、LEFT（向左對(duì)齊）,、TEXTTOP（向文字頂部對(duì)齊）,、BASELINE（向文字底部對(duì)齊）、ABSMIDDLE（絕對(duì)置中）,、ABSBOTTOM（絕對(duì)置下）等。

   ---

    

7. 隱藏欄位：表單中有時(shí)有些東西因?yàn)槟承┮蛩?，不想讓使用者看到,，但因程式需要卻又不得不存在，此時(shí),，我們就可以利用TYPE=" HIDDEN "來(lái)產(chǎn)生一個(gè)隱藏的欄位,。

   呈現(xiàn)結(jié)果	隱藏欄位：
   原始碼	<FORM> 隱藏欄位：<INPUT TYPE="HIDDEN" NAME="NOSEE" VALUE="看不到"> </FORM>

   其有下列可設(shè)定之屬性：

   • NAME="名稱"，是設(shè)定此一欄位的名稱,。
   • VALUE="文字",，是設(shè)定此一欄位的值、文字或意義,。

    

1. 有時(shí)候我們會(huì)希望讓使用者輸入比較大量的文字,，此時(shí)，文字輸入列就顯得不敷使用,，因此我們就可以利用<TEXTAREA></TEXTAREA>來(lái)產(chǎn)生一個(gè)可以輸入大量文字的元件,，夾在兩個(gè)標(biāo)簽中的文字會(huì)出現(xiàn)在框框中，可作為預(yù)設(shè)文字,。

   呈現(xiàn)結(jié)果	請(qǐng)輸入您的意見：
   原始碼	<FORM> 請(qǐng)輸入您的意見：<BR> <TEXTAREA NAME="TALK" COLS="20" ROWS="3"></TEXTAREA> </FORM>

   其有下列可設(shè)定之屬性：

   • NAME="名稱",，是設(shè)定此一欄位的名稱。
   • WRAP="設(shè)定值",，是設(shè)定此一欄位的換行模式,。設(shè)定值有三種：OFF（輸入文字不會(huì)自動(dòng)換行）、VIRTUAL（輸入文字在螢?zāi)簧蠒?huì)自動(dòng)換行,，不過若是使用者沒有自行按下ENTER換行,，送出資料時(shí)，也視為沒有換行）,、PHYSICAL（輸入文字會(huì)自動(dòng)換行,，送出資料時(shí)，會(huì)將螢?zāi)簧系淖詣?dòng)換行,，視為換行效果送出）,。
   • COLS="數(shù)值"，是設(shè)定此一欄位的行數(shù)（橫向字?jǐn)?shù)）,。
   • ROWS="數(shù)值",，是設(shè)定此一欄位的列數(shù)（垂直字?jǐn)?shù)）。

    

1. 下拉式選單令整個(gè)網(wǎng)頁(yè)看起來(lái)有很專業(yè)的感覺，我們只要利用<SELECT NAME="名稱">便可以產(chǎn)生一個(gè)下拉式選單,，另外,，還需要配合<OPTION>標(biāo)簽來(lái)產(chǎn)生選項(xiàng)，這樣才算完整喔,！

   呈現(xiàn)結(jié)果	您喜歡看書嗎,？：
   原始碼	<FORM> 您喜歡看書嗎？： <SELECT NAME="LIKE"> <OPTION VALUE="非常喜歡">非常喜歡 <OPTION VALUE="還算喜歡">還算喜歡 <OPTION VALUE="不太喜歡">不太喜歡 <OPTION VALUE="非常討厭">非常討厭 </SELECT> </FORM>

   其有下列可設(shè)定之屬性：

   • SIZE="數(shù)值",，是設(shè)定此一欄位的大小,，預(yù)設(shè)值為1，若是您的選項(xiàng)有四個(gè),，然后您將SIZE設(shè)成4,，那么，下拉式選單便會(huì)變成選項(xiàng)方塊,，將四個(gè)選項(xiàng)一起呈現(xiàn)在方塊中,。
   • MULTIPLE，是設(shè)定此一欄位為復(fù)選,，可以一次選好幾個(gè)選項(xiàng),。

    

1. 首先，各位先看看右手邊這張圖,，我將利用這張圖來(lái)作解說(shuō),，這樣子，講起來(lái)可能會(huì)清楚一點(diǎn),。 OK,！我們可以看見，右邊的這個(gè)視窗,，一共分為 1 ,、 2 、 3 三個(gè)框架,，每一個(gè)框架,，各有其顯示的內(nèi)容分別是a.htm、b.htm,、c.htm三個(gè)檔案,。然而左下角的那個(gè) index.htm 是做什么用的呢？

    

2. 原來(lái),，左下角的這個(gè)檔案 index.htm,，就是要告訴電腦，我們要將畫面分割成這樣,，也就是說(shuō),，所有Frame的標(biāo)簽,，其實(shí)都只擺在 index.htm 這個(gè)檔案里。（當(dāng)然,，不是檔名一定要叫做 index.htm 取其他檔名也是可以的,。）

    

3. 這樣明白了嗎？總之,，您要分割幾個(gè)框框,，就一定會(huì)有幾個(gè)對(duì)應(yīng)的html檔案（假如您要分割100個(gè)框框，就要有100個(gè)html檔就對(duì)了,。）,，另外，還會(huì)多一個(gè)檔案是來(lái)告訴電腦要如何分割的,。（也就是例中的 index.htm 檔啦?。?

1. 別急,、別急,，分割視窗可是一門學(xué)問，要分割也是要一步一步來(lái)的,?？纯磩倓偰抢樱胂癞嬅媸且粋€(gè)蛋糕,，你要怎么割,，才能割成那樣呢？

   原始碼	呈現(xiàn)結(jié)果
   <HTML> <HEAD> <TITLE>框窗實(shí)作</TITLE> </HEAD> </HTML>

    

2. 各位會(huì)發(fā)現(xiàn),，奇怪,，在上面的語(yǔ)法中，怎么都沒見到<BODY></BODY>熟悉的身影,？呵呵...沒錯(cuò),，它已經(jīng)被待會(huì)兒要加進(jìn)去的<FRAMESET></FRAMESET>標(biāo)簽給取代了！也就是說(shuō),，如果我們要分割畫面,，就要先用<FRAMESET>標(biāo)簽告訴電腦說(shuō)：‘喂！我要開始分割了,！’此時(shí),，<BODY>是派不上用場(chǎng)的，所以躲到一旁涼快去了,！

    

3. 現(xiàn)在開始動(dòng)手割割看啰,！我們先將畫面分成左右兩邊（左邊就是框窗 1 了，右邊就暫定為 2 等一下還要分割呢?。?/font>,，如下圖：

   原始碼	呈現(xiàn)結(jié)果
   <HTML> <HEAD> <TITLE>框窗實(shí)作</TITLE> </HEAD> <FRAMESET COLS="120,*" > 　<FRAME SRC="a.htm" NAME="1"> 　<FRAME SRC="b.htm" NAME="2"> </FRAMESET> </HTML>

    

4. 在<FRAMESET>中,，我們要告訴電腦到底是要左右分（COLS）？還是上下分（ROWS）,。一開始我們是左右分,，所以我們寫成<FRAMESET COLS="120,*" >。COLS="120,*" 就是說(shuō),，左邊那一欄強(qiáng)制定為 120點(diǎn),，右邊則隨視窗大小而變。除了直接寫點(diǎn)數(shù)外,，我們亦可用百分比來(lái)表示,，例如COLS="20%,80%"也是可以的。

    

5. 然后,，再將右邊的框窗再割成上下兩個(gè)畫面（也就是框窗 2 和 3 了）,。如下圖：

   原始碼	呈現(xiàn)結(jié)果
   <HTML> <HEAD> <TITLE>框窗實(shí)作</TITLE> </HEAD> <FRAMESET COLS="120,*"> 　<FRAME SRC="a.htm" NAME="1"> 　<FRAMESET ROWS="100,*"> 　　<FRAME SRC="b.htm" NAME="2"> 　　<FRAME SRC="c.htm" NAME="3"> 　</FRAMESET> </FRAMESET> </HTML>

    

6. 看見了沒？原本的<FRAME SRC="b.htm" NAME="2">（在第 3 點(diǎn)的語(yǔ)法中）被另一組<FRAMESET ROWS="100,*" >所取代了,！所以要注意喔,！第二組<FRAMESET ROWS="100,*" >是被第一組<FRAMESET COLS="120,*" >所包圍起來(lái)的喔！（亂七八糟了對(duì)不對(duì),？）

    

7. 呵呵...不知不覺就大功告成了,，其實(shí)只要將最后完成的那些語(yǔ)法存成 index.htm，然后再準(zhǔn)備三個(gè)檔 a.htm ,、b.htm ,、c.htm那么就完工啰！當(dāng)然,，這是一個(gè)最陽(yáng)春的分割法,，我會(huì)再將一些進(jìn)階的標(biāo)簽在底下一一說(shuō)明。