第2章HTML基礎(chǔ)介紹

1、信息科學(xué)與技術(shù)學(xué)院主講：馬 歌1.熟悉HTML文檔的基本結(jié)構(gòu)2.掌握HTML基本語法3.了解編寫HTML文件的注意事項 網(wǎng)頁的網(wǎng)頁的標(biāo)題標(biāo)題及及屬性屬性 文件主體文件主體 2.1 HTML HTML文檔結(jié)構(gòu)文檔結(jié)構(gòu)頭部分頭部分 主體部分主體部分 2.1.1 基本結(jié)構(gòu)基本結(jié)構(gòu) 一個簡單的一個簡單的HTML示例示例 歡迎光臨我的主頁歡迎光臨我的主頁 HTMLHTML文檔基本結(jié)構(gòu)示例文檔基本結(jié)構(gòu)示例文檔開始文檔開始文檔結(jié)束文檔結(jié)束頭部分頭部分 主體部分主體部分 p文檔標(biāo)記 HTML文檔的內(nèi)容文檔的內(nèi)容2.1.1 基本結(jié)構(gòu)基本結(jié)構(gòu) 標(biāo)記表示HTML文檔的開始，標(biāo)記表示HTML文檔的結(jié)束。 目的是告訴瀏

2、覽器這是一個Web文檔，需要按照HTML文檔進(jìn)行解釋。p文件頭標(biāo)記2.1.2 頭部內(nèi)容頭部內(nèi)容 頭部的內(nèi)容頭部的內(nèi)容 HTML文檔的頭部標(biāo)記，在瀏覽器窗口中，頭部信息是不被顯示在正文中的，在此標(biāo)記中可以插入其它用以說明文件的標(biāo)題和一些公共屬性的標(biāo)記。 頭部分允許的標(biāo)記：、 、 、 和 。p文件標(biāo)題標(biāo)記2.1.2 頭部內(nèi)容頭部內(nèi)容 標(biāo)題名標(biāo)題名 如要指定HTML文檔的網(wǎng)頁標(biāo)題（它將顯示在瀏覽器窗口頂部標(biāo)題欄），就要在頭部內(nèi)容中提供有關(guān)信息。 用title元素來指定網(wǎng)頁標(biāo)題，即在之間寫上網(wǎng)頁標(biāo)題，如程序2-2。2.1.2 頭部內(nèi)容頭部內(nèi)容 我的第一個網(wǎng)站我的第一個網(wǎng)站 網(wǎng)頁標(biāo)題的使用網(wǎng)頁標(biāo)題的使用

3、網(wǎng)頁標(biāo)題網(wǎng)頁標(biāo)題2.1.2 頭部內(nèi)容頭部內(nèi)容網(wǎng)頁標(biāo)題網(wǎng)頁標(biāo)題p標(biāo)記 meta標(biāo)記是一個特殊的HTML標(biāo)記，可提供有關(guān)頁面的元信息（meta-information）。 meta標(biāo)簽分兩大部分：HTTP標(biāo)題信息(http-equiv)和頁面描述信息(name)。 例如加入關(guān)鍵字會自動被大型搜索網(wǎng)站自動搜集；可以設(shè)定頁面格式及刷新等等。這些定義的內(nèi)容并不在網(wǎng)頁頁面中顯示。但它們會有一些特殊的作用。2.1.2 頭部內(nèi)容頭部內(nèi)容2.1.2 頭部內(nèi)容頭部內(nèi)容 設(shè)置網(wǎng)頁字符編碼方式設(shè)置網(wǎng)頁字符編碼方式定義搜索關(guān)鍵字，提定義搜索關(guān)鍵字，提供給搜索引擎使用供給搜索引擎使用設(shè)定自動刷新頁面時間設(shè)定自動刷新頁面時

4、間（聊天室常用）（聊天室常用）程序程序2-32-3pmeta的屬性 content（頁面描述）：定義與 http-equiv 或 name 屬性相關(guān)的元信息。 http-equiv：把 content 屬性關(guān)聯(lián)到 HTTP 頭部，取值范圍包括： content-type（內(nèi)容類型），expires（有效期限），refresh（刷新），set-cookie（cookie設(shè)定，即向客戶端發(fā)送cookie）。 name：把 content 屬性關(guān)聯(lián)到一個名稱。取值范圍：author（作者）、description（網(wǎng)站內(nèi)容描述）、keywords（關(guān)鍵字）、generator（生成器）、 robot

5、s（搜索引擎索引方式）等。2.1.2 頭部內(nèi)容頭部內(nèi)容phttp-equiv屬性 使用帶有http-equiv屬性的標(biāo)簽時，服務(wù)器將把名稱/值添加到發(fā)送給瀏覽器的內(nèi)容頭部。head /head content-type: text/html charset:gb2312 expires:31 Dec 2011 2.1.2 頭部內(nèi)容頭部內(nèi)容有效期限有效期限pname屬性 使用帶有name屬性的標(biāo)簽時，可以自由使用對自己和源文檔的讀者來說富有意義的名稱。head /head 2.1.2 頭部內(nèi)容頭部內(nèi)容文件被檢索，且頁面文件被檢索，且頁面上的鏈接可以被查詢上的鏈接可以被查詢p文件主體標(biāo)記2.1.3

6、 主體內(nèi)容主體內(nèi)容 文件主體文件主體 在標(biāo)記和中放置的是頁面中所有的內(nèi)容，如圖片、文字、表格、表單、超鏈接等元素。表表2-1 標(biāo)記的屬性標(biāo)記的屬性 文件主體標(biāo)記文件主體標(biāo)記值值說說 明明bgcolor設(shè)置網(wǎng)頁的背景色。background設(shè)置網(wǎng)頁的背景圖像。text設(shè)置文檔中所有文本的顏色。link設(shè)置尚未被訪問過的超文本鏈接的顏色，默認(rèn)為藍(lán)色。vlink設(shè)置已被訪問過的超文本鏈接的顏色，默認(rèn)為藍(lán)色。alink設(shè)置超文本鏈接在被訪問瞬間的顏色，默認(rèn)為藍(lán)色。topmargin設(shè)置文檔中上邊距的大小。leftmargin設(shè)置文檔中左邊距的大小。表表2-2 顏色代碼表顏色代碼表 文件主體標(biāo)記文件主體

7、標(biāo)記名稱名稱英文顏色名英文顏色名1616進(jìn)制代碼進(jìn)制代碼黑色black#000000藍(lán)色blue#0000FF棕色brown#A52A2A青色cyan#00FFFF灰色gray#808080綠色green#008000乳白色ivory#FFFFF0桔黃色orange#FFA500粉紅色pink#FFC0CB紅色red#FF0000白色white#FFFFFF黃色yellow#FFFF00深紅色crimson#CD061F黃綠色greenyellow#0B6EFF水藍(lán)色dodgerblue#0B6EFF淡紫色lavender#DBDBF8http:/ http:/ 2.1.3 主體內(nèi)容主體內(nèi)容

8、我的第一個頁面我的第一個頁面 這里是文章的標(biāo)題。這里是文章的標(biāo)題。 這里是文章的段落。這里是文章的段落。 在在body部分添加了幾個關(guān)于文本和段落的標(biāo)記部分添加了幾個關(guān)于文本和段落的標(biāo)記一級標(biāo)題一級標(biāo)題段落段落pDOCTYPE標(biāo)記 大多頁面的開頭，通常使用DOCTYPE標(biāo)記來聲明要使用什么風(fēng)格的HTML或XHTML。 DOCTYPE使瀏覽器知道應(yīng)該如何處理文檔，并且讓驗證器知道按照什么樣的標(biāo)準(zhǔn)檢查代碼的語法。然后，用html標(biāo)記標(biāo)出實(shí)際代碼的起始位置。2.1.4 編寫網(wǎng)頁的開頭編寫網(wǎng)頁的開頭2.1.4 編寫網(wǎng)頁的開頭編寫網(wǎng)頁的開頭表表2-3 HTML版本版本版版 本本年年 份份HTML1991

9、HTML+1993HTML 2.01995HTML 3.21997HTML 4.011999XHTML 1.02000HTML 520121.HTML 4.01 Strict 頁面中禁止使用被W3C已經(jīng)廢棄的標(biāo)記。不允許框架集（Framesets）。2.1.4 編寫網(wǎng)頁的開頭編寫網(wǎng)頁的開頭2.HTML 4.01 Transitional 頁面中允許使用被W3C已經(jīng)廢棄的標(biāo)記。不允許框架集（Framesets）。2.1.4 編寫網(wǎng)頁的開頭編寫網(wǎng)頁的開頭3.XHTML 1.0 Strict 頁面中禁止使用被W3C已經(jīng)廢棄的標(biāo)記。不允許框架集（Framesets）。必須以格式正確的 XML 來編寫標(biāo)

10、記。2.1.4 編寫網(wǎng)頁的開頭編寫網(wǎng)頁的開頭4.XHTML 1.0 Transitional 頁面中允許使用被W3C已經(jīng)廢棄的標(biāo)記。不允許框架集（Framesets）。必須以格式正確的 XML 來編寫標(biāo)記。2.1.4 編寫網(wǎng)頁的開頭編寫網(wǎng)頁的開頭5. HTML 52.1.4 編寫網(wǎng)頁的開頭編寫網(wǎng)頁的開頭6.XHTML 1.1 該 DTD 等同于 XHTML 1.0 Strict，但允許添加模型（例如提供對東亞語系的 ruby 支持）。2.1.4 編寫網(wǎng)頁的開頭編寫網(wǎng)頁的開頭為教材P18實(shí)驗添加背景顏色，字符編碼設(shè)置為簡體中文，2秒刷新打開xt1-1.htmlp標(biāo)記：標(biāo)記：是HTML的基本元素，

11、可以說一個HTML文件大部分都是由字符信息加上一些標(biāo)記呈現(xiàn)出來的。p基本的標(biāo)記可分為兩種： 單單標(biāo)記：只要一個標(biāo)記就能完成所要表示的功能。 雙雙標(biāo)記：需要首標(biāo)記首標(biāo)記和尾標(biāo)記尾標(biāo)記兩部分構(gòu)成才能完成所需功能。2.2 HTML HTML基本語法基本語法瀏覽器從這里開始執(zhí)行該標(biāo)記所表示的功能瀏覽器從這里開始執(zhí)行該標(biāo)記所表示的功能瀏覽器在這里結(jié)束該標(biāo)記的執(zhí)行瀏覽器在這里結(jié)束該標(biāo)記的執(zhí)行p單標(biāo)記 2.2.1 標(biāo)記語法標(biāo)記語法：表示換行：表示換行：表示圖像：表示圖像 p雙標(biāo)記 2.2.1 標(biāo)記語法標(biāo)記語法 內(nèi)容內(nèi)容 內(nèi)容內(nèi)容這是錯誤的交叉嵌套代碼這是錯誤的交叉嵌套代碼告訴瀏覽器介于標(biāo)記告訴瀏覽器介于標(biāo)記

12、和和之間的文本應(yīng)以粗體顯示之間的文本應(yīng)以粗體顯示標(biāo)記可以包含標(biāo)記，即標(biāo)記可以標(biāo)記可以包含標(biāo)記，即標(biāo)記可以成對嵌套，但是不能交叉地嵌套成對嵌套，但是不能交叉地嵌套pHTMLHTML語言標(biāo)記語言標(biāo)記是由英文單詞或其縮略字母和一對定界符（）共同組成，每一個標(biāo)記有一系列屬性。p標(biāo)記約定、描述、標(biāo)識了信息內(nèi)容，屬性控制了信息內(nèi)容顯示效果。2.2.2 屬性語法屬性語法2.2.2 屬性語法屬性語法 標(biāo)記名、屬性名和屬標(biāo)記名、屬性名和屬性值不區(qū)分大小寫性值不區(qū)分大小寫要適當(dāng)空格要適當(dāng)空格要適當(dāng)空格要適當(dāng)空格屬性沒有個數(shù)限制，順序任意屬性沒有個數(shù)限制，順序任意 或或網(wǎng)頁中插入網(wǎng)頁中插入一條水平線一條水平線p注釋

13、標(biāo)記用于在程序代碼中插入注釋。p注釋內(nèi)容不會在瀏覽器中顯示出來，僅用于對網(wǎng)頁有關(guān)內(nèi)容說明。適當(dāng)?shù)淖⑨寣σ院蟠a的閱讀和維護(hù)產(chǎn)生很大的幫助。p注釋內(nèi)容不局限于一行，長度也不受限制。 2.3 注釋注釋 p “”是任何標(biāo)記的開始和結(jié)束。元素的標(biāo)記要用這對尖括號括起來，并且結(jié)束的標(biāo)記總是在開始的標(biāo)記前加一個斜杠“/”；元素必須被關(guān)閉。p 標(biāo)記可以嵌套使用，但不能嵌套標(biāo)記。p 在源文件中不區(qū)分大小寫。p 任何回車符和空格在HTML代碼中都不起作用。為了代碼清晰，建議不同的標(biāo)記都單獨(dú)占一行。p 標(biāo)記中可以放置各種屬性，屬性值都用“”括起來；p 標(biāo)簽名和屬性建議都用小寫字母。p 編寫代碼，一般應(yīng)該使用縮進(jìn)風(fēng)

14、格，以便更好的理解頁面的結(jié)構(gòu)，便于閱讀和維護(hù)。 2.4 編寫編寫HTMLHTML文件的注意事項文件的注意事項 pHTML文件的命名要注意以下幾點(diǎn)：文件的擴(kuò)展名為.htm或.html結(jié)束，建議統(tǒng)一使用html作為文件名的后綴；文件名中只可由英文字母、數(shù)字或下劃線組成；文件名中不要包含特殊符號，比如空格、$等；文件名區(qū)分大小寫；網(wǎng)站首頁文件名一般是index.html或default.html。 2.4 編寫編寫HTMLHTML文件的注意事項文件的注意事項 編寫一個編寫一個HTML文件，在編寫的時候要注意編文件，在編寫的時候要注意編寫的注意事項，養(yǎng)成良好的編碼習(xí)慣。寫的注意事項，養(yǎng)成良好的編碼習(xí)慣。 2.5 小實(shí)例小實(shí)例 頁面的標(biāo)題頁面的標(biāo)題 這是我的第一個頁面。這是我的第一個頁面。這是粗體文本。這是粗體文本。 段落段落粗體粗體插入圖像插入