第1章Web基礎(chǔ)知識(shí)_第1頁
第1章Web基礎(chǔ)知識(shí)_第2頁
第1章Web基礎(chǔ)知識(shí)_第3頁
第1章Web基礎(chǔ)知識(shí)_第4頁
第1章Web基礎(chǔ)知識(shí)_第5頁
已閱讀5頁，還剩70頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

第1章

Web基礎(chǔ)知識(shí)1.1TCP/IP協(xié)議1.2Web概述1.3超文本標(biāo)記語言HTML1.4可擴(kuò)展標(biāo)記語言XML1.5XHTML標(biāo)記語言1.6Web服務(wù)器1.1TCP/IP協(xié)議1.1.1TCP/IP協(xié)議模型TCP/IP代表一個(gè)協(xié)議集，其中最重要的是TCP協(xié)議和IP協(xié)議。TCP/IP協(xié)議模型如圖1.1所示，包含四個(gè)層次：應(yīng)用層、傳輸層、網(wǎng)絡(luò)層和物理接口層。應(yīng)用層傳輸層網(wǎng)絡(luò)層物理接口層1.1.2IP地址和DNS域名1.IP地址IP地址是識(shí)別Internet網(wǎng)絡(luò)中的主機(jī)及網(wǎng)絡(luò)設(shè)備的唯一標(biāo)識(shí)。每個(gè)IP地址通常分為網(wǎng)絡(luò)地址和主機(jī)地址兩部分，長度為4個(gè)字節(jié)，由4個(gè)用“.”分隔的十進(jìn)制數(shù)組成，每個(gè)數(shù)不大于255，如53。2.DNS域名IP地址是連網(wǎng)計(jì)算機(jī)的地址標(biāo)識(shí)，但對(duì)大多數(shù)人來說記住很多計(jì)算機(jī)的IP地址并不是很容易的事。所以TCP/IP協(xié)議中提供了域名服務(wù)系統(tǒng)(DNS)，允許為主機(jī)分配字符名稱，即域名。在網(wǎng)絡(luò)通信時(shí)由DNS自動(dòng)實(shí)現(xiàn)域名與IP地址的轉(zhuǎn)換。1.2Web概述Web是一個(gè)分布式的超媒體(hypermedia)信息系統(tǒng)，它將大量的信息分布于整個(gè)因特網(wǎng)上。Web的任務(wù)就是向人們提供多媒體網(wǎng)絡(luò)信息服務(wù)。從技術(shù)層面看，Web技術(shù)核心有三點(diǎn)：(1)超文本傳輸(HTTP)協(xié)議，實(shí)現(xiàn)萬維網(wǎng)的信息傳輸；(2)統(tǒng)一資源定位符(URL)，實(shí)現(xiàn)互連網(wǎng)信息的定位統(tǒng)一標(biāo)識(shí)；(3)超文本標(biāo)記語言(HTML)，實(shí)現(xiàn)信息的表示欲存儲(chǔ)。1.2.1HTTP協(xié)議1.Web的客戶機(jī)/服務(wù)器模型Web客戶機(jī)和Web服務(wù)器的信息傳遞使用HTTP協(xié)議。該模型如圖1.2所示。HTTP定義的信息交互處理由以下四步組成：(1)瀏覽器與Web服務(wù)器建立TCP連接；(2)瀏覽器向Web服務(wù)器提出請(qǐng)求；(3)如果請(qǐng)求被接受，則服務(wù)器送回響應(yīng)，在響應(yīng)中包括狀態(tài)碼和所需的文件；(4)瀏覽器和Web服務(wù)器斷開連接。1.2.1HTTP協(xié)議2.超文本和超媒體在瀏覽器主窗口中顯示出的Web文檔稱為Web頁面(page)，它是一種超媒體(Hypermedia)信息。超媒體信息的基礎(chǔ)是超文本(Hypertext)信息，超文本指的是一種電子文檔，其中的文字包含有可以鏈接到其他段落或文檔的超文本鏈接，即超鏈接(Hyperlink)，利用超鏈接可以找到連接在因特網(wǎng)上的任何超文本系統(tǒng)，而超鏈接可延續(xù)，這些超文本系統(tǒng)分布于因特網(wǎng)上的眾多主機(jī)上，形成龐大的分布式信息系統(tǒng)。1.2.2統(tǒng)一資源定位符URLURL通過定義資源位置的抽象標(biāo)識(shí)來定位網(wǎng)絡(luò)資源，格式如下：<信息訪問方式>://<主機(jī)>:<端口號(hào)>/<文件路徑>其中，<信息訪問方式>是訪問信息采用的TCP/IP應(yīng)用協(xié)議，最常用的有3種，即http(超文本傳輸服務(wù))、ftp(文件傳輸服務(wù))和news(網(wǎng)絡(luò)新聞服務(wù))。<主機(jī)>是網(wǎng)絡(luò)主機(jī)的域名或IP地址，它指出信息存放的主機(jī)。<端口號(hào)>是信息服務(wù)采用的軟件端口。<文件路徑>是所訪問信息的存儲(chǔ)路徑(通常為虛擬路徑而非存儲(chǔ)文件的實(shí)際路徑)。1.3超文本標(biāo)記語言HTML先看一個(gè)Web頁面：“學(xué)生成績管理系統(tǒng)”主頁面，如圖1.3所示。1.3.1HTML文檔的基本構(gòu)成HTML文檔的基本結(jié)構(gòu)如下：1.3.2HTML基本標(biāo)記1.文檔頭標(biāo)記(1)HTML標(biāo)記<Html>…</Html>(2)首部標(biāo)記<Head>…</Head>(3)標(biāo)題欄標(biāo)記<Title>…</Title>(4)描述標(biāo)記<Meta屬性=值…>(5)正文標(biāo)記<Body></Body>1.3.2HTML基本標(biāo)記例如：<BodyBackground="images/back05.gif"Text="#ff0000"Link="yellow"ALink="#00ff00">系統(tǒng)許多標(biāo)記都要用到顏色屬性，顏色屬性的值有3種表示方法：(1)使用顏色名稱來表示。(2)使用十六進(jìn)制格式數(shù)值#RRGGBB來表示(3)RGB(r,g,b)函數(shù)表示。1.3.2HTML基本標(biāo)記表1.1列出了16種標(biāo)準(zhǔn)顏色。顏色名稱十六進(jìn)制值顏色名稱十六進(jìn)制值淡藍(lán)aqua(cyan)#00FFFF海藍(lán)navy#000080黑black#000000橄欖色oliver#080000藍(lán)blue#0000FF紫purple#800080紫紅fuchsia(magenta)#FF00FF紅red#FF0000灰gray#808080銀色silver#C0綠green#008000淡青teal#008080橙lime#00FF00白white#FFFFF褐紅maroon#800000黃yellow#FFF001.3.2HTML基本標(biāo)記2.設(shè)置文本格式(1)分段標(biāo)記 <P屬性=值…></P>(2)換行標(biāo)記<BR>(3)標(biāo)題標(biāo)記 <H1屬性=值…>…</H1> <H2屬性=值…>…</H2> <H3屬性=值…>…</H3> <H4屬性=值…>…</H4> <H5屬性=值…>…</H5> <H6屬性=值…>…</H6>(4)對(duì)中標(biāo)記 <Center>…</Center>1.3.2HTML基本標(biāo)記(5)塊標(biāo)記 <Div屬性=值…>…</Div>(6)水平線標(biāo)記 <Hr屬性=值…>(7)字體標(biāo)記 <Font屬性=值…>…</Font>(8)字體標(biāo)記 <B>…</B>粗體

<I>…</I>斜體 <Big>…</Big>大字體

<Small>…</Small>小字體 <TT>…</TT>固定寬度字體(9)樣式標(biāo)記 <Sup>…</Sup>上標(biāo)

<Sub>…</Sub>下標(biāo) <U>…</U>下劃線

<Strike>…</Strike>刪除線 <S>…</S>刪除線(10)原樣顯示標(biāo)記 <Pre>…</Pre>1.3.2HTML基本標(biāo)記表1.2列出了常用特殊符號(hào)的實(shí)體名稱或數(shù)字表示。字符說明字符實(shí)體名數(shù)字表示字符說明字符實(shí)體名數(shù)字表示無斷行空格

 ；￥元符號(hào)¥¥￠美分符號(hào)¢¢；§節(jié)符號(hào)§§￡英磅符號(hào)££；?版權(quán)符號(hào)©©?注冊(cè)符號(hào)®®；&“and”符號(hào)&&°度°°；<小于符號(hào)<<2平方符號(hào)²²；>大于符號(hào)>>3立方符號(hào)³³；€歐元符號(hào)€𔚹.3.2HTML基本標(biāo)記【例1.1】設(shè)計(jì)如圖1.4所示的具有不同文字顯示格式和段落控制的頁面，相應(yīng)的HTML文件中包含了文字顯示和段落控制標(biāo)記。1.3.2HTML基本標(biāo)記源代碼如下(Ex1-1.htm)：

<Html><Head><Title>文字顯示和段落控制</Title></Head><BodyBackground="image/fallb.jpg"Text="#000000"><Center><H1>一級(jí)標(biāo)題</H1></Center><Hrwidth=90%color=Blue><FontFace="黑體"Size=7Color=Red>這是黑體，大小為7號(hào)字，紅色</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="#FF00FF"><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>以下是一些特殊符號(hào)：<Br>    注冊(cè)符號(hào)®<Br>

版權(quán)符號(hào)©</Body> </Html>1.3.2HTML基本標(biāo)記3.列表標(biāo)記(1)有序列表標(biāo)記<Ol屬性=值…> <Li>列表項(xiàng)1 <Li>列表項(xiàng)2 …… <Li>列表項(xiàng)n</Ol>(2)創(chuàng)建無序列表無序列表是一種在各列表項(xiàng)前面顯示特殊項(xiàng)目符號(hào)的縮排列表，可以使用無序列表標(biāo)記Ul和列表項(xiàng)標(biāo)記Li來創(chuàng)建。<Ul> <Li>列表項(xiàng)1 <Li>列表項(xiàng)2 …… <Li>列表項(xiàng)n</Ul>1.3.2HTML基本標(biāo)記(3)描述性列表 <Dl>…</Dl>是描述性列表標(biāo)記，它與其子標(biāo)記<Dt>和<Dd>配合使用，用來控制數(shù)據(jù)項(xiàng)目的顯示，類似于術(shù)語及其定義的書寫格式。例如： <Dl><Dt>局域網(wǎng) <Dd>局域網(wǎng)是指將小范圍內(nèi)的數(shù)據(jù)設(shè)備經(jīng)過通信系統(tǒng)連接起來的計(jì)算機(jī)網(wǎng)絡(luò) </Dl><Dl> <Dt>列表描述項(xiàng) <Dd>列表項(xiàng) <Dd>列表項(xiàng) …… <Dt>列表描述項(xiàng) ……</Dl>1.3.2HTML基本標(biāo)記【例1.2】創(chuàng)建如圖1.5所示的含有有序列表、無序列表和描述性列表的頁面。源代碼所示(Ex1-2.htm)。1.3.2HTML基本標(biāo)記4.圖像標(biāo)記

在網(wǎng)頁中插入圖像、在網(wǎng)頁中播放視頻文件。

<Img屬性=值…>

常用屬性有： Src=圖像文件的URL地址

圖像可以是JPEG文件、GIF文件或PNG文件。 Alt=圖像的簡單文本說明

在瀏覽器下不能顯示圖像或圖像加載時(shí)間過長時(shí)顯示該文本。 Height=顯示圖像的高度(像素或百分比) Width=顯示圖像的寬度(像素或百分比)

如果給出了高度或?qū)挾?，則圖像將按比例進(jìn)行縮放。 HSpace=與左右相鄰對(duì)象的間隔(像素) VSpace=與上下相鄰對(duì)象的間隔(像素) Align=圖像不到顯示區(qū)域大小時(shí)的對(duì)齊方式1.3.2HTML基本標(biāo)記當(dāng)在頁面中進(jìn)行圖文混排時(shí)，可以使用Align屬性設(shè)置圖像與文本在垂直方向的對(duì)齊方式，此時(shí)Align屬性的取值如下：top：圖像與文本頂部對(duì)齊。middle：圖像與文本中央對(duì)齊。bottom：圖像與文本底部對(duì)齊。也可以在圖像的左右繞排文本，此時(shí)Align屬性的取值如下：left：圖像居左文本居右。right：圖像居右文本居左。1.3.2HTML基本標(biāo)記在Img標(biāo)記中，Dynsrc屬性優(yōu)先于Src屬性。如果計(jì)算機(jī)具有多媒體功能，并且所指定的多媒體文件存在，則播放該多媒體文件；如果計(jì)算機(jī)沒有多媒體功能，或者所指定的多媒體文件不存在，則顯示由Src屬性指定的圖像文件。Start=何時(shí)開始播放多媒體文件其取值可以是fileopen或mouseover。Loop=多媒體文件的播放次數(shù)(整數(shù))如果不限播放次數(shù)，則應(yīng)將該屬性設(shè)置為關(guān)鍵字infinite。LoopDelay=兩次播放之間的延遲(以毫秒為單位)1.3.2HTML基本標(biāo)記【例1.3】網(wǎng)頁中的多媒體。源代碼如下(Ex1-3.htm)：<Html><Head><Title>在網(wǎng)頁中的多媒體</Title></Head><Body><PAlign="center"><ImgSrc="Images/njtoday.jpg"Alt="今日南京"HSpace="30"VSpace="30"></P><ImgSrc="Images/nj2014.jpg"Alt="南京2014"Height="250"Width="300"Border="1"Align="left"><ImgDynSrc="Images/Clock.avi"Height="80"Width="80"ControlsLoop="infinite"Start="fileopen"></Body></Html>1.3.2HTML基本標(biāo)記運(yùn)行的結(jié)果如圖1.6所示。1.3.2HTML基本標(biāo)記(1)創(chuàng)建文件鏈接文件鏈接的目標(biāo)端點(diǎn)是網(wǎng)頁文件，該網(wǎng)頁文件可以位于當(dāng)前網(wǎng)頁所在的服務(wù)器，常用屬性如下：Href=目標(biāo)端點(diǎn)的URL地址(可以包含一個(gè)或多個(gè)參數(shù))Target=窗口或框架的名稱目標(biāo)文檔將在指定的窗口或框架中打開。如果省略該屬性，則目標(biāo)文檔將在當(dāng)前窗口打開。Target屬性的取值既可以是窗口或框架的名稱，也可以是如下保留字：_blank：未命名的新瀏覽器窗口_parent：父框架頁或窗門中。_self：所在的同一框架或窗口中_top：整個(gè)瀏覽器窗口中，并刪除所有框架。Title=指向超鏈接時(shí)所顯示的標(biāo)題文字1.3.2HTML基本標(biāo)記(2)創(chuàng)建錨點(diǎn)鏈接若要?jiǎng)?chuàng)建錨點(diǎn)鏈接，首先在頁面中為需要跳轉(zhuǎn)的位置命名，即為該位置上放置一個(gè)A標(biāo)記，并通過Name屬性為該位置指定一個(gè)名稱，但不要在<A>和</A>標(biāo)記之間放置任何文字。例如：在介紹自己的網(wǎng)頁文件me.htm中介紹自己簡歷的位置如下設(shè)置： <P><AName="jl">我的簡歷：</A></P>創(chuàng)建錨點(diǎn)后，可以使用A標(biāo)記來創(chuàng)建指向該錨點(diǎn)的超鏈接。例如：要在同一個(gè)頁面中跳轉(zhuǎn)到名為“jl”的錨點(diǎn)處，可以使用以下HTML代碼： <P><AHref="#jl">點(diǎn)擊可見我的簡歷</A></P>若要在其他頁面中跳轉(zhuǎn)到該錨點(diǎn)，則使用以下HTML代碼： <P><AHref="me.htm#jl">我的簡歷</A></P>1.3.2HTML基本標(biāo)記(3)創(chuàng)建郵件鏈接通過郵件鏈接(E-mail鏈接)可以啟動(dòng)電子郵件客戶端程序（如Outlook或FoxMail等），并允許訪問者向指定的地址發(fā)送郵件。使用A標(biāo)記創(chuàng)建郵件鏈接，該標(biāo)記的Href屬性應(yīng)由3個(gè)部分組成：第1部分是電子郵件協(xié)議名稱mailto，第2部分是電子郵件地址，第3部分是可選的郵件主題，其形式為“subject=主題”。第1部分與第2部分之間用冒號(hào)(:)分隔，第2部分與第3部分之間用問號(hào)(?)分隔。例如：<AHref="mailto:me@?subject=你好"><B>這里</B></A>可以給我發(fā)信<Br>1.3.2HTML基本標(biāo)記6.使用表格表格由表頭、行和單元格所組成，這些元素分別用不同的標(biāo)記來定義。通過Table標(biāo)記來定義表格；表格中的每一行通過Tr標(biāo)記來表示；行中的單元格通過Td或Th標(biāo)記來定義，其中Th標(biāo)記定義表格的列標(biāo)題單元格；表格的標(biāo)題說明通過Caption標(biāo)記來定義。

<Table>

<Caption>表格標(biāo)題文字</Caption> <Tr> <Th>第1列表頭</Th><Th>第2列表頭</Th>…<Th>第n列表頭</Th> </Tr> <Tr> <Td>第1列數(shù)據(jù)</Td><Td>第2列數(shù)據(jù)</Td>…<Td>第n列數(shù)據(jù)</Td> </Tr> <Tr> <Td>第1列數(shù)據(jù)</Td><Td>第2列數(shù)據(jù)</Td>…<Td>第n列數(shù)據(jù)</Td> </Tr> …… </Table>1.3.2HTML基本標(biāo)記【例1.4】創(chuàng)建圖1.7所示的課程表。1.3.2HTML基本標(biāo)記源代碼如下(Ex1-4.htm)：<Html><Head><Title>課程表</Title></Head><Body><Center><TableBorder=1CellSpacing=2CellPadding=4><Caption>課程表</Caption><Tr><Th>節(jié)次</Th><Th>星期一</Th><Th>星期二</Th><Th>星期三</Th><Th>星期四</Th><Th>星期五</Th></Tr><Tr><Td>1、2</Td><Td>專業(yè)英語</Td><Td>操作系統(tǒng)</Td><Td>網(wǎng)絡(luò)基礎(chǔ)</Td><Td>專業(yè)英語</Td><Td>數(shù)據(jù)庫</Td></Tr><Tr><Td>3、4</Td><Td>Java程序設(shè)計(jì)</Td><Td>數(shù)據(jù)庫</Td><Td>實(shí)驗(yàn)</Td><Td>Java程序設(shè)計(jì)</Td><td>操作系統(tǒng)</Td></Tr><Tr><Td>5、6</Td><Td>網(wǎng)絡(luò)基礎(chǔ)</Td><Td>實(shí)驗(yàn)</Td><Td>實(shí)驗(yàn)</Td><Td>實(shí)驗(yàn)</Td><Td>數(shù)據(jù)庫原理</Td></Tr></Table></Center></Body></Html>1.3.2HTML基本標(biāo)記(1)設(shè)置表格的屬性Table標(biāo)記創(chuàng)建表格時(shí)，可以設(shè)置下列屬性：Align=行中單元格的水平對(duì)齊方式取值如下： left：左對(duì)齊(Td默認(rèn)值) center：對(duì)中(Th默認(rèn)值) right：右對(duì)齊BackGround=表格背景圖片的URL地址BgColor=表格的背景顏色Border=表格邊框的寬度(像素)，默認(rèn)值為0。BorderColor=表格邊框顏色，Border≠0時(shí)起作用。BorderColorDark=3D邊框的陰影顏色，Border≠0時(shí)起作用。BorderColorLight=3D邊框的高亮顯示顏色，Border≠0時(shí)起作用。CellPadding=單元格內(nèi)數(shù)據(jù)與單元格邊框之間的間距(像素)CellSpacing=單元格之間的間距(像素)Width=表格的寬度(像素或百分比)1.3.2HTML基本標(biāo)記(2)設(shè)置行的屬性表格中的每一行是用TR標(biāo)記來定義的，可以設(shè)置下列屬性：Align=行中單元格的水平對(duì)齊方式。取值為left(默認(rèn)值)、center或right。BackGround=作為行的背景圖像文件的URLBgColor=行的背景顏色BorderColor=行的邊框顏色。只有當(dāng)Table標(biāo)記的Border≠0起作用。BorderColorDark=行的3D邊框的陰影顏色。只有當(dāng)Table標(biāo)記的Border≠0起作用。BorderColorLlight=行的3D邊框的高亮顏色。只有當(dāng)Table標(biāo)記的Border≠0起作用。VAlign=行中單元格內(nèi)容的垂直對(duì)齊方式其取值如下：top：頂端對(duì)齊middle：居中對(duì)齊bottom：底端對(duì)齊baseline：基線對(duì)齊1.3.2HTML基本標(biāo)記(3)設(shè)置單元格的屬性表格的單元格通過Td標(biāo)記來定義，標(biāo)題單元格也可以通過Th標(biāo)記來定義。Td標(biāo)記和Th標(biāo)記可以設(shè)置下列屬性：Align=行中單元格的水平對(duì)齊方式。取值為left（默認(rèn)值）、center或right。BackGround=單元格的背景的圖像的URLBgColor=單元格的背景顏色。BorderColor=單元格的邊框顏色。只有當(dāng)Table標(biāo)記的Border≠0起作用。BorderColorDark=單元格的3D邊框的陰影顏色。只有當(dāng)Table標(biāo)記的Border≠0起作用。BorderColorLight=單元格的3D邊框的高亮顏色。只有當(dāng)Table標(biāo)記的Border≠0起作用。ColSpan=合并單元格時(shí)一個(gè)單元格跨越的表格列數(shù)。RowSpan=合并單元格時(shí)一個(gè)單元格跨越的表格行數(shù)。VAlign=單元格中文本的垂直對(duì)方方式。取值可以是top、middle（默認(rèn)值）、bottom或baseline。NoWrap：若指定該屬性，則避免Web瀏覽器將單元格里的文本換行。1.3.2HTML基本標(biāo)記【例1.5】顯示如圖1.8所示較復(fù)雜表格頁面，表格的每行列數(shù)及每列行數(shù)不相同，利用Td標(biāo)記的ColSpan和RowSpan屬性可以對(duì)表格的單元格進(jìn)行靈活的控制。

源代碼所示(Ex1-5.htm)。1.3.2HTML基本標(biāo)記7.表單及其控件標(biāo)記(1)表單標(biāo)記

在HTML語言中，表單通過FORM標(biāo)記來定義。

<Form屬性="值"…事件="代碼"> …… </Form> Form標(biāo)記具有以下屬性：Name=表單的名稱。命名表單后，可以使用腳本語言來引用或控制該表單。 Method=表單數(shù)據(jù)傳輸?shù)椒?wù)器的方法。其取值如下：post：在HTTP請(qǐng)求中嵌入表單數(shù)據(jù)get：將表單數(shù)據(jù)附加到請(qǐng)求該頁的URL中1.3.2HTML基本標(biāo)記Action=接收表單數(shù)據(jù)的服務(wù)器端程序或動(dòng)態(tài)網(wǎng)頁的URL地址。Target=目標(biāo)窗口其取值如下：_Blank：在未命名的新窗口中打開目標(biāo)文檔。_parent：在顯示當(dāng)前文檔的窗口的父窗口中打開目標(biāo)文檔。_self：在提交表單所使用的窗口中打開目標(biāo)文檔。_top：在當(dāng)前窗口內(nèi)打開目標(biāo)文檔，確保目標(biāo)文檔占用整個(gè)窗門。在一個(gè)網(wǎng)頁中可以創(chuàng)建多個(gè)表單，每個(gè)表單都可以包含各種各樣的控件，例如文本框、單選按鈕、復(fù)選框、下拉選單以及按鈕等。但表單不能嵌套使用。Form標(biāo)記具有以下事件：OnSubmit=提交表單時(shí)調(diào)用的事件處理程序OnRest=重置表單時(shí)調(diào)用的事件處理程序1.3.2HTML基本標(biāo)記(2)表單輸入控件標(biāo)記<Input屬性=值…事件="代碼"…>1)單行文本框在表單中添加單行文本框可以獲取站點(diǎn)訪問者提供的一行信息。創(chuàng)建單行文本框方法如下：

<InputType="text"屬性="值"…事件="代碼"…>屬性Name=單行文本框的名稱，通過它可以在腳本中引用該文本框控件。Value=文本框的值DefaultValue=文本框的初始值Size=文本框的寬度(字符數(shù))1.3.2HTML基本標(biāo)記MaxLength=允許在文本框內(nèi)輸入的最大字符數(shù)。用戶輸入的字符數(shù)可以超過文本框的寬度，這時(shí)系統(tǒng)會(huì)滾動(dòng)，但輸入的字符數(shù)不能超過輸入的最大字符數(shù)。Form=所屬的表單（只讀）方法Click()：單擊該文本框Focus()：得到焦點(diǎn)Blue()：失去焦點(diǎn)Select()：選擇文本框的內(nèi)容事件OnClick=單擊該文本框執(zhí)行的代碼OnBlur=失去焦點(diǎn)執(zhí)行的代碼OnChange=內(nèi)容變化執(zhí)行的代碼OnFocus=得到焦點(diǎn)執(zhí)行的代碼OnSelect=選擇內(nèi)容執(zhí)行的代碼1.3.2HTML基本標(biāo)記2)密碼文本框密碼文本框也是一個(gè)單行文本框。當(dāng)站點(diǎn)訪問者在這個(gè)框中鍵入數(shù)據(jù)時(shí)，大部分的Web瀏覽器都會(huì)以星號(hào)顯示密碼以不讓別人看到輸入內(nèi)容。創(chuàng)建密碼文本框方法如下：

<InputType="password"屬性="值"…事件="代碼"…>3)隱藏域表單中添加隱藏域站點(diǎn)訪問者不能看見隱藏域的信息，每一個(gè)隱藏域都要有自己的名稱和值。當(dāng)提交表單時(shí)，隱藏域的名稱和值就會(huì)與可見表單域的名稱和值一起包含在表單結(jié)果中。例如，如果有許多使用相同自定義表單處理程序的表單可以利用獨(dú)特的名稱或數(shù)字作為隱藏域的名稱來區(qū)分各個(gè)表單。創(chuàng)建隱藏域方法如下：

<InputType="hidden"屬性="值"…>1.3.2HTML基本標(biāo)記4)復(fù)選框表單中添加復(fù)選框可以讓站點(diǎn)訪問者去選擇一個(gè)或多個(gè)選項(xiàng)或不選項(xiàng)。創(chuàng)建復(fù)選框方法如下：

<InputType="checkbox"屬性="值"…事件="代碼"…>選項(xiàng)文本屬性Name=復(fù)選框的名稱Value=選中時(shí)提交的值Checked：當(dāng)?shù)谝淮未蜷_表單時(shí)該復(fù)選框處于選中狀態(tài)。該復(fù)選框被選中，值為true，否則為false。該屬性是可選的。1.3.2HTML基本標(biāo)記DefaultChecked：復(fù)選框是否定義了Checked屬性。若定義了Checked屬性，則DefaultChecked為true，否則為false。方法Focus()：得到焦點(diǎn)Blue()：失去焦點(diǎn)Click()：單擊該復(fù)選框事件OnFocus=得到焦點(diǎn)執(zhí)行的代碼OnBlur=失去焦點(diǎn)執(zhí)行的代碼OnClick=單擊該復(fù)選框執(zhí)行的代碼1.3.2HTML基本標(biāo)記5)單選按鈕表單中添加單選按鈕可以讓站點(diǎn)訪問者從一組選項(xiàng)中選擇其中之一。在一組單選按鈕中，一次只能選擇一個(gè)。創(chuàng)建單選按鈕方法如下：<InputType="radio"屬性="值"…事件="代碼"…>選項(xiàng)文本其屬性如下：

Name=單選按鈕的名稱，若干個(gè)名稱相同的單選按鈕構(gòu)成一個(gè)控件組，在該組中只能選中一個(gè)選項(xiàng)。

Value=提交時(shí)的值

Checked：當(dāng)?shù)谝淮未蜷_表單時(shí)該單選按鈕處于選中狀態(tài)。該屬性是可選的。單選按鈕的方法和事件與復(fù)選框相同。1.3.2HTML基本標(biāo)記6)按鈕使用Input標(biāo)記可以在表單中添加3種類型的按鈕：提交按鈕、重置按鈕和自定義按鈕。創(chuàng)建按鈕的方法如下：<InputType="submit|reset|button"屬性="值"…OnClick="代碼">屬性Type=submit：創(chuàng)建一個(gè)提交按鈕。在表單中添加提交按鈕后，站點(diǎn)訪問者就可以在提交表單時(shí)，表單數(shù)據(jù)（包括提交按鈕的名稱和值）以ASCII文本形式傳送到由表單的Action屬性指定的表單處理程序。一般來說，表單中必須有一個(gè)提交按鈕。

Type=reset：創(chuàng)建一個(gè)重置按鈕。單擊該按鈕時(shí)，將刪除任何已經(jīng)輸入到域中的文本并清除所做的任何選擇。但是，如果框中含有默認(rèn)文本或選項(xiàng)為默認(rèn)，單擊重置按鈕將會(huì)恢復(fù)這些設(shè)置值。1.3.2HTML基本標(biāo)記Type=button：創(chuàng)建一個(gè)自定義按鈕。在表單中添加自定義按鈕時(shí)，為了賦予按鈕某種操作，必須為按鈕編寫腳本。Name=按鈕的名稱Value=顯示在按鈕上的標(biāo)題文本事件OnClick=單擊按鈕執(zhí)行的腳本代碼1.3.2HTML基本標(biāo)記【例1.6】創(chuàng)建一個(gè)如圖1.9所示的登錄表單，其中包含有文本框、密碼框、提交按鈕和重置按鈕。1.3.2HTML基本標(biāo)記源代碼如下(Ex1-6.htm)：<Html><Head><Title>創(chuàng)建登錄表單</Title></Head><Body><Form><TableAlign="center"BgColr="blue"Width="380"> <TrBgColor="#0034FF"> <ThColSpan=2Align=center><FontColor=#FFFFFF>登錄表單</Font></Th></Tr><Tr><Td>用戶名：</Td> <TdWidth=240Height=50><InputType=textName=unameSize=20></Td></Tr><Tr><Td>密碼：</Td> <TdWidth=240Height=50><InputType=passwordName=uklSize=20></Td></Tr><TrAlign=center> <TdWidth=115Align=rightHeight=50><InputType=submitValue="提交"Name="bok"></Td> <TdWidth=241Height=50><InputType=resetValue="重填"Name="bcls"></Td></Tr></Table></Form></Body></Html>1.3.2HTML基本標(biāo)記7)文件域文件域由一個(gè)文本框和一個(gè)“瀏覽”按鈕組成，用戶既可以在文本框中輸入文件的路徑和文件名，也可以通過單擊“瀏覽”按鈕從磁盤上查找和選擇所需文件。文件域一般用于選擇文件。創(chuàng)建文件域方法如下：<InputType="file"屬性="值"…>其中：Name=文件域的名稱Valut=初始文件名Size=文件名輸入框的寬度【例1.7】創(chuàng)建一個(gè)如圖1.10所示的表單，其中包含文件域、提交按鈕和重置按鈕。1.3.2HTML基本標(biāo)記源代碼如下(Ex1-7.htm)：<Html><Head><Title>文件域示例</Title></Head><Body><Form><TableAlign=centerBgColor=#D6D3CEWidth=368><Tr><ThColSpan=2BgColor=#0034FF><FontColor=#FFFFFF>文件域</Font></Th></Tr><Tr><TdHeight=52Align=right>請(qǐng)選擇文件：</Td><TdHeight=52><InputType=fileName=F1Size=16></Td></Tr><TrAlign=center> <TdHeight=52Align=right><InputType=submitValue=提交Name=btnSubmit></Td> <TdHeight=52><InputType=resetValue=全部重寫Name=btnReset></Td></Tr></Table></Form></Body></Html>1.3.2HTML基本標(biāo)記8)圖像提交按鈕圖像提交按鈕與提交按鈕在表單中的區(qū)別僅僅是提交按鈕上用圖像代替按鈕文本標(biāo)題。圖像提交按鈕使用Input標(biāo)記來創(chuàng)建方法如下：<InputType="image"屬性="值"…事件="代碼"…>其中屬性如下：Src=所用圖像的URL地址

Value=提供圖像的替換文本其他同提交按鈕。1.3.2HTML基本標(biāo)記(3)其他表單控件1)多行文本框表單中添加多行文本框可以接受站點(diǎn)訪問者輸入多于一行的文本。創(chuàng)建多行文本框方法如下：<Textarea屬性="值"…事件="代碼"…>初始值</Textarea>其中屬性如下：Name=滾動(dòng)文本框控件的名稱Rows=控件的高度（以行為單位）Cols=控件的寬度（以字符為單位）ReadOnly：滾動(dòng)文本框的內(nèi)容不被用戶修改1.3.2HTML基本標(biāo)記2)選項(xiàng)菜單表單中選項(xiàng)菜單讓站點(diǎn)訪問者從列表或菜單中選擇選項(xiàng)。菜單中可以選擇一個(gè)選項(xiàng)，也可以設(shè)置為允許作多重選擇。創(chuàng)建選項(xiàng)菜單方法如下：<SelectName="值"Size="值"[Multiple]> <Option[Selected]Value="值">選項(xiàng)1</Option> <Option[Selected]Value="值">選項(xiàng)2</Option> ……</Select>其中：Name=選項(xiàng)選單控件的名稱Size=在列表中一次可以看到的選項(xiàng)數(shù)目(默認(rèn)為1)Multiple：允許作多項(xiàng)選擇Selected=該選項(xiàng)的初始狀態(tài)為選中。1.3.2HTML基本標(biāo)記當(dāng)提交表單時(shí)，菜單的名稱會(huì)被包含在表單結(jié)果中，并且其后有一份所有選項(xiàng)值的列表。例如：<SelectName="課程"> <OptionValue="計(jì)算機(jī)基礎(chǔ)"Selected>計(jì)算機(jī)基礎(chǔ)</Option> <OptionValue="C語言程序設(shè)計(jì)">C語言程序設(shè)計(jì)</Option> <OptionValue="數(shù)據(jù)結(jié)構(gòu)">數(shù)據(jù)結(jié)構(gòu)</Option> <OptionValue="數(shù)據(jù)庫原理">數(shù)據(jù)庫原理</Option> <OptionValue="C++程序設(shè)計(jì)">C++程序設(shè)計(jì)</Option></Select>1.3.2HTML基本標(biāo)記3)對(duì)表單控件分組可以使用FieldSet標(biāo)記對(duì)表單控件進(jìn)行分組，從而將表面細(xì)分為更小、更易于管理的部分。FieldSet標(biāo)記必須以Legend標(biāo)記開頭，以指定控件組的標(biāo)題，在Legend標(biāo)記之后可以跟其他表單控件，也可以嵌套FieldSet。創(chuàng)建表單控件分組方法如下：<FieldSet><Legend>控件組標(biāo)題</Legend>組內(nèi)表單控件</FieldSet>1.3.2HTML基本標(biāo)記8.多框架文檔框架網(wǎng)頁的基本結(jié)構(gòu)可以表示如下：<Html><Head><Title>框架網(wǎng)頁的基本結(jié)構(gòu)</Title></Head><FrameSet屬性="值"…> <Frame屬性="值"…> <Frame屬性="值"…> <Frame屬性="值"…> ……</FrameSet> </Html>1.3.2HTML基本標(biāo)記(1)框架集<FrameSet屬性="值"…> ……</FrameSet>Cols=創(chuàng)建縱向分隔框架時(shí)指定各個(gè)框架的列寬。取值有3種形式：即像素、百分比（%）和相對(duì)尺寸（*）。例如：Cols="*,*,*"：表示將窗口劃分成3個(gè)等寬的框架；Cols="30%,200,*"：表示將瀏覽器窗口劃分為3列框架，其中第1列占窗口寬度的30%，第2列為200像素，第3列為窗口的剩余部分；Cols="*，3*，2*"：表示左邊的框架占窗口寬度的1/6，中間的框架占窗口寬度的1/2，右邊的框架占窗口寬度的1/3。Rows=橫向分隔框架時(shí)各個(gè)框架的行高。取值有3種形式：即像素、百分比(%)和相對(duì)尺寸(*)。設(shè)置方法與Cols屬性類似。但Rows屬性不能與Cols屬性同時(shí)使用，若要?jiǎng)?chuàng)建同時(shí)包含縱向分隔框架和橫向分隔框架，則應(yīng)使用嵌套框架。FrameBorder=框架周圍是否顯示三維邊框。取值為1（默認(rèn)值），顯示三維邊框；取值為0（顯示平面邊框）。FrameSpacing=框架之間的間隔（以像素為單位，默認(rèn)值為0）。1.3.2HTML基本標(biāo)記(2)框架<Frame屬性="值"…>使用Frame標(biāo)記可以設(shè)置框架的屬性，包括框架的名稱、框架是否可以滾動(dòng)以及在框架中顯示什么文件等。Frame標(biāo)記具有下列屬性：Name=框架的名稱FrameBorder=框架周圍是否顯示三維邊框。取值為1（默認(rèn)值），顯示三維邊框；取值為0，顯示平面邊框。MarginHeight=框架的高度（以像素為單位）MarginWidth=框架的寬度（以像素為單位）NoResize=不能調(diào)整框架的大小Scrolling=指定框架是否可以滾動(dòng)其取值：Yes：框架可以滾動(dòng)No：框架不能滾動(dòng)Auto：框架在需要時(shí)添加滾動(dòng)條Src=在框架中顯示的HTML文件1.3.2HTML基本標(biāo)記【例1.8】設(shè)計(jì)如圖1.11所示的框架頁面：利用框架將窗口分成三個(gè)子窗口，分別命名為win1，win2和win3，子窗口win1對(duì)應(yīng)的HTML中設(shè)置了兩個(gè)超鏈接，用戶單擊這兩個(gè)超鏈接后目標(biāo)URL將在子窗口win2中顯示。1.3.2HTML基本標(biāo)記[主文件Ex1-8-1.htm]

<Html> <Head><Title>多框架網(wǎng)頁</Title></Head> <FrameSetrows="80%,*"Bordercolor="green"> <FramesetCols="20%,*"> <FrameSrc="Ex1-8-2.htm"Scrolling="no"Name="win1"> <FrameSrc="Ex1-8-3.htm"Name="win2"> </FrameSet> <FrameSrc="Ex1-8-4.htm"NoresizeMarginWidth=5Name="win3"> </FrameSet> <NoFrames> PleaseuseaWebbrowsersuchasIE3.0orNetscapeNavigator toviewthispageinframes! </NoFrames> </Html>1.3.2HTML基本標(biāo)記[文件Ex1-8-2.htm]

<Html><Head><Title>左邊框架</Title></Head> <Body><AHref="Ex1-8-3.htm"target="win2">第1章</A><Br><Br> <AHref="第2章.htm"Target="win2">第2章</A></Body></Html>[文件Ex1-8-3.htm]

<Html><Head><Title>第1章</Title></Head> <Body><H1>第1章

緒論</H1><Br>本章簡述課程的要點(diǎn)...<Br><Br> <AHref="Ex1-8-3.htm">返回</A></Body></Html>[文件Ex1-8-4.htm]

<Html><Head><Title>第三個(gè)框架</Title></Head> <Body><H2>《計(jì)算機(jī)網(wǎng)絡(luò)》課件</H2></Body></Html>1.4可擴(kuò)展標(biāo)記語言XML1.4.1XML概述【例1.9】XML與HTML的比較。源代碼如下(Ex1-9.htm)：<Body>Herewehavesometext<H1>Thisistitle</H1><P>Thisisnormaltext.</P><P><B>Thisisboldtext.</B></P>Andfinallysomemorenormaltext</Body>1.4.1XML概述如果將上面的代碼存為HTML文件(擴(kuò)展名為.htm或.html)，則在瀏覽器中加載時(shí)，顯示如圖1.12所示的Web頁面。但如果將上面的代碼存為XML文檔（擴(kuò)展名為.xml），則在瀏覽器中加載時(shí)，就將顯示如圖1.13所示的結(jié)果。

1.4.2XML文檔的編寫【例1.10】創(chuàng)建一個(gè)用于保存人的信息的XML文檔。XML文檔源代碼如下(Ex1-10.xml)：1：<?xmlversion="1.0"encoding="GB2312"?>2：<persons>3：

<person>4：

<name>李明</name>5：

<birth>06/10/1990</birth>6：

<telephone>12345678</telephone>7：

</person>8：

<person>9：

<name>章蒙蒙</name>10：

<birth>12/11/1989</birth>11：

<telephone>88772212</telephone>12：

</person>13：</persons>1.4.3XML文檔的顯示【例1.11】使用XML在瀏覽器中顯示人的姓名、出生日期與電話號(hào)碼等信息。(1)編輯例1.10中的XML源文件，以person.xml文件名存盤。在第1行之后增加以下的內(nèi)容： <?xml-stylesheettype="text/xsl"href="person.xsl"?>(2)編輯XSL樣式文件。在編輯器中輸入以下樣式文件，以person.xsl文件名存盤。1.4.3XML文檔的顯示(3)顯示輸出結(jié)果在瀏覽器中運(yùn)行person.xml文件，使用XSL樣式文件person.xsl顯示person.xml文件的輸出。結(jié)果如圖1.14所示。1.5XHTML標(biāo)記語言1.5.1XHTML語言概述HTML從出現(xiàn)到現(xiàn)在，標(biāo)準(zhǔn)不斷完善，功能也越來越強(qiáng)大，但它的規(guī)范化要求不是很嚴(yán)格，仍有很多缺陷和不足。例如，代碼瑣碎、臃腫，尤其是標(biāo)記使用不規(guī)范，瀏覽器需要有足夠的能力才能夠正確顯示HTML頁面。1.5.2XHTML的格式XHTML的格式和HTML很類同，只是文檔前邊加了一個(gè)文檔說明和標(biāo)記的命名空間。它的基本格式為：1：<!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN”

“/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

2：<htmlxmlns="/1999/xhtml">

3：<head>4：

<title>XHTML的格式</title>//文檔頭部

5：</head>6：<body>7：

<div>XHTML文檔的主體部分</div> //文檔主體部分8：</body>9：</html>XHTML文檔類型的聲明XHTML命名空間1.5.3XHTML與HTML的區(qū)別(1) 標(biāo)記的嵌套使用標(biāo)記的嵌套使用是對(duì)文檔結(jié)構(gòu)的要求。盡管HTML也要求正確的嵌套，可是在實(shí)際中，即使HTML使用了不正確的嵌套形式，很多瀏覽器也一樣可以正常顯示。但是XHTML對(duì)文檔的結(jié)構(gòu)要求較嚴(yán)格，整個(gè)文檔一定要有正確的組織格式，所有的嵌套必須完全正確。例如在XHTML中：

<body><div>XHTML文檔的主體部分</div></body> //正確的嵌套 <body><d

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(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)論