1、課前提問因特網上提供的常用服務有哪些？因特網上提供的常用服務有哪些？Web網是一個什么網絡？網是一個什么網絡？支撐支撐WEB網的三種機制是什么？網的三種機制是什么？HTML文檔是由什么程序負責解釋？文檔是由什么程序負責解釋？Web服務器的作用是什么？服務器的作用是什么？Web客戶端的作用是什么？客戶端的作用是什么？訪問一個靜態網頁的基本過程是什么？訪問一個靜態網頁的基本過程是什么？如何知道如何知道Web服務器是否正確響應了請求？服務器是否正確響應了請求？一個一般的一個一般的URI會包括哪幾個部分？會包括哪幾個部分？什么是相對的什么是相對的URI？HTTP協議工作在一個什么模型上？協議工作在一個

2、什么模型上？HTTP協議中，協議中，Web服務器如何把網頁發回給瀏覽器？服務器如何把網頁發回給瀏覽器？HTMLHyperText Markup Language RFC 2616 - Hypertext Transfer Protocol - HTTP1.1一、什么是HTML? 超文本標記語言HTML是一種簡單的標記語言，它用來創建可在不同平臺之間移植的超文本文檔。 HTML中的標識符可以表示超文本新聞、郵件、文檔、超媒體等等。標記語言 HTML是標準通用標記語言SGML的一個應用。 標記語言是用標記（TAG）來標識某種意義或效果的語言。 標記是HTML文檔中一些有特定意義的符號，使用 ”括起

3、來。標記語言 標記 屬性值內容/標記 這是Bold的文字 這是鏈接標記語言 起始標記(Start Tag)和結束標記(End Tag)一般成對使用。 HTML的元素是由起始標記和結束標記標識的HTML文檔的一部分。 HTML元素=起始標記+元素內容+結束標記 元素（element）是可以嵌套的，但不能交叉。下面文本中HTML元素的個數是多少?圖片的說明內容圖片的說明內容答案答案：6個，即個，即1個個body元素、元素、1個個a元素、元素、1個個img元素、元素、2個個p元素和元素和1個個hr元素。元素。 標記語言 有些標記只有起始標記(Start Tag)，沒有結束標記(End Tag) ，叫

4、做獨立標記。 例如： 等等。 獨立標記在書寫時應該在右邊的”前面加一個斜杠。 帶有屬性的帶有屬性的HTML元素的結構元素的結構 HTML HTML文檔是由用戶代理（User Agent）來解釋的。例如：IE等瀏覽器 Web服務器發送回來的HTML文檔是一個文本文件，里面包含的是使用HTML標記表示的文檔內容，如果想看到文檔，必須由瀏覽器根據標記的定義來顯示。 所以如果本地有HTML文檔，就可以在瀏覽器中直接打開文檔顯示。二、HTML可以做什么？ 用標題、文本、表格、列表、照片等發布在線信息。 通過超文本鏈接，在鼠標點擊時取得在線信息。 設計表單與遠程服務通訊 - 查詢信息、進行預訂、訂購產品等

5、。 把樣式表、視頻剪輯、音頻剪輯和其它應用程序包含在文檔中。三、HTML文檔結構 HTML文檔是以純文本方式存放的，即：標記必須是英文半角（ASCII碼） 可以用各種文本編輯器編輯它，如記事本、MS FrontPage；Dreamweaver等。 開始學習時最好使用簡單文本編輯器。 HTML文件擴展名可以是.html或.htm。三、HTML文檔結構 HTML文檔就是使用樹形結構組織起來的文檔就是使用樹形結構組織起來的HTML元素的集合。元素的集合。 這些元素包括：文檔頭，文檔體，標題，段落，這些元素包括：文檔頭，文檔體，標題，段落，列表，表格等等。列表，表格等等。 在在HTML文檔中標記一般是

6、不區分大小寫的。文檔中標記一般是不區分大小寫的。 HTML文檔中空白符是被忽略掉的（大部分空文檔中空白符是被忽略掉的（大部分空格、格、Tab鍵、回車等）鍵、回車等）三、HTML文檔結構 -告訴瀏覽器這是一個html文件 -文檔頭信息文檔標題文檔的內容 告訴瀏覽器HTML文檔開始和結束的位置，其中包括head部分和body部分。 HTML文檔中所有的內容都應該在這兩個標記之間，一個HTML文檔總是以開始，以結束。 HTML文件的頭部標記 頭部主要提供文檔的描述信息，head部分的所有內容都不會顯示在瀏覽器窗口中，在其中可以放置頁面的標題以及頁面的類型、使用的字符集、鏈接的其它腳本或樣式文件等內容

7、 用來指明文檔的主體區域，網頁所要顯示的內容都放在這個標記內， 其結束標記指明主體區域的結束 三、HTML文檔結構試一試：試一試：使用使用IE Develop ToolBar 察看察看HTML文文檔結構。檔結構。注：在注：在IE中，按中，按F12鍵即可（開發人員工鍵即可（開發人員工具）。具）。四、HTML標記 頁面標記 鏈接標記 字體標記 文字布局標記 圖像標記 表格標記 表單標記 框架標記頁面標記 注釋 頁面標記 的屬性可以設定當前文檔的各的屬性可以設定當前文檔的各種整體顯示效果。種整體顯示效果。 bgcolor - 背景色彩背景色彩 text - 非可鏈接文字的色彩 link - 可鏈接文

8、字的色彩 alink - 正被點擊的可鏈接文字的色彩 vlink - 已經點擊(訪問)過的可鏈接文字的色彩 HTML文檔中指定顏色 RGB值指定顏色 #RRGGBB 十六進制數十六進制數 #000000是黑色#FFFF00是黃色 #FFFFFF是白色 #FF0000是紅色 用顏色名稱指定顏色aqua gray navy silverblack green olive tealblue lime purple white fuchsia maroon red yellow頁面標記 設置文本的背景圖像 語言字符集（語言字符集（charsets） “#”處填寫的是語言的類型，如一般中國大陸處填寫的是

9、語言的類型，如一般中國大陸基本上漢字用的是國標編碼，為基本上漢字用的是國標編碼，為 gb2312 ；而港臺地區則是而港臺地區則是big5 ；美國則為；美國則為us-ascii 。現在一般用的UTF-8 韓國網站，則出現的是韓國網站，則出現的是媒體類型(Content Type) Web網上的各種資源可以用媒體類型來表示它的類型。 HTML文檔也是一種Internet Media Type（互聯網上一種媒體類型）。 MIME Content Type叫做：“text/html”MIME多目的Internet郵件擴展 Multipurpose Internet Mail Extensions 是創

10、建用于電子郵件交換，網絡文檔，及企業網和Internet上的其他應用程序中的文件格式的規范。 RFC 2045,2046,2047MIME多目的Internet郵件擴展 每個MIME格式包含一個MIME內容類型（“MIME type”）和指示存儲在這個文件中的數據的子類型。 MIME類型和子類型一般以類型/子類型的形式列出。 例如，一個MPEG視頻文件將會以video/mpeg的形式列出。 MIME多目的Internet郵件擴展常見的MIME類型超文本標記語言文本 .html,.html text/html 普通文本 .txt text/plain RTF文本 .rtf application

11、/rtf GIF圖形 .gifimage/gif JPEG圖形 .jpeg,.jpg image/jpeg au聲音文件 .au audio/basic MIDI音樂文件 mid,.midi audio/midi,audio/x-midi RealAudio音樂文件 .ra, .ram audio/x-pn-realaudio MPEG文件 .mpg,.mpeg video/mpeg AVI文件 .avi video/x-msvideo GZIP文件 .gz application/x-gzip TAR文件 .tar application/x-tar HTML的歷史 HTML的發展歷程的發展

12、歷程GML(1969)SGML(1985)HTML(1993)XML(1998)XHTML(2000)CMLVMLGeneralized Markup LanguageStandard Generalized Markup LanguageHyper Text Markup LanguageeXtensible Markup Language文檔類型（DOCTYPE） 放在HTML文檔的第一行，表示文檔的類型和符合的標準。 Transitional表示是：xhtml1.0過渡標準的文檔，Strict表示是嚴格標準的文檔。文檔類型（DOCTYPE） HTML 4.01 過渡標準的文檔文檔類型（D

13、OCTYPE） 帶有 XHTML1.0 DOCTYPE 的 HTML 文檔： Title of the document The content of the document. XHTML文檔與html文檔的區別 xhtml文檔必須有doctype聲明 xhtml文檔必須有html,head,body,title等基本標記 標記名和屬性名必須小寫 枚舉屬性值必須小寫 屬性值必須用引號括起來 標記必須封閉 屬性值不能省略 xhtml支持更多設備、具有更好的擴展性文檔類型（DOCTYPE） 如果html文檔中不存在doctype聲明，某些瀏覽器在顯示文檔樣式（CSS）的時候，可能出現混亂。比如：

14、IE6.0。文檔類型（DOCTYPE） HTML5 HTML5中特意不加入版本聲明，表示文檔適合所有版本的HTML。文檔類型（DOCTYPE） 帶有 HTML5 DOCTYPE 的 HTML 文檔： Title of the document The content of the document. 鏈接標記鏈接標記 . 鏈接到一個地址鏈接到一個地址 跳轉到頁面內部的另外一個地方跳轉到頁面內部的另外一個地方 . 定義位置定義位置(錨標識錨標識) . 轉到位置轉到位置 在指定窗口打開鏈接在指定窗口打開鏈接 (Target Window) . 開一個新的開一個新的(瀏覽器瀏覽器)窗口，打開鏈接窗口

15、，打開鏈接 . 超鏈接的種類1) 用文本做超鏈接：用文本做超鏈接： 首頁2) 用圖像做超鏈接：用圖像做超鏈接：3) 文本圖像混合做鏈接：文本圖像混合做鏈接：格力空調1型超鏈接的種類4) 熱區鏈接：熱區鏈接：使用map在圖像上定義一幅地圖，地圖上可包含多個熱區，每個熱區用area單標記定義，area的shape屬性定義了熱區的形狀，coords定義了熱區的坐標點，href定義了熱區鏈接的文件。同時img標記用usemap指明用了哪幅地圖 超鏈接的title屬性 title屬性在很多標記里都有，其作用是在鼠標停留在該元素上時顯示設置的說明文字。 如格力太陽能喜獲標尺線標尺線 #=left, rig

16、ht 字體標記字體標記 標題字體標題字體(Header) . #=1, 2, 3, 4, 5, 6 這些標記顯示黑體字。這些標記顯示黑體字。 這些標記自動插入一個空行，不必用這些標記自動插入一個空行，不必用 標記再加空行。標記再加空行。這是標題這是標題字體標記字體標記 字體大小字體大小 . #=1, 2, 3, 4, 5, 6, 7 今天天氣真好！今天天氣真好！ 指定顏色指定顏色 . 字體標記字體標記 物理字體物理字體(Physical Style) 今天天氣真好！今天天氣真好！ 今天天氣真好！今天天氣真好！ 今天天氣真好！今天天氣真好！ 今天天氣真好！今天天氣真好！ 今天天氣真好！今天天氣真

17、好！ 今天天氣真好！今天天氣真好！ 字體標記字體標記 組合使用組合使用 今天今天 天氣天氣 真好！真好！ 字體標記字體標記 組合使用組合使用 今天今天 天氣天氣 真好！真好！ 字體標記字體標記 客戶端字體客戶端字體(Font Face) . #=客戶端可獲得的字體客戶端可獲得的字體 HTML 語語言教程言教程字體標記字體標記 字符實體字符實體(Entities) 格式：格式：&#; #=字符實體名稱字符實體名稱 或者或者 ascii 值值 & & < "   空格空格文字布局標記 標記一個段落，會換行。標記一個段落，會換行。 前后都換行前后都換行 換行換行 換

18、行換行文字布局標記 文字的對齊文字的對齊(Alignment) . . #=left, center, rightHelloHello . Hello 文字布局標記 文字的分區文字的分區(Division)顯示顯示 . 前后都會換行前后都會換行文字布局標記 無序列表無序列表 . TodayTommorow 有序列表有序列表 . TodayTommorow 文字布局標記 定義列表定義列表(Definition lists) .TodayToday is yesterday.TomorrowTomorrow is today. 文字布局標記 定制表中的標記定制表中的標記 #=disc, circle, square #=disc, circle, squareONETWOTHREE 文字布局標記 定制有序列表中的序號定制有序列表中的序號 #=A, a, I, i, 1ONE-ONEONE-TWO 文字布局標記 定制有序列表表中的序號的起始值定制有序列表表中的序號的起始值 #=number ONE-ONEONE-TWO 文字布局標記 預格式化文本預格式化文本(Preformatted Text) .Please use your card.VISA Master 按文字原來的格式顯示行內元素和塊級元素 行內元素(