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

下載本文檔

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

文檔簡介

第1章

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

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

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

<Sub>…</Sub>下標 <U>…</U>下劃線

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

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

<Html><Head><Title>文字顯示和段落控制</Title></Head><BodyBackground="image/fallb.jpg"Text="#000000"><Center><H1>一級標題</H1></Center><Hrwidth=90%color=Blue><FontFace="黑體"Size=7Color=Red>這是黑體，大小為7號字，紅色</Font><Br><P>這是一個段落<Br><I>這是斜體</I><B>這是粗體</B><U>這是下劃線字體</U><Big>這是大字體</Big><Small>這是小字體</Small>這是下標字體<Sub>1</Sub>這是上標字體<Sup>2</Sup><Br><FontFace="楷體"Size=6Color="#FF00FF"><I><B><U>這些標記還可以混合使用</U></B></I></Font></P><PAlign=center>這是另一個段落<Br><B>    以下是轉(zhuǎn)義序列</B><br><小于號；>大于號；&與號；"雙引號；例如:a>b</P>以下是一些特殊符號：<Br>    注冊符號®<Br>

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

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

<Img屬性=值…>

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

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

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

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

<Table>

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

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

在HTML語言中，表單通過FORM標記來定義。

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

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

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

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

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

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

Value=提交時的值

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

Type=reset：創(chuàng)建一個重置按鈕。單擊該按鈕時，將刪除任何已經(jīng)輸入到域中的文本并清除所做的任何選擇。但是，如果框中含有默認文本或選項為默認，單擊重置按鈕將會恢復(fù)這些設(shè)置值。1.3.2HTML基本標記Type=button：創(chuàng)建一個自定義按鈕。在表單中添加自定義按鈕時，為了賦予按鈕某種操作，必須為按鈕編寫腳本。Name=按鈕的名稱Value=顯示在按鈕上的標題文本事件OnClick=單擊按鈕執(zhí)行的腳本代碼1.3.2HTML基本標記【例1.6】創(chuàng)建一個如圖1.9所示的登錄表單，其中包含有文本框、密碼框、提交按鈕和重置按鈕。1.3.2HTML基本標記源代碼如下(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基本標記7)文件域文件域由一個文本框和一個“瀏覽”按鈕組成，用戶既可以在文本框中輸入文件的路徑和文件名，也可以通過單擊“瀏覽”按鈕從磁盤上查找和選擇所需文件。文件域一般用于選擇文件。創(chuàng)建文件域方法如下：<InputType="file"屬性="值"…>其中：Name=文件域的名稱Valut=初始文件名Size=文件名輸入框的寬度【例1.7】創(chuàng)建一個如圖1.10所示的表單，其中包含文件域、提交按鈕和重置按鈕。1.3.2HTML基本標記源代碼如下(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>請選擇文件：</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基本標記8)圖像提交按鈕圖像提交按鈕與提交按鈕在表單中的區(qū)別僅僅是提交按鈕上用圖像代替按鈕文本標題。圖像提交按鈕使用Input標記來創(chuàng)建方法如下：<InputType="image"屬性="值"…事件="代碼"…>其中屬性如下：Src=所用圖像的URL地址

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

<Html><Head><Title>第三個框架</Title></Head> <Body><H2>《計算機網(wǎng)絡(luò)》課件</H2></Body></Html>1.4可擴展標記語言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文件(擴展名為.htm或.html)，則在瀏覽器中加載時，顯示如圖1.12所示的Web頁面。但如果將上面的代碼存為XML文檔（擴展名為.xml），則在瀏覽器中加載時，就將顯示如圖1.13所示的結(jié)果。

1.4.2XML文檔的編寫【例1.10】創(chuàng)建一個用于保存人的信息的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在瀏覽器中顯示人的姓名、出生日期與電話號碼等信息。(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é)果在瀏覽器中運行person.xml文件，使用XSL樣式文件person.xsl顯示person.xml文件的輸出。結(jié)果如圖1.14所示。1.5XHTML標記語言1.5.1XHTML語言概述HTML從出現(xiàn)到現(xiàn)在，標準不斷完善，功能也越來越強大，但它的規(guī)范化要求不是很嚴格，仍有很多缺陷和不足。例如，代碼瑣碎、臃腫，尤其是標記使用不規(guī)范，瀏覽器需要有足夠的能力才能夠正確顯示HTML頁面。1.5.2XHTML的格式XHTML的格式和HTML很類同，只是文檔前邊加了一個文檔說明和標記的命名空間。它的基本格式為：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) 標記的嵌套使用標記的嵌套使用是對文檔結(jié)構(gòu)的要求。盡管HTML也要求正確的嵌套，可是在實際中，即使HTML使用了不正確的嵌套形式，很多瀏覽器也一樣可以正常顯示。但是XHTML對文檔的結(jié)構(gòu)要求較嚴格，整個文檔一定要有正確的組織格式，所有的嵌套必須完全正確。例如在XHTML中：

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

溫馨提示

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

評論

0/150

提交評論