北京大學(xué)《計(jì)算概論》：html v

1、第六講第六講HTML語(yǔ)言簡(jiǎn)介語(yǔ)言簡(jiǎn)介北京大學(xué)北京大學(xué) 信息科學(xué)技術(shù)學(xué)信息科學(xué)技術(shù)學(xué)院院2012年年10月月本幻燈片根據(jù)本幻燈片根據(jù)http的內(nèi)容改編形成的內(nèi)容改編形成在學(xué)習(xí)過(guò)程中，如遇到問(wèn)題請(qǐng)到此網(wǎng)站 找到相關(guān)頁(yè)面 詳細(xì)瀏覽什么是什么是 HTML HTML 是一種用來(lái)設(shè)計(jì)網(wǎng)頁(yè)的語(yǔ)言是一種用來(lái)設(shè)計(jì)網(wǎng)頁(yè)的語(yǔ)言. HTML: Hyper Text Markup Language HTML 是一種標(biāo)記語(yǔ)言是一種標(biāo)記語(yǔ)言（markup language） 用用HTML語(yǔ)言撰寫(xiě)的文檔稱(chēng)為語(yǔ)言撰寫(xiě)的文檔稱(chēng)為HTML文檔文檔/網(wǎng)頁(yè)網(wǎng)頁(yè) HTML語(yǔ)言規(guī)定了一組語(yǔ)言規(guī)定了一組標(biāo)簽標(biāo)簽（markup tag）對(duì)網(wǎng)）

2、對(duì)網(wǎng)頁(yè)的內(nèi)容進(jìn)行組織頁(yè)的內(nèi)容進(jìn)行組織一個(gè)簡(jiǎn)單的一個(gè)簡(jiǎn)單的HTML文檔文檔 我的第一個(gè)網(wǎng)頁(yè) 這是一個(gè)一級(jí)標(biāo)題 這是一個(gè)段落. 文檔正文文檔頭文檔主體聲明內(nèi)容的編碼方式聲明該文檔的名稱(chēng)聲明一個(gè)一級(jí)標(biāo)題一級(jí)標(biāo)題元素聲明一個(gè)段落段落元素聲明該文檔是 HTML文檔聲明該文檔是 大陸中文文檔en 英文zh-hk 香港中文zh-tw 臺(tái)灣中文使用使用“記事本記事本”軟件軟件 編輯編輯htmlhtml文檔文檔HTML文檔的編輯與運(yùn)行文檔的編輯與運(yùn)行將文檔存儲(chǔ)為一個(gè)將文檔存儲(chǔ)為一個(gè) 以以htmlhtml為擴(kuò)展名為擴(kuò)展名的文件的文件HTML文檔的編輯與運(yùn)行文檔的編輯與運(yùn)行HTML文檔的編輯與運(yùn)行文檔的編輯與運(yùn)行H

3、TMLHTML文檔的編輯與運(yùn)行文檔的編輯與運(yùn)行用瀏覽器打開(kāi)用瀏覽器打開(kāi) HTML文檔文檔 HTMLHTML文檔的編輯與運(yùn)行文檔的編輯與運(yùn)行ChromeChrome瀏覽器瀏覽器 下載方式下載方式在在http:/搜索關(guān)鍵詞搜索關(guān)鍵詞 chrome選擇一個(gè)最新的選擇一個(gè)最新的 正式版正式版 下載下載 我的第一個(gè)網(wǎng)頁(yè) 這是一個(gè)一級(jí)標(biāo)題 這是一個(gè)段落. 一個(gè)簡(jiǎn)單的一個(gè)簡(jiǎn)單的HTML文檔文檔文檔正文文檔頭文檔主體聲明內(nèi)容的編碼方式聲明該文檔的名稱(chēng)聲明一個(gè)一級(jí)標(biāo)題一級(jí)標(biāo)題元素聲明一個(gè)段落段落元素聲明該文檔是 HTML文檔聲明該文檔是 大陸中文文檔？HTML 標(biāo)簽標(biāo)簽（1） 上頁(yè)上頁(yè)HTML文檔中出現(xiàn)的標(biāo)簽名

4、文檔中出現(xiàn)的標(biāo)簽名 html, head, meta, title, body, h1, p 一個(gè)標(biāo)簽一個(gè)標(biāo)簽/HTML 標(biāo)簽標(biāo)簽（2）大部分標(biāo)簽都是大部分標(biāo)簽都是 成對(duì)出現(xiàn)成對(duì)出現(xiàn) 的的 這是一個(gè)段落這是一個(gè)段落 不能不能包含斜杠包含斜杠必須必須含有斜杠含有斜杠HTML 標(biāo)簽標(biāo)簽（3）少部分標(biāo)簽是少部分標(biāo)簽是 單獨(dú)出現(xiàn)單獨(dú)出現(xiàn) 的的 例如：例如：屬性名屬性取值屬性HTML 標(biāo)簽標(biāo)簽（4）在成對(duì)出現(xiàn)的標(biāo)簽中，在成對(duì)出現(xiàn)的標(biāo)簽中，開(kāi)始標(biāo)簽開(kāi)始標(biāo)簽 也也可以可以包含屬性包含屬性，但，但結(jié)束標(biāo)簽結(jié)束標(biāo)簽 不能包含屬不能包含屬性性例如：例如： 屬性屬性名屬性取值HTML 元素元素（1）對(duì)于對(duì)于成對(duì)出現(xiàn)

5、成對(duì)出現(xiàn)的標(biāo)簽，的標(biāo)簽，開(kāi)始標(biāo)簽開(kāi)始標(biāo)簽結(jié)束標(biāo)簽結(jié)束標(biāo)簽兩者包圍的內(nèi)容兩者包圍的內(nèi)容形成一個(gè)形成一個(gè) HTML元素元素例一：例一：例二：例二： 這是一個(gè)段落這是一個(gè)段落 這是這是一個(gè)一級(jí)標(biāo)題一個(gè)一級(jí)標(biāo)題 這是這是一個(gè)段落一個(gè)段落. HTML 元素元素（2）對(duì)于對(duì)于單獨(dú)出現(xiàn)單獨(dú)出現(xiàn)的標(biāo)簽，的標(biāo)簽，標(biāo)簽本身標(biāo)簽本身 即形成一個(gè)即形成一個(gè) HTML元素元素 例如：例如： 我的第一個(gè)網(wǎng)頁(yè) 這是一個(gè)一級(jí)標(biāo)題 這是一個(gè)段落. HTML文檔文檔 結(jié)構(gòu)性質(zhì)結(jié)構(gòu)性質(zhì)HTML 的不同版本的不同版本版本版本發(fā)布年份發(fā)布年份HTML1991HTML+1993HTML 2.01995HTML 3.21997HTML 4

6、.011999XHTML 1.02000HTML 52012XHTML 52013訪問(wèn)訪問(wèn)/html5/觀看觀看HTML5的演示應(yīng)用的演示應(yīng)用不同版本不同版本 HTML 中中 聲明聲明 的的 差異差異 HTML5 HTML XHTML html 標(biāo)簽標(biāo)簽 HTML文檔正文的最外文檔正文的最外層標(biāo)簽層標(biāo)簽 必須成對(duì)出現(xiàn)必須成對(duì)出現(xiàn) 形成一個(gè)形成一個(gè)html元素元素 所有其它所有其它HTML元素都元素都包含在包含在html元素元素中中 一個(gè)一個(gè)HTML包含且僅包包含且僅包含一個(gè)含一個(gè)html元素元素 我的第一個(gè)網(wǎng)頁(yè) 這是一個(gè)一級(jí)標(biāo)題 這是一個(gè)段落. head 標(biāo)簽標(biāo)簽 文檔頭文檔頭 標(biāo)簽標(biāo)簽 必須

7、成對(duì)出現(xiàn)必須成對(duì)出現(xiàn) 形成形成head元素元素 只能直接嵌套在只能直接嵌套在html元素中元素中 head元素中可以聲明元素中可以聲明一組文檔的一組文檔的元信息元信息 文檔編碼文檔編碼 文檔名稱(chēng)文檔名稱(chēng) 我的第一個(gè)網(wǎng)頁(yè) 這是一個(gè)一級(jí)標(biāo)題 這是一個(gè)段落. body 標(biāo)簽標(biāo)簽 文檔主體文檔主體 標(biāo)簽標(biāo)簽 必須成對(duì)出現(xiàn)必須成對(duì)出現(xiàn) 形成形成body元素元素 只能直接嵌套在只能直接嵌套在html元素中元素中 body元素中包含了所元素中包含了所有的用戶(hù)內(nèi)容有的用戶(hù)內(nèi)容 除了除了html元素和元信元素和元信息元素外，其它息元素外，其它HTML元素都必須包含在該元素都必須包含在該元素中元素中 段落標(biāo)簽示例

8、 這是一個(gè)段落。 這是另一個(gè)段落. p 標(biāo)簽標(biāo)簽 段落段落（paragraph）標(biāo)簽）標(biāo)簽 必須成對(duì)出現(xiàn)必須成對(duì)出現(xiàn) 用于表現(xiàn)一段文字用于表現(xiàn)一段文字 大話西游是一部香港無(wú)厘頭搞笑片，成就了大話的經(jīng)典傳奇。 電影“大話西游”之月光寶盒和仙履奇緣這兩部影片按最初的設(shè)想是p 標(biāo)簽標(biāo)簽 大話西游是一部香港無(wú)厘頭搞笑片，成就了大話的經(jīng)典傳奇。 電影“大話西游”之月光寶盒和仙履奇緣這兩部影片按最初的設(shè)想是文字格式設(shè)置標(biāo)簽文字格式設(shè)置標(biāo)簽 這是粗體字 這是斜體字 這是被刪除的文字 這是下標(biāo)文字 這是上標(biāo)文字 標(biāo)題標(biāo)題 標(biāo)簽標(biāo)簽 用于表現(xiàn)一段標(biāo)題文字用于表現(xiàn)一段標(biāo)題文字 HTML定義了定義了6個(gè)級(jí)別的標(biāo)個(gè)級(jí)

9、別的標(biāo)題標(biāo)簽：題標(biāo)簽： h1, h2, h3, h4, h5, h6 標(biāo)題標(biāo)簽必須成對(duì)出現(xiàn)標(biāo)題標(biāo)簽必須成對(duì)出現(xiàn) 用標(biāo)題標(biāo)簽表現(xiàn)一個(gè)文用標(biāo)題標(biāo)簽表現(xiàn)一個(gè)文檔的結(jié)構(gòu)檔的結(jié)構(gòu) 題目：一級(jí)標(biāo)簽題目：一級(jí)標(biāo)簽 章：二級(jí)標(biāo)簽章：二級(jí)標(biāo)簽 節(jié)：三級(jí)標(biāo)簽節(jié)：三級(jí)標(biāo)簽 子節(jié)：四級(jí)標(biāo)簽子節(jié)：四級(jí)標(biāo)簽 這是一級(jí)標(biāo)題 這是二級(jí)標(biāo)題 這是三級(jí)標(biāo)題 這是四級(jí)標(biāo)題 這是五級(jí)標(biāo)題 這是六級(jí)標(biāo)題 標(biāo)題標(biāo)題 標(biāo)簽標(biāo)簽 這是一級(jí)標(biāo)題 這是二級(jí)標(biāo)題 這是三級(jí)標(biāo)題 這是四級(jí)標(biāo)題 這是五級(jí)標(biāo)題 這是六級(jí)標(biāo)題 標(biāo)題標(biāo)簽段落標(biāo)簽標(biāo)題標(biāo)簽段落標(biāo)簽 組織文檔組織文檔 小雞的一生 小雞 用于食用而飼養(yǎng)的小雞（用于食用而飼養(yǎng)的小雞（“適于適于烤焙的

10、嫩雞烤焙的嫩雞”）從運(yùn)輸?shù)呢涍\(yùn)箱中被丟）從運(yùn)輸?shù)呢涍\(yùn)箱中被丟入到大飼養(yǎng)入到大飼養(yǎng)棚的地板上棚的地板上 飼養(yǎng)小雞的棚 由于成千上萬(wàn)的小雞被關(guān)入飼養(yǎng)棚中，隨著動(dòng)物們的生長(zhǎng)飼養(yǎng)棚也就越發(fā)擁擠了起來(lái)。為了取食喝水，小雞們經(jīng)常爭(zhēng)相踩到其他伙伴的頭頂上，或是踩在死去的同伴的身體上。 題目第一節(jié)標(biāo)題第二節(jié)標(biāo)題第一節(jié)正文第二節(jié)正文列列 標(biāo)簽標(biāo)簽有序 列無(wú)序 列定義 列 下面是 茶 咖啡 牛奶 下面是 茶 咖啡 牛奶 茶 一種用樹(shù)葉泡制的飲料 咖啡 一種黑色的飲料 牛奶 一種白色的飲料a 標(biāo)簽標(biāo)簽 超鏈接指向的網(wǎng)頁(yè)的網(wǎng)址超鏈接的名字 下面是一個(gè)超連接： 北京大學(xué)北京大學(xué)列標(biāo)簽列標(biāo)簽 和和 a標(biāo)簽標(biāo)簽 的的 組合

11、組合 北京地區(qū)高校的分類(lèi): 北京大學(xué) 清華大學(xué)及其它高校 清華大學(xué) 北京航空航天大學(xué) 北京理工大學(xué) . 有有序序列列元元素素條條目目元元素素?zé)o無(wú)序序列列元元素素條目元素條目元素超鏈接元素超鏈接元素a a 標(biāo)簽標(biāo)簽 我自己編寫(xiě)了我自己編寫(xiě)了2個(gè)個(gè)html文檔文檔能在它們之間建立超鏈接嗎？能在它們之間建立超鏈接嗎？08 A頁(yè)面.html08 B頁(yè)面.html 我是頁(yè)面A 下面是我的兄弟，請(qǐng)點(diǎn)擊它 頁(yè)面B這里是頁(yè)面B請(qǐng)向我的兄弟問(wèn)好去往頁(yè)面A，請(qǐng) 點(diǎn)擊這里填寫(xiě)要鏈接的填寫(xiě)要鏈接的文件的名稱(chēng)文件的名稱(chēng)iframe: 一個(gè)神奇的標(biāo)簽一個(gè)神奇的標(biāo)簽屬性名屬性名取值取值/ /含義含義“0”: 沒(méi)有邊框沒(méi)有邊

12、框 ”1“: 有邊框有邊框一串字符一串字符: : 給給iframeiframe起一個(gè)名字起一個(gè)名字例如：50%iframe: 一個(gè)神奇的標(biāo)簽一個(gè)神奇的標(biāo)簽iframeiframe: : 一個(gè)神奇的標(biāo)簽一個(gè)神奇的標(biāo)簽iframeiframe: : 一個(gè)神奇的標(biāo)簽一個(gè)神奇的標(biāo)簽img 標(biāo)簽標(biāo)簽 屬性名屬性名取值取值/ /含義含義一串字符: 當(dāng)圖片加載失敗時(shí)，在網(wǎng)頁(yè)上顯示的文字當(dāng)圖片加載失敗時(shí)，在網(wǎng)頁(yè)上顯示的文字正整數(shù): 圖片占用的顯示區(qū)域的寬度（單位：像素）正整數(shù): 圖片占用的顯示區(qū)域的高度（單位：像素）img 標(biāo)簽：顯示一個(gè)在線的圖片標(biāo)簽：顯示一個(gè)在線的圖片img 標(biāo)簽：標(biāo)簽：顯示一個(gè)本地的圖片顯示一個(gè)本地的圖片當(dāng)前目錄的當(dāng)前目錄的子目錄子目錄img中中 文件名為文件名為”的圖片的圖片 img 標(biāo)簽標(biāo)簽img的的更多使用技巧，請(qǐng)參看：更多使