web程序設計課件2

1、第二章 HTML語言2.1 HTML文檔的基本構成 HTML的基本結構如下： 基本HTML頁面以標簽開始，以結束。 2.1 HTML文檔的基本構成 【例】使用HTML設計一個簡單的網頁 (1) 打開Windows的附件中的記事本功能，輸入下列內容，以hello.htm作為文件名保存。一個Hello網頁 這是我的第一個網頁！2.2.1 設置文本格式 1. 分段標記 段落是文檔的基本信息單位。文檔中原有的回車和換行均被忽略，分段標記定義一個新段落，換行并插入一個空行。 ALIGN=段落的水平對齊方式 其值如下: Left: 左對齊（默認值） center: 對中 right: 右對齊 justif

2、y: 兩邊對齊 省略該屬性，則取默認值。下同。2換行標記換行標記強行規(guī)定了當前行的中斷，使后續(xù)內容在下一次顯示的。 2.2.1 設置文本格式【例】分段標記和換行標記的演示。輸入下列內容，以pbr.HTM作為文件名保存： 分段標記和換行標記演示 第1行演示 第2行演示 第3行演示 第4行演示 2.2.1 設置文本格式3. 標題標記 標題標記用于設置文檔中的標題和副標題標記表示字體最大的標題，標記表示字體最小的標題。 ALIGN=段落的水平對齊方式 其值如下： Left: 左對齊（默認值） center: 對中 right: 右對齊 Justify: 兩邊對齊 2.2.1 設置文本格式 【例】各種

3、標題標記大小演示。 輸入下列內容，以h16.HTM作為文件名保存： H1-H6標題演示 下面是標題演示 H1標題演示 H2標題演示 H3標題演示/H3 H4標題演示 H5標題演示 H6標題演示 2.2.1 設置文本格式 4. 對中標記 標記中間的內容全部對中。【例】CENTER標記演示。 輸入下列內容，以center.HTM作為文件名保存： CENTER標記演示 下面是CENTER標記演示 H1標題演示 H2標題演示 H3標題演示 H4標題演示 H5標題演示 H6標題演示 2.2.1 設置文本格式 5. 塊標記 定義文檔塊。常用屬性如下： ALIGN=段落的水平對齊方式 其值如下： Left:

4、 左對齊（默認值） center: 對中 right: 右對齊 【例】DIV標記演示。輸入下列內容，以div.HTM作為文件名保存：DIV標記演示下面是DIV標記演示 H1標題演示 H2標題演示 H3標題演示H4標題演示H5標題演示 H6標題演示2.2.1 設置文本格式6. 水平線標記 HR標記在文檔中添加一條水平線，用來分隔文檔。常用屬性如下：ALIGN=段落的水平對齊方式其值如下： Left: 左對齊（默認值） center: 對中 right: 右對齊COLOR=線的顏色NOSHADE=顯示一條無陰影的實線SIZE=線的寬度(以像素為單位)WIDTH=線的長度(像素或百分比(占頁面寬度的

5、百分數(shù))。2.2.1 設置文本格式 【例】各種水平線的演示。 輸入下列內容，以hr.HTM作為文件名保存； 各種水平線的演示 2.2.1 設置文本格式7. 字體標記 使用字體標記FONT來設置文本的字符格式，主要包括字體、字號和的顏色等。常用屬性如下：FACE=“字體名表”(字體名之間用“,”分隔) 瀏覽器首先使用字體名表中的第1種字體來顯示標記內的文本。如果在運行瀏覽器的計算機上沒有安裝第1種字體，則會嘗試字體名表中的第2種字體，直至找到匹配字體。如果到達列表結束，仍然找不到匹配字體，瀏覽器將使用默認字體。SIZE=“字號值” SIZE屬性指定字體的大小（字號），其值從17，默認值為3。SI

6、ZE值越大，顯示的字號就越大。也可以使用+或號來指定相對字號，相對于基本字體（BASEFONT）的大小。COLOR=“顏色值” 顏色屬性的值有3種表示方法： （1） 使用顏色名稱來表示。 （2）使用十六進制格式數(shù)值#RRGGBB來表示，RR、GG和BB分別表示顏色中的紅、綠、藍三基色的兩位十六進制數(shù)據(jù)。（3）RGB(r,g,b)函數(shù)表示。r,g,b的數(shù)值范圍為0255或者0%100%。2.2.1 設置文本格式 【例】使用字體標記來設置文本的字體、字號和顏色。 輸入下列內容，以E2_font.HTM作為文件名保存： 設置字體、字號和顏色 設置字體、字號和顏色 設置的中文字體 English FO

7、NT Demo. Good night! 晚安！ 2.2.1 設置文本格式8. 固體字體標記粗體斜體大字體小字體固定寬度字體9. 樣式標記上標下標下劃線刪除線刪除線2.2.1 設置文本格式 10. 原樣顯示標記 將包含其中的內容(包括回車和空格)原樣顯示出來。 2.2.1 設置文本格式 【例】特殊符號樣式。 輸入下列內容，以E2_schar.HTM作為文件名保存： 設置字符樣式 Microsoft 解二元一次方程 aX2+bX+c=0 解不等式 x+y 2 x-y -1 2.2.2 列表標記 列表格式包括有序列表格式和無序列表格式。 1. 有序列表標記 列表項1 列表項2 列表項n 有序列表是

8、在各列表項前面顯示數(shù)字或字母的縮排列表，可以使用有序列表標記OL和列表項記LI來創(chuàng)建。 2.2.2 列表標記(1) OL標記 OL標記控制有序列表樣式和起始值。有兩個常用屬性： START=數(shù)字序列的起始值(可以取整數(shù)值) TYPE=數(shù)字序列樣式 其取值如下： 1：表示阿拉伯數(shù)字1、2、3等，此為默認值。 A：表示大寫字母A、B、C等 a：表示小寫字母a、b、c等 I：表示大寫羅馬數(shù)字I、II、III、IV等 i：表示小寫羅馬數(shù)字i、ii、iii、iv等 (2) LI標記 LI標記定義列表項。位于和標記之間。LI標記有兩個常用屬性： TYPE=數(shù)字樣式(其取值與OL標記的TYPE屬性相同) V

9、ALUE=新的數(shù)字序列起始值以獲得非連續(xù)性的數(shù)字序列2.2.2 列表標記【例】創(chuàng)建有序列表。 輸入下列內容，以E2_olli.HTM作為文件名保存： 有序列表示例 用數(shù)字表示的列表 電子管 晶體管 小規(guī)模集成電路 中規(guī)模集成電路 大規(guī)模集成電路 2.2.2 列表標記 2. 創(chuàng)建無序列表 無序列表是一種在各列表項前面顯示特殊項目符號的縮排列表，可以使用無序列表標記UL和列表項標記LI來創(chuàng)建。 列表項1 列表項2 列表項n 2.2.2 列表標記UL標記控制列表項前面顯示的項目符號。常用屬性如下： TYPE=列表項前面顯示的項目符號 其取值如下： disc：使用實心圓作為項目符號（默認值） circ

10、le：使用空心圓作為項目符號 square：使用方塊作為項目符號注意：在IE瀏覽器中，TYPE屬性的值是區(qū)分大小寫的。2.2.2 列表標記【例】創(chuàng)建無序列表。輸入下列內容，以ulli.HTM作為文件名保存：無序列表計算機課程計算機導論操作系統(tǒng)計算機原理數(shù)據(jù)結構2.2.2 列表標記3. 描述性列表 列表描述項 列表項 列表項 列表描述項 【例】創(chuàng)建描述性列表。輸入下列內容，以dldt.HTM作為文件名保存：描述性列表描述性列表江蘇省 鎮(zhèn)江市 常州市 揚州市山東省 濟南市 青島市2.2.3 多媒體標記 1. 圖像標記 SRC=圖像文件的URL地址 圖像可以是JPEG文件、GIF文件或PNG文件。

11、ALT=圖像的簡單文本說明 在瀏覽器下不能顯示圖像或圖像加載時間過長時顯示該文本。 HEIGHT=顯示圖像的高度(像素或百分比) WIDTH=顯示圖像的寬度(像素或百分比)HSPACE=與左右相鄰對象的間隔(像素) VSPACE=與上下相鄰對象的間隔(像素) ALIGN=圖像不到顯示區(qū)域大小時的對齊方式 ALIGN屬性的取值如下： top：圖像與文本頂部對齊。 middle：圖像與文本中央對齊。 bottom：圖像與文本底部對齊也可以在圖像的左右繞排文本，此時ALIGN屬性的取值如下： left：圖像居左文本居右right：圖像居右文本居左2.2.3 多媒體標記 BORDER=圖像邊框點數(shù)。

12、CONTROLS：指定該選項后，若有多媒體文件，則顯示一套視頻控件。 DYNSRC=指定要播放的多媒體文件的URL。 在IMG標記中，dynSRC屬性優(yōu)先于SRC屬性。 START=何時開始播放多媒體文件 其取值可以是fileopen或mouseover。 LOOP=多媒體文件的播放次數(shù)(整數(shù)) 如果不限播放次數(shù)，則應將該屬性設置為關鍵字infinite。 LOOPDELAY=兩次播放之間的延遲。 2.2.3 多媒體標記【例】網頁中的多媒體。輸入下列內容，以img.HTM作為文件名保存： 在網頁中的多媒體2.2.3 多媒體標記2. 插入字幕標記 滾動顯示的信息 在HTML語言中，用于水平或垂直

13、滾動顯示文本信息。主要屬性如下： ALIGN=字幕與周圍文本的對齊方式其取值如下：top、middle、 bottomBEHAVIOR=文本動畫的類型其取值如下：scroll：滾動slide：滑行alternate：交替BGCOLOR=字幕的背景顏色DIRECTION=文本的移動方向其取值如下：down、left(默認)、right、up2.2.3 多媒體標記【例】網頁中插入一個字幕。輸入下列內容，以E2_marquee.HTM作為文件名保存：在網頁中插入一個自下而上移動的字幕2008年北京奧運會全世界將看到一個無比美麗的北京2.2.3 多媒體標記3. 插入背景音樂標記主要屬性如下： LOOP

14、=聲音播放的次數(shù)。0：播放一次；大于0的整數(shù)：播放指定的次數(shù)；-1：則聲音反復播放，直到頁面卸載。 SRC=播放的聲音文件的URL。常用的聲音文件類型：波形文件（.wav）MIDI文件（.mid） AIFF文件（.aif） AU文件(.au) MP3文件（*.mp3）2.2.3 多媒體標記【例】在網頁中插入背景音樂。輸入下列內容，以bgsound.HTM作為文件名保存：在網頁中插入背景音樂當前網頁正在演奏歌曲！2.2.4 使用表格 通過TABLE標記來定義表格；表格中的每一行通過TR標記來表示；行中的單元格通過TD或TH標記來定義，其中TH標記定義表格的列標題單元格；表格的標題說明通過CAPT

15、ION標記來定義。 表格標題文字第1列表頭第2列表頭第n列表頭第1列數(shù)據(jù)第2列數(shù)據(jù)第n列數(shù)據(jù)第1列數(shù)據(jù)第2列數(shù)據(jù)第n列數(shù)據(jù)2.2.4 使用表格2.2.4 使用表格 1. 設置表格的屬性 TABLE標記創(chuàng)建表格時，可以設置下列屬性： ALIGN=表格的對齊方式 BACKGROUND=表格背景圖片的URL地址 BGCOLOR=表格的背景顏色 BORDER=表格邊框的寬度(像素)，默認值為0。 BORDERCOLOR=表格邊框顏色，BORDER0時起作用。CELLPADDING=單元格內數(shù)據(jù)與單元格邊框之間的間距(像素) CELLSPACING=單元格之間的間距(像素) WIDTH=表格的寬度(像素

16、或百分比) 2.2.4 使用表格 2. 設置行的屬性 表格中的每一行是用TR標記來定義的，可以設置下列屬性： ALIGN=行中單元格的水平對齊方式。取值為left（默認值）、center或right。 BACKGROUND=作為行的背景圖像文件的URL BGCOLOR=行的背景顏色 BORDERCOLOR=行的邊框顏色。只有當TABLE標記的BORDER0起作用。VALIGN=行中單元格內容的垂直對齊方式 其取值如下：top、 middle、bottom、baseline2.2.4 使用表格 3. 設置單元格的屬性 表格的單元格通過TD標記來定義，標題單元格也可以通過TH標記來定義。TD標記和

17、TH標記可以設置下列屬性： ALIGN=行中單元格的水平對齊方式。取值為left（默認值）、center或right。 BACKGROUND=單元格的背景的圖像的URL BGCOLOR=單元格的背景顏色。 BORDERCOLOR=單元格的邊框顏色。只有當TABLE標記的BORDER0起作用。COLSPAN=合并單元格時一個單元格跨越的表格列數(shù)。 ROWSPAN=合并單元格時一個單元格跨越的表格行數(shù)。 VALIGN=單元格中文本的垂直對方方式。 NOWRAP：若指定該屬性，則避免Web瀏覽器將單元格里的文本換行。 2.2.5 使用超鏈接 1. 創(chuàng)建文件鏈接 使用A標記來創(chuàng)建超鏈接，常用屬性如下：

18、 HREF=目標端點的URL地址（可以包含一個或多個參數(shù)） 在瀏覽器中，如果要鏈接到的文件是一個HTML文檔，則在當前窗口或其他目標窗口中裝載該文檔。 TARGET=窗口或框架的名稱 目標文檔將在指定的窗口或框架中打開。如果省略該屬性，則目標文檔當前窗口打開。TARGET屬性的取值既可以是窗口或框架的名稱，也可以是如下保留字： _blank：未命名的新瀏覽器窗口 _parent：父框架頁或窗門中。如果包含鏈接的框架不是嵌套的，則鏈接的目標文件加載到整個瀏覽器窗口中。 _self：所在的同一框架或窗口中 _top：整個瀏覽器窗口中，并刪除所有框架。2.2.5 使用超鏈接【例】使用A標記創(chuàng)建超鏈接

19、。輸入下列內容，以a.HTM作為文件名保存：FONT FACE=創(chuàng)建超鏈接下面是超鏈接示例內大 內蒙古大學2.2.5 使用超鏈接2. 創(chuàng)建錨點鏈接 錨點鏈接的目標端點是網頁中的一個位置。創(chuàng)建錨點鏈接時，要在頁面的某處設置一個位置標記（錨點），并給該位置指定一個名稱，以便在同一頁面或其他頁面中引用。3. 創(chuàng)建郵件鏈接 通過郵件鏈接(E-mail鏈接)可以啟動電子郵件客戶端程序（如Outlook或FoxMail等），并允許訪問者向指定的地址發(fā)送郵件。 該標記的HREF屬性應由3個部分組成：第1部分是電子郵件協(xié)議名稱mailto。第2部分是電子郵件地址。第3部分是可選的郵件主題，其形式為“subje

20、ct=主題”。第1部分與第2部分之間用冒號( : )分隔，第2部分與第3部分之間用問號(?)分隔。2.1.6 表單及其控件標記 1. 表單標記 FORM標記具有以下屬性： NAME=表單的名稱。命名表單后，可以使用腳本語言來引用或控制該表單。 METHOD=表單數(shù)據(jù)傳輸?shù)椒掌鞯姆椒?其取值如下： post：在HTTP請求中嵌入表單數(shù)據(jù) get：將表單數(shù)據(jù)附加到請求該頁的URL中 2.1.6 表單及其控件標記ACTION=接收表單數(shù)據(jù)的服務器端程序或動態(tài)網頁的URL地址。TARGET=目標窗口 其取值如下： _Blank：在未命名的新窗口中打開目標文檔。 _parent：在顯示當前文檔的窗口的

21、父窗口中打開目標文檔。 _self：在提交表單所使用的窗口中打開目標文檔。 _top：在當前窗口內打開目標文檔，確保目標文檔占用整個窗門。2.1.6 表單及其控件標記 (1) 單行文本框創(chuàng)建單行文本框方法如下： 屬性NAME=單行文本框的名稱，通過它可以在腳本中引用該文本框控件。VALUE=文本框的值DEFAULTVALUE=文本框的初始值SIZE=文本框的寬度(字符數(shù))MAXLENGTH=允許在文本框內輸入的最大字符數(shù)Readonly=只讀2.1.6 表單及其控件標記 (2) 密碼文本框 密碼文本框也是一個單行文本框。當站點訪問者在這個框中鍵入數(shù)據(jù)時，大部分的Web瀏覽器都會以星號顯示密碼以

22、不讓別人看到輸入內容。 (type=“password”)(3) 隱藏域 表單中添加隱藏域站點訪問者不能看見隱藏域的信息，每一個隱藏域都要有自己的名稱和值。當提交表單時，隱藏域的名稱和值就會與可見表單域的名稱和值一起包含在表單結果中。(type=“hidden”) 2.1.6 表單及其控件標記 (4) 復選框 表單中添加復選框可以讓站點訪問者去選擇一個或多個選項或不選項。創(chuàng)建復選框方法如下： 選項文本 屬性 NAME=復選框的名稱 VALUE=選中時提交的值 CHECKED：當?shù)谝淮未蜷_表單時該復選框處于選中狀態(tài)。該復選框被選中，值為true，否則為false。該屬性是可選的。 2.1.6 表

23、單及其控件標記(5) 單選按鈕表單中添加單選按鈕可以讓站點訪問者從一組選項中選擇其中之一創(chuàng)建單選按鈕方法如下：選項文本其中：NAME=單選按鈕的名稱，若干個名稱相同的單選按鈕構成一個控件組，在該組中只能選中一個選項。VALUE=提交時的值CHECKED：當?shù)谝淮未蜷_表單時該單選按鈕處于選中狀態(tài)。該屬性是可選的。例如:2.1.6 表單及其控件標記 (6) 按鈕 使用INPUT標記可以在表單中添加3種類型的按鈕：提交按鈕、重置按鈕和自定義按鈕。創(chuàng)建按鈕的方法如下： 屬性 TYPE= submit：創(chuàng)建一個提交按鈕。在表單中添加提交按鈕后，站點訪問者就可以在提交表單時，表單數(shù)據(jù)（包括提交按鈕的名稱和

24、值）以ASCII文本形式傳送到由表單的ACTION屬性指定的表單處理程序。 TYPE=reset：創(chuàng)建一個重置按鈕。單擊該按鈕時，將刪除任何已經輸入到域中的文本并清除所做的任何選擇。 TYPE=button：創(chuàng)建一個自定義按鈕。在表單中添加自定義按鈕時，為了賦予按鈕某種操作，必須為按鈕編寫腳本。 NAME=按鈕的名稱 VALUE=顯示在按鈕上的標題文本2.1.6 表單及其控件標記【例】創(chuàng)建一個登錄表單，其中包含有文本框、密碼框、自定義按鈕。輸入下列內容，以input.HTM作為文件名保存：創(chuàng)建登錄表單登錄名：密碼：2.1.6 表單及其控件標記 (7) 文件域 文件域由一個文本框和一個“瀏覽”按

25、鈕組成，用戶既可以在文本框中輸入文件的路徑和文件名，也可以通過單擊“瀏覽”按鈕從磁盤上查找和選擇所需文件。創(chuàng)建文件域方法如下： 其中： NAME=文件域的名稱 VALUE=文件名 SIZE=文件名輸入框的寬度2.1.6 表單及其控件標記【例】創(chuàng)建一個表單，其中包含文件域、提交按鈕和重置按鈕。輸入下列內容，以input2.HTM作為文件名保存：文件域請選擇文件：2.1.6 表單及其控件標記(8) 圖像提交按鈕 圖像提交按鈕與提交按鈕在表單中的區(qū)別僅僅是提交按鈕上用圖像代替按鈕文本標題。圖像提交按鈕使用INPUT標記來創(chuàng)建方法如下： 其中： SRC=所用圖像的URL地址 VALUE=提供圖像的替換

26、文本其他同提交按鈕。 2.1.6 表單及其控件標記3. 其他表單控件(1) 滾動文本框 表單中添加滾動文本框可以接受站點訪問者輸入多于一行的文本。創(chuàng)建滾動文本框方法如下： 初始值其中： NAME=滾動文本框控件的名稱 ROWS=控件的高度（以行為單位） COLS=控件的寬度（以字符為單位） READONLY：滾動文本框的內容不被用戶修改 創(chuàng)建滾動文本框時，在和標記之間輸入的文本將作為該控件的初始值。2.1.6 表單及其控件標記(2) 選項選單 表單中選項選單讓站點訪問者從列表或選單中選擇選項。選單中可以選擇一個選項，也可以設置為容許作多重選擇。創(chuàng)建選項選單方法如下： 選項1 選項2 其中：NAME=選項選單控件的名稱SIZE=在列表中一次可以看到的選項數(shù)目（默認為1）MULTIPLE：允許作多項選擇SELECTED=該選項的初始狀態(tài)為選中。當提交表單時，選單的名稱會被包含至表單結果中，其后并有一份所有選項值的列表。2.1.6 表單及其控件標記2.1.7 多框架文檔 框架網頁通過一個FRMAESET(框架集)標記和多個FRAME(框架)