ASP網(wǎng)站建設技術Chapter0課件1

1、第1章Web編程基礎本章重點：1）HTML標記的用法和功能；2）HTML網(wǎng)頁的基本結構；3）利用HTML標記符編寫簡單網(wǎng)頁。目 錄1.1 HTML簡介1.2 HTML常用標記1.3 CSS概述1.4 加載CSS樣式的三種方式1.5 CSS與標記對應的三種方式1.1 HTML簡介HTML（HyperTextMark-upLanguage）即超文本標記語言，是一種用來在WWW（World Wide Web）上表示信息的描述性的標記語言。HTML文本是由HTML標記組成的描述性文本，HTML標記可以說明文字、圖形、動畫、聲音、表格、鏈接等。生成一個HTML文本通?？梢酝ㄟ^以下四種方法：（1）利用各種

2、文本編輯器（如Windows記事本）直接使用HTML語言編寫。（2）借助一些HTML的編輯工具，如FrontPage 、HotDog等。（3）其他格式的文檔（如WORD文檔）轉換成HTML文本。（4）由Web服務器端實時動態(tài)地生成?！纠?-1】 創(chuàng)建一個簡單的網(wǎng)頁，步驟如下：（1）選擇“開始”“程序” “附件” “記事本”命令，打開記事本程序。輸入以下HTML代碼： HTML實例 這是一個簡單的HTML實例 （2）選擇“文件”菜單下的“保存”命令，打開“保存”對話框，在“文件名”框中輸入文件名和文件擴展名（1-1.htm），選擇合適的目錄，然后單擊“保存”按鈕。（3）在瀏覽器中打開運行該文件（

3、1-1.htm），運行結果如圖1-1所示。1.2 HTML常用標記標記符是HTML語言中一些定義網(wǎng)頁內(nèi)容格式和顯示的指令，而標記符的屬性用于進一步控制網(wǎng)頁內(nèi)容的顯示效果。1.2.1頁面基本屬性標記 不管網(wǎng)頁的內(nèi)容多么豐富、版式多么復雜，網(wǎng)頁的基本結構卻都是一樣的。 1網(wǎng)頁的基本結構 文檔標題 這是HTML文檔的主要部分 從本例中我們看到： HTML的結構包括頭部（HEAD）、主體（BODY）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含頁面的具體內(nèi)容及格式說明。2語言字符集(Charsets)的信息 可在 HTML 文件中設置 MIME 字符集信息。您在瀏覽主頁時，最好自己在瀏覽器的選項

4、菜單內(nèi)選擇相應的語言(language encoding)。但是如果 HTML 文件里寫明了設置，瀏覽器就會自動設置語言選項。尤其是主頁里用到了字符實體(entities)，則該主頁就應該寫明字符集信息。否則，您在瀏覽該主頁時，若未正確設置語言選項，顯示將可能混亂。3背景色彩和文字色彩 設置網(wǎng)頁的背景色彩和文字色彩可通過設置BODY標記的屬性來實現(xiàn)，具體格式如下： BODY標記各參數(shù)的含義見表1-1。 4添加注釋 由于Web站點需要經(jīng)常更新，而且制作時往往是幾個人合作，所以創(chuàng)建的頁面必須易于維護，而添加注釋是增強文件可讀性的重要手段。 HTML中的注釋是由開始標記符組成的。這兩個標記符中間的內(nèi)

5、容就是注釋的內(nèi)容，它們不會在瀏覽器中顯示。 5畫線在網(wǎng)頁中產(chǎn)生分隔線可用標記來實現(xiàn)，其用法為：屬性說明：（1）width用于指定分隔線的寬度，寬度值的指定方式有兩種，一是用像素點來指定，例如，若要產(chǎn)生寬度為500像素的直線，則實現(xiàn)代碼為： 另一種方法是用百分比表達，例如，若要產(chǎn)生寬度是網(wǎng)頁寬度的75分隔線，則實現(xiàn)代碼如下： （2）size用于指定直線的高度。例如，要繪制寬度為80，高度為1的直線，則實現(xiàn)代碼如下： （3）align指定直線的對齊方式，取值有Left、Center、Right。（4）noshade指定直線是否有陰影。帶有該參數(shù)，則直線無陰影。 標記一般用于產(chǎn)生水平分隔線，若要產(chǎn)生

6、豎直線，可將width設置為1，size設置為豎直線的高度值。例如：1.2.2 文字屬性標記 文字是網(wǎng)頁中最主要的頁面元素，HTML語言提供了一些用來修飾文字的標記符，可以用它們來設置文字的字體、顏色、大小和樣式等屬性。1字體控制主要用于控制文字的字體、大小和顏色，通過標記符來實現(xiàn)。其語法格式為： 文本例如，若要以綠色，宋體號字輸出“HTML實例”，則實現(xiàn)代碼為：HTML實例2標題字號語法格式為： 說明：是16的數(shù)字，表示最大的標題，表示最小的標題。在默認狀態(tài)下，標記符中的文字在瀏覽器中顯示時都是黑體，而且文字將自動在標記符后換行?！纠?-2】 在網(wǎng)頁中分別用六級標題標記符輸出一個測試效果的文

7、本。代碼如下：標題字體演示這是第一級標題這是第二級標題這是第三級標題這是第四級標題這是第五級標題這是第六級標題 運行結果如下：3字體效果語法格式為： 說明：使用這些標記符可以設置字體的樣式，常用的字體樣式標記符見表1-3所示 4分段和換行控制要實現(xiàn)分段或換行，需要通過相應的標記符來實現(xiàn)。（1）分段標記：對段落的分段使用標記來實現(xiàn)。定義段落的開始，定義段落的結束，通?？梢允÷圆粚?。單獨的一個標記可產(chǎn)生一個空行。（2）換行和禁止換行：換行用標記來實現(xiàn)，沒有對應的結束標記，它指示瀏覽器在標記處執(zhí)行一個換行動作。是使當前行強行中斷而另起一行，新的行與原來的行保持相同的屬性，換句話說，新行與原來的行在同

8、一個段落中，而P標記符則是另起一個新的段落。5預格式化文本語法格式為：文本說明：瀏覽器按照編緝文檔時和標記符之間字符的位置將內(nèi)容毫無變動的顯示出來。換句話說，在HTML文檔中寫的時候是什么樣，瀏覽器中顯示的就是什么樣。 6文本的對齊方式語法格式為：#=left、right、center例如：左對齊 右對齊7文本的分區(qū)顯示語法格式為：文本內(nèi)容例如：此段文本左對齊顯示 此段文本居中顯示 此段文本右對齊顯示1.2.3 超級鏈接標記 具備超級鏈接能力是HTML的最大優(yōu)勢，利用超級鏈接可實現(xiàn)由一個頁面切換到另一個頁面，由一個網(wǎng)站跳轉到另一個網(wǎng)站；或跳轉到同一網(wǎng)頁的某一個指定位置；或跳轉進入指定的電子郵箱

9、。1定義超鏈接語法格式為：說明：超級鏈接標記符A主要有以下幾個屬性：（1）href：定義超級鏈接所指向的文檔的URL。如果指定的文件格式是瀏覽器支持的格式，例如是網(wǎng)頁文件.html格式或者圖像文件.jpg格式，那么瀏覽器將在窗口中顯示相應的文件內(nèi)容。如果指定的文件格式不是瀏覽器支持的格式，如zip壓縮文件格式，那么瀏覽器將自動彈出文件下載對話框。（2）target：目標窗口的打開方式，有四個：_top,_blank,_parent,_self。（3）name：錨名稱。該屬性一般在創(chuàng)建頁面內(nèi)超鏈接時使用。 頁面上的文字和圖像都可以添加超鏈接。在默認狀態(tài)下，文字被添加了超鏈接后會變成藍色，而且文字

10、下方自動添加下劃線；如果是圖像添加了超鏈接，則圖像會添加藍色邊框。當鼠標移動到添加了超鏈接的頁面元素上方時，鼠標指針會變成小手的形狀。2創(chuàng)建頁面間的超鏈接語法格式為說明：在創(chuàng)建頁面超鏈接時，既可以使用相對路徑（指向同一網(wǎng)站內(nèi)的文件），也可以使用絕對路徑（指向本站點以外的文件）。在當前網(wǎng)頁創(chuàng)建超鏈接，鏈接到“新浪”網(wǎng)站首頁。在當前需要設置超級鏈接的地方，加入以下代碼即可，其實現(xiàn)代碼為：新浪鏈接另外，也可用圖像作為超鏈接的標志。例如當前網(wǎng)頁用于鏈接到新浪網(wǎng)站的圖片logo.gif存放在Images目錄中，則用圖像作為超鏈接的實現(xiàn)方法為： 利用超鏈接還可切換到同一網(wǎng)站的另一個網(wǎng)頁，例如在當前網(wǎng)頁中有

11、一個名為“關于站長”的菜單項，現(xiàn)要定義一個超鏈接，以實現(xiàn)當前用戶單擊時，切換到站長的頁面，假設介紹站長的頁面文件名為intro.htm，則該超鏈接的實現(xiàn)方法為： 關于站長3創(chuàng)建頁面內(nèi)的超鏈接語法格式為：說明：創(chuàng)建頁面內(nèi)超鏈接分兩步：首先定義錨點，如：，然后再創(chuàng)建指向錨點的超鏈接，。這兩部分在網(wǎng)頁中沒有先后順序，但應注意錨點名應惟一，不要重復。若要鏈接到頁面外的錨點處，則鏈接方法為：文本4指向電子信箱的鏈接語法格式為：鏈接文字說明：創(chuàng)建指向電子信箱的超鏈接時，屬性Herf中使用的mailto協(xié)議。該協(xié)議后面直接跟一個具體的電子信箱地址。1.2.4 圖片格式在網(wǎng)頁中插入圖像使用標記來實現(xiàn)，沒有對應

12、的結束標記。其用法為：說明：（1）如若在網(wǎng)頁的當前位置插入images/flower.jpg圖形，邊框寬度設置為1，則實現(xiàn)代碼為： （2）Align屬性用于設置圖像的對齊與布局方式。圖像的對齊方式分為兩種情況，一種是水平方向的對齊，另一種是垂直方向的對齊。 1.2.5 列表標記 列表是一種常用的組織信息的方式，HTML也提供了用于實現(xiàn)列表的標記符。HTML語言可以實現(xiàn)以下常用列表：有序列表、無序列表、定義列表。1有序列表語法：說明：有序列表符OL 包含兩個屬性：TYPE 和START。使用TYPE屬性可以設置列表編號的樣式。HTML中有序列表的編號樣式有以下幾種： 1：表示是十進制數(shù)，如1，2

13、，3等，該樣式是默認樣式；a：表示是小寫字母，如a,b,c等；A：表示是大寫字母，如A,B,C 等；i: 表示是小寫羅馬數(shù)字，如，等；I：表示是大寫羅馬字母，如，等。使用START屬性可設置列表的起始編號，它定義有序列表的起始數(shù)字，通常不必設置。有序列表中的列表項標記符LI也有兩個屬性：TYPE和VALUE。TYPE意義與OL標記符中的TYPE屬性相同；VALUE屬性使用指定一個新的數(shù)字序列起始值，使用該屬性可以創(chuàng)建一個非連續(xù)性的數(shù)字序列。 【例1-4】 一個有序列表的例子，其源代碼如下所示：智力問答把一頭大象裝進冰箱里總共分幾步？ 把冰箱門打開把大象裝進去把冰箱門關上運行結果如圖 ：2無序列

14、表語法：說明：無序列表的標記符UL只有一個屬性TYPE(項目符號樣式)，它有三種取值：disc（實心圓）、circle（空心圓）和square（方框）。無序列表中的列表項標記符LI也只有一個屬性值TYPE，它的取值與UL標記符中的取值一樣，用于控制當前列表項的項目符號樣式?！纠?-5】 一個無序列表的例子，其源代碼如下所示：學生處分 在藉學生的處分有幾種？ 通報批評警告記過開除學籍，留校查看勒令退學 運行結果如圖 ：3定義列表語法：說明：DL是英文“definition list(定義列表)”的縮寫。開始標記符和結束標記符之間的內(nèi)容就是定義列表的內(nèi)容。定義列表中的條目是通過術語使用標記符DT和

15、術語定義標記符DD來創(chuàng)建的。【例1-6】 一個定義列表的例子，其源代碼如下所示：世說新語 放棄把握的反面是放棄，選擇了一個機會，就等于放棄了其他所有的可能失戀不是不在乎，是在乎不起。離婚不是不在乎，是一切還來得及。幼稚不要怕人說我們幼稚，這正說明你還年輕，還充滿活力。謠言這是一種傳染病，沉默是最好的疫苗。 運行結果如圖： 1.2.6 表格標記 表格是HTML網(wǎng)頁的一個非常重要的元素，除了規(guī)范數(shù)據(jù)的輸出外，在網(wǎng)頁設計中，常常用它來進行版面布局的設計和定位。1表格的組成表格由表格標題（可省略）、表頭和若干表行構成，每一表行又由若干單元格組成。表格的各組成元素如圖所示。 此處為表格標題表頭表行 單元

16、格列標題1列標題2列標題3內(nèi)容1內(nèi)容2內(nèi)容32定義表格的標記符表格是由多個部分構成的，因此定義表格時，將用到多種標記符，這些標記符是： 定義表格的開始和結束定義表格標題的開始和結束（可省略）定義表行的開始和結束，一組和產(chǎn)生一個表行定義單元格的開始和結束，一組和產(chǎn)生一個單元格定義表頭單元格的開始和結束，一組和產(chǎn)生一個表頭單元格在和之間的部分，即為該單元格顯示的數(shù)據(jù)，若該單元格無數(shù)據(jù)，顯示為空，則應表達為，其中在HTML中代表空格。和之間的部分，即為表頭單元格所顯示的數(shù)據(jù)，該數(shù)據(jù)以加粗居中方式顯示。表頭也可以不用而直接用來表示 ?！纠?-7】 用HTML標記符產(chǎn)生一個寬度為500像素的2行、列的表

17、格，單元格內(nèi)容自定。其代碼如下：123456運行結果如圖：3表格標記符的屬性對表格的更詳細控制，可通過表格標記符的相關屬性來實現(xiàn)。（）標記的屬性標記的屬性用于從整體上控制表格的外觀和形狀，常用的屬性主要有：1）Width、Height屬性：該組屬性用于設置表格的寬度和高度。其寬度或高度值可用像素表示，也可用百分數(shù)表示。例如，若要產(chǎn)生寬度為700，高度為400像素的表格，則定義方法為：若要產(chǎn)生一個寬度為網(wǎng)頁寬度的85的表格，則定義方法為：2）Border屬性：定義表格的邊線的寬度。若要設置為0或不設置，則為無邊框的表格。若要產(chǎn)生一個寬度為700，邊線寬度為1的表格，則定義方法為：3）Bgcolo

18、r、Bordercolor屬性：Bgcolor用于設置整個表格的背景顏色；Bgcolor屬性對于和標記都有效，作用于標記時，用于設置該行的背景色；作用于標記，則僅設置該單元格的背景顏色。Bordercolor用于設置表格的邊線顏色，只有在Border屬性設置為非0時有效。4）Background屬性：用于設置表格的背景圖形。設置表格的背景圖形后，表格的背景顏色失效。例如，若要設置表格的背景圖形為images/bg.jpg，則設置方法為：5）Cellpadding、Cellspacing屬性：Cellpadding屬性用于設置單元格中的文本與表格邊線的間距；Cellspacing用于設置表格的各

19、單元格之間的間距。例如，若要設置單元格間距為1，單元格文本與表格邊線的間距為2，則設置方法為：6）Align屬性：用于設置表格在網(wǎng)頁中的對齊方式，取值有Left、Center、Right。例如，若要設置表格在網(wǎng)頁中居中，則設置方法為：（2）標記的屬性：標記常用的屬性主要有bgcolor和align，分別用于設置該行的背景顏色和文本的對齊方式。利用的bgcolor屬性，可以實現(xiàn)不同行顯示不同的背景顏色。（3）標記的屬性：標記常用的屬性主要有bgcolor、bordercolor、width、height、align和valign，分別用于設置該單元格的背景顏色、單元格的邊框顏色、寬度、高度、單元

20、格文本在水平方向的對齊方式和在垂直方向的對齊方式 【例1-8】 試用HTML標記符產(chǎn)生圖1-8所示的表格，表格寬度為400，各行的行高為24，表格在網(wǎng)頁中居中對齊；表頭背景顏色為#0000CC，表頭文本顏色為#FFFFFF，表格邊框寬度為1邊框顏色為#0099CC；各數(shù)據(jù)項均居中對齊，第1列的寬度為53，第2 列的寬度為116，第3列寬度為134，第4列寬度為87。實現(xiàn)的HTML代碼為：學號姓名出生日期住址 001 王小明 19820206 沈陽 002 趙爽 19831206 大連運行結果如圖： 4單元格的合并利用單元格的合并，可以形成不規(guī)則的表格。合并的方式有跨列合并和跨行合并兩種。（1）

21、跨列合并：跨列合并即是將多列合并成一個單元格，可通過標記的colspan屬性來實現(xiàn)，其用法為： 文本【例1-9】 試產(chǎn)生一個2行3列，寬度為400，邊線寬度為1的表格，然后將第1行的第2和3兩個單元格合并。實現(xiàn)的HTML代碼為： 第1行1列這是合并后的單元格 第2行1列第2行2列第2行3列運行結果如圖 ：（2）跨行合并：行合并通過標記的Rowspan屬性來實現(xiàn)，其用法為：合并形成的單元格的內(nèi)容【例1-10】 產(chǎn)生一個3行3列，寬度為400，邊線寬度為1的表格，然后將第1列的第1行和第2行的兩個單元格合并。其實現(xiàn)的HTML代碼為： 第1行、第2行合并后的單元格第1行第2列第1行第3列 第2行第2

22、列第2行第3列 運行結果如圖： 1.2.7 表單標記 為了提高網(wǎng)頁的交互性，收集用戶在網(wǎng)頁中輸入的信息，HTML專門提供了表單，在表單中可以添加使用命令按鈕、文本框、密碼輸入框、復選框、單選框、列表框、組合框等界面對象，以便接收用戶輸入的數(shù)據(jù)。利用表單可以集中管理這些界面對象，并提供提交數(shù)據(jù)和重置數(shù)據(jù)的方法。1表單的定義（1）表單的定義方法 在HTML中，表單利用和標記定義，其用法格式為： 和標記間用于定義表單中的界面對象。（2）表單的屬性 1）Name屬性：用于定義表單對象的名稱。定義表單對象名后，可方便程序中引用表單中的對象，為可選項。 若將表單的對象名定義為thisform，在程序中就可

23、通過以下方式來訪問或設置表單中界面對象的值： document.thisform.界面對象名.value 表單中界面對象的值由value屬性來設置或返回。Document是瀏覽器提供的一個對象，代表當前頁面，可直接訪問。 2）Method屬性：用于設置表單提交數(shù)據(jù)的方法，其取值為Post或Get。在后面的章節(jié)中會講到。 3）Enctype屬性：該屬性用于指定表單提交數(shù)據(jù)時所采用的編碼方式，默認的編碼方式是“application/x-www-form-urlencoded”，即采用URL編碼方式。通常情況下都應采用這種編碼方式，所以Enctype屬性通?？梢圆恢付ā?4）Action屬性：該屬

24、性用于設置一個接收和處理表單提交數(shù)據(jù)的腳本程序。即設置將表單數(shù)據(jù)提交給誰。在ASP應用中，通常設置為某一個ASP頁面，另外，也可將表單數(shù)據(jù)提交給某個指定的電子郵件信箱。（3）表單的方法 表單對象提供有submit和reset方法，分別用于實現(xiàn)表單數(shù)據(jù)的提交和重置操作。 1）submit方法：該方法用于將表單數(shù)據(jù)提交給action屬性指定的腳本程序。功能與表單中的提交命令按鈕(submit)等效。 例如，若要提交login表單中的數(shù)據(jù)，則實現(xiàn)的代碼為： document.login.submit();2）reset方法：該方法用于將表單中各個界面對象的值重置為空，或重置為初始狀態(tài)。在用戶填寫表單

25、數(shù)據(jù)時，若需要全部重新填寫，則可調(diào)用該方法來使表單數(shù)據(jù)復位。例如，若要使名為login的表單數(shù)據(jù)復位，則實現(xiàn)的代碼為：document.login.reset()；2表單的界面對象表單相當于一個載體，必須在表單中添加界面對象，才能實現(xiàn)傳送數(shù)據(jù)的目的，表單界面對象，通常也稱為表單域對象。下面分別介紹表單中可使用的界面對象，以及這些對象的用法和功能。(1) 單行文本域：單行文本域用于產(chǎn)生一個文本輸入框，以實現(xiàn)單行數(shù)據(jù)的輸入。定義方法為： 其中，Type和Name屬性是必須設置的，其他屬性均為可選項。Type屬性決定所產(chǎn)生的界面對象的類型；Name屬性用于定義該文本域的名稱；Size屬性設置文本域的

26、顯示寬度是多少個字符寬；MaxLength設置文本域最多可以接收多少個字符；Value屬性用于給文本域指定一個初始值。例如，若要定義一個名為info的表單，在表單中定義一個用于接收用戶名的輸入框username,輸入框的寬度為15，最多可接收12個字符，表單數(shù)據(jù)提交給userconfirm.asp，則定義方法為： 用戶名 表單中各界面對象的值，均是通過Value屬性來存儲的，通過訪問該屬性，可獲得或設置界面對象的值。訪問表單中各界面對象的屬性的格式為： document.表單名.界面對象名.屬性名 因此，若要獲得info表單中名為username的文本域的值，則獲取方法為： .username

27、.value 若要設置表單中該文本域的值為trainingguest,則設置方法為： .username.value=trainingguset(2) 口令輸入框：口令輸入框是單行文本域的一種特例，外觀上與單行文本域一樣，但當用戶輸入數(shù)據(jù)時，數(shù)據(jù)會用“*”替代顯示，可防止他人看到用戶所輸入的真實數(shù)據(jù)，常用于密碼輸入。其定義方法為：(3) 隱藏表單域：隱藏表單域不會顯示出來，用戶當然也無法更改其數(shù)據(jù)。通過隱藏表單域，可悄悄向服務器發(fā)送一些用戶不知道的信息。其定義方法為：(4) 多行文本域：多行文本域常用于接收大數(shù)據(jù)量的場合，可同時顯示多行文本，定義方法為：文本readonly為可選項，若選用，則

28、多行文本域變?yōu)橹蛔x。例如，若要產(chǎn)生一個6行40列的多行文本域，則定義方法為： (5) 列表框：利用列表框可以提供一些候選項供用戶選擇，列表框用標記符定義，其定義方法為： 列表項文本1 列表項文本2 列表項文本n說明：1）Size屬性用于定義列表框的高度，即一次能看到的列表項的數(shù)目。若設置為1或不設置,則為下拉式列表框；若要設置為大于或等于2的值，則為滾動式列表框。2）Mutiple為可選項，若選用該參數(shù)項，則允許多項選擇。3） 標記用于定義具體的列表項，Value屬性用于設置該列表項代表的值，即當用戶選中該列表項后，表單所提交的值。Selected為可選項，用于指定默認的候選項，只能有一個列表

29、項可選用該參數(shù)。【例1-11】 試分別用下拉式列表框和滾動式列表框顯示供用戶選擇的籍貫。 下拉式列表框滾動式列表框 籍貫: 北京 上海 重慶 四川 籍貫: 北京 上海 重慶 四川運行結果如圖 ：(6) 復選框與單選框：復選框和單選框也是提供候選項的一種方法，復選框允許多選，常用于多項選擇；單選框常成組使用，在同一組中只能任選其一，常用于單項選擇。1）復選框：復選框用標記進行定義，其定義方法為： 選項文本 一個標記產(chǎn)生一個復選項，有多個候選項，就用多少個標記。Value用于設置當用戶選中該項后，表單所提交的值。Checked為可選項，若選用該參數(shù)項，則該復選項呈選中狀態(tài)。 【例1-12】 用復選

30、框的方式提供預設定的愛好，供用戶選擇?？晒┻x擇的愛好有：旅游、玩游戲、閱讀、體育、唱歌、聽音樂。代碼為：愛好：旅游玩游戲閱讀體育運動唱歌、聽音樂運行結果如圖 ：2）單選框定義方法：選項文本單選按鈕常成組使用，為了將多個單選鈕定義成一組，需要將各選項的Name屬性值設置為相同?！纠?-13】 試用單選鈕為用戶提供一組職業(yè)選項，以供用戶選擇。 代碼如下：您的職業(yè)是：教師學生工人工程師程序員運行結果如圖 ：（7） 命令按鈕：表單中可使用的命令按鈕有提交命令按鈕、復位命令按鈕、普通命令按鈕三種，提交命令按鈕具有內(nèi)建的表單提交功能，復位命令按鈕內(nèi)建有重置表單數(shù)據(jù)的功能，普通命令按鈕不具有內(nèi)建的行為，需要

31、指定OnClick事件處理函數(shù)，才能實現(xiàn)具體的操作。 1）提交命令按鈕：提交命令按鈕用于實現(xiàn)表單數(shù)據(jù)的提交，功能上與表單對象的submit方法相同。提交命令按鈕的定義方法為： 例如，若要在表單中定義一個標題為“登錄”的提交命令按鈕，其定義方法為：2） 復位命令按鈕: 復位命令按鈕的功能與表單對象的reset方法相同。其定義方法為： 例如，若要在表單中定義一個標題為“重新填寫”的命令按鈕，其定義方法為：3） 普通命令按鈕：普通命令按鈕不具有內(nèi)建的行為，但可通過指定事件處理函數(shù)，來為命令按鈕指定具體的操作，因此通用性更強，另外，普通命令按鈕可用在表單中，也可脫離表單而直接使用。其定義方法為： 命令

32、按鈕常用的主要是鼠標單擊事件（click），可能過Onclick來為其指定事件處理函數(shù)或語句，當單擊命令按鈕時，系統(tǒng)就會自動調(diào)用執(zhí)行所指定的事件處理函數(shù)或語句。 【例1-14】 試在當前頁面中設計一名為userinfo的表單，用以收集注冊用戶的資料，并將其提交給login.asp頁面處理。需收集的信息和界面如圖所示實現(xiàn)的HTML代碼為：用戶注冊用戶注冊 用戶名: 密碼 重復密碼 性別: 男 女 教育水平 碩士以上 大學本科 大專 中專以下 電子郵箱 運行結果如圖： 1.2.8 框架標記 框架是一種特殊的網(wǎng)頁技術,它能夠將一個瀏覽器窗口分割若干區(qū)域,使瀏覽者可以同時看到多個網(wǎng)頁的內(nèi)容。含有框架的

33、網(wǎng)頁被稱為“框架集網(wǎng)頁”，它被框架分隔為多個區(qū)域，每個區(qū)域單獨顯示一個網(wǎng)頁。通過使用框架，可以將站點中的網(wǎng)頁合理地組織起來，并且為瀏覽者提供更友好的訪問界面。1框架的定義框架通過以下的標記來實現(xiàn)：*說明：*中的內(nèi)容顯示在不支持框架的瀏覽器窗口中，因此這里指向一個普通版本的html文件，以便使用不支持框架瀏覽器的用戶閱讀。標記符的作用是將窗口分割為若干個子窗口，子窗口的數(shù)目取決于嵌套在該標記符中的標記的數(shù)目。標記符有兩個屬性，rows表示橫向分框；cols表示縱向分框?？梢詫⒋翱跈M向分成幾個部分，也可以分成縱向幾個部分，還可以混和分框。標記的屬性 src和 name分別表示該框內(nèi)要顯示的html

34、文件的文件名和該框的名稱。2橫向分框橫向分框用指定，#可以是一個百分數(shù)或一個整數(shù)。前者規(guī)定各框占窗口寬度的百分比，后者指定各框寬度的絕對大小。如果對前者指定了寬度，那么可以將后者指定為“*”，表示剩下的所有寬度都賦予最后一個框?！纠?-15】 橫向分框實例。上面框架的高度是窗口的10，下面框架的高度是60像素，而中間框架的高度為剩下的可以顯示的高度。源代碼如下： 運行結果如圖： 3縱向分框縱向分框用指定?！纠?-16】 縱向分框實例。中間框架的寬度是300像素，而左邊框架的高度為剩余空間的1/5，右邊框架的高度為剩余空間的4/5。構造這個框架的源代碼如下： 運行結果如圖 ：4框架間的關聯(lián)通常使

35、用框架的目的是在框架間建立這樣的聯(lián)系，將某一框架內(nèi)的鏈接對象顯示在另一個框中。這樣就可以把其中一個框作為輸出框，另一個框為選擇框。首先，在分框的frame文件中標記各個框，標記的方法是在中加入name屬性，例如定義左邊的框為輸出，右邊框為索引。其次，在index.htm文件中指定輸出到哪個框方法是在index.html文件的超級鏈接中加入target屬性，屬性值設置為main。就會使得當鼠標單擊index.htm中的鏈接指針，它的輸出會顯示在左邊的框中。 1.3 CSS概述 CSS是Cascading Style Sheets的簡稱，一般稱為級聯(lián)式樣式表或層疊式樣式表。CSS是一種格式化網(wǎng)頁元

36、素的標準方法，它通過大量CSS屬性擴展了HTML的功能，使Web創(chuàng)作者可以將這些屬性應用到整個頁面，甚至是整個網(wǎng)站。 雖然HTML為網(wǎng)頁設計者提供了強大的格式設置功能，但是它必須在每一個需要設置的位置使用格式設置標記符，而不能為具有一定邏輯含義的內(nèi)容設置統(tǒng)一的格式，而CSS卻能夠做到這一點。1.4 加載CSS樣式的3種方式將CSS添加到HTML中有以下三種常用方法：直接嵌入樣式表（HEAD標記內(nèi)引用）內(nèi)聯(lián)樣式表（BODY內(nèi)引用）鏈接外部樣式表（文件外引用）1.4.1 HEAD標記內(nèi)引用在HTML源文件的HEAD標記符中直接使用style標記符來定義CSS，然后在HTML源文件的BODY標記符內(nèi)

37、再調(diào)用CSS。具體語法格式如下： HEAD內(nèi)引用CSS樣式 樣式1（定義樣式） 樣式2（定義樣式） 樣式n（定義樣式） 調(diào)用樣式1.4.2 BODY內(nèi)引用 將STYLE屬性與HTML標記符BODY中所包含的任何標記符聯(lián)合使用，這個屬性能夠將任何數(shù)量的CSS聲明作為自己的值，而每個聲明之間用分號隔開。 BODY內(nèi)引用CSS樣式比其他方法更加靈活，但是如果要改變樣式就比較麻煩，必須一個一個地改動。由于這種方式與傳統(tǒng)的HTML類似，都是針對具體的每個標記符進行修飾，所以并沒有發(fā)揮出樣式表有利于統(tǒng)一設置樣式的優(yōu)勢，因此在實際中的應用相對較少?！纠?-18】 以下是一個使用BODY內(nèi)引用樣式的例子，其源

38、代碼如下： BODY內(nèi)引用CSS樣式 新北京 新奧運 綠色奧運 人文奧運 科技奧運 北京成功申辦2008奧運會！ 運行結果如圖 ：1.4.3 文件外引用 為了整個網(wǎng)站能夠保持一致的樣式，我們可以單獨創(chuàng)建一個樣式表文件（該文件的后綴為.css），在其中定義需要用到的樣式，然后在每個HTML文件中都與該樣式表文件建立鏈接，從而在每個HTML文件中都可以調(diào)用所鏈接樣式表中的樣式。建立鏈接的標記符是LINK，具體的用法如下所示： 如何將CSS添加到HTML文件外引用 應用所鏈接的樣式表中的樣式鏈接標記符LINK必須放置在標記符之間,它是單獨使用的標記符,LINK標記符具有以下一些主要屬性:（1）rel

39、屬性:使用該屬性可以設置鏈接文件和HTML文檔之間的關系。在鏈接樣式表文件（.CSS文件）的情況下，該屬性的取值永遠是“STYLESHEET”。（2）href屬性:使用該屬性可以設置鏈接文件的位置。該屬性既可以是相對位置也可以是絕對位置。（3）Type屬性:使用該屬性可以設置鏈接文件的類型。CSS文件的類型是text/css。外部樣式表文件的內(nèi)容由樣式定義，即樣式名稱和屬性組成。例如，一個單獨由pmargin:2em組成的文件就可以用作外部樣式表。一個HTML文件可以鏈接多個樣式表，如果樣式表中的樣式有沖突，那么最后應用的樣式優(yōu)先?！纠?-19】 一個文件外引用鏈接樣式的例子。源代碼如下 文件

40、外引用實例 新北京 新奧運 綠色奧運 人文奧運 科技奧運 北京已經(jīng)成功申辦2008年奧運會其中與網(wǎng)頁處在同一目錄下的style.css文件的內(nèi)容如下所示：H1font-size:xx-large;color:red;font-weight:borderH2color:white;background-color:blue;text-decoration:underlineH3text-indent:30px顯示效果如圖 :1.5 CSS與標記對應的三種方式1.5.1 標記選擇符 可以使用類（class）來為單一HTML標記符創(chuàng)建多個樣式。要想將一個類包含到網(wǎng)頁的定義中，可以將一個句點和一個類名

41、稱添加到selector后，如下所示： selector.classnameproperty1:value1; 在CSS中可以使用任何名稱和名類，但是最好使用具有含義的名稱。例如，如果網(wǎng)頁中有三個地方使用H2標記符，我們希望不同位置的H2標記符使用不同的顏色，那么可以定義以下樣式：H2.color_redcolor:redH2.color_greencolor:greenH2.color_bluecolor:blue 然后在網(wǎng)頁中需要使用該類的地方用class屬性應用這些類， 如下所示：紅色標題綠色標題藍色標題 如果使用了H2標記符，但沒有指定class屬性，則不應用所定義的樣式，因為標記符樣式僅應用于具有相應class屬性的標記符。當然，標記符類樣式也可以和標記符樣式共同使用?！纠?-20】 如果仍然需要讓三個H2標記符中的文本顯示不同的顏色，但是又想讓它們具有相同大小的文字，此時不需要將相同的字體大小屬性添加到三個H2類樣式定義中，而只需要添加一個樣式規(guī)則來定義所有H2標記符中文字的大小，源代碼如下所示： 標記選擇符類樣式 H2font-size:16pt H2.color_redcolor:red H2.color_greencolor:green H2.color_bluecolor:blue標題紅色標題綠色標題藍色標題在瀏覽器中打開