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

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

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

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

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

5、成對出現(xiàn)的標(biāo)簽，的標(biāo)簽，開始標(biāo)簽開始標(biāo)簽結(jié)束標(biāo)簽結(jié)束標(biāo)簽兩者包圍的內(nèi)容兩者包圍的內(nèi)容形成一個形成一個 HTML元素元素例一：例一：例二：例二： 這是一個段落這是一個段落 這是這是一個一級標(biāo)題一個一級標(biāo)題 這是這是一個段落一個段落. HTML 元素元素（2）對于對于單獨出現(xiàn)單獨出現(xiàn)的標(biāo)簽，的標(biāo)簽，標(biāo)簽本身標(biāo)簽本身 即形成一個即形成一個 HTML元素元素 例如：例如： 我的第一個網(wǎng)頁 這是一個一級標(biāo)題 這是一個段落. 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訪問訪問/html5/觀看觀看HTML5的演示應(yīng)用的演示應(yīng)用不同版本不同版本 HTML 中中 聲明聲明 的的 差異差異 HTML5 HTML XHTML html 標(biāo)簽標(biāo)簽 HTML文檔正文的最外文檔正文的最外層標(biāo)簽層標(biāo)簽 必須成對出現(xiàn)必須成對出現(xiàn) 形成一個形成一個html元素元素 所有其它所有其它HTML元素都元素都包含在包含在html元素元素中中 一個一個HTML包含且僅包包含且僅包含一個含一個html元素元素 我的第一個網(wǎng)頁 這是一個一級標(biāo)題 這是一個段落. head 標(biāo)簽標(biāo)簽 文檔頭文檔頭 標(biāo)簽標(biāo)簽 必須

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

8、 這是一個段落。 這是另一個段落. p 標(biāo)簽標(biāo)簽 段落段落（paragraph）標(biāo)簽）標(biāo)簽 必須成對出現(xiàn)必須成對出現(xiàn) 用于表現(xiàn)一段文字用于表現(xiàn)一段文字 大話西游是一部香港無厘頭搞笑片，成就了大話的經(jīng)典傳奇。 電影“大話西游”之月光寶盒和仙履奇緣這兩部影片按最初的設(shè)想是p 標(biāo)簽標(biāo)簽 大話西游是一部香港無厘頭搞笑片，成就了大話的經(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個級別的標(biāo)個級

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

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

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

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