HTML基礎知識

1、1/33HTML基礎知識第一講2/33HTML簡介HTML：Hyper Text Markup Language1993-6超文本標記語言1995-11HTML2.0HTML3.21996-1-14HTML4.01997-12-18HTML4.011999-12-24XHTML1.02000-1-26XHTML1.12001-5-31XHTML2.0HTML52013-5-6目前網(wǎng)頁中常用目前網(wǎng)頁中常用*XHTML：可擴展超文本標記語言3/33HTML簡介HTML：Hyper Text Markup LanguageHTML 指的是超文本標記語言 HTML 不是一種編程語言，而是一種標記語言

2、(markup language)標記語言是一套標記標簽 (markup tag)HTML 使用標記標簽來描述網(wǎng)頁4/33HTML簡介HTML 標簽標簽HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)HTML 標簽是由尖括號尖括號包圍的關鍵詞，比如 HTML 標簽通常是成對出現(xiàn)成對出現(xiàn)的，比如 和 標簽對中的第一個標簽是開始標簽開始標簽，第二個標簽是結束結束標簽標簽開始和結束標簽也被稱為開放標簽開放標簽和閉合標簽閉合標簽5/33HTML簡介HTML 文檔文檔 = 網(wǎng)頁網(wǎng)頁HTML 文檔描述網(wǎng)頁HTML 文檔包含 HTML 標簽和純文本HTML 文檔也被稱為網(wǎng)頁* Web 瀏覽

3、器的作用是讀取 HTML 文檔，并以網(wǎng)頁的形式顯示出它們。瀏覽器不會顯示HTML 標簽，而是使用標簽來解釋頁面的內(nèi)容。6/33HTML基本結構HTML網(wǎng)頁基本結構網(wǎng)頁基本結構 我的第一個網(wǎng)頁我的第一個網(wǎng)頁 我的第一個網(wǎng)頁我的第一個網(wǎng)頁網(wǎng)頁頭部網(wǎng)頁頭部主體部分主體部分標簽標記著標簽標記著 HTML 文檔的開始和結束文檔的開始和結束7/33網(wǎng)頁編輯工具記事本記事本UltraEdit演示示例演示示例1：在記事本和：在記事本和UltraEdit中操作中操作8/33網(wǎng)頁基本信息3-1DOCTYPE聲明聲明無標題文檔無標題文檔Strict（嚴格類型）（嚴格類型）Transitional（過渡類型）（過渡類

4、型）Frameset（框架類型）（框架類型）9/33網(wǎng)頁基本信息3-2標簽標簽家用電器排行榜家用電器排行榜元素可定義文檔的標題元素可定義文檔的標題10/33網(wǎng)頁的基本標簽6-1標題標簽標題標簽一級標題一級標題二級標題二級標題三級標題三級標題四級標題四級標題五級標題五級標題六級標題六級標題演示示例演示示例2：標題標簽：標題標簽11/33網(wǎng)頁的基本標簽6-2段落標簽段落標簽北京歡迎你北京歡迎你北京歡迎你，有夢想誰都了不起！北京歡迎你，有夢想誰都了不起！有勇氣就會有奇跡。有勇氣就會有奇跡。演示示例演示示例3：段落標簽：段落標簽12/33網(wǎng)頁的基本標簽6-3換行標簽換行標簽北京歡迎你北京歡迎你 北京歡

5、迎你，有夢想誰都了不起！北京歡迎你，有夢想誰都了不起！ 有勇氣就會有奇跡。有勇氣就會有奇跡。 北京歡迎你，為你開天辟地北京歡迎你，為你開天辟地 演示示例演示示例4：換行標簽：換行標簽13/33網(wǎng)頁的基本標簽6-4水平線標簽水平線標簽北京歡迎你北京歡迎你 北京歡迎你，有夢想誰都了不起！北京歡迎你，有夢想誰都了不起！ 有勇氣就會有奇跡。有勇氣就會有奇跡。 北京歡迎你，為你開天辟地北京歡迎你，為你開天辟地 演示示例演示示例5：水平線標簽：水平線標簽14/33網(wǎng)頁的基本標簽6-5字體樣式標簽字體樣式標簽加粗：斜體：徐志摩人物簡介徐志摩人物簡介 1910年入杭州學堂年入杭州學堂 1918年赴美國克拉大學

6、學習銀行學年赴美國克拉大學學習銀行學 演示示例演示示例6：字體樣式標簽：字體樣式標簽15/33網(wǎng)頁的基本標簽6-6注釋和特殊符號注釋和特殊符號演示示例演示示例7和和8：注釋和特殊符號：注釋和特殊符號特殊符號特殊符號字符實體字符實體示例示例空格空格 百度百度 | 新浪新浪大于號大于號()>如果時間如果時間>晚上晚上6點，就坐車回家點，就坐車回家小于號小于號()<如果時間如果時間<早上早上7點，就走路去上學點，就走路去上學引號引號()"W3C規(guī)范中，規(guī)范中，HTML的屬性值必須用成對的的屬性值必須用成對的"引起來引起來版權符

7、號版權符號 ©© 2003-2013北大青鳥北大青鳥16/33圖像標簽常見的圖像格式常見的圖像格式JPGGIFPNGBMP17/33圖像標簽圖像地址圖像地址圖像的替代文字圖像的替代文字語法語法鼠標懸停提示文字鼠標懸停提示文字圖像寬度圖像寬度圖像高度圖像高度演示示例演示示例9：圖像：圖像示例示例18/33鏈接標簽演示示例演示示例10：超鏈接的應用：超鏈接的應用鏈接文本或圖像鏈接文本或圖像鏈接路徑鏈接路徑鏈接在哪個窗口打開鏈接在哪個窗口打開語法語法百度百度常用值：常用值：_self、_blank文本超鏈接文本超鏈接圖像超鏈接圖像超鏈接示例示例19/33常用的超鏈接3-1頁面間鏈接頁面間鏈接從一個頁面鏈接到另外一個頁面錨鏈接錨鏈接功能性鏈接功能性鏈接演示示例演示示例11：頁面間鏈接：頁面間鏈接20/33常用的超鏈接3-2錨鏈接錨鏈接從A頁面的甲位置跳轉到本頁中的乙位置從A頁面的甲位置跳轉到B頁面中的乙位置創(chuàng)建步驟創(chuàng)建步驟創(chuàng)建跳轉標記創(chuàng)建跳轉鏈接演示示例演示示例12：錨鏈接：錨鏈接乙乙位置位置（顯示在頁面上的文本）甲甲位置位置（顯示在頁面上的文本）21/33常用的超鏈接3-3功能性鏈接功能性鏈接電子郵件QQMSN演示示例演示示例13：郵件鏈接：郵件鏈接聯(lián)系我們聯(lián)系我們示例示例22/33總結H