《htmlcss課程教學(xué)》PPT課件.ppt

1、第1章 HTML簡介,1.1 WWW的基本概念 1.2 瀏覽器 1.3 網(wǎng)頁設(shè)計(jì)基本概念 1.4 網(wǎng)頁技術(shù)概況 1.5 HTML簡介 1.6 HTML的編輯和運(yùn)行環(huán)境 1.7 HTML的基本結(jié)構(gòu),上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),1.1 WWW的基本概念,WWW是World Wide Web的縮寫，也可簡寫為 Web，中文叫做萬維網(wǎng)。 WWW是一種網(wǎng)絡(luò)傳輸協(xié)議。 萬維網(wǎng)只是因特網(wǎng)的一部分，因特網(wǎng)還包括 FTP、BBS等其他服務(wù)。 萬維網(wǎng)能夠處理文字、圖像、聲音、視頻等多媒 體信息，是一個(gè)多媒體信息系統(tǒng)。它提供了大量內(nèi) 容豐富的信息資源，這些信息一頁一頁地分門別類 地存放在各個(gè)服務(wù)器上，瀏

2、覽者可以根據(jù)個(gè)人的興 趣選擇閱讀內(nèi)容。在瀏覽信息的過程中，如同讀一 本書，可以向前翻，也可以向后翻，還可以從中間 挑選著看，看哪些內(nèi)容全都依瀏覽者個(gè)人的興趣而 定。,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),瀏覽Web就是以HTTP（HyperText Transfer Protocol） 超文本傳輸協(xié)議在Internet上傳送以HTML（Hypertext Markup Language）超文本標(biāo)記語言編寫的網(wǎng)頁內(nèi)容。從而進(jìn)行 信息交流。 WWW的結(jié)構(gòu)非常簡單，主要分為兩個(gè)部分，一為服務(wù)器 端（Server），也稱為網(wǎng)頁的提供者；二為客戶端 （Client），也就是網(wǎng)頁的接收者。這種模式稱為客

3、戶機(jī)/服務(wù) 器（Client/Server）模式。 在WWW中，所謂的服務(wù)器端就是存放網(wǎng)頁供用戶瀏覽的 網(wǎng)站；而客戶端則是通過網(wǎng)絡(luò)瀏覽網(wǎng)頁的計(jì)算機(jī)與用戶的總 稱。實(shí)際上執(zhí)行于計(jì)算機(jī)上供用戶操作、觀看網(wǎng)頁的應(yīng)用程 序?yàn)闉g覽器（Browser）。 整個(gè)網(wǎng)頁的瀏覽過程，主要是由客戶端（瀏覽器）向服務(wù) 器（Web服務(wù)器）請求瀏覽某一網(wǎng)頁，Web服務(wù)器便將該網(wǎng) 頁傳送給瀏覽器，由瀏覽器負(fù)責(zé)解析網(wǎng)頁，再顯示給用戶觀 看。,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),1.2 瀏覽器,用戶的計(jì)算機(jī)端需要有Web客戶程序?yàn)g覽器，才能同服務(wù)器建立聯(lián)系，觀看網(wǎng)頁。瀏覽器是閱讀WWW上的信息資源的一個(gè)軟件。如果用戶在本地

4、機(jī)上安裝了WWW瀏覽器軟件，就可以讀取WWW上的信息了。 瀏覽器的作用是在網(wǎng)絡(luò)上與Web服務(wù)器打交道，從服務(wù)器中下載文件。如果是一個(gè)HTML文件，瀏覽器就會翻譯那個(gè)文件中的HTML代碼，進(jìn)行格式化，并顯示文件內(nèi)容。如果文件中包含著圖像以及其他類型文件的鏈接，它也能相應(yīng)處理圖像及其他類型文件等信息。 瀏覽器有許多種，它們都可以瀏覽WWW上的內(nèi)容，目前最常用的兩種瀏覽器是Netscape Communicator（簡稱NC）和Internet Explorer（簡稱IE）。,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),1.3 網(wǎng)頁設(shè)計(jì)基本概念,1超鏈接（Hyper Link） 超鏈接是特殊的文字標(biāo)記，

5、它指向了萬維網(wǎng)中的其他資源，如另外一個(gè)網(wǎng)頁、一個(gè)聲音文件、網(wǎng)頁的另一個(gè)段落或者是萬維網(wǎng)中的任何資源等等，而且這些資源均可以存放在任何一個(gè)服務(wù)器上。在瀏覽網(wǎng)頁時(shí)，如果你用鼠標(biāo)單擊超鏈接，那么就會跳轉(zhuǎn)到超鏈接所指向的資源，就可從Web上下載新的信息。在網(wǎng)頁中，一個(gè)超鏈接可以是一些文字也可以是一幅圖畫。而且這些文字在瀏覽器中顯示出來時(shí)一般是帶有下劃線的彩色文字。判斷網(wǎng)頁中的某個(gè)對象是否是超鏈接有個(gè)簡單的方法，即當(dāng)鼠標(biāo)光標(biāo)箭頭移動到這個(gè)文字或圖像時(shí)，如果是超鏈接，瀏覽器便會改變光標(biāo)為一只手的形狀。,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),2統(tǒng)一資源定位器（URL） URL的全文為Uniform Res

6、ource Locator，譯為統(tǒng)一資源定位器，用于指定要取得的Internet上資源的位置與方式。即各個(gè)網(wǎng)頁在Internet上的地址，其功能相當(dāng)于我們在實(shí)際生活中寫信的通訊地址，因此你也可把URL稱為網(wǎng)址。例如在瀏覽器上輸入 除了URL的這種尋址作用外，在使用超文本鏈接時(shí)，即將一個(gè)文件鏈接到另一個(gè)文件時(shí)，也必須使用URL。,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),3網(wǎng)站（Web site） 網(wǎng)站是一個(gè)存放在網(wǎng)絡(luò)服務(wù)器上的完整信息的集合體。它包含一個(gè)或多個(gè)網(wǎng)頁，這些網(wǎng)頁以一定的方式鏈接在一起，成為一個(gè)整體，用來描述一組完整的信息或達(dá)到某種期望的宣傳效果。,4網(wǎng)頁（Web pages） 網(wǎng)頁是

7、網(wǎng)站的組成部分。制作者可以將需要公布的信息按照一定的方式分門別類，放在一個(gè)個(gè)網(wǎng)頁上，網(wǎng)頁里可以有文字、表格、圖像聲音和視頻等等。網(wǎng)頁可以看作一個(gè)單一體，是網(wǎng)站的一個(gè)元素，它是磁盤上的一個(gè)個(gè)單一的文件，由Web瀏覽器下載或格式化。,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),5主頁（Home page） 主頁，也可以稱之為首頁，它既是一個(gè)單獨(dú)的網(wǎng)頁，像一般網(wǎng)頁一樣，可以存放各種信息，又是一個(gè)特殊的網(wǎng)頁，它是整個(gè)網(wǎng)站的起始點(diǎn)和匯總點(diǎn)，是瀏覽者開始瀏覽一個(gè)網(wǎng)站的地方。在主頁中，應(yīng)該給出這一網(wǎng)站的概述、它所包含的主要內(nèi)容、瀏覽各種信息的通道，使瀏覽者在看到主頁后，便對這個(gè)網(wǎng)站有了一個(gè)大體的了解，以確定需要

8、哪方面的內(nèi)容，知道如何去查找。主頁又是一個(gè)地址（URL），瀏覽者從這里走進(jìn)你的網(wǎng)絡(luò)世界，開始對一個(gè)個(gè)網(wǎng)頁的瀏覽。,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),1.4 網(wǎng)頁技術(shù)概況,以目前的網(wǎng)頁技術(shù)來說，大致可分為三個(gè)方面來加以說明。 靜態(tài)網(wǎng)頁（HTML、CSS） 網(wǎng)頁美工（Flash、Fireworks） 動態(tài)網(wǎng)頁（JavaScript/VBScript、ASP） 動態(tài)網(wǎng)頁是讓網(wǎng)頁能夠依照用戶的需求做出動態(tài)響應(yīng)的技術(shù)。 所謂的靜態(tài)網(wǎng)頁，是指這個(gè)網(wǎng)頁不論在何時(shí)從何地瀏覽，都將顯示相同的畫面與內(nèi)容，且用戶僅能瀏覽，無法提供信息給網(wǎng)站，讓網(wǎng)站響應(yīng)用戶的需求。 靜態(tài)網(wǎng)頁是用HTML編寫，保存時(shí)擴(kuò)展名需使用

9、.htm或.html。靜態(tài)網(wǎng)頁只能單純地在網(wǎng)頁中展示文字與圖片，它是所有網(wǎng)頁的基礎(chǔ)技術(shù)。整個(gè)網(wǎng)頁的主要內(nèi)容與網(wǎng)頁的顯示控制，都必須利用HTML實(shí)現(xiàn)。,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),HTML的英文全名為Hypertext Markup Language，譯為超文本標(biāo)記語言。HTML用于描述超文本中資料的顯示方式，從控制文字的顏色、大小，到標(biāo)識資料的種類為圖形文件或者聲音等。其描述的方式是利用一個(gè)個(gè)的HTML標(biāo)簽，將要進(jìn)行格式控制的資料包含起來。 什么是動態(tài)HTML呢？動態(tài)HTML作為瀏覽器自帶的功能，實(shí)際上只是一種概念，它并不屬于一種專門技術(shù)（如JavaScript、ActiveX），

10、它不是插件，也不是瀏覽器。它是一種通過各種技術(shù)的綜合發(fā)展而得以實(shí)現(xiàn)的概念，這些技術(shù)包括JavaScript、VBScript、Document Model（文件目標(biāo)模塊），Layers和Cascading Style Sheets（CSS，層疊樣式表，簡稱樣式表）等。 目前，動態(tài)HTML主要包括3部分內(nèi)容：HTML規(guī)范、Script語言（JavaScript和VBScript，其中JavaScript使用得更為廣泛）和CSS。,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),1.5 HTML簡介,HTML并不是一種程序，它只是一種控制網(wǎng)頁中資料顯示的標(biāo)記語言，易學(xué)易懂，非常簡單。 HTML由版本1.0

11、已經(jīng)發(fā)展到今天的4.0。HTML 4.0是一個(gè)適應(yīng)性強(qiáng)，兼容性高的新版本。它支持豐富的樣式表、腳本、框架、表格和表單。 HTML中定義了一系列標(biāo)簽，這些標(biāo)簽用于控制網(wǎng)頁出版的文檔格式、字符格式、段落格式等，還包括為達(dá)到網(wǎng)頁交互效果而對腳本語言、Java小程序、CGI程序等的支持和調(diào)用的規(guī)則。 HTML文件是用特定元素標(biāo)記的、可識別的ASCII組成的文本文件。HTML文件中元素標(biāo)記只含有字母、數(shù)字、標(biāo)點(diǎn)符號和其他可打印的字符。在瀏覽器中，可以顯示出Web頁中各種文字、字型、標(biāo)題、表格等內(nèi)容，但是，HTML并不是一個(gè)圖文混排的排版軟件。 在一個(gè)HTML編寫的Web頁中，可以鏈接圖形、圖像、聲音等多

12、媒體文件，并且可通過超級鏈接與Internet上的其他計(jì)算機(jī)和服務(wù)器中的信息相連接。,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),1.6 HTML的編輯和運(yùn)行環(huán)境,根據(jù)HTML語法所寫出來的文件稱為HTML文件。HTML文件在保存時(shí)，需保存為純文本文件，并用.html或.htm作為擴(kuò)展名。這是因?yàn)樵贒OS操作系統(tǒng)之下，文件名后綴只允許3位，而在UNIX操作系統(tǒng)或Windows等32位操作系統(tǒng)中可以使用3位以上的文件擴(kuò)展名。 因?yàn)镠TML是一個(gè)文本文件，所以可以使用任何一個(gè)文本編輯器進(jìn)行編寫，它通過瀏覽器來解釋執(zhí)行。我們一般采用純文本文檔編輯器，如Windows中的記事本來編輯HTML文件。 HTM

13、L文件是運(yùn)行在Web瀏覽器上的，在使用瀏覽器運(yùn)行HTML文件時(shí)，只需在地址欄中鍵入文件的URL（統(tǒng)一資源定位器）即可。如果只鍵入目標(biāo)服務(wù)器的地址，瀏覽器將顯示目標(biāo)服務(wù)器上的主頁，即目標(biāo)服務(wù)器在被用戶訪問時(shí)顯示的缺省文檔。,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),1.7 HTML的基本結(jié)構(gòu),1.7.1 HTML的語法結(jié)構(gòu)與文檔結(jié)構(gòu),1HTML標(biāo)簽 一個(gè)HTML文件由一系列的元素和標(biāo)簽組成。元素是HTML文件的重要組成部分，如title（文檔標(biāo)題）、img（圖像）、table（表格）等等。元素名不區(qū)分大小寫。HTML用標(biāo)簽來規(guī)定元素的屬性和它在文檔中的位置。 HTML的標(biāo)簽分單獨(dú)出現(xiàn)的標(biāo)簽和成對出

14、現(xiàn)的標(biāo)簽兩種。 大多數(shù)標(biāo)簽是成對出現(xiàn)的，由首標(biāo)簽和尾標(biāo)簽組成。首標(biāo)簽的格式為，尾標(biāo)簽的格式為。其完整語法如下所示： 要控制的元素 成對標(biāo)簽僅對包含在其中的文檔部分發(fā)生作用，如和標(biāo)簽用于來界定標(biāo)題元素的范圍，也就是說，和之間的部分是該HTML文檔的標(biāo)題。 單獨(dú)標(biāo)簽的格式為，它的作用是在相應(yīng)的位置插入元素。如標(biāo)簽表示在該標(biāo)簽所在位置插入一個(gè)換行符。,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),HTML的標(biāo)簽，大、小寫或混寫均可。如：、，其結(jié)果都是一樣的。 在每個(gè)HTML標(biāo)簽中，還可以設(shè)置一些屬性，控制HTML標(biāo)簽所建立的元素。這些屬性將位于所建立元素的首標(biāo)簽，因此，首標(biāo)簽的基本語法如下： 而尾標(biāo)簽的建

15、立方式則為： 因此，在HTML文件中某個(gè)元素的完整定義語法如下： 元素資料 語法中，設(shè)置各屬性所使用的“”可省略。,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),2元素的概念 當(dāng)用一組HTML標(biāo)簽將一段文字包含在中間時(shí)，這段文字與包含文字的HTML標(biāo)簽被稱之為一個(gè)元素。 由于在HTML語法中，每個(gè)由HTML標(biāo)簽與文字所形成的元素內(nèi)，還可以包含另一元素，因此，整個(gè)HTML文件就像是一個(gè)大元素，包含了許多小元素。 其中所有HTML文件中，最外層的元素是由標(biāo)簽所建立。在標(biāo)簽所建立的元素中，包含了兩個(gè)主要的子元素，這兩個(gè)子元素是由標(biāo)簽與標(biāo)簽所建立，標(biāo)簽所建立的元素的內(nèi)容為文件標(biāo)題，而標(biāo)簽所建立的元素內(nèi)容為文

16、件主體。,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),3HTML文檔結(jié)構(gòu) 在講述HTML文檔結(jié)構(gòu)之前，先來看一個(gè)簡單的HTML文件及其在瀏覽器上的顯示結(jié)果。,下面我們開始編寫一個(gè)HTML文檔。 第一個(gè)HTML示例 HTML的基本結(jié)構(gòu)。 ,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),從上述代碼中我們可以看出HTML文檔的基本結(jié)構(gòu)如下圖所示：,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),1.7.2 文件開始標(biāo)簽html 在任何的一個(gè)HTML文件 里，最先出現(xiàn)的HTML標(biāo)簽就是，它用以表示該文檔是以超文本標(biāo)記語言（HTML）編寫的。它是成對出現(xiàn)的，首標(biāo)簽和尾標(biāo)簽分別位于文

17、檔的最前面和最后面，文件中的所有文本和HTML標(biāo)簽都包含在其中。如： 文件的全部內(nèi)容 該標(biāo)簽不帶任何屬性。 事實(shí)上，我們現(xiàn)在常用的Web瀏覽器（Netscape和IE）都可以自動識別HTML文檔，并不要求有標(biāo)簽，也不對該標(biāo)簽做任何操作。但是，為了提高文檔的適用性，使我們編寫的HTML文檔能適應(yīng)日新月異的Web瀏覽器，還是應(yīng)該養(yǎng)成使用這個(gè)標(biāo)簽的習(xí)慣。,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),1.7.3 文件頭部標(biāo)簽head 習(xí)慣上我們把HTML文檔分為文檔頭和文檔主體兩部分。文檔主體部分就是我們在Web瀏覽器窗口的用戶區(qū)內(nèi)看到的內(nèi)容，而文檔頭部分用來規(guī)定該文檔的標(biāo)題（出現(xiàn)在Web瀏覽器窗口的標(biāo)題欄中）和文檔的一些屬性。 是一個(gè)表示網(wǎng)頁頭部的標(biāo)簽。由標(biāo)簽所定義的元素中，并不放置網(wǎng)頁的任何內(nèi)容，而是放置關(guān)于這個(gè)HTML文件的信息，也就是說它并不屬于HTML文件的主體，它包含文件的標(biāo)題、編碼方式、URL等。這些信息大部分是用于提供索引、辨認(rèn)或其他應(yīng)用。 寫在與中間的文本，如果又寫在“title”標(biāo)簽中，表示該網(wǎng)頁的名稱，并作為窗口的名稱顯示在這個(gè)網(wǎng)頁窗口的最上方。 如果你的HTML文件并不需要提供相關(guān)信息時(shí)，可以省略標(biāo)簽。,上一頁,下一頁,目 錄,結(jié) 束,本 節(jié),1.7.4 文件標(biāo)題標(biāo)簽title 每個(gè)HTML文件都需要有一個(gè)文件名