HTML語言簡介ppt課件

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

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

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

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

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

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

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

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

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

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

11、mage/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 29HTML的歷史HTML的發(fā)展歷程的發(fā)展歷程GML(1969)SGML

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

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

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

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

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

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

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