1、ASP.NET WebASP.NET Web程序設計程序設計 2HTMLHTML和和JavaScriptJavaScript 第章本章內容本章內容2.1 HTML 2.1 HTML 2.2 JavaScript2.2 JavaScript 2.3 2.3 案例：使用案例：使用HTMLHTML和和JavaScriptJavaScript實現(xiàn)實現(xiàn)表單注冊表單注冊 2.4 2.4 習題習題 2.1 HTMLv HTML是一種用來制作超文本文檔的簡單標記語言，是一種用來制作超文本文檔的簡單標記語言，v Web瀏覽器能夠自動解釋超文本文件并且按照一定的格式瀏覽器能夠自動解釋超文本文件并且按照一定的格式顯

2、示出來。顯示出來。 v 只能實現(xiàn)靜態(tài)頁面的設計。只能實現(xiàn)靜態(tài)頁面的設計。v 2.1.1 HTML基本語法基本語法 v 2.1.2 文字段落標記文字段落標記 v 2.1.3 圖像標記圖像標記 v 2.1.4 超級鏈接標記超級鏈接標記 v 2.1.5 表格標記表格標記 v 2.1.6 表單與控件表單與控件 v 2.1.7 框架的使用框架的使用 v HTML文件擴展名是文件擴展名是.html或或.htm，它們是可供瀏覽器解，它們是可供瀏覽器解釋瀏覽的文件格式。釋瀏覽的文件格式。 v HTML語言使用標記編寫文件，標記符必須用語言使用標記編寫文件，標記符必須用“”括起來，一般以括起來，一般以“”開始，

3、以開始，以“”結束，結束，即成對的使用標記，也稱之為雙標記。即成對的使用標記，也稱之為雙標記。v HTML的標記是不區(qū)分大小寫的。的標記是不區(qū)分大小寫的。 2.1.1 HTML基本語法基本語法 文檔內容文檔內容/ 2 文檔內容文檔內容/ 例如：例如：2.1.1 HTML基本語法基本語法 重點內容重點內容我的第一個網頁我的第一個網頁表格的內容表格的內容表示文字表示文字“重點內容重點內容”用帶下劃線的樣式顯示用帶下劃線的樣式顯示 表示當前頁面的標題為表示當前頁面的標題為“我的第一個網頁我的第一個網頁” 表示在瀏覽器上顯示一個表格，表格的邊框表示在瀏覽器上顯示一個表格，表格的邊框線粗細為線粗細為1

4、1，表格的寬度為，表格的寬度為300px 300px v 但也有些標記只需單獨使用就能完整的表達意思，稱之為但也有些標記只需單獨使用就能完整的表達意思，稱之為單標記。常用的單標記主要有換行標記單標記。常用的單標記主要有換行標記、水平線標記、水平線標記等。等。2.1.1 HTML基本語法基本語法 2 v HTML文檔分文檔頭和文檔體兩部分，在文檔頭里，對這文檔分文檔頭和文檔體兩部分，在文檔頭里，對這個文檔進行了一些必要的定義，文檔體中才是要顯示的各個文檔進行了一些必要的定義，文檔體中才是要顯示的各種文檔信息。一個完整的種文檔信息。一個完整的HTML文件的基本格式如下：文件的基本格式如下： 2.1

5、.1 HTML基本語法基本語法 網頁的標題網頁的標題 文檔主體，正文部分文檔主體，正文部分 2.1.1 HTML基本語法基本語法 例例2-1 創(chuàng)建一個簡單的創(chuàng)建一個簡單的HTMLHTML網頁文件網頁文件 meta http-equiv=Content-Type content=text/html;charset=gb2312創(chuàng)建一個創(chuàng)建一個HTMLHTML網頁文件網頁文件body background=backimage.jpg text=red leftmargin=50px topmargin=20px 我喜歡學習我喜歡學習HTMLHTML！例例2-1 創(chuàng)建一個簡單的創(chuàng)建一個簡單的HTML

6、HTML網頁文件網頁文件 步驟如下：步驟如下：1) 1) 新建一個記事本文件，并輸入如上新建一個記事本文件，并輸入如上HTMLHTML語句。語句。2) 2) 執(zhí)行記事本執(zhí)行記事本“文件文件”菜單下的菜單下的“另存另存為為”命令，將命令，將“保存類型保存類型”設置為設置為“所所有文件有文件”，將文件的擴展名改為，將文件的擴展名改為.htm.htm或或.html.html。單擊。單擊“保存保存”按鈕。按鈕。3) 3) 打開保存成功的打開保存成功的.htm.htm文件，即可以看文件，即可以看到瀏覽器中頁面的顯示效果。到瀏覽器中頁面的顯示效果。 2.1.1 HTML基本語法基本語法 例例2-1 運行效

7、果運行效果 2.1.1 HTML基本語法基本語法 1. 文字樣式標記：包括文字的字體、字號和顏色，一般使用文字樣式標記：包括文字的字體、字號和顏色，一般使用標記來實現(xiàn)。具體格式如下：標記來實現(xiàn)。具體格式如下：2.1.2 文字段落標記文字段落標記 font size= 文字內容文字內容 v “size”表示字號，表示字號，“數字數字”表示字號的大小，最大為表示字號的大小，最大為7，最小為最小為1，默認字號為，默認字號為3。v “face”表示字體，默認字體為宋體。表示字體，默認字體為宋體。v “color”表示文字的顏色，默認顏色為黑色。表示文字的顏色，默認顏色為黑色。 HTML常用顏色設置值常

8、用顏色設置值 2.1.2 文字段落標記文字段落標記 顏色顏色英文名英文名RRGGBB顏色顏色英文名英文名RRGGBB黑色黑色Black#000000橙色橙色Orange#FFA500銀色銀色Silver#C0C0C0淺綠色淺綠色Aqua#00FFFF灰色灰色Gray#808080深藍色深藍色Navy#000080粉色粉色Pink#FFC8CB黃色黃色Yellow#FFFF00紅色紅色Red#FF0000綠色綠色Green#008000紫色紫色Purple#FF00FF橄欖色橄欖色olive#8080002. 字型標記：字型標記：HTML中字型標記有很多，常用的字型標記可中字型標記有很多，常用的

9、字型標記可參見下表參見下表2.1.2 文字段落標記文字段落標記 首標記首標記尾標記尾標記含義含義首標記首標記尾標記尾標記含義含義加粗加粗斜體斜體加下劃線加下劃線加刪除線加刪除線縮小縮小放大放大上標上標下標下標特別強調特別強調顯示郵件地顯示郵件地址址3. 段落標記有兩種，分別是換段標記段落標記有兩種，分別是換段標記和換行標記和換行標記。其中。其中屬于單標記。屬于單標記。2.1.2 文字段落標記文字段落標記 p align= 段落內容段落內容 v align指段落的對齊方式，取值為：指段落的對齊方式，取值為：Left(左對齊，默認左對齊，默認)、Center(居中居中)和和Right(右對齊右對齊

10、)三個值中的任何一個。三個值中的任何一個。 靜夜思靜夜思床前明月光，疑是地上霜。舉頭望明月，低頭思故鄉(xiāng)。床前明月光，疑是地上霜。舉頭望明月，低頭思故鄉(xiāng)。2.1.2 文字段落標記文字段落標記 v 當需要結束一行，并且不想開始新段落時，使用當需要結束一行，并且不想開始新段落時，使用標標記。記。標記不管放在什么位置，都能夠強制換行。標記不管放在什么位置，都能夠強制換行。v 一個一個標記可以看成是兩個換行標記標記可以看成是兩個換行標記。靜夜思靜夜思床前明月光，疑是地上霜。床前明月光，疑是地上霜。舉頭望明月，低頭思故鄉(xiāng)。舉頭望明月，低頭思故鄉(xiāng)。4. 水平線標記：單標記水平線標記：單標記表示在文檔當前位置

11、畫一條水平表示在文檔當前位置畫一條水平線，一般從窗口中當前行的最左端一直畫到最右端；其線，一般從窗口中當前行的最左端一直畫到最右端；其格式為：格式為：2.1.2 文字段落標記文字段落標記 hr size=noshade v size屬性設置水平線的粗細，默認值為屬性設置水平線的粗細，默認值為1；v color屬性設置水平線的顏色；屬性設置水平線的顏色；v width屬性設定水平線的長度，默認值是屬性設定水平線的長度，默認值是100%；v align屬性表示對齊方式；屬性表示對齊方式；v noshade屬性不用賦值，而是直接加入標志即可使用，屬性不用賦值，而是直接加入標志即可使用，它是用來加入一

12、條沒有陰影的水平線。它是用來加入一條沒有陰影的水平線。2.1.2 文字段落標記文字段落標記 5. 標題標記標題標記：其中：其中n為標題的等級，為標題的等級，HTML總共提供六總共提供六個等級的標題，個等級的標題，n越小，標題字號就越大。越小，標題字號就越大。這是一行普通文字這是一行普通文字用用1 1級標題樣式顯示文字級標題樣式顯示文字用用2 2級標題樣式顯示文字級標題樣式顯示文字用用3 3級標題樣式顯示文字級標題樣式顯示文字用用4 4級標題樣式顯示文字級標題樣式顯示文字用用5 5級標題樣式顯示文字級標題樣式顯示文字用用6 6級標題樣式顯示文字級標題樣式顯示文字演示演示 運行效果運行效果 2.1

13、.2 文字段落標記文字段落標記 例例2-2 文字段落標記的使用文字段落標記的使用 文字段落標記的使用文字段落標記的使用 第一章第一章 詩詞歌賦詩詞歌賦 第一節(jié)第一節(jié) 宋詞宋詞 作品原文作品原文 2.1.2 文字段落標記文字段落標記 2.1.2 文字段落標記文字段落標記 font size=5 face= _GB2312 color=green水調歌頭水調歌頭··明月幾時有明月幾時有 丙辰中秋，歡飲達旦丙辰中秋，歡飲達旦11，大醉，作，大醉，作此篇，兼懷子由。此篇，兼懷子由。 明月幾時有？把酒問青天。明月幾時有？把酒問青天。不知天不知天上宮闕，今夕是何

14、年。上宮闕，今夕是何年。我欲乘風歸去，又恐瓊樓玉宇，高處不勝寒。我欲乘風歸去，又恐瓊樓玉宇，高處不勝寒。起舞弄清影，何似在人間。起舞弄清影，何似在人間。 轉朱閣，低綺戶，照無眠。轉朱閣，低綺戶，照無眠。不應有恨，不應有恨，何事長向別時圓？何事長向別時圓？人有悲歡離合，月有陰晴圓缺，此事古難全。人有悲歡離合，月有陰晴圓缺，此事古難全。但愿人長久，千里共嬋娟。但愿人長久，千里共嬋娟。 注釋：注釋： 2.1.2 文字段落標記文字段落標記 11達旦：至早晨；到清晨。達旦：至早晨；到清晨。如有學習上的問題，請聯(lián)系如有學習上的問題，請聯(lián)系例例2-2 運行效果運行效果2.1.2 文字段落標記文字段落標記 2

15、.1.3 圖像標記圖像標記 v 如果希望將一幅圖片插入到網頁中，可以使用圖片標記如果希望將一幅圖片插入到網頁中，可以使用圖片標記。圖片標記是一個單標記。其基本格式為：。圖片標記是一個單標記。其基本格式為：img src=img src=圖片文件名圖片文件名 alt=alt=簡要說明簡要說明 width=width=圖片的寬度圖片的寬度 height=height=圖片的高度圖片的高度 border=border=邊框寬度邊框寬度 hspace=hspace=水平方向水平方向空白空白 vspace=vspace=垂直方向空白垂直方向空白/ / 2.1.3 圖像標記圖像標記 v 例如：下面是一段在

16、頁面中插入圖片的代碼。代碼中用例如：下面是一段在頁面中插入圖片的代碼。代碼中用到了到了標記和標記和標記來設置圖片水平方向的對標記來設置圖片水平方向的對齊方式。齊方式。 插入圖片插入圖片img src=1.jpg width=200 height=190 alt=1border=1/img src=2.jpg width=182 height=194 alt=2/演示演示 運行效果運行效果 2.1.3 圖像標記圖像標記 2.1.4 超級鏈接標記超級鏈接標記 v 超鏈接是指從一個網頁指向一個目標的連接關系。它包超鏈接是指從一個網頁指向一個目標的連接關系。它包含兩部分內容：含兩部分內容：鏈接目標可以

17、是另一個網頁，也可以是相同網頁上的不同鏈接目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一個電子郵件地址。位置，還可以是一個電子郵件地址。超鏈接的對象，可以是一段文本或者是一個圖片。超鏈接的對象，可以是一段文本或者是一個圖片。 1. 文字鏈接：指的是超鏈接的對象是一段文本，跳轉的目標文字鏈接：指的是超鏈接的對象是一段文本，跳轉的目標是當前網站的另外一個網頁或者另一個網站的網址。其是當前網站的另外一個網頁或者另一個網站的網址。其格式為：格式為： a href=url target= 熱點文本熱點文本 v href：是超鏈接引用，：是超鏈接引用，url為鏈接要轉到的目標網頁。為鏈接要

18、轉到的目標網頁。v target：定義鏈接到目標資源時，打開窗口的方式。：定義鏈接到目標資源時，打開窗口的方式。 2.1.4 超級鏈接標記超級鏈接標記 v 對于超鏈接的文字的顏色也可以通過一些屬性來設置，對于超鏈接的文字的顏色也可以通過一些屬性來設置，具體為：具體為：link：表示尚未被訪問過的超鏈接的顏色，默認為藍色。：表示尚未被訪問過的超鏈接的顏色，默認為藍色。vlink：表示曾經訪問過的超鏈接的顏色，默認為棕紅色。：表示曾經訪問過的超鏈接的顏色，默認為棕紅色。alink：表示超文本鏈接被訪問瞬間的顏色，默認為藍色。：表示超文本鏈接被訪問瞬間的顏色，默認為藍色。2.1.4 超級鏈接標記超級

19、鏈接標記 首頁首頁 百度百度 2. 圖像鏈接：如果希望使用圖片作為超鏈接的對象，格式圖像鏈接：如果希望使用圖片作為超鏈接的對象，格式為：為： a href=url target= v url：點擊鏈接后要轉到的目標網頁。：點擊鏈接后要轉到的目標網頁。v target：打開窗口的方式。：打開窗口的方式。v scr:：包括路徑在內的圖片的文件名。：包括路徑在內的圖片的文件名。 2.1.4 超級鏈接標記超級鏈接標記 3. 電子郵件鏈接的格式為：電子郵件鏈接的格式為： 文字文字 v email：為接收郵件的郵箱：為接收郵件的郵箱 。2.1.4 超級鏈接標記超級鏈接標記 聯(lián)系我們聯(lián)系我們 4. 錨點鏈接

20、：如果一個頁面的內容過多，導致頁面過長，錨點鏈接：如果一個頁面的內容過多，導致頁面過長，用戶需要不停地拖動滾動條來查看文檔中的內容，為了用戶需要不停地拖動滾動條來查看文檔中的內容，為了方便用戶閱讀過長的頁面內容，可以使用錨點鏈接。方便用戶閱讀過長的頁面內容，可以使用錨點鏈接。a name=” 文字文字 v name屬性用來創(chuàng)建一個命名的錨。屬性用來創(chuàng)建一個命名的錨。v 錨名相當于文章中的一個標記。錨名相當于文章中的一個標記。 2.1.4 超級鏈接標記超級鏈接標記 a href=” # 文字文字 v 錨點創(chuàng)建好后，就可以在其他位置進行超鏈接了。如果錨點創(chuàng)建好后，就可以在其他位置進行超鏈接了。如果

21、超鏈接到本文檔的錨點，格式為：超鏈接到本文檔的錨點，格式為： 2.1.4 超級鏈接標記超級鏈接標記 v 如果超鏈接到其他頁面的錨點，格式為：如果超鏈接到其他頁面的錨點，格式為：a href=” 文字文字 table border=value bordercolor=value width=value caption align= 標題標題表頭表頭11表頭表頭22表頭表頭33表頭表頭nn表項表項11表項表項22表項表項33表項表項nn表項表項11表項表項22表項表項33表項表項nnv 在在HTML網頁中，表格一般由網頁中，表格一般由標記開始，以標記開始，以標記結束。表的內容由標記結束。表的內容由

22、、組成。具體格式如下：組成。具體格式如下：2.1.4 表格標記表格標記 v border：定義表格邊框線的寬度，單位為象素。若省略：定義表格邊框線的寬度，單位為象素。若省略則表格沒有邊框。則表格沒有邊框。v bordercolor：定義表格邊框線的顏色值。：定義表格邊框線的顏色值。 v width：定義表格的寬度，單位為象素或百分比。：定義表格的寬度，單位為象素或百分比。v height：定義表格的高度，單位為像素或百分比，單位：定義表格的高度，單位為像素或百分比，單位為百分比時與為百分比時與width相同。相同。v cellspacing：定義單元格與單元格之間的間距，單位為：定義單元格與單

23、元格之間的間距，單位為像素。像素。v cellpadding：定義單元格內容與邊框之間的間距，單位：定義單元格內容與邊框之間的間距，單位為像素。為像素。v align：定義表格的水平對齊方式，其值可為：定義表格的水平對齊方式，其值可為left、center、right。默認值為。默認值為center。2.1.4 表格標記表格標記 例例2-3 在在HTMLHTML中插入一個表格中插入一個表格 插入一個表格插入一個表格table border=1px bordercolor=black width=400px cellspacing=1px cellpadding=3px align=center

24、表格示例表格示例2.1.4 表格標記表格標記 例例2-3 在在HTMLHTML中插入一個表格中插入一個表格 橫向通欄示例橫向通欄示例縱向通欄示例縱向通欄示例格式單詞格式單詞含義含義widthwidth寬度寬度heightheight高度高度 2.1.4 表格標記表格標記 例例2-3 運行效果運行效果 2.1.4 表格標記表格標記 v 表單的基本語法格式為：表單的基本語法格式為：2.1.6 表單與控件表單與控件 form name= v name：設置表單的名稱。：設置表單的名稱。v action：設置表單的處理方式，通常為一個：設置表單的處理方式，通常為一個URL，指出處，指出處理表單數據的程

25、序文件名（包括網絡路徑、網址或相對路理表單數據的程序文件名（包括網絡路徑、網址或相對路徑），也可以為一個電子郵件地址。徑），也可以為一個電子郵件地址。v method：提交表單的方法，有：提交表單的方法，有GET和和POST兩種。兩種。 在在HTML中，常用表單控件主要有：中，常用表單控件主要有：1. 文本框：一種讓用戶自己輸入內容的表單控件，通常被用文本框：一種讓用戶自己輸入內容的表單控件，通常被用來填寫簡短的字符，如姓名、地址等。其格式為：來填寫簡短的字符，如姓名、地址等。其格式為： 2.1.6 表單與控件表單與控件 input type=text name=input type=text

26、 name=名稱名稱 size=size=寬度寬度 maxlength=maxlength=字符數字符數 value=value=初始值初始值 v type=text：定義控件類型為單行文本框。：定義控件類型為單行文本框。v name：定義文本框的名稱，是唯一的。：定義文本框的名稱，是唯一的。v size：定義文本框的寬度，以單個字符為單位。：定義文本框的寬度，以單個字符為單位。v maxlength：定義允許輸入的最大字符數。：定義允許輸入的最大字符數。v value：定義文本框的初始值，為可選屬性。：定義文本框的初始值，為可選屬性。 2. 密碼框：一種特殊的文本框，用于輸入密碼。當用戶輸入

27、密碼框：一種特殊的文本框，用于輸入密碼。當用戶輸入文字時，文字會被星號或其他符號代替，而輸入的文字文字時，文字會被星號或其他符號代替，而輸入的文字會被隱藏。其格式為：會被隱藏。其格式為： 2.1.6 表單與控件表單與控件 input type=password name=input type=password name=名稱名稱 size=size=寬度寬度maxlength=maxlength=字符數字符數 value=value=初始值初始值 v type=password定義控件類型為密碼框，其他屬性含義定義控件類型為密碼框，其他屬性含義同文本框。例如：同文本框。例如： 3. 復選框：允

28、許在待選項中選中一項以上的選項。每個復選復選框：允許在待選項中選中一項以上的選項。每個復選框都是一個獨立的元素，都必須有一個唯一的名稱。其框都是一個獨立的元素，都必須有一個唯一的名稱。其格式為：格式為： 2.1.6 表單與控件表單與控件 input type=checkbox name=input type=checkbox name=名稱名稱 v type= checkbox：定義控件類型為復選框。：定義控件類型為復選框。v name：定義復選框的名稱，名稱唯一。：定義復選框的名稱，名稱唯一。 4. 單選框：是指在待選答案中只能選中一項而且必須選中一單選框：是指在待選答案中只能選中一項而且必

29、須選中一項。其格式為：項。其格式為： 2.1.6 表單與控件表單與控件 input type=radio name=input type=radio name=名稱名稱 checkedchecked v type=radio：定義控件類型為單選框。：定義控件類型為單選框。v name：定義單選框的名稱。：定義單選框的名稱。v checked：定義單選框的選中狀態(tài)，不需要設置值。：定義單選框的選中狀態(tài)，不需要設置值。input type=radio name=checked 男男 input 女女 5. 文件上傳控件：文件上傳控件和文本框差不多，只是還包文件上傳控件：文件上傳控件和文本框差不多，

30、只是還包含了一個瀏覽按鈕。用戶可以通過在文本框輸入或者點含了一個瀏覽按鈕。用戶可以通過在文本框輸入或者點擊瀏覽按鈕選擇需要上傳的文件。其格式為：擊瀏覽按鈕選擇需要上傳的文件。其格式為：2.1.6 表單與控件表單與控件 input type=file name=input type=file name=名稱名稱 size=size=寬度寬度maxlength=maxlength=字符數字符數 v type=file定義控件類型為文件上傳控件，其它屬性含義與定義控件類型為文件上傳控件，其它屬性含義與單行文本框相同。單行文本框相同。 6. 提交按鈕：是用來將輸入的信息提交到服務器。其代碼格提交按鈕：

31、是用來將輸入的信息提交到服務器。其代碼格式為：式為： 2.1.6 表單與控件表單與控件 input type=submit name= v type=submit：定義控件類型為提交按鈕。：定義控件類型為提交按鈕。v name：定義提交按鈕的名稱。：定義提交按鈕的名稱。v value：定義按鈕的顯示文字。：定義按鈕的顯示文字。input type=submit value= 7. 重置按鈕：也叫復位按鈕，用來重置表單。其代碼格式為重置按鈕：也叫復位按鈕，用來重置表單。其代碼格式為：2.1.6 表單與控件表單與控件 input type=reset name= v type=reset定義控件類

32、型為重置按鈕。其它屬性含義與提定義控件類型為重置按鈕。其它屬性含義與提交按鈕相同。交按鈕相同。input type=reset value= 8. 一般按鈕：用來控制其他定義了處理腳本的處理工作。其一般按鈕：用來控制其他定義了處理腳本的處理工作。其代碼格式為：代碼格式為： 2.1.6 表單與控件表單與控件 input type=button name=input type=button name=名稱名稱value=value=文字文字 v type=button定義了控件類型為一般按鈕，其他屬性含義定義了控件類型為一般按鈕，其他屬性含義與提交按鈕相同。與提交按鈕相同。 9. 下拉列表框：允許

33、在一個有限的空間內設置多種選項。其下拉列表框：允許在一個有限的空間內設置多種選項。其代碼格式為：代碼格式為： 2.1.6 表單與控件表單與控件 select name=multiple 選項一選項一 選項二選項二 選項三選項三2.1.6 表單與控件表單與控件 v name：定義下拉列表框的名稱。：定義下拉列表框的名稱。v size：定義同時顯示在菜單中的選項條數，如果沒有該屬：定義同時顯示在菜單中的選項條數，如果沒有該屬性，則缺省為性，則缺省為1。v multiple：定義是否允許用戶一次選多個選項，缺省為一：定義是否允許用戶一次選多個選項，缺省為一次只能選一項。次只能選一項。v 可帶屬性可帶

34、屬性selected，表示該項已預選。，表示該項已預選。 上海上海 天津天津 北京北京10. 多行文本框：是一種讓用戶自己輸入內容的表單控件，多行文本框：是一種讓用戶自己輸入內容的表單控件，只不過能讓用戶輸入較長的內容。其代碼格式為：只不過能讓用戶輸入較長的內容。其代碼格式為： 2.1.6 表單與控件表單與控件 textarea name= . . v name：定義多行文本框的名稱。：定義多行文本框的名稱。v rows：定義多行文本框的行數。：定義多行文本框的行數。v Cols：定義多行文本框的列數。：定義多行文本框的列數。 例例2-4 表單與控件的使用：運行效果表單與控件的使用：運行效果

35、2.1.6 表單與控件表單與控件 2.1.7 框架的使用框架的使用 v框架框架也可以稱之為窗口，可以把瀏覽器窗口切割成若干個也可以稱之為窗口，可以把瀏覽器窗口切割成若干個獨立的窗口，每個窗口可以顯示不同的網頁，使用框架網獨立的窗口，每個窗口可以顯示不同的網頁，使用框架網頁的最主要的目的是創(chuàng)建鏈接的結構。頁的最主要的目的是創(chuàng)建鏈接的結構。 v 設計網頁的框架結構，使用設計網頁的框架結構，使用標記和標記和標記。其基本結構為：標記。其基本結構為： 2.1.7 框架的使用框架的使用 1. 框架集標記框架集標記v 框架集用于定義窗口的分割方式。它是一對雙標記，有兩框架集用于定義窗口的分割方式。它是一對雙

36、標記，有兩個常用屬性：個常用屬性：cols和和rows。v cols是把頁面縱向分割成若干個窗口。是把頁面縱向分割成若干個窗口。v rows是把頁面橫向分割成幾個窗口。是把頁面橫向分割成幾個窗口。v 主要的分割方式有三種：主要的分割方式有三種： 縱向分割縱向分割 橫向分割橫向分割 嵌套分割嵌套分割2.1.7 框架的使用框架的使用 2. 框架標記框架標記v 框架標記是單標記，用來指定在每一個窗口要打開的文件框架標記是單標記，用來指定在每一個窗口要打開的文件。把頁面分割成窗口后，若沒有使用。把頁面分割成窗口后，若沒有使用，則窗口顯，則窗口顯示為空。示為空。常和常和配合使用。其代碼格配合使用。其代碼

37、格式為：式為：frame src= scrolling=OPTION noresize 例例2-5 主頁中的主頁中的HTMLHTML代碼為：代碼為： 2.1.7 框架的使用框架的使用 frameset cols=200,例例2-5 lianjie.html lianjie.html文件中的代碼為：文件中的代碼為： 2.1.7 框架的使用框架的使用 a href=http:/ target=right沈陽師范大學沈陽師范大學a href=http:/ target=right吉林大學吉林大學 a href=http:/ target=right北京大學北京大學 例例2-5 top.htmtop.

38、htm文件中的代碼為：文件中的代碼為： 2.1.7 框架的使用框架的使用 font size=7 face=color=fuchsia歡迎光臨歡迎光臨例例2-5 bottom.htmbottom.htm文件中的代碼為：文件中的代碼為： 2.1.7 框架的使用框架的使用 謝謝光臨謝謝光臨例例2-5 運行效果運行效果 2.1.7 框架的使用框架的使用 2.1.7 框架的使用框架的使用 3. 不支持不支持框架標記框架標記v 早期版本的瀏覽器不支持框架結構，使用早期版本的瀏覽器不支持框架結構，使用 標標記可以使當瀏覽器不能加載框架時，會顯示記可以使當瀏覽器不能加載框架時，會顯示noframe 標標記中

39、的內容。例如：記中的內容。例如： framset cols=20%,frame src=b.html scrolling=AUTO對不起！您的瀏覽器不支持框架頁面顯對不起！您的瀏覽器不支持框架頁面顯示！示！2.1.7 框架的使用框架的使用 4. 浮動浮動框架框架v 又叫浮動窗口，可以用它將一個又叫浮動窗口，可以用它將一個HTML文檔嵌入在一個文檔嵌入在一個HTML中顯示。如同中顯示。如同“畫中畫畫中畫”電視。其格式為：電視。其格式為：iframe src=URL width=x height=y 2.1.7 框架的使用框架的使用 v 例如：將例如：將HTML文檔文檔shi.htm在另一在另一H

40、TML文檔文檔index.htm中顯示出來。中顯示出來。 首先創(chuàng)建首先創(chuàng)建shi.htm頁面的代碼：頁面的代碼： 靜夜思靜夜思 靜夜思靜夜思 床前明月光，疑床前明月光，疑是地上霜。是地上霜。舉頭望明月，低頭思故舉頭望明月，低頭思故鄉(xiāng)。鄉(xiāng)。演示演示 shi.htmshi.htm頁面效果頁面效果 2.1.7 框架的使用框架的使用 2.1.7 框架的使用框架的使用 v 然后創(chuàng)建然后創(chuàng)建index.htm頁面的代碼：頁面的代碼：浮動窗口浮動窗口 演示演示 index.htm index.htm頁面的浮動窗口效果頁面的浮動窗口效果 2.1.7 框架的使用框架的使用 2.2 JavaScriptv Jav

41、aScript 可以讓靜態(tài)的可以讓靜態(tài)的HTML網頁實現(xiàn)動態(tài)的效果，常網頁實現(xiàn)動態(tài)的效果，常用來實現(xiàn)表單驗證、創(chuàng)建用來實現(xiàn)表單驗證、創(chuàng)建cookies、記錄用戶狀態(tài)等功能。、記錄用戶狀態(tài)等功能。 v 2.2.1 概述概述 v 2.2.2 在網頁中使用在網頁中使用JavaScript v 2.2.3 瀏覽器對象瀏覽器對象 v 2.2.4 JavaSript在前端的應用在前端的應用 2.2.1 概述概述 v JavaScript的特點的特點 ： JavaScript是一種腳本編寫語言。是一種腳本編寫語言。 JavaScript是一種基于對象和事件驅動的程序語言。是一種基于對象和事件驅動的程序語言。

42、 JavaScript語法簡單，結構松散。語法簡單，結構松散。 JavaScript是一種具有安全性能的腳本語言。是一種具有安全性能的腳本語言。 JavaScript具有跨平臺性。具有跨平臺性。 2.2.1 概述概述 v JavaScript和和Java主要區(qū)別體現(xiàn)在以下幾個方面：主要區(qū)別體現(xiàn)在以下幾個方面： Java是一種真正的面向對象的編程語言；而是一種真正的面向對象的編程語言；而JavaScript 是是一種基于對象和事件驅動的腳本語言。一種基于對象和事件驅動的腳本語言。 Java是傳統(tǒng)的編程語言，其源代碼在執(zhí)行之前必須經過編是傳統(tǒng)的編程語言，其源代碼在執(zhí)行之前必須經過編譯；而譯；而Ja

43、vaScript是一種解釋性編程語言，其源代碼在執(zhí)是一種解釋性編程語言，其源代碼在執(zhí)行之前不需要經過編譯。行之前不需要經過編譯。 Java采用強類型變量檢查；而采用強類型變量檢查；而JavaScript中的變量聲明采中的變量聲明采用弱變量類型。用弱變量類型。 Java不能直接嵌入到網頁中運行，只能編寫出一個名為不能直接嵌入到網頁中運行，只能編寫出一個名為applet的獨立于的獨立于HTML的文件，由的文件，由HTML調用；調用；JavaScript可以直接嵌入到可以直接嵌入到HTML文檔中，并且可以動態(tài)的裝載。文檔中，并且可以動態(tài)的裝載。 Java多用于服務器端，多用于服務器端，JavaScr

44、ipt多用于客戶端。多用于客戶端。 JavaScript與與Java的語法結構不同。的語法結構不同。2.2.2 在網頁中使用在網頁中使用JavaScript JavaScript v 標記是一個通用標記，它表明包含的語句是作為標記是一個通用標記，它表明包含的語句是作為可執(zhí)行的腳本來解釋的，而不是可顯示的可執(zhí)行的腳本來解釋的，而不是可顯示的HTML文本，該文本，該標記被設計來容納瀏覽器支持的任何腳本語言。其基本格標記被設計來容納瀏覽器支持的任何腳本語言。其基本格式為：式為：script language= !-/-2.2.2 在網頁中使用在網頁中使用JavaScript JavaScript v

45、 根據腳本語句在根據腳本語句在HTML中出現(xiàn)的位置，可以分為三種情況中出現(xiàn)的位置，可以分為三種情況： 放在放在標記之間；標記之間； 放在放在標記之間標記之間 ； 放在外部文件放在外部文件 2.2.3 瀏覽器對象瀏覽器對象 1. window對象對象v window對象代表的是打開的瀏覽器窗口，是對象代表的是打開的瀏覽器窗口，是Web瀏覽器瀏覽器所有內容的主容器，它處于整個對象鏈結構的最高層。所有內容的主容器，它處于整個對象鏈結構的最高層。v window對象是其他對象的父對象。對象是其他對象的父對象。v 在調用在調用window對象的方法和屬性時，可以省略對象的方法和屬性時，可以省略windo

46、w對象的引用。對象的引用。2.2.3 瀏覽器對象瀏覽器對象 v Window對象的屬性和方法有很多，常用的屬性和方法對象的屬性和方法有很多，常用的屬性和方法有以下幾種：有以下幾種： status屬性屬性 ：用來顯示當前窗口狀態(tài)欄中的信息。：用來顯示當前窗口狀態(tài)欄中的信息。 open（）方法（）方法 ：使用：使用JavaScript創(chuàng)建新窗口創(chuàng)建新窗口 。close（）方法：關閉窗口（）方法：關閉窗口 。alert（）方法：生成一個對話框，在對話框中顯示傳給參數的（）方法：生成一個對話框，在對話框中顯示傳給參數的文本，并附以一個確定按鈕讓用戶關閉該對話框。文本，并附以一個確定按鈕讓用戶關閉該對話

47、框。 confirm（）方法：生成一個有兩個按鈕的對話框。（）方法：生成一個有兩個按鈕的對話框。 prompt（）方法：生成一種提示對話框，它顯示預先設置的文（）方法：生成一種提示對話框，它顯示預先設置的文本信息，并且提供一個文本域供用戶輸入應答。本信息，并且提供一個文本域供用戶輸入應答。settimeout（）和（）和cleartimeout（）方法（）方法 2.2.3 瀏覽器對象瀏覽器對象 2. location對象對象v location對象描述的是當前打開窗口對象或者特定框架對象描述的是當前打開窗口對象或者特定框架的地址。的地址。v 一個多框架的窗口對象在一個多框架的窗口對象在loca

48、tion屬性顯示的是父窗口屬性顯示的是父窗口的地址，同時，每個框架也有一個與之相伴的的地址，同時，每個框架也有一個與之相伴的location對象。對象。 v location對象的屬性都是可讀寫屬性，可以通過修改對象的屬性都是可讀寫屬性，可以通過修改location對象的屬性來加載另一個文檔。對象的屬性來加載另一個文檔。 2.2.3 瀏覽器對象瀏覽器對象 v 例如：大部分網站的首頁中都有例如：大部分網站的首頁中都有“友情鏈接友情鏈接”功能。此功能。此功能可通過功能可通過location對象的對象的href屬性來實現(xiàn)。代碼如下：屬性來實現(xiàn)。代碼如下： 友情鏈接友情鏈接function frili

49、nk()function frilink()location.href=document.form1.friend.value;location.href=document.form1.friend.value; 演示演示 友情鏈接友情鏈接- -頁面載入頁面載入 2.2.3 瀏覽器對象瀏覽器對象 演示演示 友情鏈接友情鏈接- -頁面跳轉頁面跳轉 2.2.3 瀏覽器對象瀏覽器對象 2.2.3 瀏覽器對象瀏覽器對象 3. document對象對象v document對象代表瀏覽器窗口中裝載的整個對象代表瀏覽器窗口中裝載的整個HTML文檔文檔，包含從，包含從到到的內容，被用來訪問一個頁的內容，被用來

50、訪問一個頁面上的所有元素。面上的所有元素。v 該對象是該對象是window對象的一個屬性，在引用時可以省略對象的一個屬性，在引用時可以省略window，在程序中直接引用，在程序中直接引用document對象。對象。2.2.3 瀏覽器對象瀏覽器對象 3. document對象對象v document對象代表瀏覽器窗口中裝載的整個對象代表瀏覽器窗口中裝載的整個HTML文檔文檔，包含從，包含從到到的內容，被用來訪問一個頁的內容，被用來訪問一個頁面上的所有元素。面上的所有元素。v 該對象是該對象是window對象的一個屬性，在引用時可以省略對象的一個屬性，在引用時可以省略window，在程序中直接引用

51、，在程序中直接引用document對象。對象。2.2.3 瀏覽器對象瀏覽器對象 4. history對象對象v 提供了與歷史清單有關的信息，包含有最近訪問過的提供了與歷史清單有關的信息，包含有最近訪問過的10個網頁的個網頁的URL的地址。的地址。v history對象的常用的主要方法有：對象的常用的主要方法有：back（）方法（）方法 ：在瀏覽器中顯示上一頁，相當于：在瀏覽器中顯示上一頁，相當于go(-1)方方法。法。 forward（）方法（）方法 ：在瀏覽器中顯示下一頁，相當于：在瀏覽器中顯示下一頁，相當于go(1)方法。方法。 go（int）方法：在瀏覽器中載入從當前算起的第）方法：在瀏

52、覽器中載入從當前算起的第int個頁個頁面。面。 2.2.3 瀏覽器對象瀏覽器對象 5. external對象對象v 該對象有一個常用的方法，即該對象有一個常用的方法，即addfavorite（）方法，使（）方法，使用該方法，可以實現(xiàn)將指定的網頁添加到收藏夾中。其用該方法，可以實現(xiàn)將指定的網頁添加到收藏夾中。其格式為：格式為： window.external.addfavorite(“URL”，”title”)v 該方法包含兩個參數：要收藏的網頁的網址和在收藏夾該方法包含兩個參數：要收藏的網頁的網址和在收藏夾中的顯示標題。中的顯示標題。2.2.4 JavaSriptJavaSript在前端的應用

53、在前端的應用 1. 實現(xiàn)網頁的特效實現(xiàn)網頁的特效v HTML語言創(chuàng)建的網頁都是靜態(tài)頁面，不能實現(xiàn)動態(tài)效果語言創(chuàng)建的網頁都是靜態(tài)頁面，不能實現(xiàn)動態(tài)效果。v 使用使用JavaScript可以彌補可以彌補HTML的不足，從而在靜態(tài)網的不足，從而在靜態(tài)網頁中實現(xiàn)動態(tài)效果。頁中實現(xiàn)動態(tài)效果。v 該方法包含兩個參數：要收藏的網頁的網址和在收藏夾該方法包含兩個參數：要收藏的網頁的網址和在收藏夾中的顯示標題。中的顯示標題。例例2-7 鼠標跟隨特效鼠標跟隨特效 meta http-equiv=Content-Type content=text/html; charset=utf-8跟隨鼠標的文字跟隨鼠標的文字.

54、spanstyle.spanstyle2.2.4 JavaSriptJavaSript在前端的應用在前端的應用 position: absolute;position: absolute;visibility: visible;visibility: visible;top: -50px;top: -50px;font-size: 9pt;font-size: 9pt;color: #FF6600;color: #FF6600;font-weight: bold;font-weight: bold; 2.2.4 JavaSriptJavaSript在前端的應用在前端的應用 /設定參數設定參數v

55、ar x, y; /var x, y; /鼠標當前在頁面上的位置鼠標當前在頁面上的位置var step = 20 var flag = 0;var step = 20 var flag = 0;var message = javascriptvar message = javascript跟隨鼠標的文字跟隨鼠標的文字.; .; message= message.split(); /message= message.split(); /分割字符串分割字符串var xpos = new Array();var xpos = new Array();for(i=0; i=message.length

56、-1; i+) for(i=0; i=message.length-1; i+) xposi = -50;xposi = -50; 2.2.4 JavaSriptJavaSript在前端的應用在前端的應用 var ypos = new Array(); /var ypos = new Array(); /分割字符串分割字符串for(i=0; i=message.length-1; i+) for(i=0; i=1; i-) for(i=message.length-1; i=1; i-) xposi = xposi-1 + step; xposi = xposi-1 + step; yposi

57、 = yposi-1; yposi = yposi-1; xpos0 = x + step;xpos0 = x + step;ypos0 = y;ypos0 = y;2.2.4 JavaSriptJavaSript在前端的應用在前端的應用 for(i=0; imessage.length-1; i+) /for(i=0; i=1; i-) for(i=message.length-1; i=1; i-) xposi = xposi-1 + step;xposi = xposi-1 + step;yposi = yposi-1;yposi = yposi-1; 2.2.4 JavaSriptJa

58、vaSript在前端的應用在前端的應用 xpos0 = x + step;xpos0 = x + step;ypos0 = y;ypos0 = y;for(i=0; imessage.length-1; i+) for(i=0; imessage.length-1; i+) var thisspan = eval(document.span + i);var thisspan = eval(document.span + i);thisspan.left = xposi;thisspan.left = xposi;thisspan.top = yposi;thisspan.top = ypos

59、i; var timer = setTimeout(makesnake(), 30); /var timer = setTimeout(makesnake(), 30); /使用使用setTimeoutsetTimeout延時執(zhí)行延時執(zhí)行makesnakemakesnake函數函數 2.2.4 JavaSriptJavaSript在前端的應用在前端的應用 for(i=0; i=message.length-1; i+) for(i=0; i=message.length-1; i+) document.write(span id=span + i + document.write();clas

60、s=spanstyle);document.write(messagei);document.write(messagei);document.write();document.write(); if(document.layers) if(document.layers) document.captureEvents(Event.MOUSEMOVE);document.captureEvents(Event.MOUSEMOVE); document.onmousemove = handlerMM; /document.onmousemove = handlerMM; /給給documentdocument對