Web程序設計(第三版)_第3章

1、Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:9787121131509“十一五十一五”國家級規(guī)劃教材國家級規(guī)劃教材Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:9787121131509第第 1 章章 WEB編程基礎知識編程基礎知識 第第 2 章章 WEB應用程序開發(fā)環(huán)境應用程序開發(fā)環(huán)境 第第 3 章章 HTML與與XML 第第 4 章章 腳本語言腳本語言 第第 5 章章 頁面設計頁面設計第第 6 章章 ASP程序設計程序設計 第第 7 章章 ASP.NET程序設計程序設計 第第 8 章章 WEB數(shù)據(jù)庫程

2、序設計數(shù)據(jù)庫程序設計 第第 9 章章 綜合應用實例綜合應用實例 Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:9787121131509第第 3 3 章章 HTMLHTML與與XML XML 3.1 超文本標記語言超文本標記語言HTML 3.2 可擴展標記語言可擴展標記語言XML Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 超文本標記語言超文本標記語言HTML（Hypertext Markup Language）是在萬維網(wǎng)上建立超文本

3、文件的語言，它是萬維網(wǎng)的核心是在萬維網(wǎng)上建立超文本文件的語言，它是萬維網(wǎng)的核心計算機語言。計算機語言。創(chuàng)建創(chuàng)建Web站點頁面時，可使用站點頁面時，可使用HTML語言向組成語言向組成Web站點站點的各個的各個Web頁面放置文本、圖形、圖像、動畫、音頻、視頁面放置文本、圖形、圖像、動畫、音頻、視頻信息等內(nèi)容，以及按鈕和超鏈接等可以進行交互的內(nèi)容。頻信息等內(nèi)容，以及按鈕和超鏈接等可以進行交互的內(nèi)容。HTML是一種文本標記語言，而非編程語言。是一種文本標記語言，而非編程語言。HTML文件文件是普通文本文件，與平臺無關，可用任何文本編輯器進行是普通文本文件，與平臺無關，可用任何文本編輯器進行編輯，文件擴

4、展名為編輯，文件擴展名為.htm或或.html。Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.1 HTML文檔結(jié)構(gòu)文檔結(jié)構(gòu) 該網(wǎng)頁以表格作為頁該網(wǎng)頁以表格作為頁面的總布局方式面的總布局方式 頁面設計中使用了常頁面設計中使用了常用的用的HTML標記標記 包括：表格、表單、包括：表格、表單、文字顯示控制、加入圖文字顯示控制、加入圖片、超鏈接、水平線、片、超鏈接、水平線、換行、分段、設置頁面換行、分段、設置頁面背景圖片等。背景圖片等?！纠?-1】“Web程序設計程序設計課程網(wǎng)

5、站課程網(wǎng)站”主頁面主頁面 。Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.1 HTML文檔結(jié)構(gòu)文檔結(jié)構(gòu) HTML文檔的基本構(gòu)成文檔的基本構(gòu)成 ： 文檔頭部分文檔頭部分 文檔的主體部分文檔的主體部分 Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.2 HTML基本標記基本標記 基本的基本的HTML標記分為標記分為 ：1）頭部標記）頭部標記2）體部標記）體

6、部標記Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.2 HTML基本標記基本標記 1）頭部標記）頭部標記 ， HTML文件頭部起始和結(jié)束標記。文件頭部起始和結(jié)束標記。 ， HTML文件的標題，是顯示于瀏覽器文件的標題，是顯示于瀏覽器標題欄的字符串。標題欄的字符串。 ， CSS樣式定義，詳見樣式定義，詳見5.3節(jié)。節(jié)。 該標記位于該標記位于與與標記之間，標記之間，提供用戶不可見的信息。其中，提供用戶不可見的信息。其中，屬性通常用來為搜屬性通常用來為搜索引擎定義頁面主題以及頁

7、面刷新等信息。索引擎定義頁面主題以及頁面刷新等信息。 Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.2 HTML基本標記基本標記 2）體部標記）體部標記基本的體部標記包括：基本的體部標記包括：Body文字顯示和段落控制標記文字顯示和段落控制標記設置圖像和超鏈接設置圖像和超鏈接列表和預定義格式標記等列表和預定義格式標記等Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HT

8、ML 3.1.2 HTML基本標記基本標記 （1）和和標記標記表明表明HTML文件體部的開始和結(jié)束，文件體部的開始和結(jié)束，body標記屬性及含義：標記屬性及含義：屬屬 性性 名名取取 值值含含 義義默默 認認 值值bgcolor顏色值顏色值頁面背景顏色頁面背景顏色 #FFFFFFtext顏色值顏色值文字的顏色文字的顏色#000000link顏色值顏色值待鏈接的超鏈接對象的顏色待鏈接的超鏈接對象的顏色alink顏色值顏色值鏈接中的超鏈接對象的顏色鏈接中的超鏈接對象的顏色vlink顏色值顏色值已鏈接的超鏈接對象的顏色已鏈接的超鏈接對象的顏色background圖像文件圖像文件名名頁面的背景圖像頁面

9、的背景圖像無無topmargin整數(shù)整數(shù)頁面顯示區(qū)距窗口上邊框的距離，以像頁面顯示區(qū)距窗口上邊框的距離，以像素點為單位素點為單位0leftmargin整數(shù)整數(shù)頁面顯示區(qū)距窗口左邊框的距離，以像頁面顯示區(qū)距窗口左邊框的距離，以像素點為單位素點為單位0Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.2 HTML基本標記基本標記 HTML中兩種顏色值的表示方法：中兩種顏色值的表示方法： RGB值表示。值表示。 用顏色的十六進制用顏色的十六進制RGB值表示，形如值表示，形如#RRG

10、GBB。如如#ff0000，表示紅色，表示紅色，#0000ff表示藍色。表示藍色。 英文單詞表示。英文單詞表示。 如如red表示紅色，表示紅色，blue表示藍色。表示藍色。Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.2 HTML基本標記基本標記 （2）文字顯示和段落控制標記）文字顯示和段落控制標記 文字顯示屬性主要有字體、字號、顏色，段落控制顯示對象的分文字顯示屬性主要有字體、字號、顏色，段落控制顯示對象的分段。常用的文字顯示和段落控制標記如下：段。常用的文字顯示和段落

11、控制標記如下：標標 記記 名名含含 義義,以屬性以屬性face、size、color控制字體、字號、字顏色的顯示特性控制字體、字號、字顏色的顯示特性,斜體斜體,粗體粗體,加下劃線加下劃線,下標下標,上標上標大字體大字體,小字體小字體標題格式，數(shù)字越大，顯示的標題字越小標題格式，數(shù)字越大，顯示的標題字越小,分段標記，屬性有分段標記，屬性有align：left左對齊；左對齊；center居中對齊；居中對齊；right右右對齊對齊,塊容器標記，其中的內(nèi)容是一個獨立段落塊容器標記，其中的內(nèi)容是一個獨立段落分隔線，屬性有：分隔線，屬性有：width（線的寬度）（線的寬度） 、color（線的顏色）（線的

12、顏色）,居中顯示居中顯示W(wǎng)eb程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.2 HTML基本標記基本標記 【例例3-2】一個包含文字顯示和段落控制標記的一個包含文字顯示和段落控制標記的HTML文件示例。文件示例。文字顯示和段落控制文字顯示和段落控制一級標題一級標題這是黑體，大小這是黑體，大小為為7號字，藍色號字，藍色這是一個段落這是一個段落這是斜體這是斜體這是粗體這是粗體這是下劃線字體這是下劃線字體這是大字體這是大字體這是小字體這是小字體這是下標字體這是下標字體1這是上標字體這

13、是上標字體2 這些標記還可以混合使用這些標記還可以混合使用這是另一個段落這是另一個段落    以下是轉(zhuǎn)義序列以下是轉(zhuǎn)義序列< 小于號；小于號；> 大于號；大于號；& 與號；與號；"雙引號；例雙引號；例如如:a>bWeb程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.2 HTML基本標記基本標記 （3）圖像標記）圖像標記 以下幾種圖像格式可以被瀏覽器解釋：以下幾種圖像格式可以被瀏覽器解釋： GIF格式（格式

14、（.gif文件）、文件）、X位圖格式（位圖格式（.xbm文件）、文件）、JPEG格式（格式（.jpg、.jpeg文件）和文件）和PNG格式（格式（Portable Network Graphics）Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.2 HTML基本標記基本標記 （3）圖像標記）圖像標記 標記的屬性包括：標記的屬性包括： src指明圖像文件的地址。該屬性值必須指明。值可以是一指明圖像文件的地址。該屬性值必須指明。值可以是一個本地文件名或一個個本地文件名或一個UR

15、L形式，如形式，如http:/ border指明圖像邊框的粗細，值為整數(shù)。若為指明圖像邊框的粗細，值為整數(shù)。若為0，表示無邊，表示無邊框；值越大，邊框越粗?？颍恢翟酱?，邊框越粗。 width圖像寬度，值為整數(shù)，單位為屏幕像素點數(shù)。若不指圖像寬度，值為整數(shù)，單位為屏幕像素點數(shù)。若不指出該屬性值，則瀏覽器默認按圖像的實際尺寸顯示。出該屬性值，則瀏覽器默認按圖像的實際尺寸顯示。 height圖像高度，值為整數(shù)，單位為屏幕像素點數(shù)。若不指圖像高度，值為整數(shù)，單位為屏幕像素點數(shù)。若不指出該屬性值，則瀏覽器默認按圖像的實際尺寸顯示。出該屬性值，則瀏覽器默認按圖像的實際尺寸顯示。 alt若設置了該屬性值，則

16、當鼠標移至該圖像區(qū)域時，將以一若設置了該屬性值，則當鼠標移至該圖像區(qū)域時，將以一個小標簽顯示該屬性值。個小標簽顯示該屬性值。Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.2 HTML基本標記基本標記 （4）超鏈接標記）超鏈接標記 一個超鏈接可指向另一個一個超鏈接可指向另一個Web頁，它由兩部分組成：頁，它由兩部分組成： 一部分是顯示在本頁面中的可被觸發(fā)的超鏈接文本一部分是顯示在本頁面中的可被觸發(fā)的超鏈接文本或圖像或圖像 另一部分是用來描述當超鏈接被觸發(fā)后要鏈接到的另一部分

17、是用來描述當超鏈接被觸發(fā)后要鏈接到的URL信息。信息。 超鏈接標記的格式如下：超鏈接標記的格式如下：超鏈接文本或圖像超鏈接文本或圖像Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.2 HTML基本標記基本標記 （4）超鏈接標記）超鏈接標記 超鏈接標記的超鏈接標記的href屬性屬性的的URL信息的構(gòu)成可分為如下三種情況：信息的構(gòu)成可分為如下三種情況： 目標頁面位于另外的主機或采用非目標頁面位于另外的主機或采用非HTTP協(xié)議，此時采用絕對協(xié)議，此時采用絕對URL格式，即：格式，

18、即： 協(xié)議名協(xié)議名:/主機名主機名/目錄信息目錄信息 若目標頁面位于本主機，可采用相對若目標頁面位于本主機，可采用相對URL代替絕對代替絕對URL。例如，。例如，目標頁面的目標頁面的HTML文件與本文件與本HTML文件位于同一子目錄，名為文件位于同一子目錄，名為des1.htm，則超鏈接標記可簡化為：，則超鏈接標記可簡化為：超鏈接文本超鏈接文本 通常超鏈接總是指向目標通常超鏈接總是指向目標HTML文件的頭部，但超鏈接的目標也文件的頭部，但超鏈接的目標也可以是某個文件的特定位置（稱為可以是某個文件的特定位置（稱為“錨點錨點”，anchor）。此時，需）。此時，需用超鏈接標記的用超鏈接標記的NAM

19、E屬性來定義超鏈接的引用名，格式為：屬性來定義超鏈接的引用名，格式為：文本或圖像等頁面元素文本或圖像等頁面元素Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.2 HTML基本標記基本標記 （4）超鏈接標記）超鏈接標記 超鏈接標記的屬性超鏈接標記的屬性target指明目標頁面顯示的窗口。其含義如指明目標頁面顯示的窗口。其含義如下：下： target=_blank 目標頁面顯示于一個新的瀏覽器窗口。目標頁面顯示于一個新的瀏覽器窗口。 target=_top 通常在框架中的超鏈接

20、才設置該值，表示通常在框架中的超鏈接才設置該值，表示目標頁面顯示于整個瀏覽器窗口，而不是顯示在框架所在目標頁面顯示于整個瀏覽器窗口，而不是顯示在框架所在窗口中。窗口中。 target=框架名框架名 目標頁面顯示于指定框架所在的窗口。目標頁面顯示于指定框架所在的窗口。target的默認值是本頁面所在的瀏覽器窗口。的默認值是本頁面所在的瀏覽器窗口。Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.2 HTML基本標記基本標記 （4）超鏈接標記）超鏈接標記 【例例3-3】三種三種U

21、RL應用示例。應用示例。超鏈接超鏈接URL 單擊單擊這里這里可以可以見我的照片見我的照片 單擊單擊這里這里可以進可以進入網(wǎng)易入網(wǎng)易 單擊單擊這里這里可以可以給我發(fā)信給我發(fā)信 單擊單擊這里這里可以轉(zhuǎn)可以轉(zhuǎn)到我的簡歷到我的簡歷 我的簡歷：我的簡歷：Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.2 HTML基本標記基本標記 （4）列表標記和預定格式標記）列表標記和預定格式標記 有三種類型的列表：有三種類型的列表： 無序列表（無序列表（unordered list）：）： 列表項

22、列表項 有序列表（有序列表（ordered list）：）： 列表項列表項 定義列表（定義列表（definition list）：）： 列表項列表項 預定格式（預定格式（preformatted）標記：）標記： 可以使信息完全按照可以使信息完全按照HTML文件中編排的格式原樣顯示文件中編排的格式原樣顯示于瀏覽器中，該標記的格式為：于瀏覽器中，該標記的格式為：預定格式的信息預定格式的信息只要將信息按照所需要的格式編排好，放在只要將信息按照所需要的格式編排好，放在、標標記對中，就不必擔心信息在瀏覽器中的顯示會出現(xiàn)偏差。記對中，就不必擔心信息在瀏覽器中的顯示會出現(xiàn)偏差。 Web程序設計程序設計(第第

23、3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.2 HTML基本標記基本標記 【例例3-4】三種列表標記應用示例。三種列表標記應用示例。課表課表今天我要上以下的課今天我要上以下的課局域網(wǎng)工程局域網(wǎng)工程操作系統(tǒng)操作系統(tǒng)數(shù)據(jù)結(jié)構(gòu)數(shù)據(jù)結(jié)構(gòu)今天我要上以下的課今天我要上以下的課局域網(wǎng)工程局域網(wǎng)工程操作系統(tǒng)操作系統(tǒng)數(shù)據(jù)結(jié)構(gòu)數(shù)據(jù)結(jié)構(gòu)局域網(wǎng)局域網(wǎng)局域網(wǎng)是指將小范圍內(nèi)的數(shù)據(jù)設備經(jīng)過通信系統(tǒng)連接起來的計算機網(wǎng)絡局域網(wǎng)是指將小范圍內(nèi)的數(shù)據(jù)設備經(jīng)過通信系統(tǒng)連接起來的計算機網(wǎng)絡 Web程序設計程序設計(第第3版版)，電子工業(yè)出

24、版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.3 表格（表格（Table） 表格是最常用的頁面元素，在頁面中用表格來表示數(shù)據(jù)表格是最常用的頁面元素，在頁面中用表格來表示數(shù)據(jù)直觀又清晰，而且直觀又清晰，而且HTML表格的使用非常靈活，許多較表格的使用非常靈活，許多較復雜的頁面布局也可利用表格來完成。復雜的頁面布局也可利用表格來完成。在在Internet上瀏覽的許多頁面都大量使用了表格。在上瀏覽的許多頁面都大量使用了表格。在HTML中，表格是由一個表格名稱（標題）再加上一行中，表格是由一個表格名稱（標題）再加上一行或多行表

25、格內(nèi)容所構(gòu)成的塊狀結(jié)構(gòu)?；蚨嘈斜砀駜?nèi)容所構(gòu)成的塊狀結(jié)構(gòu)。Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.3 表格（表格（Table） 1. 表格定義表格定義 標題內(nèi)容標題內(nèi)容 表格內(nèi)容表格內(nèi)容 表格內(nèi)容表格內(nèi)容 和和標記對界定表格結(jié)構(gòu)的起始和結(jié)束；標記對界定表格結(jié)構(gòu)的起始和結(jié)束； 、標志是可選項，該標記中的內(nèi)容是表標志是可選項，該標記中的內(nèi)容是表格的標題；格的標題； 、界定一個表格行的開始和結(jié)束；一個表格行可以包界定一個表格行的開始和結(jié)束；一個表格行可以包含多個表格項，每個

26、表格項的內(nèi)容和顯示特性由標記對含多個表格項，每個表格項的內(nèi)容和顯示特性由標記對、來定義。來定義。Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.3 表格（表格（Table） 2. 表格屬性表格屬性 標記標記、和和的屬性用來定義表格的顯示特性，其中的屬性用來定義表格的顯示特性，其中的屬性描述整個表格的顯示特性：的屬性描述整個表格的顯示特性：屬屬 性性 名名取取 值值含含 義義默默 認認 值值border整數(shù)整數(shù)表格邊框粗細，值為表格邊框粗細，值為0，表格沒有邊框；值越大，表格

27、，表格沒有邊框；值越大，表格邊框越粗邊框越粗 0width百分比百分比表格寬度，以相對于充滿窗口的百分比計（如表格寬度，以相對于充滿窗口的百分比計（如60%）100%整數(shù)整數(shù)表格寬度，以屏幕像素點計表格寬度，以屏幕像素點計cellpadding整數(shù)整數(shù)每個表項內(nèi)容與表格邊框之間的距離，以像素點為單位每個表項內(nèi)容與表格邊框之間的距離，以像素點為單位0cellspacing整數(shù)整數(shù)表格邊框之間的距離，以像素點為單位表格邊框之間的距離，以像素點為單位2bordercolor顏色值顏色值表格邊框的顏色表格邊框的顏色#000000background圖像文件名圖像文件名表格的背景圖表格的背景圖無無ali

28、gnleft | center | right表格的位置表格的位置leftWeb程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.3 表格（表格（Table） 2. 表格屬性表格屬性 行控制標記行控制標記的屬性定義該行的顯示特性的屬性定義該行的顯示特性 ：屬屬 性性 名名取取 值值含含 義義默默 認認 值值alignleft | center | right本行各表格項的橫向排列方式本行各表格項的橫向排列方式left（左對齊）（左對齊）bgcolor顏色值顏色值本行各表格項的背景色

29、本行各表格項的背景色#000000valigntop | middle | bottom本行各表格項的縱向排列方式本行各表格項的縱向排列方式middlewidth百分比值百分比值 | 整數(shù)整數(shù)本行寬度（受本行寬度（受table的的width屬性值制約）屬性值制約）height整數(shù)整數(shù)本行高度，以像素點為單位本行高度，以像素點為單位Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.3 表格（表格（Table） 2. 表格屬性表格屬性 表格項控制標記表格項控制標記的屬性定義該項的

30、顯示特性的屬性定義該項的顯示特性 ：屬屬 性性 名名取取 值值含含 義義默默 認認 值值alignleft | center | right本表格項的橫向排列方式本表格項的橫向排列方式left（左對齊）（左對齊）bgcolor顏色值顏色值本表格項的背景色本表格項的背景色#000000valigntop | middle | bottom本表格項的縱向排列方式本表格項的縱向排列方式middlewidth百分比值百分比值 | 整數(shù)整數(shù)本表格項寬度（受本表格項寬度（受table和和tr的的width屬性值制約）屬性值制約）height整數(shù)整數(shù)本表格項高度，以像素點為單位（受本表格項高度，以像素點為單

31、位（受tr的的height屬性屬性值制約）值制約）background圖像文件名圖像文件名本表格項的背景圖像本表格項的背景圖像無無colspan整數(shù)整數(shù)按列橫向結(jié)合。如該值為按列橫向結(jié)合。如該值為2，表示本表格項在寬度上，表示本表格項在寬度上占用兩列占用兩列1rowspan整數(shù)整數(shù)按行縱向結(jié)合。如該值為按行縱向結(jié)合。如該值為2，表示本表格項在高度上，表示本表格項在高度上占用兩行占用兩行1Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.3 表格（表格（Table） 【例例3-

32、5】一個簡單表格示例。一個簡單表格示例。 物資列表物資列表商品類別商品類別數(shù)量數(shù)量日用百貨日用百貨10電器電器20轎車轎車5 Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.3 表格（表格（Table） 【例例3-6】一個較復雜的表格示例。一個較復雜的表格示例。 其中每行列數(shù)及每其中每行列數(shù)及每列行數(shù)都不同列行數(shù)都不同利用利用td標記的標記的colspan和和rowspan屬性可以屬性可以對表格的單元格進對表格的單元格進行靈活的控制。行靈活的控制。Web程序設計程序設計(第

33、第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.4 表單（表單（Form） 表單提供圖形用戶界面的基本元素，包括按鈕、文本框、表單提供圖形用戶界面的基本元素，包括按鈕、文本框、單選鈕、復選框等，是單選鈕、復選框等，是HTML實現(xiàn)交互功能的主要接口，實現(xiàn)交互功能的主要接口，用戶通過表單向服務器提交數(shù)據(jù)。用戶通過表單向服務器提交數(shù)據(jù)。表單的使用包括兩部分：表單的使用包括兩部分： 一部分是一部分是用戶界面用戶界面，提供用戶輸入數(shù)據(jù)的元件；，提供用戶輸入數(shù)據(jù)的元件； 另一部分是另一部分是處理程序處理程序，可

34、以是客戶端程序，在瀏覽，可以是客戶端程序，在瀏覽器中執(zhí)行；也可以是服務器處理程序，處理用戶提交器中執(zhí)行；也可以是服務器處理程序，處理用戶提交的數(shù)據(jù)，返回結(jié)果。的數(shù)據(jù)，返回結(jié)果。 Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.4 表單（表單（Form） 1. 表單定義表單定義 表單定義的語法如下：表單定義的語法如下： teaxtarea定義定義 select定義定義Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:9787121131

35、5093.1 超文本標記語言超文本標記語言HTML 3.1.4 表單（表單（Form） 1. 表單定義表單定義 form標記的屬性含義如下：標記的屬性含義如下： method取值為取值為post或或get。二者的區(qū)別是：。二者的區(qū)別是：get方法將在瀏覽器的方法將在瀏覽器的URL欄中顯示所傳遞變量欄中顯示所傳遞變量的值，而的值，而post方法則不顯示；在服務器端的數(shù)方法則不顯示；在服務器端的數(shù)據(jù)提取方式也不同。據(jù)提取方式也不同。 action指出用戶所提交的數(shù)據(jù)將由哪個服指出用戶所提交的數(shù)據(jù)將由哪個服務器的哪個程序處理?？商幚碛脩籼峤坏臄?shù)據(jù)務器的哪個程序處理?？商幚碛脩籼峤坏臄?shù)據(jù)的服務器程序種

36、類較多，如的服務器程序種類較多，如ASP腳本程序、腳本程序、ASPX程序、程序、PHP程序等。程序等。Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.4 表單（表單（Form） 2. 表單的輸入域表單的輸入域 表單的輸入域有如下三類：表單的輸入域有如下三類： 以標記以標記定義的多種輸入域，包括定義的多種輸入域，包括text、radio、checkbox、password、hidden、button、submit、reset和和file等。等。 以標記以標記定義的文本域。定義

37、的文本域。 以標記以標記和和定義的下拉列表框。定義的下拉列表框。 Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.4 表單（表單（Form） 【例例3-7】表單輸入域的定義方法及使用示例。表單輸入域的定義方法及使用示例。 表單使用表單使用請選擇您學習的方式請選擇您學習的方式全日制在讀全日制在讀走讀走讀函授函授請選擇您所要學習的課程請選擇您所要學習的課程局域網(wǎng)工程局域網(wǎng)工程操作系統(tǒng)操作系統(tǒng)數(shù)據(jù)結(jié)構(gòu)數(shù)據(jù)結(jié)構(gòu) 請輸入您的要求請輸入您的要求 Web程序設計程序設計(第第3版版)，電

38、子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.4 表單（表單（Form） 常見表單輸入域常見表單輸入域輸入域名稱輸入域名稱說說 明明text（文本框）（文本框） 可輸入一行文字。舉例：可輸入一行文字。舉例： radio（單選鈕）（單選鈕） 當有多個選項時，只能選其中一項。舉例：當有多個選項時，只能選其中一項。舉例：走走留留 checkbox（復選框）（復選框） 當有多個選項時，可以選其中多項。舉例：當有多個選項時，可以選其中多項。舉例：簽字筆簽字筆 鋼筆鋼筆 圓珠筆圓珠筆 submit（提交按鈕）（提交按鈕）

39、將數(shù)據(jù)傳遞給服務器。舉例：將數(shù)據(jù)傳遞給服務器。舉例： password（密碼輸入（密碼輸入框）框） 用戶輸入的字符以用戶輸入的字符以“*”顯示。舉例：顯示。舉例：輸入密碼：輸入密碼： Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.4 表單（表單（Form） 常見表單輸入域（續(xù)）常見表單輸入域（續(xù)）輸入域名稱輸入域名稱說說 明明reset（重置按鈕）（重置按鈕） 將用戶輸入的數(shù)據(jù)清除。舉例：將用戶輸入的數(shù)據(jù)清除。舉例： hidden（隱藏域）（隱藏域） 在瀏覽器中不顯示，但

40、可通過程序取值或改變其值。主要在瀏覽器中不顯示，但可通過程序取值或改變其值。主要用于瀏覽器向服務器傳遞數(shù)據(jù)而不想讓瀏覽器用戶知道的用于瀏覽器向服務器傳遞數(shù)據(jù)而不想讓瀏覽器用戶知道的情形。例如：情形。例如： button（按鈕）（按鈕） 普通按鈕，按下后的操作需由程序完成。舉例：普通按鈕，按下后的操作需由程序完成。舉例： textarea（文本域）（文本域） 可輸入多行文字。舉例：可輸入多行文字。舉例：請輸入您的要求請輸入您的要求 select（下拉列表）（下拉列表） 在多個可選項中選擇在多個可選項中選擇 file（文件域）（文件域） 一般用于選擇文件。舉例：一般用于選擇文件。舉例： Web程序

41、設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.4 表單（表單（Form） select輸入域輸入域 當提供給用戶的選擇項目較多時，為節(jié)省顯示空間，可使用表單的下當提供給用戶的選擇項目較多時，為節(jié)省顯示空間，可使用表單的下拉列表輸入域。拉列表輸入域。 定義下拉列表框使用定義下拉列表框使用和和兩個標記，其語法如下：兩個標記，其語法如下： 表項內(nèi)容表項內(nèi)容 屬性屬性multiple是可選項，若定義該屬性，則下拉列表中的多項都可被選中。是可選項，若定義該屬性，則下拉列表中的多項都可被選中。

42、 例如，下面的代碼定義一個含有三個選項的下拉列表：例如，下面的代碼定義一個含有三個選項的下拉列表：蘋果蘋果梨子梨子香蕉香蕉Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.4 表單（表單（Form） file輸入域輸入域 當用戶需要上傳文件時，可使用當用戶需要上傳文件時，可使用file輸入域。輸入域。 文件域由一個文本框和一個文件域由一個文本框和一個“瀏覽瀏覽”按鈕組成，用戶既可以在文本框按鈕組成，用戶既可以在文本框中輸入文件的路徑和文件名，也可以通過單擊中輸入文件的路徑和文

43、件名，也可以通過單擊“瀏覽瀏覽”按鈕從磁盤上查按鈕從磁盤上查找和選擇所需文件。創(chuàng)建文件域方法如下：找和選擇所需文件。創(chuàng)建文件域方法如下： 屬性主要包括屬性主要包括name、size等，等，name指出文件域名稱，指出文件域名稱，size指出文件指出文件名輸入框的寬度。名輸入框的寬度。 Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.5 框架（框架（Frame） 框架又常稱為幀，它也是框架又常稱為幀，它也是HTML常用的頁面元素。常用的頁面元素。利用框架可以將瀏覽器顯示窗口分

44、割成多個相互獨立利用框架可以將瀏覽器顯示窗口分割成多個相互獨立的區(qū)域，每個區(qū)域可以顯示獨立的的區(qū)域，每個區(qū)域可以顯示獨立的HTML頁面。頁面。Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.5 框架（框架（Frame） 【例例3-9】一個應用框架的示例。一個應用框架的示例。其中包含三個其中包含三個HTML文件：文件： main.htm稱為主文件，是包含稱為主文件，是包含標記的文件，它定義瀏覽器窗標記的文件，它定義瀏覽器窗口被分割的方式，本例將窗口分為左、口被分割的方式，本例

45、將窗口分為左、右兩個子窗口，分別占窗口寬度的右兩個子窗口，分別占窗口寬度的15%和和85%； 文件文件frame1.htm、frame2.htm分別分別是瀏覽器被分割的兩個區(qū)域顯示的頁面是瀏覽器被分割的兩個區(qū)域顯示的頁面文件。文件。 1. 框架簡例框架簡例Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.5 框架（框架（Frame） 2. 框架定義框架定義 首先需確定如何分割窗口，然后建立描述窗口分割的主文件，再為每個框架建首先需確定如何分割窗口，然后建立描述窗口分割的主文件

46、，再為每個框架建立相應的立相應的HTML文件。主文件的定義方法是：文件。主文件的定義方法是：頭部標記頭部標記 . . 字符串字符串其中，標記其中，標記定義窗口分割的方式（橫向或縱向）和大小，定義窗口分割的方式（橫向或縱向）和大小，可以嵌套，內(nèi)層的可以嵌套，內(nèi)層的表示對已分割的窗口再進行分割的方表示對已分割的窗口再進行分割的方式和大小。式和大小。標記指明框架所對應的標記指明框架所對應的HTML文件。文件。標記的個數(shù)應標記的個數(shù)應與其所屬的與其所屬的標記分割的框架數(shù)目相同，與窗口的對應關系是按排列標記分割的框架數(shù)目相同，與窗口的對應關系是按排列順序逐個對應。順序逐個對應。標記定義了若瀏覽器不支持框

47、架時所顯示的內(nèi)容。標記定義了若瀏覽器不支持框架時所顯示的內(nèi)容。 Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.5 框架（框架（Frame） 屬屬 性性 名名取取 值值含含 義義默默 認認 值值rows百分比百分比將窗口上、下（橫向）分割，給出每個框架高度占整個將窗口上、下（橫向）分割，給出每個框架高度占整個窗口高度的百分比。例如：窗口高度的百分比。例如：“25%,75%”表示將窗口分為表示將窗口分為上、下兩個框架，高度分別為總窗口高度的上、下兩個框架，高度分別為總窗口高度

48、的25%和和75%。值的一部分也可用。值的一部分也可用“*”表示，例如表示，例如“25%,*”，表示最，表示最后一個框架的高度是除去其他框架已用去的高度后一個框架的高度是除去其他框架已用去的高度無無整數(shù)整數(shù)將窗口上、下（橫向）分割，給出每個框架高度的像素將窗口上、下（橫向）分割，給出每個框架高度的像素點數(shù)。例如：點數(shù)。例如：“100,600”表示將窗口分為上、下兩個框架表示將窗口分為上、下兩個框架，高度分別為，高度分別為100和和600個像素點。值的一部分也可用個像素點。值的一部分也可用“*”表示，含義同上表示，含義同上cols 百分比百分比|整數(shù)整數(shù) 將窗口左、右（縱向）分割，值的格式和含義

49、與將窗口左、右（縱向）分割，值的格式和含義與“rows”屬性類似屬性類似無無frameborder yes|no 框架邊框是否顯示框架邊框是否顯示 yes bordercolor 顏色值顏色值 框架邊框顏色框架邊框顏色 Gray(灰灰) 標記的屬性標記的屬性 Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.1.5 框架（框架（Frame） 標記的屬性標記的屬性 屬屬 性性 名名取取 值值含含 義義默默 認認 值值srcHTML文件名文件名框架對應的框架對應的HTML文件文件無無

50、name字符串字符串框架的名字，可在程序和框架的名字，可在程序和標記的標記的target屬性中引用屬性中引用無無noresize無無不允許用戶改變框架窗口大小不允許用戶改變框架窗口大小無無scrollingyes|no|auto框架邊框是否出現(xiàn)滾動條框架邊框是否出現(xiàn)滾動條automarginwidth整數(shù)整數(shù)框架左、右邊緣像素點數(shù)框架左、右邊緣像素點數(shù)0marginheight整數(shù)整數(shù)框架上、下邊緣像素點數(shù)框架上、下邊緣像素點數(shù)0Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.1 超文本標記語言超文本標記語言HTML 3.

51、1.5 框架（框架（Frame） 【例例3-10】利用框架將窗口分成三個子窗口，分別命名為利用框架將窗口分成三個子窗口，分別命名為win001、win002和和win003，子窗口，子窗口win001對應的對應的HTML中設置了兩個超鏈接，用戶單擊這兩個中設置了兩個超鏈接，用戶單擊這兩個超鏈接后目標超鏈接后目標URL將在子窗口將在子窗口win002中顯示。中顯示。本例中，在上左子窗口對應的文件本例中，在上左子窗口對應的文件frame1.htm中設置了兩個超鏈接，中設置了兩個超鏈接，它們被觸發(fā)后，相應的目標頁面將它們被觸發(fā)后，相應的目標頁面將顯示于上右子窗口（名為顯示于上右子窗口（名為“win0

52、02”）中，這是通過在文件中，這是通過在文件frame1.htm的的標記標記中設置中設置target屬性屬性來指定的。來指定的。這種方法在頁面設計中被廣泛使用，這種方法在頁面設計中被廣泛使用，它可以保持超鏈接不被目標文件覆它可以保持超鏈接不被目標文件覆蓋。蓋。 Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.2 可擴展標記語言可擴展標記語言XML 可擴展標記語言可擴展標記語言XML（eXtensible Markup Language）是為了克服是為了克服HTML缺乏靈活性和伸縮性的缺點以及缺乏靈活性和伸縮性的缺點以及SG

53、ML過于復雜、不利于軟件應用的缺點而發(fā)展起來的一種過于復雜、不利于軟件應用的缺點而發(fā)展起來的一種元標元標記語言記語言。 XML吸取了吸取了SGML和和HTML的優(yōu)點，摒棄了它們的缺點，的優(yōu)點，摒棄了它們的缺點，已成為互聯(lián)網(wǎng)標準的重要組成部分。已成為互聯(lián)網(wǎng)標準的重要組成部分。在在XML中，可以根據(jù)所要描述的數(shù)據(jù)元素定義不同的標中，可以根據(jù)所要描述的數(shù)據(jù)元素定義不同的標簽，表達各種豐富的內(nèi)容和意義。簽，表達各種豐富的內(nèi)容和意義。XML文檔分層嵌套形成一個樹形結(jié)構(gòu)，不僅可以把一個文檔分層嵌套形成一個樹形結(jié)構(gòu)，不僅可以把一個XML文檔看成一個文件，而且還可以看成一棵標記樹。文檔看成一個文件，而且還可以

54、看成一棵標記樹。Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.2 可擴展標記語言可擴展標記語言XML XML是一種數(shù)據(jù)存儲語言，它使用一系列簡單標記描述是一種數(shù)據(jù)存儲語言，它使用一系列簡單標記描述數(shù)據(jù)。數(shù)據(jù)。XML同時也是一組規(guī)范，用戶都遵守這組規(guī)范進行同時也是一組規(guī)范，用戶都遵守這組規(guī)范進行開發(fā)，這樣，不同計算機系統(tǒng)之間就可以相互交流信息。開發(fā)，這樣，不同計算機系統(tǒng)之間就可以相互交流信息。 XML繼承了繼承了SGML和和HTML的功能，是一種用于定義標的功能，是一種用于定義標記的語言，又稱為記的語言，又稱為“元語言元語

55、言”。創(chuàng)建一個。創(chuàng)建一個XML文檔時，用文檔時，用戶需根據(jù)描述的數(shù)據(jù)自己來定義各種標記。戶需根據(jù)描述的數(shù)據(jù)自己來定義各種標記。3.2.1 XML概述概述 Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.2 可擴展標記語言可擴展標記語言XML 1. XML與與HTML的比較的比較3.2.1 XML概述概述 【例例3-11】XML與與HTML的比較示例。的比較示例。Here we have some text This is a heading This bit is normal text This is some bold

56、 text And finally some more normal textWeb程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.2 可擴展標記語言可擴展標記語言XML XML與與HTML的比較的比較3.2.1 XML概述概述 比比 較較 內(nèi)內(nèi) 容容HTMLXML可擴展性可擴展性不具有擴展性不具有擴展性是元標記語言，可用于定義新的標記語言是元標記語言，可用于定義新的標記語言側(cè)重點側(cè)重點側(cè)重于信息的表現(xiàn)側(cè)重于信息的表現(xiàn)側(cè)重于結(jié)構(gòu)化地描述信息側(cè)重于結(jié)構(gòu)化地描述信息語法要求語法要求較寬松，不要求標記嵌較寬松，不要求標記嵌套、配對等套

57、、配對等 語法嚴謹，嚴格要求標記嵌套、配對、遵循語法嚴謹，嚴格要求標記嵌套、配對、遵循XML數(shù)據(jù)結(jié)構(gòu)（數(shù)據(jù)結(jié)構(gòu)（DTD樹形結(jié)構(gòu)、樹形結(jié)構(gòu)、XML Schema）可讀性與可維可讀性與可維護性護性難于閱讀與維護難于閱讀與維護結(jié)構(gòu)清晰，便于閱讀與維護結(jié)構(gòu)清晰，便于閱讀與維護數(shù)據(jù)和顯示關數(shù)據(jù)和顯示關系系內(nèi)容描述與顯示方式一內(nèi)容描述與顯示方式一體化體化內(nèi)容描述與顯示方式分離內(nèi)容描述與顯示方式分離大小寫敏感大小寫敏感不區(qū)分大小寫不區(qū)分大小寫區(qū)分大小寫區(qū)分大小寫Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.2 可擴展標記語言可擴展標記

58、語言XML 2. XML的特性的特性 3.2.1 XML概述概述 （1）實現(xiàn)應用程序之間的數(shù)據(jù)交換。）實現(xiàn)應用程序之間的數(shù)據(jù)交換。（2）數(shù)據(jù)與顯示分離。）數(shù)據(jù)與顯示分離。（3）數(shù)據(jù)分布式處理。）數(shù)據(jù)分布式處理。 Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.2 可擴展標記語言可擴展標記語言XML 3. XML文檔處理流程文檔處理流程 3.2.1 XML概述概述 處理過程分為三個階段：處理過程分為三個階段： 編輯編輯。使用通用的字處理軟件或?qū)Ｓ玫摹Ｊ褂猛ㄓ玫淖痔幚碥浖驅(qū)Ｓ玫腦ML編輯工具生成編輯工具生成XML文檔。文檔。

59、 解析解析。對。對XML文檔進行語法分析、合法性檢查。讀取其中的內(nèi)容，通文檔進行語法分析、合法性檢查。讀取其中的內(nèi)容，通常以樹形結(jié)構(gòu)交給后續(xù)的應用程序進行處理，后續(xù)程序通常為瀏覽器或常以樹形結(jié)構(gòu)交給后續(xù)的應用程序進行處理，后續(xù)程序通常為瀏覽器或其他應用程序。其他應用程序。 瀏覽瀏覽。將由。將由XML解析器傳來的解析器傳來的XML樹形結(jié)構(gòu)以用戶需要的格式顯示樹形結(jié)構(gòu)以用戶需要的格式顯示或處理。或處理。Web程序設計程序設計(第第3版版)，電子工業(yè)出版社，電子工業(yè)出版社，2011，ISBN:97871211315093.2 可擴展標記語言可擴展標記語言XML 4. XML工具工具 3.2.1 XM

60、L概述概述 （1）XML編輯工具編輯工具。專用的。專用的XML編輯器可以理解編輯器可以理解XML，將它們顯示為，將它們顯示為樹形結(jié)構(gòu)。常見的專用樹形結(jié)構(gòu)。常見的專用XML編輯器有編輯器有XMLwriter、XML Spy、XML Pro、Visual XML等。等。（2）XML解析工具解析工具。也稱解析器（。也稱解析器（Parser），它是），它是XML的語法分析程的語法分析程序。其主要功能是讀取序。其主要功能是讀取XML文檔并檢查其文檔結(jié)構(gòu)是否完整，是否有結(jié)文檔并檢查其文檔結(jié)構(gòu)是否完整，是否有結(jié)構(gòu)上的錯誤；對于結(jié)構(gòu)正確的文檔，讀出其內(nèi)容，交給后續(xù)程序去處理。構(gòu)上的錯誤；對于結(jié)構(gòu)正確的文檔，讀