第2章Web頁面制作基礎(chǔ)

1、2.1 HTML概述概述2.2 HTML文本設(shè)計文本設(shè)計2.3 加入多媒體與超級鏈接加入多媒體與超級鏈接2.4 制作表格制作表格2.5 制作表單制作表單2.6 框架結(jié)構(gòu)框架結(jié)構(gòu) 2.7 CSS基礎(chǔ)基礎(chǔ)如何設(shè)計網(wǎng)頁文本格式如何在網(wǎng)頁中加入超級鏈接和多媒體如何設(shè)計網(wǎng)頁表格如何設(shè)計網(wǎng)頁表單如何設(shè)計網(wǎng)頁框架如何設(shè)計CSS層疊樣式表2.1.1 HTML2.1.1 HTML簡介簡介 HTMLHTML是（是（Hyper Text Markup LanguageHyper Text Markup Language，超文，超文本標(biāo)記語言）的縮寫，用來表示網(wǎng)上信息的符號本標(biāo)記語言）的縮寫，用來表示網(wǎng)上信息的符號標(biāo)

2、記語言。標(biāo)記語言。 HTMLHTML最早源于最早源于SGMLSGML（標(biāo)準(zhǔn)通用化標(biāo)記）語言。（標(biāo)準(zhǔn)通用化標(biāo)記）語言。HTMLHTML語言內(nèi)容豐富，從功能上大體可分為：文語言內(nèi)容豐富，從功能上大體可分為：文本結(jié)構(gòu)設(shè)置、列表建立、文本屬性制定、超鏈接、本結(jié)構(gòu)設(shè)置、列表建立、文本屬性制定、超鏈接、圖片和多媒體插入、對象、表格以及窗體的操作。圖片和多媒體插入、對象、表格以及窗體的操作。 2.1.2 HTML2.1.2 HTML文檔的結(jié)構(gòu)文檔的結(jié)構(gòu)包括包括HEADHEAD、TITLETITLE、BODYBODY三部分，下面是基本結(jié)構(gòu)：三部分，下面是基本結(jié)構(gòu)： 網(wǎng)頁標(biāo)題網(wǎng)頁標(biāo)題 標(biāo)題部分（設(shè)置網(wǎng)頁的相關(guān)信

3、息，如標(biāo)題、作標(biāo)題部分（設(shè)置網(wǎng)頁的相關(guān)信息，如標(biāo)題、作者、關(guān)鍵字、編碼方式等）者、關(guān)鍵字、編碼方式等） 正文部分（整個文件的整體部分）正文部分（整個文件的整體部分） 2.1.3 HTML2.1.3 HTML標(biāo)記（例標(biāo)記（例2-1.html2-1.html）1 1HTMLHTML文檔標(biāo)記文檔標(biāo)記 格式：格式：標(biāo)志文件開始和結(jié)尾的標(biāo)志文件開始和結(jié)尾的標(biāo)記。標(biāo)記。2 2HTMLHTML文件頭標(biāo)記文件頭標(biāo)記 格式：格式：用于包含文件的基本信用于包含文件的基本信息。息。3 3HTMLHTML文件主體標(biāo)記文件主體標(biāo)記 格式：格式：文件主體標(biāo)記。文件主體標(biāo)記。 注意：（注意：（1 1）與與為獨立的兩個部分，

4、為獨立的兩個部分，不能互相嵌套。（不能互相嵌套。（2 2）所有其他的）所有其他的HTMLHTML標(biāo)記都必須在標(biāo)記都必須在之間，否則將不能被瀏覽器正常解釋。之間，否則將不能被瀏覽器正常解釋。 2.1.4 文件頭標(biāo)記文件頭標(biāo)記1.網(wǎng)頁標(biāo)題標(biāo)記網(wǎng)頁標(biāo)題標(biāo)記之間的內(nèi)容將顯示在之間的內(nèi)容將顯示在網(wǎng)頁標(biāo)題欄上網(wǎng)頁標(biāo)題欄上,默認顯示網(wǎng)頁文件的名字。默認顯示網(wǎng)頁文件的名字。2.頭元素頭元素:主要用于指定主要用于指定HTML文件的一些文件的一些特殊屬性。如：特殊屬性。如： 3.用于聲明使用的何種腳本語言。用于聲明使用的何種腳本語言。文本是網(wǎng)頁的核心內(nèi)容，只有適當(dāng)?shù)卦O(shè)置文本的格式，才能設(shè)計出絢麗多彩的網(wǎng)頁，設(shè)置文

5、本的格式包括：（1）設(shè)置標(biāo)題（2）設(shè)置文字的字體、字號、字形、顏色、段落格式（3）設(shè)置文本布局2.2.1 2.2.1 設(shè)置主體標(biāo)記設(shè)置主體標(biāo)記的屬性的屬性 屬性概述：屬性概述： backgroundbackground屬性（設(shè)置網(wǎng)頁的背景圖片）屬性（設(shè)置網(wǎng)頁的背景圖片） bgcolor bgcolor 屬性（設(shè)置網(wǎng)頁的背景顏色）屬性（設(shè)置網(wǎng)頁的背景顏色） bgpropertiesbgproperties屬性（設(shè)置背景是否隨滾動條滾動）屬性（設(shè)置背景是否隨滾動條滾動） linklink屬性（設(shè)置尚未被訪問過的超文本鏈接的顏色）屬性（設(shè)置尚未被訪問過的超文本鏈接的顏色）vlinkvlink屬性（設(shè)

6、置已被訪問過的超文本鏈接的顏色）屬性（設(shè)置已被訪問過的超文本鏈接的顏色）alinkalink屬性（設(shè)置超文本鏈接在被單擊瞬間的顏色）屬性（設(shè)置超文本鏈接在被單擊瞬間的顏色）LeftmarginLeftmargin，topmargintopmargin屬性（設(shè)置網(wǎng)頁左邊、上邊的屬性（設(shè)置網(wǎng)頁左邊、上邊的空白）空白）MarginwidthMarginwidth，marginheightmarginheight屬性（設(shè)置網(wǎng)頁空白的寬屬性（設(shè)置網(wǎng)頁空白的寬度和高度）度和高度）的屬性說明：的屬性說明：（1 1）對于）對于backgroundbackground屬性，通過屬性，通過URLURL地址給出地址

7、給出背景圖片的來源位置；背景圖片的來源位置；（2 2）顏色的表示方法：）顏色的表示方法：#rrggbb, #rrggbb, 例如，例如，#0000#0000表示黑色，表示黑色，#FFFFFF#FFFFFF表示白色。表示白色。HTMLHTML預(yù)定義預(yù)定義了幾種顏色，如：了幾種顏色，如：red, green, blue, gray, red, green, blue, gray, yellow, purpleyellow, purple等，使用時可以直接引用，如：等，使用時可以直接引用，如：bgcolor=“red”.bgcolor=“red”.（3）bgpropertiesbgpropertie

8、s屬性值默認為背景隨滾動屬性值默認為背景隨滾動條滾動，如果設(shè)置成條滾動，如果設(shè)置成fixed,fixed,那背景將不隨滾動條那背景將不隨滾動條滾動。滾動。( (見例見例2-1-1.html)2-1-1.html)2.2.2 2.2.2 段落格式化段落格式化( (與與WORDWORD對照對照) ) 1. 1. 標(biāo)題標(biāo)記標(biāo)題標(biāo)記格式：格式：，設(shè)置各種大小不同標(biāo)題的標(biāo)記，含有屬性設(shè)置各種大小不同標(biāo)題的標(biāo)記，含有屬性align,align,用來設(shè)置標(biāo)題在網(wǎng)頁中對齊方式。（例用來設(shè)置標(biāo)題在網(wǎng)頁中對齊方式。（例2-2.html2-2.html）2 2段落標(biāo)記段落標(biāo)記格式：格式：設(shè)置段落標(biāo)記，含有屬性設(shè)置段

9、落標(biāo)記，含有屬性alignalign，默認值為，默認值為left left 。 3 3預(yù)定格式標(biāo)記預(yù)定格式標(biāo)記格式：格式：在瀏覽器中瀏覽時，按照在瀏覽器中瀏覽時，按照文檔中預(yù)先排好的形式顯示內(nèi)容文檔中預(yù)先排好的形式顯示內(nèi)容, ,含有含有widthwidth屬性，屬性，用來表示一行的最大字符數(shù)，通常取值為用來表示一行的最大字符數(shù)，通常取值為4040、8080或或132132。（例。（例2-3.html2-3.html）4 4分區(qū)顯示標(biāo)記分區(qū)顯示標(biāo)記格式：格式：分區(qū)顯示標(biāo)記。分區(qū)顯示標(biāo)記。AlignAlign屬性設(shè)置標(biāo)記屬性。（例屬性設(shè)置標(biāo)記屬性。（例2-42-4）5 5詞標(biāo)記詞標(biāo)記格式：格式：

10、功能：強制換行。功能：強制換行。格式：格式： 功能：插入水平線標(biāo)記。包含功能：插入水平線標(biāo)記。包含align,size,align,size,widthwidth,color,noshade,color,noshade等屬性。等屬性。（例（例2-52-5） 6 6注釋標(biāo)記注釋標(biāo)記格式：格式：!-注釋標(biāo)記。注釋標(biāo)記。（例（例2-62-6） 2.2.3 2.2.3 建立列表建立列表 在網(wǎng)頁中經(jīng)常使用的列表分為：有序列表和無序列表。在網(wǎng)頁中經(jīng)常使用的列表分為：有序列表和無序列表。由帶有序號標(biāo)志（如數(shù)字、字母等）的表項組成有序列表。由帶有序號標(biāo)志（如數(shù)字、字母等）的表項組成有序列表。否則就為無序列表。

11、否則就為無序列表。1. 1. 有序列表有序列表格式：格式：OL type= LI type=” LI type=” 功能：建立有序列表，默認序號是數(shù)字。功能：建立有序列表，默認序號是數(shù)字。2. 2. 無序列表無序列表格式：格式：UL type=” LI type=” LI type=” 功能：建立無序列表，默認為實心圓點。功能：建立無序列表，默認為實心圓點。 3. 3. 自定義列表自定義列表格式：格式： （定義列表項）（定義列表項） （定義語句）（定義語句） 注意：注意：根據(jù)文檔的具體要求，列表可以嵌套使用。根據(jù)文檔的具體要求，列表可以嵌套使用。（例（例2-72-7）2.2.4 2.2.4 字

12、符格式化（字體大小、類型、粗細、顏字符格式化（字體大小、類型、粗細、顏色等的設(shè)置）色等的設(shè)置）1 1字體設(shè)置標(biāo)記字體設(shè)置標(biāo)記格式：格式：功能：設(shè)置字體格式標(biāo)記。功能：設(shè)置字體格式標(biāo)記。size=sizesize=size：設(shè)置文字的大小。數(shù)字的范圍為：設(shè)置文字的大小。數(shù)字的范圍為1717，取取 1 1 時 最 小 ， 取時 最 小 ， 取 7 7 時 最 大 ， 默 認 的 數(shù) 值 為時 最 大 ， 默 認 的 數(shù) 值 為 3 3 。face=fontstyleface=fontstyle：設(shè)置字體，如宋體、黑體、隸書等。：設(shè)置字體，如宋體、黑體、隸書等。color=colorvaluecol

13、or=colorvalue：設(shè)置文字的顏色。：設(shè)置文字的顏色。（例（例2-82-8）2其他標(biāo)記其他標(biāo)記 （例（例2-9,2-9,例例2-91,2-91,例例2-92 2-92 ）其他標(biāo)記格式其他標(biāo)記格式功能功能給字符加下劃線給字符加下劃線給字符上加刪除線給字符上加刪除線給字符加粗給字符加粗將字符設(shè)置成斜體將字符設(shè)置成斜體標(biāo)記使得其中的文字產(chǎn)生閃爍的效果標(biāo)記使得其中的文字產(chǎn)生閃爍的效果2.3.1 2.3.1 加入圖像、視頻、動畫加入圖像、視頻、動畫 格式：格式： 功能：在網(wǎng)頁中加入圖像、視頻、動畫等。功能：在網(wǎng)頁中加入圖像、視頻、動畫等。 1 1插入圖像插入圖像 圖像在網(wǎng)頁設(shè)計中是必不可少的，所

14、以用戶應(yīng)圖像在網(wǎng)頁設(shè)計中是必不可少的，所以用戶應(yīng)掌握在網(wǎng)頁中操作圖像的方法。掌握在網(wǎng)頁中操作圖像的方法。（例（例2-102-10，例，例2-10-22-10-2）標(biāo)記屬性標(biāo)記屬性功能功能src =URL通過通過URL給出圖像來源的位置，不可缺省給出圖像來源的位置，不可缺省width=size設(shè)置圖像寬度設(shè)置圖像寬度height =size設(shè)置圖像高度設(shè)置圖像高度alt= txt設(shè)置在圖像未載入前圖片位置顯示的文字設(shè)置在圖像未載入前圖片位置顯示的文字border= size設(shè)置圖像邊框，缺省為設(shè)置圖像邊框，缺省為0align=alignstyle設(shè)置對齊方式。取值為：設(shè)置對齊方式。取值為：top

15、，middle，bottom，aleft，righthspace=size設(shè)置圖片左右邊沿空白設(shè)置圖片左右邊沿空白vspace=size設(shè)置圖片上下邊沿空白設(shè)置圖片上下邊沿空白2 2插入視頻插入視頻使用使用插入視頻或動畫時，含有的屬性如下插入視頻或動畫時，含有的屬性如下表：（表：（RMVB.HTMLRMVB.HTML）2.3.2 2.3.2 加入超級鏈接加入超級鏈接 格式：格式： 功能：在當(dāng)前頁和其他內(nèi)容間建立超鏈接。功能：在當(dāng)前頁和其他內(nèi)容間建立超鏈接。 （例（例2-11.html2-11.html，2-2.html2-2.html） 標(biāo)記屬性標(biāo)記屬性功能功能href=URL給定鏈接目標(biāo)的位

16、置給定鏈接目標(biāo)的位置target=frametarget設(shè)置顯示鏈接目標(biāo)的框架設(shè)置顯示鏈接目標(biāo)的框架accesskey=character設(shè)置快捷鍵設(shè)置快捷鍵tabindex=num設(shè)置設(shè)置Tab鍵的順序鍵的順序rel=linktype設(shè)置到鏈接的關(guān)系設(shè)置到鏈接的關(guān)系2.4.1 建立表格建立表格 2.4.1 建立表格建立表格創(chuàng)建表格是規(guī)劃頁面最常用的方法。創(chuàng)建表格是規(guī)劃頁面最常用的方法。格式：格式：功能：創(chuàng)建表格進行頁面設(shè)計。功能：創(chuàng)建表格進行頁面設(shè)計。 在瀏覽器中顯示時，表格的整體外觀由在瀏覽器中顯示時，表格的整體外觀由標(biāo)記的屬性決定標(biāo)記的屬性決定 。標(biāo)記屬性標(biāo)記屬性功能功能border=s

17、ize設(shè)置表格邊框大小設(shè)置表格邊框大小width= size設(shè)置表格的寬度設(shè)置表格的寬度,像素和百分比兩種像素和百分比兩種height=size設(shè)置表格的高度設(shè)置表格的高度,像素和百分比兩種像素和百分比兩種cellspacing=size設(shè)置單元格間距設(shè)置單元格間距cellpadding =size設(shè)置單元格的填充距設(shè)置單元格的填充距background =URL設(shè)置表格背景圖片設(shè)置表格背景圖片bgcolor =colorvalue設(shè)置表格背景色設(shè)置表格背景色align=alignstyle設(shè)置對齊方式設(shè)置對齊方式cols =size設(shè)置表格的列數(shù)設(shè)置表格的列數(shù)2.4.2 定制表格定制表格只是

18、空表格，還需要定義行和單元只是空表格，還需要定義行和單元格。格。格式：格式：功能：定義表格的一行。功能：定義表格的一行。格式：格式：功能：定義表格的表頭。功能：定義表格的表頭。格式：格式：功能：定義表格中的單元格。功能：定義表格中的單元格。格式：格式：功能：定義表格標(biāo)題，顯示在表格上方。功能：定義表格標(biāo)題，顯示在表格上方。（例（例2-12.html,test.html2-12.html,test.html） 2.4.2 定制表格定制表格行標(biāo)記的屬性行標(biāo)記的屬性Bgcolor=colorvalue 設(shè)置行背景顏色設(shè)置行背景顏色Align=alignstyle 設(shè)置行對齊方式設(shè)置行對齊方式Vali

19、gn=valignstyle 設(shè)置單元格垂直對齊設(shè)置單元格垂直對齊方式方式2.4.2 定制表格定制表格列標(biāo)記的屬性列標(biāo)記的屬性Bgcolor=colorvalue 設(shè)置單元格背景顏色設(shè)置單元格背景顏色Align=alignstyle 設(shè)置單元格對齊方式設(shè)置單元格對齊方式Valign=valignstyle 設(shè)置單元格垂直對齊方式設(shè)置單元格垂直對齊方式Rowspan=num 設(shè)置單元格所占的行數(shù)設(shè)置單元格所占的行數(shù)Colspan=num 設(shè)置單元格所占的列數(shù)設(shè)置單元格所占的列數(shù)Width=size 設(shè)置單元格寬度設(shè)置單元格寬度Height=size 設(shè)置單元格高度設(shè)置單元格高度2.5.1 表單的

20、結(jié)構(gòu)表單的結(jié)構(gòu) 格式：格式：定義表單。定義表單。在WEB網(wǎng)頁上包含各式各樣的輸入表單，它們的組成元素基本相同，通過表單可以完成用戶和計算機或服務(wù)器之間進行的信息交換。標(biāo)記屬性標(biāo)記屬性功能功能action= URL設(shè)置處理表單的程序設(shè)置處理表單的程序method=postmethod設(shè)置發(fā)送表單的設(shè)置發(fā)送表單的HTTP方法（方法（GET，POST）enctype=contenttype設(shè)置發(fā)送表單的內(nèi)容屬性設(shè)置發(fā)送表單的內(nèi)容屬性onsubmit= script設(shè)置被發(fā)送事件設(shè)置被發(fā)送事件target=frametarget設(shè)置顯示表單內(nèi)容的窗口設(shè)置顯示表單內(nèi)容的窗口accept-charset=

21、cdata設(shè)置可支持的字符列表設(shè)置可支持的字符列表(例例2-13.html,test-1.html)Method屬性制定了發(fā)送表單數(shù)據(jù)的方法,一種是GET(默認),另一種是POST.兩種方法的區(qū)別:(1)GET是將FORM的輸入信息作為字符串附加到action所設(shè)定的URL后面，中間用“？”隔開，每個表單域之間用“&”隔開 , 然后把整個字符串傳送到服務(wù)器端；服務(wù)器端程序，必須用下面的格式來獲取各個表單域的值：% value=Request.QueryString(“FormField”)(2)POST是將FORM的輸入信息進行包裝，而不用附加在action屬性的URL之后。下面的格式

22、來獲取各個表單域的值： % value=Request.Form(“FormField”)(3)使用GET方法所得到的信息不能很多，一般在4000字符左右，而且不能含有非ASCII碼字符，并且在瀏覽器的地址欄中將以明文的形式顯示在表單中的各個表單域值；(4)POST傳送的信息數(shù)據(jù)量基本沒有什么限制，在瀏覽器的地址欄中不會顯示表單域的值。2.5.2 FORM2.5.2 FORM中常用的標(biāo)記中常用的標(biāo)記 1 1輸入域輸入域（1 1）單行輸入域）單行輸入域功能：單一標(biāo)記，主要用來設(shè)計表單中提供給用戶功能：單一標(biāo)記，主要用來設(shè)計表單中提供給用戶的輸入形式。的輸入形式。主要分為以下幾種類型：主要分為以下

23、幾種類型： 1 1）texttext單行文本框單行文本框 2 2）passwordpassword密碼域密碼域 3 3）radioradio單選按鈕單選按鈕 4 4）checkboxcheckbox復(fù)選框復(fù)選框5 5）submitsubmit提交按鈕提交按鈕 6 6）resetreset重置按鈕重置按鈕 7 7）hiddenhidden隱藏域隱藏域 8) image8) image圖像發(fā)送按鈕圖像發(fā)送按鈕9) Button9) Button一般按鈕一般按鈕 標(biāo)記屬性標(biāo)記屬性功能功能type=inputype設(shè)置輸入域的類型設(shè)置輸入域的類型name= cdata設(shè)置表項的控制名，在表單處理時設(shè)置

24、表項的控制名，在表單處理時size=num設(shè)置表單域的長度設(shè)置表單域的長度maxlength=num設(shè)置允許輸入的最大字符數(shù)設(shè)置允許輸入的最大字符數(shù)value =cdata設(shè)置輸入域的值設(shè)置輸入域的值checked設(shè)置是否被選中設(shè)置是否被選中2.5.2 FORM2.5.2 FORM中常用的標(biāo)記中常用的標(biāo)記 1 1）texttext單行文本框單行文本框這是這是TYPETYPE默認類型。如果輸入類型為默認類型。如果輸入類型為TEXTTEXT，則其他屬性的含義如下：則其他屬性的含義如下：Name:Name:與輸入值相對應(yīng)的名稱。與輸入值相對應(yīng)的名稱。Size:Size:輸入窗口的長度，默認值為輸入窗

25、口的長度，默認值為2020，以字節(jié)為單位。，以字節(jié)為單位。Value:Value:設(shè)定預(yù)先在窗口顯示的信息。設(shè)定預(yù)先在窗口顯示的信息。MaxlengthMaxlength：限制最多輸入的字節(jié)數(shù)。：限制最多輸入的字節(jié)數(shù)。2.5.2 FORM2.5.2 FORM中常用的標(biāo)記中常用的標(biāo)記 2 2）PASSWORDPASSWORD密碼域密碼域這種類型同這種類型同TEXTTEXT類型的使用相似。不同在于類型的使用相似。不同在于輸入時不顯示輸入內(nèi)容，而以輸入時不顯示輸入內(nèi)容，而以“* *”回顯。其回顯。其他屬性的含義如下：他屬性的含義如下：Name:Name:與輸入值相對應(yīng)的名稱。與輸入值相對應(yīng)的名稱。S

26、ize:Size:輸入窗口的長度，默認值為輸入窗口的長度，默認值為2020，以字節(jié)為單位。，以字節(jié)為單位。Value:Value:設(shè)定預(yù)先在窗口顯示的信息。設(shè)定預(yù)先在窗口顯示的信息。MaxlengthMaxlength：限制最多輸入的字節(jié)數(shù)。：限制最多輸入的字節(jié)數(shù)。2.5.2 FORM2.5.2 FORM中常用的標(biāo)記中常用的標(biāo)記 3 3）RADIORADIO單選按鈕單選按鈕這種類型為用戶提供單選按鈕進行選擇，只這種類型為用戶提供單選按鈕進行選擇，只能在多個選項中選擇一項。由于選擇是唯一的，能在多個選項中選擇一項。由于選擇是唯一的，因此屬性因此屬性namename取相同的值，但屬性取相同的值，但

27、屬性valuevalue的值的值各不相同。其他屬性的含義如下：各不相同。其他屬性的含義如下：Name:Name:與輸入值相對應(yīng)的名稱。與輸入值相對應(yīng)的名稱。Value:Value:每個選項對應(yīng)的值。每個選項對應(yīng)的值。checkedchecked：指明是否被用戶選中。：指明是否被用戶選中。2.5.2 FORM2.5.2 FORM中常用的標(biāo)記中常用的標(biāo)記 4 4）CHECKBOXCHECKBOX復(fù)選框復(fù)選框這種類型為用戶提供復(fù)選框進行選擇，在多這種類型為用戶提供復(fù)選框進行選擇，在多個選項中可以選擇一項或者多項。由于每一項個選項中可以選擇一項或者多項。由于每一項都可以被選擇，屬性都可以被選擇，屬性n

28、amename取相同的值，但屬性取相同的值，但屬性valuevalue的值各不相同。其他屬性的含義如下：的值各不相同。其他屬性的含義如下：Name:Name:與輸入值相對應(yīng)的名稱。與輸入值相對應(yīng)的名稱。Value:Value:每個選項對應(yīng)的值。每個選項對應(yīng)的值。checkedchecked：指明是否被用戶選中。：指明是否被用戶選中。2.5.2 FORM2.5.2 FORM中常用的標(biāo)記中常用的標(biāo)記 5 5）SUBMITSUBMIT提交按鈕提交按鈕這種類型在瀏覽器中產(chǎn)生一個提交按鈕，當(dāng)這種類型在瀏覽器中產(chǎn)生一個提交按鈕，當(dāng)用戶用鼠標(biāo)單擊這個按鈕后，用戶的輸入信息用戶用鼠標(biāo)單擊這個按鈕后，用戶的輸入

29、信息即被傳送到服務(wù)器。對于一個完整的表單，提即被傳送到服務(wù)器。對于一個完整的表單，提交按鈕是必不可少的。使用交按鈕是必不可少的。使用SUBMITSUBMIT時只有屬性時只有屬性namename和屬性和屬性ValueValue。其屬性的含義如下：。其屬性的含義如下：Name:Name:與輸入值相對應(yīng)的名稱。與輸入值相對應(yīng)的名稱。Value:Value:每個選項對應(yīng)的值。每個選項對應(yīng)的值。2.5.2 FORM2.5.2 FORM中常用的標(biāo)記中常用的標(biāo)記 6 6）RESETRESET重置按鈕重置按鈕這種類型在瀏覽器中產(chǎn)生一個重置按鈕，當(dāng)這種類型在瀏覽器中產(chǎn)生一個重置按鈕，當(dāng)用戶用鼠標(biāo)單擊這個按鈕后，

30、用戶的輸入信息用戶用鼠標(biāo)單擊這個按鈕后，用戶的輸入信息全部被清楚，以便用戶重新輸入。同全部被清楚，以便用戶重新輸入。同SUBMITSUBMIT一一樣，樣，resetreset類型只有屬性類型只有屬性namename和屬性和屬性ValueValue。其。其屬性的含義如下：屬性的含義如下：Name:Name:與輸入值相對應(yīng)的名稱。與輸入值相對應(yīng)的名稱。Value:Value:每個選項對應(yīng)的值。每個選項對應(yīng)的值。2.5.2 FORM2.5.2 FORM中常用的標(biāo)記中常用的標(biāo)記 7 7）HiddenHidden隱藏域隱藏域這種類型將這種類型將InputInput標(biāo)記的區(qū)域隱藏起來，標(biāo)記的區(qū)域隱藏起來，

31、使之不出現(xiàn)在屏幕中，其作用主要是為了處使之不出現(xiàn)在屏幕中，其作用主要是為了處理程序方便，在發(fā)送表單時發(fā)送幾個不需要理程序方便，在發(fā)送表單時發(fā)送幾個不需要用戶填寫但是程序又需要的數(shù)據(jù)。用戶填寫但是程序又需要的數(shù)據(jù)。（2 2）多行輸入域標(biāo)記）多行輸入域標(biāo)記用于多行文本輸入域（許多瀏覽器限制用于多行文本輸入域（許多瀏覽器限制文本域中的內(nèi)容不得超過文本域中的內(nèi)容不得超過32KB32KB或者或者64KB64KB）標(biāo)記屬性標(biāo)記屬性功能功能name=cdata設(shè)置設(shè)置FORM提交的輸入信息的名稱提交的輸入信息的名稱rows=num設(shè)置文本域的行數(shù)設(shè)置文本域的行數(shù)cols= num設(shè)置文本域的列數(shù)設(shè)置文本域的

32、列數(shù)tabindex=num設(shè)置設(shè)置tab鍵的次序鍵的次序2 2按鈕按鈕格式：格式：功能：定義按鈕。功能：定義按鈕。標(biāo)記屬性標(biāo)記屬性功能功能name=cdata設(shè)置已發(fā)送表單的關(guān)鍵字。設(shè)置已發(fā)送表單的關(guān)鍵字。value=cdata設(shè)置已發(fā)送表單的值。設(shè)置已發(fā)送表單的值。type= buttontype設(shè)置按鈕的類型。設(shè)置按鈕的類型。tabindex=num設(shè)置設(shè)置tab鍵的次序。鍵的次序。3 3選擇域選擇域格式：格式： 選項一選項一 選項二選項二 功能：定義選擇欄。（類似于下拉列表框）功能：定義選擇欄。（類似于下拉列表框） （見（見2-6.html2-6.html）3 3選擇域選擇域?qū)傩詫傩訬

33、ame=cdata Name=cdata 設(shè)置選項欄的名字設(shè)置選項欄的名字Size=num Size=num 設(shè)置在選項欄中一次可見的選項設(shè)置在選項欄中一次可見的選項個數(shù)個數(shù)Multiple Multiple 設(shè)置選項欄是否支持多選設(shè)置選項欄是否支持多選屬性屬性Value=cdata Value=cdata 設(shè)置選項的初始值設(shè)置選項的初始值Selected Selected 表示此選項為預(yù)置項表示此選項為預(yù)置項2.6.1 2.6.1 框架結(jié)構(gòu)的文件格式框架結(jié)構(gòu)的文件格式（見例（見例2-14.html2-14.html） 2.6.2 2.6.2 框架結(jié)構(gòu)標(biāo)記的使用框架結(jié)構(gòu)標(biāo)記的使用 格式：格式：

34、標(biāo)記屬性標(biāo)記屬性功能功能rows=size設(shè)置多重框架的高度設(shè)置多重框架的高度cols =size設(shè)置多重框架的寬度設(shè)置多重框架的寬度onload=script設(shè)置框架被載入的事件設(shè)置框架被載入的事件onunload=script 設(shè)置框架被卸載的事件設(shè)置框架被卸載的事件Frameset的其他屬性：的其他屬性：Frameborder 取值為1或0，0表示不要邊框，1顯示邊框，無法調(diào)整粗細。Framespacing=num 表示框架與框架間保留空白的距離，以免看起來太擠。Border=num 設(shè)定邊框的厚度。Bordercolor=colorvalue 設(shè)定框架的邊框顏色。2.6.3 FRAME

35、2.6.3 FRAME標(biāo)記標(biāo)記 ( (例例2-14.html,2-7.html)2-14.html,2-7.html) 標(biāo)記屬性標(biāo)記屬性功能功能src=URL設(shè)置要鏈接到的設(shè)置要鏈接到的HTML文件文件name=framename表示子窗口的名字表示子窗口的名字marginwidth=size用來控制顯示內(nèi)容和窗口左右邊界的距離，默認為用來控制顯示內(nèi)容和窗口左右邊界的距離，默認為1marginheight= size用來控制顯示內(nèi)容和窗口上下邊界的距離，默認為用來控制顯示內(nèi)容和窗口上下邊界的距離，默認為1scrolling=scrollingstyle 指定子窗口是否使用滾動條，有指定子窗口是

36、否使用滾動條，有YES/NO/AUTO三三個值，默認個值，默認AUTO，即根據(jù)窗口內(nèi)容決定是否有滾動，即根據(jù)窗口內(nèi)容決定是否有滾動條條noresize使用該屬性后，指定窗口不能調(diào)整窗口大小使用該屬性后，指定窗口不能調(diào)整窗口大小注意事項：注意事項：（1）注意：在老版本的瀏覽器可能不支持框注意：在老版本的瀏覽器可能不支持框架結(jié)構(gòu)。架結(jié)構(gòu)。 （2 2）在文檔中，如果使用了）在文檔中，如果使用了,就不就不應(yīng)該有應(yīng)該有標(biāo)記。標(biāo)記。（3 3）在）在中可以包含多個框架，可中可以包含多個框架，可以嵌套使用以嵌套使用標(biāo)記。標(biāo)記。（4 4）在框架頁面中，每個子窗口對應(yīng)一個在框架頁面中，每個子窗口對應(yīng)一個FRAME

37、。TARGET屬性三種常見的用法：屬性三種常見的用法：1 1用于用于A A標(biāo)記標(biāo)記 2 2用于用于BASEBASE標(biāo)記標(biāo)記 標(biāo)簽為頁面上的所有鏈接規(guī)定默認地址或標(biāo)簽為頁面上的所有鏈接規(guī)定默認地址或默認目標(biāo)。默認目標(biāo)。3 3用于用于FORMFORM標(biāo)記標(biāo)記FORM ACTION= “” TARGET=“WINDOWS_NAME” 其中WINDOWS_NAMEWINDOWS_NAME可以預(yù)先在可以預(yù)先在FRAMEFRAME標(biāo)記中用標(biāo)記中用NAMENAME屬性設(shè)定。屬性設(shè)定。 TARGET的四種常見的方式：的四種常見的方式：1._blank:1._blank:指鏈接的對象將在一個新的瀏指鏈接的對象將

38、在一個新的瀏覽器窗體中打開；覽器窗體中打開；2._self:2._self:指鏈接的對象在同一瀏覽器窗指鏈接的對象在同一瀏覽器窗口中顯示；口中顯示；3._top:3._top:指鏈接的對象在同一瀏覽器窗口指鏈接的對象在同一瀏覽器窗口的整個窗體中顯示，即使在設(shè)置了框架的的整個窗體中顯示，即使在設(shè)置了框架的情況下也將填充到整個窗體；情況下也將填充到整個窗體；4._parent:4._parent:指鏈接的對象在該瀏覽器的指鏈接的對象在該瀏覽器的父窗口中顯示。父窗口中顯示。2.7.1 CSS樣式簡介樣式簡介( (例例2-15.html)2-15.html)CSS（Cascading Style Sh

39、eets，層疊樣式表），又稱，層疊樣式表），又稱格式頁，它定義很多樣式定義方式來輔助格式頁，它定義很多樣式定義方式來輔助HTMLHTML。 使用使用CSS可以更加精確地控制網(wǎng)頁的布局，當(dāng)很多網(wǎng)可以更加精確地控制網(wǎng)頁的布局，當(dāng)很多網(wǎng)頁使用同一種標(biāo)記時，只需要修改一個頁使用同一種標(biāo)記時，只需要修改一個.CSS文件就可以文件就可以更改多個網(wǎng)頁的外觀和格式。更改多個網(wǎng)頁的外觀和格式。 通過通過CSSCSS可以控制任何可以控制任何HTMLHTML標(biāo)記的樣式，如標(biāo)記的樣式，如,等。等。但是有些瀏覽器不支持但是有些瀏覽器不支持CSSCSS，所以要將，所以要將中間的文字使用中間的文字使用括起來，括起來，這樣當(dāng)遇到不支持這樣當(dāng)遇到不支持CSSCSS的瀏覽器時，不會將其中的代碼顯的瀏覽器時，不會將其中的代碼顯示出來。示出來。2.7.2 CSS樣式表的定義樣式表的定義 1通過通過HTML標(biāo)記定義標(biāo)記定義 ( (例例2-16.html)2-16.html) 可以定義任何一個可以定義任何一個HTML標(biāo)記，定義時在屬性和屬性值之標(biāo)記，定義時在屬性和屬性值之間用間用“：”隔開，當(dāng)有多重屬性時，使用隔開，當(dāng)有多重屬性時，使用“；”進行分隔。進行分隔。 2用用id屬性定義樣式表屬性定義樣式表 ( (例例2-17.html)2-17.html)盡管任何一個盡管任何一個HTMLHTM