一福贞，HTML語(yǔ)言的一般語(yǔ)法：

1，圍堵標(biāo)記：<>…

1）帶屬性的標(biāo)記： …

2）無屬性的標(biāo)記：加粗 居中 標(biāo)題

2祖驱，空標(biāo)記：有開始無終點(diǎn) <>……

2）無屬性標(biāo)記：
回車或換行

二握恳，HTML語(yǔ)言常用標(biāo)記介紹

1，文件標(biāo)記：

1）：表示網(wǎng)頁(yè)文件的開始和結(jié)束

2）：頭捺僻，文件頭標(biāo)記乡洼，瀏覽當(dāng)中不想放在里面的，不想顯示的匕坯。

①網(wǎng)頁(yè)的標(biāo)題 ②腳本語(yǔ)言代碼 ③自定義的CSS樣式 ④網(wǎng)頁(yè)自動(dòng)轉(zhuǎn)向（刷新） ⑤網(wǎng)頁(yè)背景音樂

3）：設(shè)置網(wǎng)頁(yè)標(biāo)題

4）：身體束昵，文件體標(biāo)記（網(wǎng)頁(yè)里所有內(nèi)容）

標(biāo)記的屬性：

①text=#000000 16進(jìn)制數(shù)表示（網(wǎng)頁(yè)文本色）網(wǎng)絡(luò)顏色（216種）

0123456789ABCDEF

格式：

紅：FF0000 綠：00FF00 藍(lán)：0000FF

黃：FFFF00 洋紅（品色）：FF00FF 青：00FFFF

白：FFFFFF 黑：000000 淺藍(lán)：5555FF

深藍(lán)：000099 灰色：為均值時(shí) 中灰色：777777 深灰：333333

可用英文單詞：如：red 紅 black 黑 gray 灰

②bgcolor=#FFFFFF （設(shè)置背景色）

③link=#000000（文字超鏈正常顯示的顏色）

④alink=#000000 （文字超鏈擊活時(shí)顯示的顏色）

⑤vlink=#000000 （文字超鏈用過后顯示的顏色）

⑥background=“文件名”（設(shè)置網(wǎng)頁(yè)背景圖）必須是gif jpg PNG格式

⑦bgproperties=fixed （固定網(wǎng)頁(yè)背景圖）

注意：

1)屬性屬于標(biāo)記，不能單獨(dú)使用葛峻。

2)屬性的值兩側(cè)的“”引號(hào)可省略妻怎。

3)屬性可使用多個(gè)，屬性之間至少用一個(gè)空格分開泞歉，無前后次序逼侦，但必須在標(biāo)記后面。

2腰耙，排版類標(biāo)記：

1）：空標(biāo)記榛丢，放在頭部。2）

：標(biāo)記（定義自然段）

3）
：空標(biāo)記挺庞，軟回車

4）

①size=數(shù)值（線的粗細(xì)）單位：px（像素）

②width=數(shù)值（線的長(zhǎng)度或?qū)挾龋┛梢杂胮x，也可用%（相應(yīng)寬度）

③align=center或left或right 居中 居左 居右

④noshade：取消陰影（水平線的）

⑤color=#000000：設(shè)置水平線顏色

第二節(jié)

5）：控制文本或圖片水平居中

6）

：預(yù)設(shè)格式（按照原代碼的格式选侨，在IE中顯示）字號(hào)自動(dòng)小一級(jí)

7）：加粗掖鱼， =相等

8）：斜體（傾斜） =相等

9）：設(shè)置下劃線

10）

…

：六級(jí)標(biāo)題，特點(diǎn)：獨(dú)站一行（字體援制、字形戏挡、字號(hào)不能改變）

11）：排版標(biāo)記，（設(shè)置字體，字號(hào)，字色）

屬性：face=宋體或其它

size=數(shù)值樱调，從1-7（絕對(duì)字號(hào)）或（+1-+7）（-1- -7）相對(duì)字號(hào) 默認(rèn)字號(hào)為3號(hào)

color=#000000 等于某個(gè)顏色值按ctrl+拖動(dòng)，復(fù)制

字號(hào) 1 2 3 4 5 6 7

實(shí)際大小 9(px) 10pt磅 12pt 14pt 18pt 24pt 36磅

1英寸=72磅 1(pt)=0.3527mm（毫米）

3妥凳，鏈接標(biāo)記：

：為網(wǎng)頁(yè)中文字或圖片設(shè)置超鏈接（也可做內(nèi)部鏈接）屬性：href=URL（網(wǎng)址）完整的 加http://

title=文字 設(shè)置鼠標(biāo)指針標(biāo)簽

target=_blank 新建窗口

_self 目標(biāo)窗口（默認(rèn)）

目錄網(wǎng)頁(yè) 如：加=../圖片名(…)上目錄

4，圖片標(biāo)記：

1）src=文件名絕對(duì)路徑：file://d:“文件夾名”/圖片名（網(wǎng)頁(yè)和圖片是鏈接關(guān)系）

2）alt=文字（設(shè)置圖片憑帶文本）不顯示圖片：工具/選項(xiàng)/顯示圖片/不打勾t答捕，瀏覽網(wǎng)頁(yè)中（右擊“顯示圖片”）

3）height=數(shù)值（單位：px）高度

4）width=數(shù)值（單位：px）寬度

5）align=top（頂）一行文字 middle（中） 圖片與同行文字的對(duì)齊方式 bottom（底） left（左） 圖片的水平對(duì)齊方式 right（右）

6）vspace=數(shù)值 （垂直間距） 左右兩側(cè)

7）hspace=數(shù)值 （水平間距）

8）border=數(shù)值（設(shè)置圖片邊框大惺旁俊）

5，表格標(biāo)記：

1）創(chuàng)建表格的標(biāo)記：

①：定義一個(gè)表格

②：定義一個(gè)行

③：定義一個(gè)單元格

④：定義一個(gè)單元格（一般用表頭）

第一行

第二行

加文字第一行拱镐，第一個(gè)單元格

加文字

結(jié)束第一行

結(jié)束第二行

ctrl+Z：撤消

的屬性：

①width=數(shù)值（實(shí)數(shù)）絕對(duì)寬度艘款、或（百分比）相對(duì)寬度

②height=數(shù)值

③cellspacing=數(shù)值（單元格之間的間格距離）

④cellpadding=數(shù)值（內(nèi)容對(duì)應(yīng)單元格的間格距離）

⑤align=left 控制表格center 居中 在容器中的水平 right 右對(duì)齊方式

⑥bgcolor=#000000（設(shè)置表格背景色）

⑦background=文件名（設(shè)置表格背景圖）

⑧border=數(shù)值（表格邊框大谐旨省）

如果出現(xiàn)待機(jī)狀態(tài)：ctrl+alt+← 退格

⑨bordercolor=#000000（設(shè)置邊框顏色）

⑩bordercolorlight=#000000（設(shè)置邊框的像光色）

⑾bordercolordark=#000000（設(shè)置邊框背光色）

的屬性

①align=left 內(nèi)容的水平對(duì)齊方式center right

②valign=top 內(nèi)容的垂直對(duì)齊方式middle bottom

③colspan=數(shù)值（橫向占格）本身還占一個(gè)格

④rowspan=數(shù)值（縱向占格）

第三節(jié)

1，其它標(biāo)記：

1）：空標(biāo)記

作用：①定義網(wǎng)頁(yè)代碼 ②設(shè)置搜索關(guān)鍵字 ③URL自動(dòng)刷新或自動(dòng)轉(zhuǎn)向 ④設(shè)置網(wǎng)頁(yè)切換的動(dòng)態(tài)過渡的效果

①定義網(wǎng)頁(yè)代碼：（ctrl+U）字體 內(nèi)容 類型 楷體

②收索關(guān)鍵字： 關(guān)鍵之間可用“磷箕；”分開

③若干時(shí)間后选酗，網(wǎng)頁(yè)自動(dòng)刷新轉(zhuǎn)到指定的地址：

④動(dòng)態(tài)過渡效果：

page-enter：網(wǎng)頁(yè)進(jìn)入時(shí)出現(xiàn)動(dòng)畫

page-exit：網(wǎng)頁(yè)退出時(shí)出現(xiàn)動(dòng)畫

transition：設(shè)置動(dòng)畫的過渡效果（0-23）共24種

duration：持續(xù)時(shí)間，單位是秒

0：盒狀收縮 1：盒狀放設(shè) 2：圓形收縮

3：圓形放射 4：由下往上 5：由上往下

6：從左至右 7：從右至左 8：垂直百葉窗

9：水平百葉窗 10：水平格狀百葉窗 11：垂直格狀百葉窗

12：隨意溶解 13：從左右兩端向中間展開

14：從中間向左右兩端展開 15：從上下兩端向中間展開

16：從中間向上下兩端展開 17：從右上角向左下角展開

18：從右下角向左上角展開 19：從左上角向右下角展開

20：從左下角向右上角展開 21：水平線狀展開

22：垂直線狀展開 23：隨機(jī)（不一定）

2岳枷，：設(shè)置網(wǎng)頁(yè)背景音樂（位置在頭部）空標(biāo)記

聲音格式： （Mp3不能設(shè)置）體積小單音 聲音效果好芒填，但體積大（一首歌5Mb）

屬性：src=文件名

loop=數(shù)值（設(shè)置音樂拔放的次數(shù)）如果不用是無限

3，：為文字或圖片設(shè)置“走馬燈”效果（圍堵類）

屬性：

①behavior =scroll 無限尋環(huán)滾動(dòng)

slide 從右到左滾動(dòng)一次空繁，到邊即停

alternate 左右來回滾動(dòng)（彈）

②direction=left（默認(rèn)）從右向左

right 左向右

up 向上（下到上）

down 向下（上到下）

③scrolldelay=數(shù)值（控制延遲時(shí)間殿衰，單位：毫秒）

④scrollamount=數(shù)值（控制兩針之間移動(dòng)的距離，單位：像素）

⑤loop=數(shù)值（控制尋環(huán)次數(shù)）

⑥width=數(shù)值（控制滾動(dòng)的寬度）

⑦h(yuǎn)eight=數(shù)值（高度）

⑧bgcolor=#000000（控制滾動(dòng)期間的背景色）

鼠標(biāo)移入“走馬燈”停止移動(dòng)：

onmouseover=this.stop(); onmouseout=this.start();

4盛泡，特殊字符：

1）空格： （一個(gè)空格占0.5個(gè)漢字）

2）版權(quán)：○C ?

3）○R ?

4）商標(biāo)：TM ?

5）&：&

6）人民幣：￥

7）黑桃：?

8）劍號(hào)：?

9）叉字號(hào)：&psI;

10）方塊號(hào)：?

11）小腳丫：?

12）心號(hào)：&hearts

13）草花：&dabs

HTML基礎(chǔ)-第一講

HTML是網(wǎng)頁(yè)主要的組成部分闷祥，基本上一個(gè)網(wǎng)頁(yè)都是由HTML語(yǔ)言組成的，所以要學(xué)習(xí)網(wǎng)站怎樣建設(shè)傲诵，必須從網(wǎng)頁(yè)的基本語(yǔ)言學(xué)起凯砍。

先簡(jiǎn)單的介紹一下HTML語(yǔ)言（我們?cè)谶@灌輸大家的是能夠?qū)嶋H操作），HTML是網(wǎng)絡(luò)的通用語(yǔ)言,一種簡(jiǎn)單拴竹、通用的全置標(biāo)記語(yǔ)言悟衩。它允許網(wǎng)頁(yè)制作人

建立文本與圖片相結(jié)合的復(fù)雜頁(yè)面，這些頁(yè)面可以被網(wǎng)上任何其他人瀏覽到栓拜，無論使用的是什么類型的電腦或?yàn)g覽器座泳。神奇嗎?一點(diǎn)都不神奇,因?yàn)楝F(xiàn)

在你看到的就是這種語(yǔ)言寫的頁(yè)面。

是呀幕与，HTML并不是很神奇挑势，只是因?yàn)槟悴皇呛芰私馑F(xiàn)在咱們就開始接她的面紗：

一啦鸣、HTML的組成結(jié)構(gòu)（頭部潮饱、眼睛、身體----好像一個(gè)人一樣是不是赏陵？）

1饼齿、頭部。只要你學(xué)過英語(yǔ)蝙搔，你應(yīng)該知道頭怎么用英文寫吧！yes考传，HEAD就是了吃型；所以，頭部的HTML寫法就是頭部的內(nèi)容僚楞，簡(jiǎn)單不勤晚，大

家注意一下枉层，這兩個(gè)非常相似，只是后一個(gè)比前一個(gè)多了“/”符號(hào)赐写。類似這樣的以后會(huì)經(jīng)常用到鸟蜡。

2、眼睛挺邀。就好像人的眼睛一樣揉忘，它是心靈的窗口，而一個(gè)網(wǎng)頁(yè)的眼睛應(yīng)該就是它的頁(yè)面的標(biāo)題了端铛，標(biāo)題怎么說呢泣矛？title,yes！大家知道眼睛是長(zhǎng)在

頭上的禾蚕，所以啦:標(biāo)題這些應(yīng)放在和之間您朽。也就是

標(biāo)題

3、身體换淆。身體是網(wǎng)頁(yè)最主要的部分了哗总，因?yàn)榍懊嬷v的都不是頁(yè)面所顯現(xiàn)出來的，而大家所看到的頁(yè)面頁(yè)就是他的身體部分了（當(dāng)然它的TITLE可以在

瀏覽器的最左上角可以看到）倍试，身體----BODY讯屈，他的寫法也就是：頁(yè)面內(nèi)容最后，別忘了把這些部分組成一體----網(wǎng)頁(yè)易猫，所以咱們就

用把他們給包起來耻煤。

好了，咱們來大體看看網(wǎng)頁(yè)的結(jié)構(gòu)：

標(biāo)題

頁(yè)面內(nèi)容

HTML基礎(chǔ)-第二講

我們?cè)诘谝恢v里概括了一下網(wǎng)頁(yè)的主要框架准颓，現(xiàn)在我們來詳細(xì)的研究網(wǎng)頁(yè)的內(nèi)部細(xì)則：

先從它的身體部分(body) 開始：

欣賞一個(gè)網(wǎng)頁(yè)時(shí)哈蝇，一般先注意到的是這個(gè)頁(yè)面的背景，如果有背景音樂攘已，那就更吸引人了炮赦！是不是呀，那么這些是怎么實(shí)現(xiàn)的呢样勃？看下邊：

1吠勘、背景顏色

我們發(fā)現(xiàn)多了個(gè)bgcolor其實(shí)就是backgroundcolor（背景顏色）的意思，bgcolor="red"設(shè)置網(wǎng)頁(yè)的背景顏色為紅色峡眶，現(xiàn)在顏色

一般都是#ff0000樣式的剧防。

2、背景圖片

中“backgroud”就是設(shè)置背景圖片的啦辫樱，back-ground.gif是背景圖片的名字峭拘，為什么有的朋友也是如此寫

的，而網(wǎng)頁(yè)卻沒有背景圖片呢？其實(shí)back-ground.gif是該圖片相對(duì)于這個(gè)頁(yè)面的位置鸡挠，比如你做的這個(gè)頁(yè)面放在c:\我的網(wǎng)站\辉饱，而背景圖片的位置

放在c:\我的網(wǎng)站\images\，那么就得這樣寫了：拣展，注意兩者的區(qū)別彭沼！

3、背景音樂

背景音樂和上邊介紹的兩個(gè)有很大的不同备埃，它的代碼是放在頁(yè)面的頭部里姓惑，為什么在這里講呢？就是因?yàn)樗彩秋@示網(wǎng)頁(yè)的時(shí)候我們

首先接受到的信息瓜喇⊥σ妫看看它的代碼吧：

bgsound 不用說了吧背景聲音，background_sound.mid是音樂的文件名乘寒，當(dāng)然也得寫它的相對(duì)路徑哦（關(guān)于相對(duì)路徑望众，可能有的網(wǎng)友，一下子不能搞

明白伞辛，我們將會(huì)在其他板塊介紹的）烂翰！loop，循環(huán)蚤氏，那么loop="-1"是什么意思呢甘耿？loop是bgsound 的一個(gè)屬性，當(dāng)然src也是了竿滨，后邊跟得就是屬性

值了佳恬，那么loop="-1"就是無限循環(huán)的意思，只要是頁(yè)面打開于游，音樂不會(huì)停止的毁葱，loop="1"說明循環(huán)一次，等于0就是不循環(huán)了贰剥，呵呵倾剿，簡(jiǎn)單不！

4蚌成、body其它屬性：topmargin前痘，leftmargin。有的朋友再做頁(yè)面的時(shí)候担忧，感覺文字或者表格怎么也不能靠在瀏覽器的最上邊和最左邊芹缔，怎么回事呢？

因?yàn)橐话阄覀冇玫闹谱鬈浖蛘哒fhtml語(yǔ)言默認(rèn)的都是topmargin和leftmargin值等于12瓶盛，如果你把他們的值設(shè)為0乖菱，你看看會(huì)有什么效果坡锡！如下比較

一下和蓬网，有興趣的朋友可以任意設(shè)置他們的值窒所！

好了，這一節(jié)先講到這里帆锋！大家在自己的電腦上實(shí)習(xí)一下吵取，呵呵！

HTML基礎(chǔ)第三講---字體

同樣我們?cè)谶@里繼續(xù)講一下它的body锯厢，因?yàn)樗苤庇^的讓大家觀察到你所學(xué)到的成果皮官。

這一講，我們來學(xué)習(xí)字體及其屬性实辑，然后大家在學(xué)習(xí)完后制作一下捺氢，看看它的每一個(gè)屬性所表現(xiàn)的效果。

字體剪撬，英文font摄乒，這html語(yǔ)言中也是它---font，下面咱們來研究一下font:

1残黑、標(biāo)題字體 文字 # =1馍佑，2，3梨水，4拭荤，5，6

比如：

今天天氣真好疫诽！

注意：這些一般的用在標(biāo)題上舅世，所以起名叫標(biāo)題字體； ... 這些標(biāo)記顯示黑體字奇徒；這些標(biāo)記自動(dòng)插入一個(gè)空行雏亚，不必用

標(biāo)記再加空

行，因此在一行中無法使用不同大小的字體逼龟。

2评凝、字體的大小，用于一般文字腺律。

文字 #=1, 2, 3, 4, 5, 6, 7 or +#, -#

#=1, 2, 3, 4, 5, 6, 7

例子：今天天氣真好奕短！

3、邏輯字體(Logical Style)

下劃線：文字匀钧，代碼：文字翎碑，刪除線：文字，閃爍：文字之斯，增強(qiáng)：文

字日杈，強(qiáng)調(diào)：文字，示例：文字，還有老多莉擒，一般的這些了解一下就可以酿炸。

4、字體的標(biāo)志涨冀，很常用的填硕。粗體：文字，斜體：文字

5鹿鳖、字體顏色

指定顏色 文字 # ="#rrggbb" 16 進(jìn)制數(shù)碼扁眯，或者是下列預(yù)定義色彩：

Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,Fuchsia, White, Green, Purple, Silver, Yellow, Aqua?

對(duì)于16 進(jìn)制編碼的顏色，我們可以這樣理解rrggbb六個(gè)字符：前兩個(gè)表示紅色翅帜，中間的兩個(gè)表示綠色姻檀，后兩個(gè)表示藍(lán)色；那么涝滴，紅色（red）

ff0000绣版，同樣綠色（green）00ff00，藍(lán)色0000ff狭莱；其它的顏色就是這幾個(gè)字符（0-9僵娃，a-f）的組合。

比如： 文字 紅色文字

文字 紅色文字

大家看看 文字 是什么顏色的文字

6腋妙、客戶端字體(Font Face)

... #=客戶端可獲得的字體默怨，什么是客戶端，通俗的講骤素，就是你的電腦匙睹，face="#"就是從你的電腦獲得的字

體，大家可以點(diǎn)擊客戶端字體(Font Face)示例 济竹。

7痕檬、字符實(shí)體(Entities)，字符實(shí)體一般用在把html里的符號(hào)顯示在頁(yè)面上比如"<"送浊、"&"等梦谜，如果你單獨(dú)的打上<，頁(yè)面也可以顯示袭景，但如果你想顯

示這幾個(gè)字符唁桩，怎么辦呢？就是它啦耸棒。

&#; #=字符實(shí)體名稱 或者 ascii 值

& &

< <

> >

" "

這些只是一小部分荒澡，那么要顯示就要寫成了。

以上學(xué)到的我們可以綜合使用：比如文字

注意寫的時(shí)候要前后一致前面后邊對(duì)應(yīng)的也應(yīng)該

好了与殃，關(guān)于字體就講完了单山！

HTML基礎(chǔ)第四講---圖像

圖像碍现，也就是images，在html語(yǔ)法中用img來表示米奸，其基本的語(yǔ)法是：

圖象在頁(yè)面中的對(duì)齊/布局：

align昼接，它的值left, center, right就是他的中文意思，left居左躏升，center居中辩棒，right居右。

圖象和文字的對(duì)齊：

的靠上邊膨疏、中間、底端钻弄。大家可以對(duì)比這看看各自的效果佃却，很容易記住哦！

大家可以在自己的機(jī)子上按照我給你的語(yǔ)法窘俺，寫下來饲帅，看看效果就行了。

HTML基礎(chǔ)第五講---控制表格及其表項(xiàng)的對(duì)齊方式

缺省情況下瘤泪，表格在瀏覽器屏幕上左對(duì)齊灶泵，你可以使用的ALIGN屬性來指定表格的對(duì)齊方式。ALIGN屬性可以取值“l(fā)eft”对途、“center”和“

right”赦邻。例如，讓一個(gè)表格在屏幕中央顯示可以使用：

注意

使用的ALIGN屬性要小心实檀，不是所有的瀏覽器都能識(shí)別它惶洲。如果你要讓表格顯示在屏幕中央，使用標(biāo)識(shí)符來包含表格會(huì)更安全些膳犹。

你可以使用的ALIGN屬性來設(shè)置表格中每行元素的水平對(duì)齊方式恬吕，這個(gè)屬性也可以取值“l(fā)eft”、“center”和“right”须床。要設(shè)置某一行中所

有元素的豎直對(duì)齊方式铐料，可以使用的VALIGN屬性，它可以取值“top”豺旬、“middle”和“botton”（缺省情況下取值“middle”）钠惩。

要更好地控制表格中某個(gè)表頭或元素的排列方式，可以使用和標(biāo)識(shí)符的ALIGN和VALIGN屬性哈垢，這兩個(gè)屬性的取值范圍與相同妻柒，然

而的ALIGN和VALIGN屬性將會(huì)覆蓋任何為整個(gè)一行指定的排列方式。

控制表項(xiàng)的空間

當(dāng)瀏覽器顯示一個(gè)表格時(shí)耘分，它將每一列的寬度設(shè)置為這一列中最長(zhǎng)表項(xiàng)的寬度举塔。瀏覽器盡可能地占用較小的屏幕空間來緊密地排列表格中的每一項(xiàng)绑警。

你可以使用的CELLPADDING和CELLSPACING屬性來改變這一缺省值。

通過使用CELLPADDING屬性央渣，你可以為表格中的每一項(xiàng)安排一個(gè)更大的空間计盒，使用CELLSPACING屬性，你可以為表項(xiàng)之間留出一定的空間芽丹。這兩個(gè)屬性

的值都以象素來指定北启。下面的例子說明了如何使用這兩個(gè)屬性（見圖6.20）：

Cell Spacing

Normal Table

First Column

Second Column

Table With Cell Spacing

First Column

Second Column

Table With Cell Padding

First Column

Second Column

控制表格和表項(xiàng)的大小

某些時(shí)候你可能想讓表格顯示出來大一些，你可以用的WIDTH屬性來控制表格的寬度拔第，你可以為WIDTH屬性提供寬度的絕對(duì)值或相對(duì)值咕村。

當(dāng)為WIDTH屬性提供寬度的絕對(duì)值時(shí)，你用象素來表示蚊俺。例如懈涛，要建立一個(gè)寬為100個(gè)象素的表格，可以用泳猬。當(dāng)然批钠，并不能保證

表格顯示出來恰好是你指定的寬度，表項(xiàng)中的內(nèi)容可能會(huì)迫使表格顯示出來比WIDTH屬性指定的值要寬得封。

另外埋心，你也可以用相對(duì)值來指定表格的寬度，例如忙上，如果你想讓表格占有整個(gè)瀏覽器屏幕那么寬拷呆，你可以用，同樣地晨横，如

果你在WIDTH屬性中指定的百分?jǐn)?shù)太小的話洋腮，瀏覽器顯示出來的表格就不是那個(gè)寬度。

屬性可以用來指定表格的整體高度手形，同樣這個(gè)屬性可取絕對(duì)值和相對(duì)值啥供。但使用這個(gè)屬性時(shí)要小心，即使Microsoft和Netscape的瀏覽器都

能正確解釋它库糠，但它并不是HTML 3.2規(guī)范中的一部分伙狐。

你也可以用和標(biāo)識(shí)符的WIDTH和HEIGHT屬性來控制表格中某一表項(xiàng)的大小，你必須用絕對(duì)象素值來指定這些屬性的值瞬欧。你要知道當(dāng)你設(shè)置這

些值時(shí)贷屎，只不過是在為瀏覽器提供建議，瀏覽器盡量按你的意愿去做艘虎，但也有可能不能完全按你指定的方式來顯示一個(gè)表格唉侄。

在表格中加入顏色和圖象

根據(jù)HTML 3.2規(guī)范，表格不具有任何顏色屬性野建。然而属划，值得慶幸的是Netscape和Microsoft都擴(kuò)展了HTML來讓表格具有自己的背景色恬叹，兩種瀏覽器都

能識(shí)別標(biāo)識(shí)符的BGCOLOR屬性。

你可以使用顏色名或RGB值來設(shè)定BGCOLOR的值同眯，下面的例子說明了這個(gè)屬性的用法：

Table Color

I have a blue background

當(dāng)這個(gè)例子中的文字在瀏覽器上顯示時(shí)绽昼，它處于一個(gè)淺藍(lán)色的框中，這對(duì)于突出主頁(yè)上主體文字中某些特定的文本是很有用的须蜗。例如硅确，你可以使用這

種方法來突出一個(gè)引用、標(biāo)題或是網(wǎng)頁(yè)上一個(gè)簡(jiǎn)短的注釋明肮。

你也可以為表格中某一行甚至是某一個(gè)表項(xiàng)使用BGCOLOR屬性菱农。例如，可以用不同的顏色來區(qū)分表格中不同列的數(shù)據(jù)晤愧。

BGCOLOR屬性的一個(gè)更令人興奮的用處可能是設(shè)置你網(wǎng)頁(yè)的整體顏色大莫，如果你將表格的寬度設(shè)為屏幕的寬度，你可以建立一個(gè)具有多列的網(wǎng)頁(yè)官份，而每

一列都具有不同的顏色。下面的例子建立了一個(gè)有兩列不同顏色的網(wǎng)頁(yè)：

Two Color Columns

I have a olive background

I have a aqua background

Netscape和Microsoft的瀏覽器都允許你為表格設(shè)定背景圖片（見圖6.21）烙丛，你可以通過標(biāo)識(shí)符的BACKGROUND屬性來指定一幅圖象：

Two Color Columns

I have a checkered background

Netscape Navigator 4.0和Internet Explorer 3.0及4.0還允許你在表格的某一行或某個(gè)表項(xiàng)使用BACKGROUND屬性舅巷，通過為不同的表項(xiàng)使用不同的背

景圖象，你可以建立一個(gè)可視性非常強(qiáng)的網(wǎng)頁(yè)河咽。

表格作為子頁(yè)

標(biāo)識(shí)符最初被引入HTML是用來格式化地顯示信息钠右。然而，隨著時(shí)間的推移忘蟹，這個(gè)標(biāo)識(shí)符的屬性被大大地?cái)U(kuò)充了飒房，現(xiàn)在可以將看成是

用來在網(wǎng)頁(yè)中建立一個(gè)子頁(yè)的標(biāo)識(shí)符。這個(gè)標(biāo)識(shí)符被擴(kuò)展出了那么多的屬性媚值，以致于現(xiàn)在它很象標(biāo)識(shí)符了狠毯。在Netscape 和Microsoft的瀏覽

器上，具有許多和相同的屬性褥芒，你可以為表格指定它自己的背景色和圖象您旁。另外標(biāo)識(shí)符還能包含所有能在中包含的

HTML標(biāo)識(shí)符张峰。

然而，具有一個(gè)比更大的優(yōu)勢(shì)，每一個(gè)HTML文件必須有且只有一個(gè)標(biāo)識(shí)符挣棕，但對(duì)于來說，則沒有這種限制零如，你可以在

HTML文件中包含任意數(shù)目的溜在。

當(dāng)你設(shè)計(jì)網(wǎng)頁(yè)時(shí)，不要讓這個(gè)名字愚弄了你京闰。不僅僅用于建立表格颜及，還可以在你的網(wǎng)頁(yè)上建立子頁(yè)甩苛，當(dāng)你想把單個(gè)網(wǎng)頁(yè)分成多個(gè)部

分時(shí)，就用標(biāo)識(shí)符器予。

小結(jié)

本章講述了一些重要的HTML標(biāo)識(shí)符浪藻。例如，你現(xiàn)在知道了如何建立HTML窗體來讓你的網(wǎng)頁(yè)具有交互性乾翔。你還學(xué)習(xí)了一些對(duì)信息進(jìn)行列表的有用的

HTML標(biāo)識(shí)符爱葵。最后，你學(xué)習(xí)了怎樣用表格來組織信息反浓，以及怎樣用表格來為你的網(wǎng)點(diǎn)進(jìn)行高級(jí)網(wǎng)頁(yè)布局萌丈。

下一章將介紹一些HTML中高級(jí)的標(biāo)識(shí)符，你將學(xué)習(xí)怎樣使用image map雷则、框架及cascading style sheets辆雾。在學(xué)完下一章后，你就可以設(shè)計(jì)出任何你

曾經(jīng)看過月劈，甚至想過的度迂。

HTML基礎(chǔ)第六講---表格

上一講，風(fēng)行鶴朋友給我們講了關(guān)于《控制表格及其表項(xiàng)的對(duì)齊方式》猜揪，在這里我要講講表格及其屬性 惭墓，然后大家在復(fù)習(xí)一下上一節(jié)的內(nèi)容，這樣

就會(huì)有事半功倍的感覺而姐。

表格腊凶，一般的用于對(duì)網(wǎng)頁(yè)的內(nèi)容進(jìn)行排版，比如文字放在頁(yè)面的某個(gè)位置拴念，你就可以做個(gè)表格钧萍，然后設(shè)置一下表格的屬性，它文字放在表格的某個(gè)單

元個(gè)里政鼠，就行了风瘦；其實(shí)用過word的朋友應(yīng)該非常明白的。除了頁(yè)面的排版外缔俄，表格還可以制作出非常好看的效果弛秋，比如按鈕、變色俐载、邊線等等蟹略。大家

要會(huì)靈活的運(yùn)用。

看看表格的基本語(yǔ)法：... - 定義表格

...- 定義表行

...- 定義表頭

...- 定義表元

下面看看它的示例：

FoodDrinkSweet

ABC

不帶邊框的表格：

FoodDrinkSweet

ABC?

Food Drink Sweet

A B C

跨多行遏佣、多列的表元(Table Span)

跨多列的表元

Morning Menu

Food Drink Sweet

ABC

跨多行的表元

Morning Menu

Food A

Drink B

Sweet C

表格尺寸設(shè)置 邊框尺寸設(shè)置：

FoodDrinkSweet

ABC

表格尺寸設(shè)置：

FoodDrinkSweet

ABC?

表元間隙設(shè)置：

FoodDrinkSweet

ABC?

表元內(nèi)部空白設(shè)置：

FoodDrinkSweet

ABC?

表格內(nèi)文字的對(duì)齊/布局

#=left, center, right

FoodDrinkSweet

A

B

C?

#=top, middle, bottom, baseline

FoodDrink

SweetOther

A

B

C

D

好了挖炬，表格的基本的應(yīng)用就是這些了。大家有什么問題状婶，積極發(fā)問耙饬病Ｏ谙铩！草姻！

HTML基礎(chǔ)第七講---框架

框架（Frame）也就是所謂的分割窗口钓猬、分割畫面、框窗效果（還真是五花八門）撩独，這個(gè)技巧在運(yùn)用上問題比較多敞曹，用的好的話，有助于網(wǎng)友快速且

有條理的瀏覽網(wǎng)頁(yè)综膀，整理不好的話澳迫，呵呵...那笑話可就鬧大了。?

【框架的基本概念】

1. 首先剧劝，各位先看看右手邊這張圖橄登，我們將利用這張圖來作解說，這樣子讥此，講起來可能會(huì)清楚一點(diǎn)拢锹。 OK！我們可以看見萄喳，右邊的這個(gè)窗口面褐，一共分為

1 、 2 取胎、 3 三個(gè)框架，每一個(gè)框架湃窍，各有其顯示的內(nèi)容分別是a.htm闻蛀、b.htm、c.htm三個(gè)檔案您市。然而左下角的那個(gè) index.htm 是做什么用的呢觉痛？

2. 原來，左下角的這個(gè)檔案 index.htm茵休，就是要告訴計(jì)算機(jī)薪棒，我們要將畫面分割成這樣，也就是說榕莺，所有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è)檔案是來告訴計(jì)算機(jī)要如何分割的。（也就是例中的 index.htm 檔啦１小）

【開始分割】

1. 別急邓夕、別急，分割窗口可是一門學(xué)問亿笤，要分割也是要一步一步來的翎迁。看看剛剛那例子净薛，想象畫面是一個(gè)蛋糕汪榔，你要怎么割，才能割成那樣呢肃拜？

原始碼 呈現(xiàn)結(jié)果

框窗實(shí)作

2. 各位會(huì)發(fā)現(xiàn)痴腌，奇怪，在上面的語(yǔ)法中燃领，怎么都沒見到熟悉的身影士聪？呵呵...沒錯(cuò)，它已經(jīng)被待會(huì)兒要加進(jìn)去的

卷標(biāo)給取代了猛蔽！也就是說剥悟，如果我們要分割畫面，就要先用卷標(biāo)告訴計(jì)算機(jī)說：『喂曼库！我要開始分割了区岗！』此時(shí)，是派不上用場(chǎng)的毁枯，

所以躲到一旁涼快去了慈缔！

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

原始碼 呈現(xiàn)結(jié)果

框窗實(shí)作

4. 在中赂韵，我們要告訴計(jì)算機(jī)到底是要左右分（COLS）娱节？還是上下分（ROWS）。一開始我們是左右分右锨，所以我們寫成括堤。

COLS="120,*" 就是說，左邊那一欄強(qiáng)制定為 120點(diǎn)，右邊則隨窗口大小而變悄窃。除了直接寫點(diǎn)數(shù)外讥电，我們亦可用百分比來表示，例如COLS="20%,80%"

也是可以的轧抗。

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

原始碼 呈現(xiàn)結(jié)果

框窗實(shí)作

6. 看見了沒横媚？原本的（在第 3 點(diǎn)的語(yǔ)法中）被另一組所取代了纠炮！所以要注意喔！

第二組是被第一組所包圍起來的喔５坪（亂七八糟了對(duì)不對(duì)恢口？）

7. 呵呵...不知不覺就大功告成了，其實(shí)只要將最后完成的那些語(yǔ)法存成 index.htm穷躁，然后再準(zhǔn)備三個(gè)檔 a.htm 耕肩、b.htm 、c.htm那么就完工啰问潭！當(dāng)然猿诸，

這是一個(gè)最簡(jiǎn)單的分割法，我們會(huì)再將一些進(jìn)階的卷標(biāo)在底下一一說明狡忙。

【其它卷標(biāo)參數(shù)說明】

1. COLS="120,*"

就是垂直切割畫面啦梳虽！你可以一次切成左右兩個(gè)畫面，當(dāng)然也可以切成三個(gè)灾茁，很簡(jiǎn)單只要寫成 COLS="30,*,50" （數(shù)字隨便您自己調(diào)整啦４芫酢），依此類推北专，

四個(gè)以上當(dāng)然就是四組數(shù)字啦竖螃！

2. ROWS="120,*"

就是橫向切割畫面，也就是將畫面上下分開逗余，切法同上。

3. frameborder=0

設(shè)定框架的邊框季惩，其值只有 0 和 1 录粱， 0 就是不要邊框， 1 就是要顯示邊框画拾。邊框是無法調(diào)整粗細(xì)的啥繁。

4. framespacing=5

表示框架與框架間的保留空白的距離，以免看起來太擠青抛。

1. SRC="a.htm"

設(shè)定此框架中要顯示的網(wǎng)頁(yè)名稱旗闽，每個(gè)框架一定要對(duì)應(yīng)一個(gè)網(wǎng)頁(yè)，否則就會(huì)產(chǎn)生錯(cuò)誤，這里就是要您填入對(duì)應(yīng)網(wǎng)頁(yè)的名稱适室。

（如果該網(wǎng)頁(yè)在不同目錄嫡意，記得路徑要寫清楚）

2. NAME="1"

設(shè)定這個(gè)框架的名稱，這樣才能指定框架來作連結(jié)捣辆，所以一定要設(shè)定喔蔬螟！當(dāng)然名稱隨你高興取名。

3. frameborder=0

設(shè)定框架的邊框汽畴，其值只有 0 和 1 旧巾， 0 就是不要邊框， 1 就是要顯示邊框忍些。邊框是無法調(diào)整粗細(xì)的鲁猩。

4. scrolling="no"

設(shè)定是否要顯示滾動(dòng)條，YES是要顯示滾動(dòng)條罢坝，NO是無論如何都不要顯示廓握，AUTO是視情況顯示。

5. noresize

設(shè)定不讓使用者可以改變這個(gè)框框的大小炸客，如果沒有設(shè)定這個(gè)參數(shù)疾棵，使用者可以很容易的拉動(dòng)框架，改變其大小痹仙。

6. marginhight=2

表示框架高度部份邊緣所保留的空間是尔。

7. marginwidth=2

表示框架寬度部份邊緣所保留的空間。

【相關(guān)用法】

◆

1. 使用方法：請(qǐng)換有支持Frame功能的瀏覽器

2. 卷標(biāo)解說：有些瀏覽器較為老舊开仰，無法顯示Frame的功能拟枚，因此，就要使用此卷標(biāo)众弓，讓這些網(wǎng)友知道恩溅，該換換瀏覽器了∥酵蓿或者脚乡，你也可以在這卷標(biāo)中，

擺上沒有Frame語(yǔ)法的網(wǎng)頁(yè)卷標(biāo)滨达，那么奶稠，沒有支持Frame功能的瀏覽器，便會(huì)自動(dòng)顯示沒有Frame語(yǔ)法的網(wǎng)頁(yè)捡遍。

◆ target=框窗名稱

1. 使用方法：顯示內(nèi)容

2. 卷標(biāo)解說：常常有一個(gè)情況是锌订，我想在框窗 1 的地方按下連結(jié)，但是希望他的內(nèi)容出現(xiàn)在框窗 3 中（請(qǐng)參照上面那個(gè)圖）画株，那應(yīng)該如何寫呢辆飘？

就像上面加個(gè) target=框窗名稱 就行啦啦辐！

◆ target=_top

1. 使用方法：網(wǎng)人俱樂部

2. 卷標(biāo)解說：有時(shí)候，在框窗里會(huì)連結(jié)到別的站蜈项，卻發(fā)現(xiàn)芹关，新連結(jié)的這個(gè)站，竟然被框窗包住了战得，不但難看充边，而且可能會(huì)吃上官司說！所以常侦，

這時(shí)候你必需加入 target=_top這個(gè)參數(shù)浇冰，那么，這個(gè)新連到的網(wǎng)站聋亡，就會(huì)重新占據(jù)整個(gè)屏幕啦肘习！

HTML基礎(chǔ)第八講---序列卷標(biāo)

什么叫做序列卷標(biāo)？其實(shí)坡倔，這是一個(gè)大家都蠻熟悉的東西漂佩，只是在網(wǎng)頁(yè)中換個(gè)名稱來稱呼罷了，序列卷標(biāo)的功能在WORD里面叫做「項(xiàng)目符號(hào)及編號(hào)」

罪塔，也就是將每一要點(diǎn)以數(shù)字投蝉，如：1.2.3.4…或符號(hào)一條一條的清楚的列出的功能。

【無序卷標(biāo)】

序列卷標(biāo)基本上可分為兩種征堪，一種是「無序條列」瘩缆，一種是「有序條列」。所謂「無序條列」當(dāng)然就是意指各條列間并無順序關(guān)系佃蚜，純粹只是利用條

列式方法來呈現(xiàn)資料而已庸娱，此種無序卷標(biāo)，在各條列前面均有一符號(hào)以示區(qū)隔谐算。至于「有序條列」就是指各條列之間是有順序的熟尉，從1、2洲脂、3…一直

延伸下去斤儿。

我們先來看看「無序列表卷標(biāo)」如何使用： 原始碼 呈現(xiàn)結(jié)果

姓名：吳弘凱?

生日：1973/6/16?

星座：雙子座?

其中

卷標(biāo)即為「無序列表卷標(biāo)」，每增加一列內(nèi)容恐锦，就必須加一個(gè)
• 雇毫。

前面的符號(hào)一定是要圓形的嗎？不踩蔚，我們可以加入TYPE="形狀名稱"屬性來改變其符號(hào)形狀，一共有三個(gè)選擇：DISK（實(shí)心圓）枚粘、SQUARE（小正方形）馅闽、CIRCLE（空心圓）三種（由于本頁(yè)使用CSS故僅于Netscape看得出效果。）： 原始碼 呈現(xiàn)結(jié)果?

姓名：吳弘凱?

生日：1973/6/16?

星座：雙子座?

【有序卷標(biāo)】?

接下來，我們來看看「有序列表卷標(biāo)」如何使用： 原始碼 呈現(xiàn)結(jié)果?

姓名：吳弘凱?

生日：1973/6/16?

星座：雙子座?

其中

卷標(biāo)即為「有序列表卷標(biāo)」福也，每增加一列內(nèi)容局骤，就必須加一個(gè)
1. 。

和無序列表卷標(biāo)一樣暴凑，我們也可以選擇不同的符號(hào)來顯示順序峦甩，一樣是用TYPE屬性來作更改，一更有五種符號(hào)：1（數(shù)字）现喳、A（大寫英文字母）凯傲、a（小寫英文字母）、I（大寫羅馬字母）嗦篱、i（小寫羅馬字母）等五種： 原始碼 呈現(xiàn)結(jié)果?

姓名：吳弘凱?

生日：1973/6/16?

星座：雙子座?

另外冰单，我們亦可指定序列起始的數(shù)目，其方法如下： 原始碼 呈現(xiàn)結(jié)果?

姓名：吳弘凱?

生日：1973/6/16?

星座：雙子座

【定義列表卷標(biāo)】

接下來我們要說明的這個(gè)卷標(biāo)灸促，是「定義列表卷標(biāo)」也是屬于序列卷標(biāo)之一诫欠。我們先來舉個(gè)例子，我們常常會(huì)在文章中看見這樣的格式：

CSS（Cascading style sheet） CSS是由W3C于1996年12月所公布的一項(xiàng)新技術(shù)浴栽，什么叫做Cascading style sheet荒叼？

簡(jiǎn)單說來他是一種具有階層性的形式設(shè)定，能夠讓網(wǎng)頁(yè)設(shè)計(jì)者在設(shè)計(jì)網(wǎng)頁(yè)時(shí)典鸡，對(duì)于網(wǎng)頁(yè)上的任何對(duì)象均有更佳的操控性…

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

我們先來看看「定義列表卷標(biāo)」如何使用 原始碼 呈現(xiàn)結(jié)果

小標(biāo)題

標(biāo)題的內(nèi)容說明

小標(biāo)題?

標(biāo)題的內(nèi)容說明

HTML基礎(chǔ)第九講---表單

最基本的留言版應(yīng)該大家都用過吧椿每！沒錯(cuò)這就是一個(gè)表單運(yùn)用很好的例子伊者。表單提供了一個(gè)管道讓讀者發(fā)表心聲，讓網(wǎng)站不再只是設(shè)計(jì)者的天下间护，而

是能夠讓更多網(wǎng)友共同參與的地方亦渗。另外在商業(yè)用途上，表單也扮演著相當(dāng)吃重的角色汁尺，藉由這些表單配合相關(guān)程序法精，使得公司能夠在網(wǎng)絡(luò)上發(fā)展電

子商務(wù)，所以說表單可以說是網(wǎng)頁(yè)實(shí)用化痴突、商務(wù)化相當(dāng)重要的一環(huán)喔搂蜓！?

【表單的用途】

對(duì)于一般的網(wǎng)頁(yè)設(shè)計(jì)初學(xué)者而言，表單功能其實(shí)并不常用辽装，因?yàn)楸韱瓮ǔ１仨毰浜现鳦GI帮碰、JAVA Script程序或是ASP程序來運(yùn)作，

不然表單單獨(dú)存在的意義并不大拾积。不過殉挽，一旦有機(jī)會(huì)將表單運(yùn)用到網(wǎng)頁(yè)中時(shí)丰涉，您的網(wǎng)頁(yè)將擺脫單向呈現(xiàn)，而開始邁入和使用者互動(dòng)的階段喔斯碌！

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

【各種輸入類型】

1. 文字輸入列：每個(gè)表單之所以會(huì)有不同的類型，原因就在于TYPE="表單類型"設(shè)定的不同而已冠骄，我們就先來看看第一個(gè)類型：文字輸入列伪煤。

文字輸入列的形態(tài)就是TYPE="TEXT，其使用方法如下：

　 呈現(xiàn)結(jié)果 姓名：

原始碼

姓名：

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

o NAME="名稱"猴抹，是設(shè)定此一字段的名稱带族，程序中常會(huì)用到。

o SIZE="數(shù)值"蟀给，是設(shè)定此一字段顯現(xiàn)的寬度蝙砌。

o VALUE="預(yù)設(shè)內(nèi)容"，是設(shè)定此一字段的預(yù)設(shè)內(nèi)容跋理。

o ALIGN="對(duì)齊方式"择克，是設(shè)定此一字段的對(duì)齊方式，其值有：TOP（向上對(duì)齊）前普、MIDDLE（向中對(duì)齊）肚邢、BOTTOM（向下對(duì)齊）、RIGHT（向右對(duì)齊）拭卿、

LEFT（向左對(duì)齊）骡湖、TEXTTOP（向文字頂部對(duì)齊）、BASELINE（向文字底部對(duì)齊）峻厚、ABSMIDDLE（絕對(duì)置中）响蕴、ABSBOTTOM（絕對(duì)置下）等。

o MAXLENGTH="數(shù)值"惠桃，是設(shè)定此一字段可設(shè)定輸入的最大長(zhǎng)度浦夷。

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

故為單選核取表單。

呈現(xiàn)結(jié)果 性別：男 女

原始碼

性別：

男

女

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

o NAME="名稱"呐馆，是設(shè)定此一字段的名稱肥缔，程序中常會(huì)用到。

o VALUE="內(nèi)容"汹来，是設(shè)定此一字段的內(nèi)容续膳、值或是意義怒见。

o ALIGN="對(duì)齊方式"，是設(shè)定此一字段的對(duì)齊方式姑宽，其值有：TOP（向上對(duì)齊）、MIDDLE（向中對(duì)齊）闺阱、BOTTOM（向下對(duì)齊）炮车、RIGHT（向右對(duì)齊）、

LEFT（向左對(duì)齊）酣溃、TEXTTOP（向文字頂部對(duì)齊）瘦穆、BASELINE（向文字底部對(duì)齊）、ABSMIDDLE（絕對(duì)置中）赊豌、ABSBOTTOM（絕對(duì)置下）等扛或。

o CHECKED，是設(shè)定此一字段為預(yù)設(shè)選取值碘饼。

5. 復(fù)選核取表單：利用TYPE=" CHECKBOX "就會(huì)產(chǎn)生復(fù)選核取表單熙兔，復(fù)選核取表單通常是好幾個(gè)選項(xiàng)一起擺出來供使用者點(diǎn)選社牲，一次可以同時(shí)選好幾個(gè)冀泻，

故為復(fù)選核取表單。

呈現(xiàn)結(jié)果 喜好：電影看書?

原始碼

喜好：

電影

看書

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

o NAME="名稱"信柿，是設(shè)定此一字段的名稱钠绍，程序中常會(huì)用到舆声。

o VALUE="內(nèi)容"，是設(shè)定此一字段的內(nèi)容柳爽、值或是意義媳握。

o ALIGN="對(duì)齊方式"，是設(shè)定此一字段的對(duì)齊方式磷脯，其值有：TOP（向上對(duì)齊）蛾找、MIDDLE（向中對(duì)齊）、BOTTOM（向下對(duì)齊）争拐、RIGHT（向右對(duì)齊）腋粥、

LEFT（向左對(duì)齊）、TEXTTOP（向文字頂部對(duì)齊）架曹、BASELINE（向文字底部對(duì)齊）隘冲、ABSMIDDLE（絕對(duì)置中）、ABSBOTTOM（絕對(duì)置下）等绑雄。

o CHECKED展辞，是設(shè)定此一字段為預(yù)設(shè)選取值。

7. 密碼窗體：利用TYPE=" PASSWORD "就會(huì)產(chǎn)生一個(gè)密碼窗體万牺，密碼窗體和文字輸入窗體長(zhǎng)得幾乎一樣罗珍，差別就在于密碼窗體在輸入時(shí)全部會(huì)以星號(hào)來取代輸入的文字洽腺，以防他人偷窺。

呈現(xiàn)結(jié)果 請(qǐng)輸入密碼：

原始碼

請(qǐng)輸入密碼：

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

o NAME="名稱"覆旱，是設(shè)定此一字段的名稱蘸朋，程序中常會(huì)用到。

o SIZE="數(shù)值"扣唱，是設(shè)定此一字段顯現(xiàn)的寬度藕坯。

o VALUE="預(yù)設(shè)內(nèi)容"，是設(shè)定此一字段的預(yù)設(shè)內(nèi)容噪沙，不過呈現(xiàn)出來仍是星號(hào)炼彪。

o ALIGN="對(duì)齊方式"，是設(shè)定此一字段的對(duì)齊方式正歼，其值有：TOP（向上對(duì)齊）辐马、MIDDLE（向中對(duì)齊）、BOTTOM（向下對(duì)齊）局义、RIGHT（向右對(duì)齊）喜爷、

LEFT（向左對(duì)齊）、TEXTTOP（向文字頂部對(duì)齊）旭咽、BASELINE（向文字底部對(duì)齊）贞奋、ABSMIDDLE（絕對(duì)置中）、ABSBOTTOM（絕對(duì)置下）等穷绵。

o MAXLENGTH="數(shù)值"轿塔，是設(shè)定此一字段可設(shè)定輸入的最大長(zhǎng)度。

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

　 呈現(xiàn)結(jié)果

原始碼

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

o NAME="名稱"俩由，是設(shè)定此一按鈕的名稱。

o VALUE="文字"癌蚁，是設(shè)定此一按鈕上要呈現(xiàn)的文字幻梯，若是沒有設(shè)定，瀏覽器也會(huì)自動(dòng)替您加上「送出查詢」努释、「重設(shè)」等字樣碘梢。

o ALIGN="對(duì)齊方式"，是設(shè)定此一字段的對(duì)齊方式伐蒂，其值有：TOP（向上對(duì)齊）煞躬、MIDDLE（向中對(duì)齊）、BOTTOM（向下對(duì)齊）、RIGHT（向右對(duì)齊）恩沛、

LEFT（向左對(duì)齊）在扰、TEXTTOP（向文字頂部對(duì)齊）、BASELINE（向文字底部對(duì)齊）雷客、ABSMIDDLE（絕對(duì)置中）芒珠、ABSBOTTOM（絕對(duì)置下）等。

11. 按鈕組件：窗體中或是JAVA SCRIPT常會(huì)用到按鈕來作一些效果搅裙，因此妓局，我們可以利用TYPE=" BUTTON "來產(chǎn)生一個(gè)按鈕，相當(dāng)簡(jiǎn)單呈宇。

呈現(xiàn)結(jié)果 請(qǐng)按下按鈕：?

原始碼

請(qǐng)按下按鈕：

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

o NAME="名稱"，是設(shè)定此一按鈕的名稱局雄。

o VALUE="文字"甥啄，是設(shè)定此一按鈕上要呈現(xiàn)的文字。

o ALIGN="對(duì)齊方式"炬搭，是設(shè)定此一字段的對(duì)齊方式蜈漓，其值有：TOP（向上對(duì)齊）、MIDDLE（向中對(duì)齊）宫盔、BOTTOM（向下對(duì)齊）融虽、RIGHT（向右對(duì)齊）、

LEFT（向左對(duì)齊）灼芭、TEXTTOP（向文字頂部對(duì)齊）有额、BASELINE（向文字底部對(duì)齊）、ABSMIDDLE（絕對(duì)置中）彼绷、ABSBOTTOM（絕對(duì)置下）等巍佑。

13. 隱藏字段：窗體中有時(shí)有些東西因?yàn)槟承┮蛩兀幌胱屖褂谜呖吹郊拿酰虺绦蛐枰獏s又不得不存在萤衰，此時(shí)，我們就可以利用TYPE="

HIDDEN "來產(chǎn)生一個(gè)隱藏的字段猜旬。

呈現(xiàn)結(jié)果 隱藏字段：?

原始碼

隱藏字段：

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

o NAME="名稱"脆栋，是設(shè)定此一字段的名稱。

o VALUE="文字"洒擦，是設(shè)定此一字段的值椿争、文字或意義。

【大量文字輸入組件】

1. 有時(shí)候我們會(huì)希望讓使用者輸入比較大量的文字秘遏，此時(shí)丘薛，文字輸入列就顯得不敷使用，因此我們就可以利用

來產(chǎn)生一個(gè)可以輸入大量文字的組件邦危，夾在兩個(gè)卷標(biāo)中的文字會(huì)出現(xiàn)在框框中洋侨，可作為預(yù)設(shè)文字舍扰。 呈現(xiàn)結(jié)果 請(qǐng)輸入您的意見：

原始碼

請(qǐng)輸入您的意見：

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

o NAME="名稱"，是設(shè)定此一字段的名稱希坚。

o WRAP="設(shè)定值"边苹，是設(shè)定此一字段的換行模式。設(shè)定值有三種：OFF（輸入文字不會(huì)自動(dòng)換行）裁僧、VIRTUAL（輸入文字在屏幕上會(huì)自動(dòng)換行个束，

不過若是使用者沒有自行按下ENTER換行，送出資料時(shí)聊疲，也視為沒有換行）茬底、PHYSICAL（輸入文字會(huì)自動(dòng)換行，送出資料時(shí)获洲，會(huì)將屏幕上的自動(dòng)換行阱表，

視為換行效果送出）。

o COLS="數(shù)值"贡珊，是設(shè)定此一字段的行數(shù)（橫向字?jǐn)?shù)）最爬。

o ROWS="數(shù)值"，是設(shè)定此一字段的列數(shù)（垂直字?jǐn)?shù)）门岔。

【下拉式選單】

1. 下拉式選單令整個(gè)網(wǎng)頁(yè)看起來有很專業(yè)的感覺爱致，我們只要利用便可以產(chǎn)生一個(gè)下拉式選單，另外寒随，

還需要配合卷標(biāo)來產(chǎn)生選項(xiàng)糠悯，這樣才算完整喔！ 呈現(xiàn)結(jié)果 您喜歡看書嗎妻往？： 非常喜歡還算喜歡不太喜歡非常討厭

原始碼

您喜歡看書嗎逢防？：

非常喜歡

還算喜歡

不太喜歡

非常討厭

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

o SIZE="數(shù)值"，是設(shè)定此一字段的大小蒲讯，默認(rèn)值為1忘朝，若是您的選項(xiàng)有四個(gè)，然后您將SIZE設(shè)成4判帮，那么局嘁，下拉式選單便會(huì)變成選項(xiàng)方塊，

將四個(gè)選項(xiàng)一起呈現(xiàn)在方塊中晦墙。

o MULTIPLE悦昵，是設(shè)定此一字段為復(fù)選，可以一次選好幾個(gè)選項(xiàng)晌畅。

HTML基礎(chǔ)第十講---排版卷標(biāo)

網(wǎng)頁(yè)的排版部份也是很重要的一環(huán)但指，有些現(xiàn)成的卷標(biāo)就可以讓您輕易的完成縮排或是一些特殊格式的編排喔！

【文字置左、置中棋凳、置右】

1. 使用方法：老實(shí)說拦坠，剛剛我們學(xué)過的分段卷標(biāo)

再加上一些簡(jiǎn)單的屬性設(shè)定，就可以讓其整個(gè)文字段落置左剩岳、置中或置右了贞滨，就如下表所示：?

原始碼 呈現(xiàn)結(jié)果

文字靠左

文字置中

文字靠右

2. 卷標(biāo)解說：嗯！秘訣就在于「align=對(duì)齊位置」而已啦拍棕！align是分段卷標(biāo)

的屬性之一晓铆，這個(gè)屬性將來會(huì)常常在不同卷標(biāo)中看到，

它的功能是專門在設(shè)定「水平對(duì)齊位置」绰播，其常見的設(shè)定值有三個(gè)骄噪，也就是置左（align="left"）、置中（align="center"）蠢箩、置右（align="right"）腰池。

【置中卷標(biāo)】

1. 使用方法：這是置中

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

3. 使用范例：

原始碼 呈現(xiàn)結(jié)果

這是最中間 這是最中間

【向右縮排卷標(biāo)】

1. 使用方法：

要縮排的文字

2. 卷標(biāo)解說：利用這個(gè)卷標(biāo)可以將其包起來的文字，全部往右縮排跨跨。而且加一組卷標(biāo)潮峦，往右縮排一單位，加兩組卷標(biāo)勇婴，

往右縮排兩單位忱嘹，依此類推。

3. 使用范例：

原始碼 呈現(xiàn)結(jié)果

縮排1單位

縮排2單位

【保存原始格式卷標(biāo)】

1. 使用方法：

文字內(nèi)容

2. 卷標(biāo)解說：利用

算是相當(dāng)好用的卷標(biāo)之一橱脸。

3. 使用范例：

原始碼 呈現(xiàn)結(jié)果?

文　字

格　式

文　字

格　式

HTML基礎(chǔ)第十一講---背景標(biāo)志

您是否老覺得網(wǎng)頁(yè)「空空的」础米，沒錯(cuò)！一個(gè)可能是我們還沒有很多內(nèi)容添诉，另一個(gè)可能則是我們還沒有設(shè)定網(wǎng)頁(yè)背景屁桑。網(wǎng)頁(yè)背景有這么神奇的功效嗎？

當(dāng)然栏赴，網(wǎng)頁(yè)背景是整個(gè)網(wǎng)頁(yè)設(shè)計(jì)重要的一環(huán)蘑斧，一個(gè)設(shè)計(jì)精美的網(wǎng)站，莫不費(fèi)盡心思，讓網(wǎng)頁(yè)背景能夠和前景圖文相結(jié)合竖瘾，做出網(wǎng)頁(yè)整體感的效果沟突。

【背景卷標(biāo)】

說穿了，背景卷標(biāo)只有這個(gè)卷標(biāo)准浴，其余的效果事扭，只要加上一些簡(jiǎn)單的屬性便可做到。

1. 使用方法：

2. 卷標(biāo)解說：這個(gè)卷標(biāo)其實(shí)應(yīng)該老早就要講了乐横，畢竟它是構(gòu)成網(wǎng)頁(yè)不可或缺的基本要素之一（哎哎哎...現(xiàn)在放馬后炮有什么用Ｇ箝稀）。

我們背景顏色或圖片的設(shè)定以及連結(jié)字體的顏色葡公，通通都放在這卷標(biāo)里面罐农。工友就其屬性來一一解說：

背景顏色 用法：設(shè)定背景顏色。有人會(huì)說：『我已經(jīng)設(shè)定了背景圖片催什，那背景顏色還有用嗎涵亏？』

當(dāng)然有用！當(dāng)使用者連結(jié)到貴站時(shí)蒲凶，若背景圖案還沒傳輸完之前（有的背景圖蠻大的）气筋，就會(huì)先顯現(xiàn)背景顏色，您說旋圆，是不是比一片灰灰的好看多了呢宠默！

原始碼

這是標(biāo)題

這里是本文區(qū)?

呈現(xiàn)結(jié)果 這里是本文區(qū)

背景圖片 用法：g設(shè)定背景圖案。圖檔可以是jpg或gif格式的圖檔灵巧，工友建議：圖檔不要太大搀矫，

否則網(wǎng)頁(yè)加載會(huì)蠻慢的。

原始碼

這是標(biāo)題

這里是本文區(qū)

呈現(xiàn)結(jié)果 這里是本文區(qū)

【內(nèi)文刻肄、連結(jié)文字顏色設(shè)定】

1. 使用方法：

2. 卷標(biāo)解說：用字體卷標(biāo)中的顏色屬性瓤球，可以設(shè)定文字的顏色，不過敏弃，卻沒有提到文字的顏色內(nèi)定值該如何修改卦羡，這個(gè)卷標(biāo)中，便有設(shè)定內(nèi)文麦到、

連結(jié)等文字的顏色內(nèi)定值功能虹茶。用法如下：

內(nèi)文顏色 用法：設(shè)定一般文字顏色，也就是說隅要，若沒有特別去設(shè)定文字顏色的話蝴罪，瀏覽器就會(huì)自動(dòng)顯現(xiàn)您所設(shè)定的顏色。

原始碼

這是標(biāo)題

這里是文本區(qū)

呈現(xiàn)結(jié)果 這里是文本區(qū)

　 連接顏色 用法：設(shè)定「連結(jié)」的顏色步清。只要是有連結(jié)的地方就會(huì)出現(xiàn)你指定的顏色要门，當(dāng)然虏肾，如果按下連結(jié)后，

那又會(huì)變成另一個(gè)顏色了欢搜，這底下會(huì)說明封豪。

原始碼

這是標(biāo)題

連結(jié)文字

呈現(xiàn)結(jié)果 連結(jié)文字

連結(jié)時(shí)顏色 用法：設(shè)定「按下連結(jié)」的顏色，也就是當(dāng)您鼠標(biāo)按下那連結(jié)的瞬間所呈現(xiàn)的顏色炒瘟。?

原始碼

這是標(biāo)題

連結(jié)中文字

呈現(xiàn)結(jié)果 連結(jié)中文字（這個(gè)效果請(qǐng)大家在自己的電腦上試驗(yàn)吹埠！鼠標(biāo)點(diǎn)下連結(jié)瞬間才會(huì)出現(xiàn)我們?cè)O(shè)定的淺藍(lán)色）

已連結(jié)顏色 用法：設(shè)定「按下鏈接后」的顏色，也就是如果該連結(jié)已經(jīng)有被按過了疮装，那么就會(huì)呈現(xiàn)的顏色缘琅。如此的做法，

是要讓使用者容易識(shí)別到底哪些連結(jié)有去過了廓推，哪些沒去過刷袍。

原始碼

這是標(biāo)題

連結(jié)文字

呈現(xiàn)結(jié)果 連結(jié)中文字（這個(gè)效果請(qǐng)大家在自己的電腦上試驗(yàn)！設(shè)定已執(zhí)行過的連結(jié)以紅色顯示）

HTML基礎(chǔ)第十二講---鏈接標(biāo)志

沒有鏈接樊展，WWW將失去存在的意義呻纹！WWW之所以受歡迎，乃在于她除了有精美的圖文之外专缠，更有方便且多樣化的鏈接雷酪，讓使用者可以很快的找到其所需

的資料，也讓網(wǎng)絡(luò)能提供更多的服務(wù)涝婉！

【W(wǎng)WW鏈接標(biāo)志基本概念】

1. 鏈接基本概念：一般而言哥力，所謂鏈接就是，在網(wǎng)頁(yè)中有些字會(huì)有特別的顏色嘁圈，而且字的底下會(huì)有條線，當(dāng)光標(biāo)移到那些字上時(shí)蟀淮，會(huì)變成手指形狀最住，

按下去，則會(huì)連到別的文章或網(wǎng)站怠惶，就像這樣（以上這段是給超級(jí)新手看的...）涨缚。

說到鏈接，最基本來看有『內(nèi)部鏈接』及『外部鏈接』策治，所謂『內(nèi)部鏈接』就是自己網(wǎng)站間網(wǎng)頁(yè)的鏈接脓魏，至于外部鏈接我們稍后再來討論。

要了解內(nèi)部鏈接通惫，首先必須先了解一下這兩種東西茂翔，一個(gè)是『相對(duì)路徑』，一個(gè)是『絕對(duì)路徑』履腋。

現(xiàn)在假設(shè)一個(gè)情形：我們?cè)谧约旱挠?jì)算機(jī)里設(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è)鏈接槽地，能夠按一下就連到 text1.htm，那我們?cè)撛趺醋瞿芈炕旧习莆茫袃芍蟹绞娇梢宰龅剑?index.htm 里面加上下

面任一敘述：

這就是『絕對(duì)路徑』

這就是『相對(duì)路徑』

瞧出什么端倪了沒有旅急？嗯嗯....沒錯(cuò)逢勾，『絕對(duì)路徑』要給計(jì)算機(jī)一個(gè)非常詳盡的位置，讓計(jì)算機(jī)尋著這路徑去找到檔案藐吮。而『相對(duì)路徑』就簡(jiǎn)單多啦溺拱！

如果沒有特別指定，他就會(huì)直接在 index.htm 的所在目錄下找谣辞，也就是在 c:\www 底下去找text1.htm迫摔。

如果說，今天我們將 c:\www 里所有的檔案都上傳到網(wǎng)絡(luò)上的網(wǎng)頁(yè)服務(wù)器（總不能做好了只給自己看吧Ｄ啻印）句占，且該服務(wù)器是別人的計(jì)算機(jī)，

而非你自己架設(shè)的主機(jī)躯嫉，那么問題就來了纱烘！你猜，哪一種鏈接會(huì)出問題祈餐？呵呵...答案是『絕對(duì)路徑』擂啥，您猜對(duì)了嗎？

為什么說『絕對(duì)路徑』會(huì)出問題呢帆阳？因?yàn)椴负?dāng)您將檔案上傳到網(wǎng)絡(luò)上時(shí)，您的整個(gè)網(wǎng)頁(yè)目錄架構(gòu)一定會(huì)變蜒谤，到時(shí)候山宾，計(jì)算機(jī)可能找不到 c:\

（尤其是unix系列的主機(jī)）更可能找不到 www 這目錄（有些會(huì)規(guī)定要放在特定的目錄下才能顯示網(wǎng)頁(yè)），所以說鳍徽，沒事的話资锰，盡量用『相對(duì)路徑』

來作鏈接吧！好寫又不容易出錯(cuò)阶祭。

另外一個(gè)情形是：為了整理方便台妆，有些網(wǎng)友喜歡將圖檔通通放到同一個(gè)目錄下翎猛，如：c:\www\gif\ 底下放進(jìn)了p1.gif 、 p2.gif兩個(gè)圖接剩，而index.htm 切厘、

text1.htm 依舊在 c:\www 底下。現(xiàn)在我們想在 index.htm 下設(shè)個(gè)鏈接到 p1.gif 這圖檔（鏈接不限于只能連html文件懊缺，圖文件疫稿、文字文件均可），

那我們又該如何來使用『相對(duì)路徑』呢鹃两？他們又不在『同一個(gè)目錄』下...遗座？

這是『絕對(duì)路徑』的寫法?

這是『相對(duì)路徑』的寫法

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

2. 總結(jié)一下：很亂嗎？嗯...看看這表馋记，或許會(huì)清楚些号坡。

相對(duì)路徑表示方式 代表鏈接位置?

text1.htm在目前的目錄中（就例子而言，就是在c:\www中）?

text1.htm在名為docs的次目錄中（就本例而言梯醒，就是在c:\www\docs中）?

text1.htm在目前目錄的上一層目錄中（就本例而言宽堆，就是在c:\底下了）

【網(wǎng)頁(yè)內(nèi)部的鏈接】

1. 使用方法：

（1）. 先在欲鏈接處作記號(hào)：這里是你想鏈接的點(diǎn)

（2）. 設(shè)定鏈接：鏈接

2. 標(biāo)志解說：有時(shí)候，當(dāng)某頁(yè)的內(nèi)容很多時(shí)茸习，我們可以利用網(wǎng)頁(yè)的內(nèi)部鏈接畜隶，來使使用者快速的找到資料。其原理不過是：在欲鏈接處做個(gè)記號(hào)

（網(wǎng)頁(yè)的任何地方都可以喔：排摺）籽慢，然后，鏈接時(shí)就尋這記號(hào)猫胁，就可以快速找到資料箱亿。很簡(jiǎn)單吧！

3. 使用范例：

范例 第一步驟 第二步驟

www鏈接標(biāo)志基本概念 欲鏈接的位置 www鏈接標(biāo)志基本概念

網(wǎng)頁(yè)內(nèi)部的鏈接 欲鏈接的位置 網(wǎng)頁(yè)內(nèi)部的鏈接

網(wǎng)頁(yè)外部的鏈接 欲鏈接的位置 網(wǎng)頁(yè)外部的鏈接

【網(wǎng)頁(yè)外部的鏈接】

1. 標(biāo)志解說：鏈接到外面去杜漠，可以擴(kuò)充您網(wǎng)站的實(shí)用性及充實(shí)性极景，也正因這功能察净，才造就了www五彩繽紛的世界驾茴。由于網(wǎng)絡(luò)上的服務(wù)五花八門，

所以不同的服務(wù)有不同的鏈接方法氢卡，工友將之整理在下表锈至。

2. 使用范例：

網(wǎng)站鏈接 好站 好站

電子郵件鏈接 寫信給朋友 寫信給朋友

ftp鏈接 下載檔案 下載檔案

news鏈接 seednet news服務(wù) seednet news服務(wù)

gopher鏈接 seednet gopher服務(wù) seednet gopher服務(wù)

bbs鏈接 seednet gopher服務(wù) seednet bbs服務(wù)

【鏈接標(biāo)志的參數(shù)】

1. 使用方法：在鏈接后面加入 target=_參數(shù)

2. 標(biāo)志解說：鏈接的參數(shù)并不多，常見的大概就屬 target 這參數(shù)了译秦，target 的意思是『目標(biāo)』峡捡，也就是網(wǎng)頁(yè)鏈接的指向目標(biāo)击碗，

這參數(shù)在框窗（frame）里尤為重要！

3. 使用范例：

o target=框窗名稱：這在『框架標(biāo)志』中也有提到们拙，而且也只有在框架（框窗 or frame）中才用得到稍途。正常而言，框窗有各自的名稱砚婆，因此械拍，

我們可以利用此標(biāo)志，來指定鏈接的內(nèi)容顯示到哪一個(gè)框窗中装盯。

o target=_blank：將鏈接的畫面內(nèi)容坷虑，開在新的瀏覽窗口中。

o target=_parent：將鏈接的畫面內(nèi)容埂奈，當(dāng)成文件的上一個(gè)畫面迄损。

o target=_self：將鏈接的畫面內(nèi)容，顯示在目前的窗口中账磺。

o target=_top：這個(gè)參數(shù)可以解決新鏈接的畫面內(nèi)容芹敌，被舊框窗包圍的困擾，使用這參數(shù)绑谣，會(huì)將整個(gè)畫面重新顯示成鏈接的畫面內(nèi)容党窜。

“畫中畫”效果---談Iframe標(biāo)記的使用

縱觀時(shí)下網(wǎng)站，本來網(wǎng)速就有些慢借宵，可是幾乎每頁(yè)都要放什么Banner幌衣，欄目圖片，版權(quán)等一大堆雷同的東西壤玫，當(dāng)然豁护，出于網(wǎng)站風(fēng)格統(tǒng)一、廣告效

應(yīng)的需要欲间，本無可厚非楚里，可畢竟讓用戶的錢包為這些“點(diǎn)綴“的東西”日益消得錢憔悴”了，有沒有辦法猎贴，讓這些雷同的東西一次下載后就不用再下

載班缎，而只下載那些內(nèi)容有變化區(qū)域的網(wǎng)頁(yè)內(nèi)容呢？

答案很肯定：應(yīng)用Iframe標(biāo)記她渴！

一达址、Iframe標(biāo)記的使用

提起Iframe，可能你早已將之扔到“被遺忘的角落”了，不過，說起其兄弟Frame就不會(huì)陌生了丧失。Frame標(biāo)記即幀標(biāo)記呢岗，我們所說的多幀結(jié)構(gòu)就是在一個(gè)

瀏覽器窗口中顯示多個(gè)HTML文件≌闾撸現(xiàn)在邪铲，我們遇到一種很現(xiàn)實(shí)的情況：如有一個(gè)教程哭懈，是一節(jié)一節(jié)地上俘种，每頁(yè)末尾做一個(gè)“上一節(jié)“嘀韧、“下一節(jié)“的鏈接篇亭，

除了每節(jié)教程內(nèi)容不同之外，頁(yè)面其它部分內(nèi)容都是相同的锄贷，如果一頁(yè)一頁(yè)地做笨頁(yè)面暗赶，這似乎太讓人厭煩了，這時(shí)突發(fā)奇想肃叶，如果有一種方法讓頁(yè)面其

它地方不變蹂随，只將教程做成一頁(yè)一頁(yè)的內(nèi)容頁(yè)，不含其它內(nèi)容因惭，在點(diǎn)擊上下翻頁(yè)鏈接時(shí)岳锁，只改變教程內(nèi)容部分，其它保持不變蹦魔，這樣激率，一是省時(shí)，另則以

后如教程有個(gè)三長(zhǎng)兩短的變動(dòng)勿决，也很方便乒躺，不致于牽一發(fā)而動(dòng)全軍了;更重要的是將那些廣告Banner、欄目列表低缩、導(dǎo)航等幾乎每頁(yè)的都有的東西只下載一次

后就不再下載了嘉冒。

Iframe標(biāo)記，又叫浮動(dòng)幀標(biāo)記咆繁，你可以用它將一個(gè)HTML文檔嵌入在一個(gè)HTML中顯示讳推。它不同于Frame標(biāo)記最大的特征即這個(gè)標(biāo)記所引用的HTML文件不是與另外

的HTML文件相互獨(dú)立顯示，而是可以直接嵌入在一個(gè)HTML文件中玩般，與這個(gè)HTML文件內(nèi)容相互融合银觅，成為一個(gè)整體，另外坏为，還可以多次在一個(gè)頁(yè)面內(nèi)顯示同一

內(nèi)容究驴，而不必重復(fù)寫內(nèi)容，一個(gè)形象的比喻即“畫中畫“電視匀伏。

現(xiàn)在我們談一下Iframe標(biāo)記的使用洒忧。

Iframe標(biāo)記的使用格式是:

src：文件的路徑，既可是HTML文件帘撰，也可以是文本跑慕、ASP等万皿；

width摧找、height："畫中畫"區(qū)域的寬與高核行；

scrolling:當(dāng)SRC的指定的HTML文件在指定的區(qū)域不顯不完時(shí)，滾動(dòng)選項(xiàng)蹬耘，如果設(shè)置為NO芝雪，則不出現(xiàn)滾動(dòng)條；如為Auto：則自動(dòng)出現(xiàn)滾動(dòng)條综苔；如為Yes惩系，

則顯示;

FrameBorder：區(qū)域邊框的寬度，為了讓“畫中畫“與鄰近的內(nèi)容相融合如筛，常設(shè)置為0堡牡。

比如:

二、父窗體與浮動(dòng)幀之間的相互控制

在腳本語(yǔ)言與對(duì)象層次中杨刨，包含Iframe的窗口我們稱之為父窗體晤柄，而浮動(dòng)幀則稱為子窗體，弄清這兩者的關(guān)系很重要妖胀，因?yàn)橐诟复绑w中訪問子窗體或相

反都必須清楚對(duì)象層次芥颈，才能通過程序來訪問并控制窗體。

1赚抡、在父窗體中訪問并控制子窗體中的對(duì)象

在父窗體中爬坑，Iframe即子窗體是document對(duì)象的一個(gè)子對(duì)象，可以直接在腳本中訪問子窗體中的對(duì)象涂臣。

現(xiàn)在就有一個(gè)問題盾计，即，我們?cè)鯓觼砜刂七@個(gè)Iframe赁遗，這里需要講一下Iframe對(duì)象闯估。當(dāng)我們給這個(gè)標(biāo)記設(shè)置了ID 屬性后，就可通過文檔對(duì)象模型DOM對(duì)

Iframe所含的HTML進(jìn)行一系列控制吼和。

比如在example.htm里嵌入test.htm文件涨薪，并控制test.htm里一些標(biāo)記對(duì)象：

test.htm文件代碼為:

hello,my boy

如我們要改變ID號(hào)為myH1的H1標(biāo)記里的文字為hello,my dear，則可用:

document.myH1.innerText="hello,my dear"(其中炫乓，document可省)

在example.htm文件中刚夺，Iframe標(biāo)記對(duì)象所指的子窗體與一般的DHTML對(duì)象模型一致，對(duì)對(duì)象訪問控制方式一樣末捣，就不再贅述侠姑。

2、在子窗體中訪問并控制父窗體中對(duì)象

在子窗體中我們可以通過其parent即父（雙親）對(duì)象來訪問父窗口中的對(duì)象箩做。

如example.htm：

hello,my wife

如果要在frame1.htm中訪問ID號(hào)為myH2中的標(biāo)題文字并將之改為"hello,my friend"莽红，我們就可以這樣寫：

parent.myH2.innerText="hello,my friend"

這里parent對(duì)象就代表當(dāng)前窗體(example.htm所在窗體)，要在子窗體中訪問父窗體中的對(duì)象，無一例外都通過parent對(duì)象來進(jìn)行安吁。

Iframe雖然內(nèi)嵌在另一個(gè)HTML文件中醉蚁，但它保持相對(duì)的獨(dú)立，是一個(gè)“獨(dú)立王國(guó)“喲鬼店，在單一HTML中的特性同樣適用于浮動(dòng)幀中网棍。

試想一下，通過Iframe標(biāo)記妇智，我們可將那些不變的內(nèi)容以Iframe來表示滥玷，這樣，不必重復(fù)寫相同的內(nèi)容巍棱，這有點(diǎn)象程序設(shè)計(jì)中的過程或函數(shù)惑畴，減省了多少繁

瑣的手工勞動(dòng)！另外航徙，至關(guān)重要的是桨菜，它使頁(yè)面的修改更為可行，因?yàn)樽狡槐匾驗(yàn)榘媸降恼{(diào)整而修改每個(gè)頁(yè)面倒得，你只需修改一個(gè)父窗體的版式即可了。