Web程序設(shè)計(jì)(第三版)-第3章_第1頁(yè)
Web程序設(shè)計(jì)(第三版)-第3章_第2頁(yè)
Web程序設(shè)計(jì)(第三版)-第3章_第3頁(yè)
Web程序設(shè)計(jì)(第三版)-第3章_第4頁(yè)
Web程序設(shè)計(jì)(第三版)-第3章_第5頁(yè)
已閱讀5頁(yè)，還剩58頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

Web程序設(shè)計(jì)(第3版)“十一五”國(guó)家級(jí)規(guī)劃教材目錄第1章

WEB編程基礎(chǔ)知識(shí)

第2章WEB應(yīng)用程序開(kāi)發(fā)環(huán)境第3章HTML與XML第4章腳本語(yǔ)言第5章頁(yè)面設(shè)計(jì)第6章ASP程序設(shè)計(jì)第7章ASP.NET程序設(shè)計(jì)第8章WEB數(shù)據(jù)庫(kù)程序設(shè)計(jì)第9章綜合應(yīng)用實(shí)例

第3章

HTML與XML3.1超文本標(biāo)記語(yǔ)言HTML

3.2可擴(kuò)展標(biāo)記語(yǔ)言XML

3.1超文本標(biāo)記語(yǔ)言HTML

超文本標(biāo)記語(yǔ)言HTML（HypertextMarkupLanguage）是在萬(wàn)維網(wǎng)上建立超文本文件的語(yǔ)言，它是萬(wàn)維網(wǎng)的核心計(jì)算機(jī)語(yǔ)言。創(chuàng)建Web站點(diǎn)頁(yè)面時(shí)，可使用HTML語(yǔ)言向組成Web站點(diǎn)的各個(gè)Web頁(yè)面放置文本、圖形、圖像、動(dòng)畫(huà)、音頻、視頻信息等內(nèi)容，以及按鈕和超鏈接等可以進(jìn)行交互的內(nèi)容。HTML是一種文本標(biāo)記語(yǔ)言，而非編程語(yǔ)言。HTML文件是普通文本文件，與平臺(tái)無(wú)關(guān)，可用任何文本編輯器進(jìn)行編輯，文件擴(kuò)展名為.htm或.html。3.1超文本標(biāo)記語(yǔ)言HTML

3.1.1HTML文檔結(jié)構(gòu)

該網(wǎng)頁(yè)以表格作為頁(yè)面的總布局方式頁(yè)面設(shè)計(jì)中使用了常用的HTML標(biāo)記包括：表格、表單、文字顯示控制、加入圖片、超鏈接、水平線、換行、分段、設(shè)置頁(yè)面背景圖片等?！纠?-1】“《Web程序設(shè)計(jì)》課程網(wǎng)站”主頁(yè)面。3.1超文本標(biāo)記語(yǔ)言HTML

3.1.1HTML文檔結(jié)構(gòu)

HTML文檔的基本構(gòu)成：<html><head>文檔頭部分</head><body>文檔的主體部分</body></html>3.1超文本標(biāo)記語(yǔ)言HTML

3.1.2HTML基本標(biāo)記

基本的HTML標(biāo)記分為：1）頭部標(biāo)記2）體部標(biāo)記3.1超文本標(biāo)記語(yǔ)言HTML

3.1.2HTML基本標(biāo)記

1）頭部標(biāo)記<head>，</head>HTML文件頭部起始和結(jié)束標(biāo)記。<title>，</title>HTML文件的標(biāo)題，是顯示于瀏覽器標(biāo)題欄的字符串。<style>，</style>CSS樣式定義，詳見(jiàn)5.3節(jié)。<meta>

該標(biāo)記位于<head>與<title>標(biāo)記之間，提供用戶不可見(jiàn)的信息。其中，<meta>屬性通常用來(lái)為搜索引擎定義頁(yè)面主題以及頁(yè)面刷新等信息。

3.1超文本標(biāo)記語(yǔ)言HTML

3.1.2HTML基本標(biāo)記

2）體部標(biāo)記基本的體部標(biāo)記包括：Body文字顯示和段落控制標(biāo)記設(shè)置圖像和超鏈接列表和預(yù)定義格式標(biāo)記等3.1超文本標(biāo)記語(yǔ)言HTML

3.1.2HTML基本標(biāo)記

（1）<body>和</body>標(biāo)記表明HTML文件體部的開(kāi)始和結(jié)束，body標(biāo)記屬性及含義：屬

性

名取

值含

義默

認(rèn)

值bgcolor顏色值頁(yè)面背景顏色

#FFFFFFtext顏色值文字的顏色#000000link顏色值待鏈接的超鏈接對(duì)象的顏色alink顏色值鏈接中的超鏈接對(duì)象的顏色vlink顏色值已鏈接的超鏈接對(duì)象的顏色background圖像文件名頁(yè)面的背景圖像無(wú)topmargin整數(shù)頁(yè)面顯示區(qū)距窗口上邊框的距離，以像素點(diǎn)為單位0leftmargin整數(shù)頁(yè)面顯示區(qū)距窗口左邊框的距離，以像素點(diǎn)為單位03.1超文本標(biāo)記語(yǔ)言HTML

3.1.2HTML基本標(biāo)記

HTML中兩種顏色值的表示方法：①RGB值表示。用顏色的十六進(jìn)制RGB值表示，形如"#RRGGBB"。如"#ff0000"，表示紅色，"#0000ff"表示藍(lán)色。②英文單詞表示。如"red"表示紅色，"blue"表示藍(lán)色。3.1超文本標(biāo)記語(yǔ)言HTML

3.1.2HTML基本標(biāo)記

（2）文字顯示和段落控制標(biāo)記文字顯示屬性主要有字體、字號(hào)、顏色，段落控制顯示對(duì)象的分段。常用的文字顯示和段落控制標(biāo)記如下：標(biāo)

記

名含

義<font>,</font>以屬性face、size、color控制字體、字號(hào)、字顏色的顯示特性<I>,</I>斜體<B>,</B>粗體<U>,</U>加下劃線<sub>,</sub>下標(biāo)<sup>,</sup>上標(biāo)<big></big>大字體<small>,</small>小字體<h1>—<h6>標(biāo)題格式，數(shù)字越大，顯示的標(biāo)題字越小<p>,</p>分段標(biāo)記，屬性有align：left—左對(duì)齊；center—居中對(duì)齊；right—右對(duì)齊<div>,</div>塊容器標(biāo)記，其中的內(nèi)容是一個(gè)獨(dú)立段落<hr>分隔線，屬性有：width（線的寬度）

、color（線的顏色）<center>,</center>居中顯示3.1超文本標(biāo)記語(yǔ)言HTML

3.1.2HTML基本標(biāo)記

【例3-2】一個(gè)包含文字顯示和段落控制標(biāo)記的HTML文件示例。<html><head><title>文字顯示和段落控制</title></head><bodybackground="images/back057.gif"text="#ff2222"><center><h1>一級(jí)標(biāo)題</h1></center><hrwidth=90%color=green><fontface="黑體"size=7color="0000ff">這是黑體，大小為7號(hào)字，藍(lán)色</font><br><p>這是一個(gè)段落<br><I>這是斜體</I><B>這是粗體</B><U>這是下劃線字體</U><big>這是大字體</big><small>這是小字體</small>這是下標(biāo)字體<sub>1</sub>這是上標(biāo)字體<sup>2</sup><br><fontface="楷體"size=6color="cc8888"><I><B><U>這些標(biāo)記還可以混合使用</U></B></I></font></p><palign=center>這是另一個(gè)段落<br><B>    以下是轉(zhuǎn)義序列</B><br><小于號(hào)；>大于號(hào)；&與號(hào)；"雙引號(hào)；例如:a>b</p></body></html>3.1超文本標(biāo)記語(yǔ)言HTML

3.1.2HTML基本標(biāo)記

（3）圖像標(biāo)記

以下幾種圖像格式可以被瀏覽器解釋：GIF格式（.gif文件）、X位圖格式（.xbm文件）、JPEG格式（.jpg、.jpeg文件）和PNG格式（PortableNetworkGraphics）3.1超文本標(biāo)記語(yǔ)言HTML

3.1.2HTML基本標(biāo)記

（3）圖像標(biāo)記

<img>標(biāo)記的屬性包括：①src——指明圖像文件的地址。該屬性值必須指明。值可以是一個(gè)本地文件名或一個(gè)URL形式，如http:///images/logo.gif。②border——指明圖像邊框的粗細(xì)，值為整數(shù)。若為0，表示無(wú)邊框；值越大，邊框越粗。③width——圖像寬度，值為整數(shù)，單位為屏幕像素點(diǎn)數(shù)。若不指出該屬性值，則瀏覽器默認(rèn)按圖像的實(shí)際尺寸顯示。④height——圖像高度，值為整數(shù)，單位為屏幕像素點(diǎn)數(shù)。若不指出該屬性值，則瀏覽器默認(rèn)按圖像的實(shí)際尺寸顯示。⑤alt——若設(shè)置了該屬性值，則當(dāng)鼠標(biāo)移至該圖像區(qū)域時(shí)，將以一個(gè)小標(biāo)簽顯示該屬性值。3.1超文本標(biāo)記語(yǔ)言HTML

3.1.2HTML基本標(biāo)記

（4）超鏈接標(biāo)記

一個(gè)超鏈接可指向另一個(gè)Web頁(yè)，它由兩部分組成：一部分是顯示在本頁(yè)面中的可被觸發(fā)的超鏈接文本或圖像另一部分是用來(lái)描述當(dāng)超鏈接被觸發(fā)后要鏈接到的URL信息。超鏈接標(biāo)記的格式如下：<ahref="URL信息">超鏈接文本或圖像</a>3.1超文本標(biāo)記語(yǔ)言HTML

3.1.2HTML基本標(biāo)記

（4）超鏈接標(biāo)記

超鏈接標(biāo)記的href屬性的URL信息的構(gòu)成可分為如下三種情況：①目標(biāo)頁(yè)面位于另外的主機(jī)或采用非HTTP協(xié)議，此時(shí)采用絕對(duì)URL格式，即：

協(xié)議名://主機(jī)名[/目錄信息]②若目標(biāo)頁(yè)面位于本主機(jī)，可采用相對(duì)URL代替絕對(duì)URL。例如，目標(biāo)頁(yè)面的HTML文件與本HTML文件位于同一子目錄，名為des1.htm，則超鏈接標(biāo)記可簡(jiǎn)化為：<ahref="des1.htm">超鏈接文本</a>③通常超鏈接總是指向目標(biāo)HTML文件的頭部，但超鏈接的目標(biāo)也可以是某個(gè)文件的特定位置（稱為“錨點(diǎn)”，anchor）。此時(shí)，需用超鏈接標(biāo)記的NAME屬性來(lái)定義超鏈接的引用名，格式為：<aname="錨點(diǎn)名">文本或圖像等頁(yè)面元素</a>3.1超文本標(biāo)記語(yǔ)言HTML

3.1.2HTML基本標(biāo)記

（4）超鏈接標(biāo)記

超鏈接標(biāo)記的屬性target指明目標(biāo)頁(yè)面顯示的窗口。其含義如下：

target=_blank

目標(biāo)頁(yè)面顯示于一個(gè)新的瀏覽器窗口。

target=_top

通常在框架中的超鏈接才設(shè)置該值，表示目標(biāo)頁(yè)面顯示于整個(gè)瀏覽器窗口，而不是顯示在框架所在窗口中。

target=框架名目標(biāo)頁(yè)面顯示于指定框架所在的窗口。target的默認(rèn)值是本頁(yè)面所在的瀏覽器窗口。3.1超文本標(biāo)記語(yǔ)言HTML

3.1.2HTML基本標(biāo)記

（4）超鏈接標(biāo)記

【例3-3】三種URL應(yīng)用示例。<html><head><title>超鏈接URL</title></head><body>單擊<ahref="xp.htm"target=_blank><b>這里</b></a>可以見(jiàn)我的照片<br>單擊<ahref=""><b>這里</b></a>可以進(jìn)入網(wǎng)易<br>單擊<ahref="mailto:test@163.com"><b>這里</b></a>可以給我發(fā)信<br>單擊<ahref="example3.htm#aaa"><b>這里</b></a>可以轉(zhuǎn)到我的簡(jiǎn)歷<br><aname="aaa">我的簡(jiǎn)歷：</a></body></html>3.1超文本標(biāo)記語(yǔ)言HTML

3.1.2HTML基本標(biāo)記

（4）列表標(biāo)記和預(yù)定格式標(biāo)記

有三種類型的列表：①無(wú)序列表（unorderedlist）：<ul>列表項(xiàng)</ul>②有序列表（orderedlist）：<ol>列表項(xiàng)</ol>③定義列表（definitionlist）：<dl>列表項(xiàng)</dl>預(yù)定格式（preformatted）標(biāo)記：

可以使信息完全按照HTML文件中編排的格式原樣顯示于瀏覽器中，該標(biāo)記的格式為：<pre>預(yù)定格式的信息</pre>只要將信息按照所需要的格式編排好，放在<pre>、</pre>標(biāo)記對(duì)中，就不必?fù)?dān)心信息在瀏覽器中的顯示會(huì)出現(xiàn)偏差。

3.1超文本標(biāo)記語(yǔ)言HTML

3.1.2HTML基本標(biāo)記

【例3-4】三種列表標(biāo)記應(yīng)用示例。<html><head><title>課表</title></head><body><b>今天我要上以下的課</b><ul><!--無(wú)序列表--><li>局域網(wǎng)工程<li>操作系統(tǒng)<li>數(shù)據(jù)結(jié)構(gòu)</ul><b>今天我要上以下的課</b><ol><!--有序列表--><li>局域網(wǎng)工程<li>操作系統(tǒng)<li>數(shù)據(jù)結(jié)構(gòu)</ol><dl><!--定義列表--><dt><b>局域網(wǎng)</b><!--定義標(biāo)題--><dd>局域網(wǎng)是指將小范圍內(nèi)的數(shù)據(jù)設(shè)備經(jīng)過(guò)通信系統(tǒng)連接起來(lái)的計(jì)算機(jī)網(wǎng)絡(luò)</dl></body></html>

3.1超文本標(biāo)記語(yǔ)言HTML

3.1.3表格（Table）

表格是最常用的頁(yè)面元素，在頁(yè)面中用表格來(lái)表示數(shù)據(jù)直觀又清晰，而且HTML表格的使用非常靈活，許多較復(fù)雜的頁(yè)面布局也可利用表格來(lái)完成。在Internet上瀏覽的許多頁(yè)面都大量使用了表格。在HTML中，表格是由一個(gè)表格名稱（標(biāo)題）再加上一行或多行表格內(nèi)容所構(gòu)成的塊狀結(jié)構(gòu)。3.1超文本標(biāo)記語(yǔ)言HTML

3.1.3表格（Table）

1.表格定義<table>[<caption>標(biāo)題內(nèi)容</caption>]<tr><td>表格內(nèi)容</td>{<td>表格內(nèi)容</td>}</tr>……</table><table>和</table>標(biāo)記對(duì)界定表格結(jié)構(gòu)的起始和結(jié)束；<caption>、</caption>標(biāo)志是可選項(xiàng)，該標(biāo)記中的內(nèi)容是表格的標(biāo)題；<tr>、</tr>界定一個(gè)表格行的開(kāi)始和結(jié)束；一個(gè)表格行可以包含多個(gè)表格項(xiàng)，每個(gè)表格項(xiàng)的內(nèi)容和顯示特性由標(biāo)記對(duì)<td>、</td>來(lái)定義。3.1超文本標(biāo)記語(yǔ)言HTML

3.1.3表格（Table）

2.表格屬性

標(biāo)記<table>、<tr>和<td>的屬性用來(lái)定義表格的顯示特性，其中<table>的屬性描述整個(gè)表格的顯示特性：屬

性

名取

值含

義默

認(rèn)

值border整數(shù)表格邊框粗細(xì)，值為0，表格沒(méi)有邊框；值越大，表格邊框越粗

0width百分比表格寬度，以相對(duì)于充滿窗口的百分比計(jì)（如60%）100%整數(shù)表格寬度，以屏幕像素點(diǎn)計(jì)cellpadding整數(shù)每個(gè)表項(xiàng)內(nèi)容與表格邊框之間的距離，以像素點(diǎn)為單位0cellspacing整數(shù)表格邊框之間的距離，以像素點(diǎn)為單位2bordercolor顏色值表格邊框的顏色#000000background圖像文件名表格的背景圖無(wú)alignleft|center|right表格的位置left3.1超文本標(biāo)記語(yǔ)言HTML

3.1.3表格（Table）

2.表格屬性

行控制標(biāo)記<tr>的屬性定義該行的顯示特性

：屬

性

名取

值含

義默

認(rèn)

值alignleft|center|right本行各表格項(xiàng)的橫向排列方式left（左對(duì)齊）bgcolor顏色值本行各表格項(xiàng)的背景色#000000valigntop|middle|bottom本行各表格項(xiàng)的縱向排列方式middlewidth百分比值

|整數(shù)本行寬度（受table的width屬性值制約）height整數(shù)本行高度，以像素點(diǎn)為單位3.1超文本標(biāo)記語(yǔ)言HTML

3.1.3表格（Table）

2.表格屬性

表格項(xiàng)控制標(biāo)記<td>的屬性定義該項(xiàng)的顯示特性

：屬

性

名取

值含

義默

認(rèn)

值alignleft|center|right本表格項(xiàng)的橫向排列方式left（左對(duì)齊）bgcolor顏色值本表格項(xiàng)的背景色#000000valigntop|middle|bottom本表格項(xiàng)的縱向排列方式middlewidth百分比值

|整數(shù)本表格項(xiàng)寬度（受table和tr的width屬性值制約）height整數(shù)本表格項(xiàng)高度，以像素點(diǎn)為單位（受tr的height屬性值制約）background圖像文件名本表格項(xiàng)的背景圖像無(wú)colspan整數(shù)按列橫向結(jié)合。如該值為2，表示本表格項(xiàng)在寬度上占用兩列1rowspan整數(shù)按行縱向結(jié)合。如該值為2，表示本表格項(xiàng)在高度上占用兩行13.1超文本標(biāo)記語(yǔ)言HTML

3.1.3表格（Table）

【例3-5】一個(gè)簡(jiǎn)單表格示例。

<tableborder=1cellspacing=2cellpadding=4><caption>物資列表</caption><tr><td>商品類別</td><td>數(shù)量</td></tr><tr><td>日用百貨</td><td>10</td></tr><tr><td>電器</td><td>20</td></tr><tr><td>轎車</td><td>5</td></tr></table>3.1超文本標(biāo)記語(yǔ)言HTML

3.1.3表格（Table）

【例3-6】一個(gè)較復(fù)雜的表格示例。其中每行列數(shù)及每列行數(shù)都不同利用td標(biāo)記的colspan和rowspan屬性可以對(duì)表格的單元格進(jìn)行靈活的控制。3.1超文本標(biāo)記語(yǔ)言HTML

3.1.4表單（Form）

表單提供圖形用戶界面的基本元素，包括按鈕、文本框、單選鈕、復(fù)選框等，是HTML實(shí)現(xiàn)交互功能的主要接口，用戶通過(guò)表單向服務(wù)器提交數(shù)據(jù)。表單的使用包括兩部分：一部分是用戶界面，提供用戶輸入數(shù)據(jù)的元件；另一部分是處理程序，可以是客戶端程序，在瀏覽器中執(zhí)行；也可以是服務(wù)器處理程序，處理用戶提交的數(shù)據(jù)，返回結(jié)果。

3.1超文本標(biāo)記語(yǔ)言HTML

3.1.4表單（Form）

1.表單定義

表單定義的語(yǔ)法如下：<formmethod="get|post"action="處理程序名">

[<inputtype=輸入域種類name=輸入域名>]

[teaxtarea定義]

[select定義]</form>3.1超文本標(biāo)記語(yǔ)言HTML

3.1.4表單（Form）

1.表單定義

form標(biāo)記的屬性含義如下：

method——取值為post或get。二者的區(qū)別是：get方法將在瀏覽器的URL欄中顯示所傳遞變量的值，而post方法則不顯示；在服務(wù)器端的數(shù)據(jù)提取方式也不同。

action——指出用戶所提交的數(shù)據(jù)將由哪個(gè)服務(wù)器的哪個(gè)程序處理。可處理用戶提交的數(shù)據(jù)的服務(wù)器程序種類較多，如ASP腳本程序、ASPX程序、PHP程序等。3.1超文本標(biāo)記語(yǔ)言HTML

3.1.4表單（Form）

2.表單的輸入域

表單的輸入域有如下三類：以標(biāo)記<input>定義的多種輸入域，包括text、radio、checkbox、password、hidden、button、submit、reset和file等。

以標(biāo)記<textarea>定義的文本域。

以標(biāo)記<select>和<option>定義的下拉列表框。

3.1超文本標(biāo)記語(yǔ)言HTML

3.1.4表單（Form）

【例3-7】表單輸入域的定義方法及使用示例。

<html><head><title>表單使用</title></head><body><b>請(qǐng)選擇您學(xué)習(xí)的方式</b><br><formmethod=getaction="/cgi-bin/run1"><inputtype=radiochecked>全日制在讀<inputtype=radio>走讀<inputtype=radio>函授<br><br><b>請(qǐng)選擇您所要學(xué)習(xí)的課程</b><br><inputtype=checkboxvalue="yes"name="局域網(wǎng)工程"checked>局域網(wǎng)工程<br><inputtype=checkboxvalue="yes"name="操作系統(tǒng)">操作系統(tǒng)<br><inputtype=checkboxvalue="yes"name="數(shù)據(jù)結(jié)構(gòu)">數(shù)據(jù)結(jié)構(gòu)<br><br><b>請(qǐng)輸入您的要求</b><br><textareaname="comment"rows=4cols=50></textarea><br><inputtype=submitname="ok"value="提交"><inputtype=resetname="re-input"value="重選"></form></body></html>

3.1超文本標(biāo)記語(yǔ)言HTML

3.1.4表單（Form）

常見(jiàn)表單輸入域輸入域名稱說(shuō)明text（文本框）

可輸入一行文字。舉例：<inputtype=textname="xm"size=10value="">

radio（單選鈕）

當(dāng)有多個(gè)選項(xiàng)時(shí)，只能選其中一項(xiàng)。舉例：走<inputtype=radioname="Rad"value="v1"checked>留<inputtype=radioname="Rad"value="v2">checkbox（復(fù)選框）

當(dāng)有多個(gè)選項(xiàng)時(shí)，可以選其中多項(xiàng)。舉例：簽字筆<inputtype=checkboxname="ch1"checked>鋼筆<inputtype=checkboxname="ch2">圓珠筆<inputtype=checkboxname="ch3">submit（提交按鈕）

將數(shù)據(jù)傳遞給服務(wù)器。舉例：<inputtype=submitname="ok"value="提交">password（密碼輸入框）

用戶輸入的字符以“*”顯示。舉例：輸入密碼：<inputtype=passwordsize=12>3.1超文本標(biāo)記語(yǔ)言HTML

3.1.4表單（Form）

常見(jiàn)表單輸入域（續(xù)）輸入域名稱說(shuō)明reset（重置按鈕）

將用戶輸入的數(shù)據(jù)清除。舉例：<inputtype=resetname="re-input"value="重選">

hidden（隱藏域）在瀏覽器中不顯示，但可通過(guò)程序取值或改變其值。主要用于瀏覽器向服務(wù)器傳遞數(shù)據(jù)而不想讓瀏覽器用戶知道的情形。例如：<inputtype=hiddenname=hiddatavalue="HidValue">button（按鈕）普通按鈕，按下后的操作需由程序完成。舉例：<inputtype=buttonvalue="去我的主頁(yè)">textarea（文本域）可輸入多行文字。舉例：<b>請(qǐng)輸入您的要求</b><br><textareaname="comment"rows=4cols=20></textarea>select（下拉列表）在多個(gè)可選項(xiàng)中選擇file（文件域）一般用于選擇文件。舉例：<inputtype="file"name="F1"size=20>3.1超文本標(biāo)記語(yǔ)言HTML

3.1.4表單（Form）

select輸入域

當(dāng)提供給用戶的選擇項(xiàng)目較多時(shí)，為節(jié)省顯示空間，可使用表單的下拉列表輸入域。定義下拉列表框使用<select>和<option>兩個(gè)標(biāo)記，其語(yǔ)法如下：<selectname=下拉列表框名multiple><optionvalue=設(shè)定值>表項(xiàng)內(nèi)容</option>……</select>屬性multiple是可選項(xiàng)，若定義該屬性，則下拉列表中的多項(xiàng)都可被選中。例如，下面的代碼定義一個(gè)含有三個(gè)選項(xiàng)的下拉列表：<selectname="水果"><optionvalue="蘋(píng)果">蘋(píng)果</option><optionvalue="梨子"selected>梨子</option><optionvalue="香蕉">香蕉</option></select>3.1超文本標(biāo)記語(yǔ)言HTML

3.1.4表單（Form）

file輸入域

當(dāng)用戶需要上傳文件時(shí)，可使用file輸入域。文件域由一個(gè)文本框和一個(gè)“瀏覽”按鈕組成，用戶既可以在文本框中輸入文件的路徑和文件名，也可以通過(guò)單擊“瀏覽”按鈕從磁盤(pán)上查找和選擇所需文件。創(chuàng)建文件域方法如下：<inputtype="file"屬性="值"…>屬性主要包括name、size等，name指出文件域名稱，size指出文件名輸入框的寬度。

3.1超文本標(biāo)記語(yǔ)言HTML

3.1.5框架（Frame）

框架又常稱為幀，它也是HTML常用的頁(yè)面元素。利用框架可以將瀏覽器顯示窗口分割成多個(gè)相互獨(dú)立的區(qū)域，每個(gè)區(qū)域可以顯示獨(dú)立的HTML頁(yè)面。3.1超文本標(biāo)記語(yǔ)言HTML

3.1.5框架（Frame）

【例3-9】一個(gè)應(yīng)用框架的示例。其中包含三個(gè)HTML文件：

main.htm稱為主文件，是包含<frame>標(biāo)記的文件，它定義瀏覽器窗口被分割的方式，本例將窗口分為左、右兩個(gè)子窗口，分別占窗口寬度的15%和85%；文件frame1.htm、frame2.htm分別是瀏覽器被分割的兩個(gè)區(qū)域顯示的頁(yè)面文件。1.框架簡(jiǎn)例3.1超文本標(biāo)記語(yǔ)言HTML

3.1.5框架（Frame）

2.框架定義首先需確定如何分割窗口，然后建立描述窗口分割的主文件，再為每個(gè)框架建立相應(yīng)的HTML文件。主文件的定義方法是：<html><head>[頭部標(biāo)記](méi)</head><frameset>{<frameset>...</frameset>}<frame> <frame>...</frameset>[<noframes>字符串</noframes>]</html>其中，標(biāo)記<frameset>定義窗口分割的方式（橫向或縱向）和大小，<frameset>可以嵌套，內(nèi)層的<frameset>表示對(duì)已分割的窗口再進(jìn)行分割的方式和大小。<frame>標(biāo)記指明框架所對(duì)應(yīng)的HTML文件。<frame>標(biāo)記的個(gè)數(shù)應(yīng)與其所屬的<frameset>標(biāo)記分割的框架數(shù)目相同，與窗口的對(duì)應(yīng)關(guān)系是按排列順序逐個(gè)對(duì)應(yīng)。<noframes>標(biāo)記定義了若瀏覽器不支持框架時(shí)所顯示的內(nèi)容。

3.1超文本標(biāo)記語(yǔ)言HTML

3.1.5框架（Frame）

屬

性

名取

值含

義默

認(rèn)

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

百分比|整數(shù)

將窗口左、右（縱向）分割，值的格式和含義與“rows”屬性類似無(wú)frameborder

yes|no

框架邊框是否顯示yesbordercolor

顏色值框架邊框顏色Gray(灰)<framset>標(biāo)記的屬性

3.1超文本標(biāo)記語(yǔ)言HTML

3.1.5框架（Frame）

<frame>標(biāo)記的屬性

屬

性

名取

值含

義默

認(rèn)

值srcHTML文件名框架對(duì)應(yīng)的HTML文件無(wú)name字符串框架的名字，可在程序和<a>標(biāo)記的target屬性中引用無(wú)noresize無(wú)不允許用戶改變框架窗口大小無(wú)scrollingyes|no|auto框架邊框是否出現(xiàn)滾動(dòng)條automarginwidth整數(shù)框架左、右邊緣像素點(diǎn)數(shù)0marginheight整數(shù)框架上、下邊緣像素點(diǎn)數(shù)03.1超文本標(biāo)記語(yǔ)言HTML

3.1.5框架（Frame）

【例3-10】利用框架將窗口分成三個(gè)子窗口，分別命名為win001、win002和win003，子窗口win001對(duì)應(yīng)的HTML中設(shè)置了兩個(gè)超鏈接，用戶單擊這兩個(gè)超鏈接后目標(biāo)URL將在子窗口win002中顯示。本例中，在上左子窗口對(duì)應(yīng)的文件frame1.htm中設(shè)置了兩個(gè)超鏈接，它們被觸發(fā)后，相應(yīng)的目標(biāo)頁(yè)面將顯示于上右子窗口（名為“win002”）中，這是通過(guò)在文件frame1.htm的標(biāo)記<a>中設(shè)置target屬性來(lái)指定的。這種方法在頁(yè)面設(shè)計(jì)中被廣泛使用，它可以保持超鏈接不被目標(biāo)文件覆蓋。3.2可擴(kuò)展標(biāo)記語(yǔ)言XML

可擴(kuò)展標(biāo)記語(yǔ)言XML（eXtensibleMarkupLanguage）是為了克服HTML缺乏靈活性和伸縮性的缺點(diǎn)以及SGML過(guò)于復(fù)雜、不利于軟件應(yīng)用的缺點(diǎn)而發(fā)展起來(lái)的一種元標(biāo)記語(yǔ)言。

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

XML是一種數(shù)據(jù)存儲(chǔ)語(yǔ)言，它使用一系列簡(jiǎn)單標(biāo)記描述數(shù)據(jù)。XML同時(shí)也是一組規(guī)范，用戶都遵守這組規(guī)范進(jìn)行開(kāi)發(fā)，這樣，不同計(jì)算機(jī)系統(tǒng)之間就可以相互交流信息。XML繼承了SGML和HTML的功能，是一種用于定義標(biāo)記的語(yǔ)言，又稱為“元語(yǔ)言”。創(chuàng)建一個(gè)XML文檔時(shí)，用戶需根據(jù)描述的數(shù)據(jù)自己來(lái)定義各種標(biāo)記。3.2.1XML概述

3.2可擴(kuò)展標(biāo)記語(yǔ)言XML

1.XML與HTML的比較3.2.1XML概述

【例3-11】XML與HTML的比較示例。<BODY>Herewehavesometext<H1>Thisisaheading</H1>Thisbitisnormaltext<B>Thisissomeboldtext</B>Andfinallysomemorenormaltext</BODY>3.2可擴(kuò)展標(biāo)記語(yǔ)言XML

XML與HTML的比較3.2.1XML概述

比

較

內(nèi)

容HTMLXML可擴(kuò)展性不具有擴(kuò)展性是元標(biāo)記語(yǔ)言，可用于定義新的標(biāo)記語(yǔ)言側(cè)重點(diǎn)側(cè)重于信息的表現(xiàn)側(cè)重于結(jié)構(gòu)化地描述信息語(yǔ)法要求較寬松，不要求標(biāo)記嵌套、配對(duì)等

語(yǔ)法嚴(yán)謹(jǐn)，嚴(yán)格要求標(biāo)記嵌套、配對(duì)、遵循XML數(shù)據(jù)結(jié)構(gòu)（DTD樹(shù)形結(jié)構(gòu)、XMLSchema）可讀性與可維護(hù)性難于閱讀與維護(hù)結(jié)構(gòu)清晰，便于閱讀與維護(hù)數(shù)據(jù)和顯示關(guān)系內(nèi)容描述與顯示方式一體化內(nèi)容描述與顯示方式分離大小寫(xiě)敏感不區(qū)分大小寫(xiě)區(qū)分大小寫(xiě)3.2可擴(kuò)展標(biāo)記語(yǔ)言XML

2.XML的特性

3.2.1XML概述

（1）實(shí)現(xiàn)應(yīng)用程序之間的數(shù)據(jù)交換。（2）數(shù)據(jù)與顯示分離。（3）數(shù)據(jù)分布式處理。

3.2可擴(kuò)展標(biāo)記語(yǔ)言XML

3.XML文檔處理流程

3.2.1XML概述

處理過(guò)程分為三個(gè)階段：①編輯。使用通用的字處理軟件或?qū)Ｓ玫腦ML編輯工具生成XML文檔。②解析。對(duì)XML文檔進(jìn)行語(yǔ)法分析、合法性檢查。讀取其中的內(nèi)容，通常以樹(shù)形結(jié)構(gòu)交給后續(xù)的應(yīng)用程序進(jìn)行處理，后續(xù)程序通常為瀏覽器或其他應(yīng)用程序。③瀏覽。將由XML解析器傳來(lái)的XML樹(shù)形結(jié)構(gòu)以用戶需要的格式顯示或處理。3.2可擴(kuò)展標(biāo)記語(yǔ)言XML

4.XML工具

3.2.1XML概述

（1）XML編輯工具。專用的XML編輯器可以理解XML，將它們顯示為樹(shù)形結(jié)構(gòu)。常見(jiàn)的專用XML編輯器有XMLwriter、XMLSpy、XMLPro、VisualXML等。（2）XML解析工具。也稱解析器（Parser），它是XML的語(yǔ)法分析程序。其主要功能是讀取XML文檔并檢查其文檔結(jié)構(gòu)是否完整，是否有結(jié)構(gòu)上的錯(cuò)誤；對(duì)于結(jié)構(gòu)正確的文檔，讀出其內(nèi)容，交給后續(xù)程序去處理。常見(jiàn)的XML解析器有ApacheXeces、MSXML等。（3）XML瀏覽工具。XML解析器會(huì)將XML文檔結(jié)構(gòu)和內(nèi)容傳輸給用戶端應(yīng)用程序。大多數(shù)情況下，用戶端應(yīng)用程序可能是瀏覽器或其他應(yīng)用程序（如將數(shù)據(jù)轉(zhuǎn)換后存入數(shù)據(jù)庫(kù)）。如果是瀏覽器，數(shù)據(jù)就會(huì)顯示給用戶。當(dāng)前支持XML的瀏覽器有IE5.0及以上版本、Mozilla等。

3.2可擴(kuò)展標(biāo)記語(yǔ)言XML

1.XML文檔的組成

3.2.2XML文檔的編寫(xiě)

XML定義了如何標(biāo)記文檔的一套規(guī)則?？筛鶕?jù)需要給標(biāo)記取任何名字，例如<BOOK>、<TITLE>、<AUTHOR>等。標(biāo)記是成對(duì)出現(xiàn)的。處于前面的是開(kāi)標(biāo)記，而位于后面的是閉標(biāo)記。與HTML不同的是：在XML中，閉標(biāo)記是不可省略的。另外，標(biāo)記是區(qū)分大小寫(xiě)的。標(biāo)記和開(kāi)/閉標(biāo)記之間的文字結(jié)合在一起構(gòu)成元素。所有元素都可以有自己的屬性，屬性采用“屬性/值”對(duì)的方式寫(xiě)在標(biāo)記中。

3.2可擴(kuò)展標(biāo)記語(yǔ)言XML

1.XML文檔的組成

3.2.2XML文檔的編寫(xiě)

一個(gè)XML文檔主要由兩部分組成：序言和文檔元素。序言：聲明版本號(hào)、處理指令等。如：<?xmlversion='1.0'standalone='yes'?><!--FileName:Example.xml--><?xml-stylesheettype=“text/css”href=“Example.css”?>

XML文檔元素是以樹(shù)形分層結(jié)構(gòu)排列的，元素可以嵌套在其他元素中。文檔必須只有一個(gè)頂層元素，稱為文檔元素（也稱根元素），類似于HTML頁(yè)中的BODY元素，其他所有元素都嵌套在其中。

在XML文檔中，元素指出了文檔的邏輯結(jié)構(gòu)，并且包含了文檔的信息內(nèi)容。一個(gè)典型的元素有起始標(biāo)記、元素內(nèi)容和結(jié)束標(biāo)記。元素內(nèi)容可以是字符、數(shù)據(jù)、其他（嵌套的）元素或兩者的組合。3.2可擴(kuò)展標(biāo)記語(yǔ)言XML

2.創(chuàng)建XML文檔的基本規(guī)則

3.2.2XML文檔的編寫(xiě)

（1）文檔必須有一個(gè)頂層元素（文檔元素或根元素），所有其他元素必須嵌入到其中。（2）元素必須被正確地嵌套。也就是說(shuō)，如果一個(gè)元素在另一個(gè)元素中開(kāi)始，那么它必須在同一個(gè)元素中結(jié)束。（3）每一個(gè)元素必須同時(shí)擁有起始標(biāo)記和結(jié)束標(biāo)記。與HTML不同，XML不允許忽略結(jié)束標(biāo)記，即使瀏覽器能夠推測(cè)出元素在何處結(jié)束時(shí)也是如此。（4）起始標(biāo)記中的元素類型名必須與相應(yīng)結(jié)束標(biāo)記中的名稱完全匹配。（5）元素類型名是區(qū)分大小寫(xiě)的。

3.2可擴(kuò)展標(biāo)記語(yǔ)言XML

3.元素內(nèi)容的類型

3.2.2XML文檔的編寫(xiě)

元素內(nèi)容是起始標(biāo)記和結(jié)束標(biāo)記之間的文本。其中可以包括嵌套元素和字符數(shù)據(jù)兩種類型。當(dāng)給元素添加字符數(shù)據(jù)時(shí)，用戶無(wú)法插入左尖括號(hào)（<）、&符號(hào)或字符串“]]>”作為字符數(shù)據(jù)的一部分，因?yàn)閄ML解析器會(huì)把“<”解釋為嵌套元素的起始，把“&”解釋為一個(gè)實(shí)體引用或字符引用的開(kāi)始，把“]]>”解釋為CDATA節(jié)的結(jié)束。如果要想把<和&作為字符數(shù)據(jù)的一部分，可以使用CDATA節(jié)。還可以通過(guò)字符引用插入任意字符，或通過(guò)使用預(yù)定義的通用實(shí)體引用來(lái)插入某個(gè)字符（如<或&）。

3.2可擴(kuò)展標(biāo)記語(yǔ)言XML

4.給元素添加屬性

3.2.2XML文檔的編寫(xiě)

在一個(gè)元素的起始標(biāo)記中，可以包含一個(gè)或多個(gè)屬性。屬性由屬性名、等號(hào)及屬性值組成。屬性名可以由用戶任意定義。例如，下面的PRICE元素包含一個(gè)名為T(mén)ype的屬性，它被賦值為retail。<PRICEType="retail">$12.50</PRICE>給元素添加屬性是為元素提供信息的一種方法。當(dāng)使用CSS顯示XML文檔時(shí)，瀏覽器不會(huì)顯示屬性以及它們的值。但是，若使用數(shù)據(jù)綁定、HTML頁(yè)中的腳本或者XSL樣式表顯示XML文檔時(shí)，則可以訪問(wèn)屬性及其值。

3.2可擴(kuò)展標(biāo)記語(yǔ)言XML

5.處理指令的使用

3.2.2XML文檔的編寫(xiě)

處理指令的一般形式為：

<?targetinstruction?>其中，target是指令所指向的應(yīng)用名稱。名稱必須以字母或下劃線開(kāi)頭，后面跟若干個(gè)數(shù)字、字母、句點(diǎn)、連字符或下劃線?！皒ml”是保留名稱，它是處理指令的一種類型。例如：<?xmlversion='1.0'standalone='yes'?>在XML文檔中使用的處理指令取決于讀取文檔的處理器。

3.2可擴(kuò)展標(biāo)記語(yǔ)言XML

6.CDATA節(jié)的使用

3.2.2XML文檔的編寫(xiě)

CDATA節(jié)以字符“<![CDATA[”開(kāi)始，并以字符“]]>”結(jié)束。CDATA節(jié)中的所有字符都會(huì)被當(dāng)作元素中字符數(shù)據(jù)的常量部分，而不是XML標(biāo)記。在任何出現(xiàn)字符數(shù)據(jù)的地方都可以插入CDATA節(jié)。

例如

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論