1、第2章 HTML編程基礎(chǔ),2,1,內(nèi)容提要,本章首先介紹HTML的發(fā)展歷史，然后介紹HTML的基本框架 詳細(xì)介紹了HTML的各種常用標(biāo)記：文字標(biāo)記、圖片標(biāo)記和超級鏈接標(biāo)記，等等。 介紹CSS的基本使用方法，介紹如何讓CSS與HTML協(xié)同工作。,2,HTML概述,在20世紀(jì)90年代Web網(wǎng)絡(luò)的迅速興起，使得HTML空前繁榮。當(dāng)時，HTML被發(fā)展成了許多不同的版本。出于解決這種混亂局面的考慮，迫切需要制定一個公認(rèn)的HTML語言規(guī)范。 1995年11月，Internet Engineering Task Force（IETF）整理了以前的各種版本，倡導(dǎo)并主持開發(fā)HTML2.0規(guī)范，同年推出HTML3

2、.0技術(shù)規(guī)范。1996年，World Wide Web Consortium（W3C）的HTML Working Group開始組織編寫新的規(guī)范，于1997年1月推出了HTML3.2。在HTML3.2中做了許多重要改動。到1999年下半年推出到現(xiàn)在依然使用的HTML4.0。,3,案例名稱：HTML網(wǎng)頁框架,案例名稱：HTML網(wǎng)頁框架 程序名稱：2-01.htm ,這是一段最基本的HTML標(biāo)識，任何HTML文檔都是由一個和標(biāo)記包含的，然后分為和兩大部分，頁面的標(biāo)識一般都是在標(biāo)識中定義的。HTML文件不區(qū)別大小寫，瀏覽器認(rèn)為和是一樣的，在使用的時候需要保持風(fēng)格的完整性。 HTML文件的擴展名可以是

3、.htm或者.html都可以，現(xiàn)在已經(jīng)沒有區(qū)別了。原來在Linux操作系統(tǒng)上用html作為文件的擴展名，而在Windows操作系統(tǒng)上用.htm，因為早期的Windows操作系統(tǒng)不支持三個以上字母的文件擴展名。,4,HEAD頭元素,HEAD頭元素主要包括該頁面的一些基本描述語句。META的屬性包括： Description，網(wǎng)頁的描述信息； Keywords，關(guān)鍵字，當(dāng)搜索引擎查找時，按此關(guān)鍵字查找； Content-type，用來設(shè)置該網(wǎng)頁的編碼； Author，用來設(shè)置該網(wǎng)頁的作者姓名； Refresh，用來設(shè)置網(wǎng)頁的自動更新。當(dāng)CONTENT =3; URL=時，該網(wǎng)頁打開3秒鐘后，就自動

4、的轉(zhuǎn)到網(wǎng)站,5,HTML的常用標(biāo)記,HTML的常用標(biāo)記有一些共同特點：都放在BODY標(biāo)記里面。 常用的標(biāo)記有字體標(biāo)記、圖片標(biāo)記、超級鏈接、列表、表格和表單等。,6,字體標(biāo)記,處理文字時通常利用如“ xx”的標(biāo)記 定義字符xx的字體顯示為隸書，字號是40，顏色是紅色。程序2-03.htm說明如何使用文字格式。,7,圖片標(biāo)記,利用“”格式可以插入一張圖片，myimage.jpg文件必須和該HTML文件放在同一個目錄下。 IMG是HTML的一個標(biāo)記，是IMAGE的縮寫；SRC屬性給出要連接的圖片的路徑和文件名,8,超級鏈接,使用超級鏈接的基本的語法是：XX。XX是一個超級鏈接，連接到Address.

5、htm文件； 是單詞Anchor的縮寫，中文的意思是“錨”，功能是從一個頁面鏈接到另一個頁面；屬性HREF定義的是鏈接到哪一頁。,9,書簽鏈接,如果某個頁面很大，為了加強層次感，需要引入書簽鏈接。 使用的方法和超級鏈接類似。,10,電子郵件鏈接,電子郵件鏈接提供了當(dāng)點擊頁面上的鏈接時，將自動打開默認(rèn)的郵件發(fā)送程序發(fā)郵件。,11,列表,列表有兩種方式，一種是有序列表，另一種是無序列表。 無序列表是所有的行之前都有一個小圓圈，而有序列表是自動排序的，前面有序號。,12,基本表格,是表格的基本標(biāo)記。代表表格的行，代表表格的列。 定義一個三行兩列的表格如程序2-09.htm所示。,13,表格的靈活應(yīng)用

6、,（1）ROWSPAN和COLSPAN屬性的使用方法。 利用ROWSPAN屬性設(shè)置該單元格占用多行，利用COLSPAN屬性設(shè)置該單元格是占用多列。,14,Cellpadding和Cellspacing,（2）Cellpadding和Cellspacing屬性的使用方法。 Cellpading的意思是單元格的邊距，指的是字與單元格邊框的距離。Cellspacing的意思是單元格間距，指的是單元格之間的距離。,15,表格的樣式,BORDERCOLOR屬性設(shè)置表格邊框的顏色，BGCOLOR屬性設(shè)置背景顏色，ALIGN屬性設(shè)置表格的對齊方式，標(biāo)記是將內(nèi)部的文字加粗顯示。顯示的結(jié)果,16,表單,表單的功

7、能是收集用戶信息實現(xiàn)系統(tǒng)與用戶交互。比如E-mail信箱的注冊頁面就是一個十分典型的表單頁面。 表單信息的處理過程為：當(dāng)單擊表單中的提交按鈕時，表單中的信息就會上傳到服務(wù)器中，然后由服務(wù)器端的應(yīng)用程序（例如CGI，ASP，PHP或JSP等）進行處理，處理后將用戶提交的信息存儲在服務(wù)器端的數(shù)據(jù)庫中，或者將有關(guān)信息返回到客戶端瀏覽器上。,17,（1）表單頭及其屬性,表單的通用格式是：XX 。 表單元素包含在標(biāo)記中，有兩個重要的屬性：METHOD=“Post”或“Get”，Post和Get方式的區(qū)別在于Post是一種郵寄的方式，在瀏覽器的地址欄中不顯示提交的信息，這種方式傳送的數(shù)據(jù)量的大小沒有限制；

8、Get方式將信息傳遞到瀏覽器的地址欄上，最大傳輸?shù)男畔⒘渴? KB。當(dāng)不指明是哪種方式時，默認(rèn)為Get方式。Action屬性是設(shè)置利用哪個文件來處理所提交的數(shù)據(jù)。,18,（2）表單中常用控件,在常用的表單制作過程中，經(jīng)常遇到的是按鈕制作、輸入元素的制作等。常見的表單控件包括文本框、文本域、密碼框、多選框、單選框和下拉列表框，等等。 除了文本域和下拉列表，其他只要修改TYPE屬性就可以了，使用方法如程序2-13.htm所示。,19,塊級元素,塊級元素包括DIV和SPAN兩種標(biāo)記。DIV稱為層標(biāo)記，有時也稱為塊標(biāo)記。利用DIV標(biāo)記和CSS的定位技術(shù)可以做出相當(dāng)出色的效果。 SPAN標(biāo)記和DIV標(biāo)記

9、的基本語法是一樣的，但SPAN標(biāo)記和DIV標(biāo)記的區(qū)別還是很大的。使用方法如程序2-14.htm所示。,20,預(yù)排版標(biāo)記,包含在預(yù)排版標(biāo)記中的字符會按照HTML原碼的格式輸出到瀏覽器上。 HTML文件中的英文空格一般不起作用，但是在預(yù)排版標(biāo)記中空格可以顯示出來。語法如程序2-15.htm文件所示,21,設(shè)計網(wǎng)頁框架,設(shè)計網(wǎng)頁時，經(jīng)常用到的一種格式是框架。 基本網(wǎng)頁框架分成兩種，左右框架和上下框架。語法如程序2-16.htm文件所示。,22,案例2-2 使用框架,一般情況下工程的主頁面都采用這種框架格式，在上面的頁面放置網(wǎng)站的圖片，右邊放置主頁面，左邊放一個下拉菜單。 可以像對普通Windows窗

10、口一樣操作網(wǎng)頁框架，可以最大化窗口頁可以最小化窗口，修改案例2-2右框架的代碼，如案例2-3所示。,23,MARQUEE標(biāo)記,使用的基本語法是：xx，顯示的效果是xx就會從屏幕一邊跑到另外一邊。,啦啦啦，我從右向左移！ 啦啦啦，我從左向右移！ 啦啦啦，我一圈一圈繞著走！ 啦啦啦，我只走一次就歇了！ 啦啦啦，我來回走！ 啦啦啦，我走一步，停一停！,24,CSS概述,1998年5月12日，CSS level 2才成為W3C 的標(biāo)準(zhǔn)，它是一組樣式，樣式中的屬性在HTML元素中依次出現(xiàn)，并顯示在瀏覽器中。樣式可以定義在HTML文檔的標(biāo)志里，也可以在外部附加文檔作為外加文檔。CSS的功能無比強大，W3C

11、也極力向世界推廣這一先進技術(shù)。HTML是一種標(biāo)記語言，而CSS是這種標(biāo)記的一種重要擴展，可以進一步美化頁面。換句話說，CSS是一種用來裝飾HTML的標(biāo)記集合。 為什么要使用CSS呢？原因主要有如下四點：（1）彌補HTML對網(wǎng)頁格式化功能的不足，比如段落間距，行距等。（2）字體變化和大小。（3）頁面格式的動態(tài)更新。（4）排版定位等。,25,加載CSS樣式的三種方式,使用CSS來格式化網(wǎng)頁，共有三種方式： 在HEAD中引用 在BODY中引用 作為文件來引用。,26,CSS與標(biāo)記對應(yīng)的三種方式,HTML標(biāo)記和CSS樣式表標(biāo)記有3種方式： 標(biāo)記選擇符 類選擇符 選擇符。,27,定義超級鏈接樣式,可以指

12、定A標(biāo)記以不同的方式顯示。一個超級鏈接有幾種不同的狀態(tài)：未被訪問鏈接（Link）、已訪問鏈接（Visited）和鼠標(biāo)移動過（Hover）。 可以定義超級鏈接文字的顏色，可以定義字體的大小，一般超級鏈接都有下劃線，可以利用“TEXT-DECORATION:NONE”將超級鏈接的下劃線去掉。,28,小結(jié),本章作為編程基礎(chǔ)，主要介紹兩大部分的內(nèi)容： HTML的常用標(biāo)記和CSS樣式表的使用方法 需要重點掌握的是表格和表單的使用方式、加載CSS樣式的三種方式和CSS與標(biāo)記對應(yīng)的三種方式。,29,本章習(xí)題,一、選擇題 1. 下面關(guān)于標(biāo)記的說法不正確的是_。 A) 標(biāo)記要填寫在一對尖括號（）內(nèi) B) 書寫標(biāo)

13、記的時候，英文字母的大、小寫或混合使用大小寫都是允許的。 C) 標(biāo)記內(nèi)可以包含一些屬性，屬性名稱出現(xiàn)在標(biāo)記的后面，并且以分號進行分隔。 D) HTML對屬性名稱的排列順序沒有特別的要求。 2. 以下標(biāo)記中，_可用于在網(wǎng)頁插入圖像。 A) 標(biāo)記 B) 標(biāo)記 C) 標(biāo)記 D) 標(biāo)記 3. 在超級鏈接中，如果指定_框架名稱，連接目標(biāo)將在鏈接文本所在的框架頁內(nèi)出現(xiàn)，當(dāng)前頁面被刷新。 A) Blank B) Self C) Parent D) Top 4. 是一個_。 A) 文本框 B) 重新填寫的按鈕 C) 下拉菜單 D) 提高給服務(wù)器的按鈕 5. 使用CSS來格式化網(wǎng)頁，共有三種方式：_。 A) 在HEAD中引用 B) 作為標(biāo)記來引用 C) 在BODY中引用 D) 作為文件來引用。,30,二、填空題,1. _標(biāo)記用于HTML文檔的最前邊，用來標(biāo)記HTML文檔的開始。而_放在HTML文檔的最后邊，用來標(biāo)識HTML文檔的結(jié)束。 2. 表格標(biāo)記的_屬性用于指定表單處理程序的URL地址，_屬性用于定義數(shù)據(jù)提交方式。 3. 標(biāo)記的_屬性用于為輸入?yún)^(qū)域命名，_屬性用來指定輸入?yún)^(qū)域的默認(rèn)值。 4. 匹配一個HTML標(biāo)記