讓IT教學更簡單，讓IT學習更有效,第二章HTML入門,認識HTMLHTML圖像標記,HTML文本控制標記絕對路徑和相對路徑,2.1什么是HTML,學習任何一門語言，都要首先掌握它的基本格式，就像寫信需要符合書信的格式要求一樣。HTML標記語言也不例外，同樣需要遵從一定的規(guī)范。HTML文檔的基本格式，其中主要包括文檔類型聲明、根標記、頭部標記、主體標記。,2.1.1HTML基本文檔格式,2.1什么是HTML,標記位于文檔的最前面，用于向瀏覽器說明當前文檔使用哪種HTML或XHTML標準規(guī)范，如例2-1中使用的是Dreamweaver默認的XHTML1.0過渡型XHTML文檔。本書將全部采用XHTML1.0過渡型XHTML文檔。必需在開頭處使用標記為所有的XHTML文檔指定XHTML版本和類型，只有這樣瀏覽器才能將該網(wǎng)頁作為有效的XHTML文檔，并按指定的文檔類型進行解析。標記和瀏覽器的兼容性相關，刪除，就是把如何展示HTML頁面的權利交給瀏覽器。這時，IE6，IE7，IE8，F(xiàn)irefox2，F(xiàn)irefox3，Chrome，有多少種瀏覽器，頁面就有可能有多少種顯示效果，這是不被允許的。,2.1.1HTML基本文檔格式標記,2.1什么是HTML,標記位于標記之后，也稱為根標記，用于告知瀏覽器其自身是一個HTML文檔，標記標志著HTML文檔的開始，標記標志著HTML文檔的結束，在他們之間的是文檔的頭部和主體內(nèi)容。在之后有一串代碼“xmlns=/1999/xhtml”用于聲明XHTML統(tǒng)一的默認命名空間。,2.1.1HTML基本文檔格式標記,2.1什么是HTML,標記用于定義HTML文檔的頭部信息，也稱為頭部標記，緊跟在標記之后，主要用來封裝其他位于文檔頭部的標記，例如、及等，用來描述文檔的標題、作者以及和其他文檔的關系等。關于內(nèi)的重要標記將在2.1.4小節(jié)具體講解。一個HTML文檔只能含有一對標記，絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示在頁面中。,2.1.1HTML基本文檔格式標記,2.1什么是HTML,標記用于定義HTML文檔所要顯示的內(nèi)容，也稱為主體標記。瀏覽器中顯示的所有文本、圖像、音頻和視頻等信息都必須位于標記內(nèi)，標記中的信息才是最終展示給用戶看的。一個HTML文檔只能含有一對標記，且標記必須在標記內(nèi)，位于頭部標記之后，與標記是并列關系。,2.1.1HTML基本文檔格式標記,2.1什么是HTML,2.1.2HTML標記,在HTML頁面中，帶有“”符號的元素被稱為HTML標記，如上面提到的、都是HTML標記。所謂標記就是放在“”標記符中表示某個功能的編碼命令，也稱為HTML標簽或HTML元素，本書統(tǒng)一稱作HTML標記。,2.1什么是HTML,2.1.2HTML標記雙標記,雙標記也稱體標記，是指由開始和結束兩個標記符組成的標記。其基本語法格式如下：該語法中“”表示該標記的作用開始，一般稱為“開始標記（starttag）”，“”表示該標記的作用結束，一般稱為“結束標記（endtag）”。和開始標記相比，結束標記只是在前面加了一個關閉符“/”。,內(nèi)容,單標記也稱空標記，是指用一個標記符號即可完整地描述某個功能的標記。其基本語法格式如下：,2.1什么是HTML,2.1.2HTML標記單標記,在HTML中還有一種特殊的標記注釋標記。如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標記。其基本語法格式如下：注釋內(nèi)容不會顯示在瀏覽器窗口中，但是作為HTML文檔內(nèi)容的一部分，也會被下載到用戶的計算機上，查看源代碼時就可以看到。,2.1.2HTML標記注釋標記,2.1什么是HTML,使用HTML制作網(wǎng)頁時，如果想讓HTML標記提供更多的信息，可以使用HTML標記的屬性加以設置。其基本語法格式如下：在上面的語法中，標記可以擁有多個屬性，必須寫在開始標記中，位于標記名后面。屬性之間不分先后順序，標記名與屬性、屬性與屬性之間均以空格分開。任何標記的屬性都有默認值，省略該屬性則取默認值。,2.1.3標記屬性,內(nèi)容,2.1什么是HTML,例如：其中align為屬性名，center為屬性值，表示標題文本居中對齊，對于標題標記還可以設置文本左對齊或右對齊，對應的屬性值分別為left和right。如果省略align屬性，標題文本則按默認值左對齊顯示，也就是說等價于。,2.1.3標記屬性例子,標題文本,2.1什么是HTML,例如：書寫HTML頁面時，經(jīng)常會在一對標記之間再定義其他的標記，在HTML中，把這種標記間的包含關系稱為標記的嵌套。在嵌套結構中，HTML元素的樣式總是遵從“就近原則”，如上面代碼中的“傳智播客”這幾個文字的顏色會遵從最靠近他的標記，而size屬性遵從外層的標記，對齊屬性則遵從最外層的標記。,2.1.3標記屬性標記嵌套,更行時間：2013年09月28日14時08分來源：傳智播客,2.1什么是HTML,制作網(wǎng)頁時，經(jīng)常需要設置頁面的基本信息，如頁面的標題、作者、和其他文檔的關系等。為此HTML提供了一系列的標記，這些標記通常都寫在head標記內(nèi)，因此被稱為頭部相關標記。,2.1.4HTML文檔頭部相關標記,2.1什么是HTML,標記用于定義HTML頁面的標題，即給網(wǎng)頁取一個名字，必須位于標記之內(nèi)。一個HTML文檔只能含有一對標記，之間的內(nèi)容將顯示在瀏覽器窗口的標題欄中。其基本語法格式如下：,2.1.4HTML文檔頭部相關標記,2.1什么是HTML,網(wǎng)頁標題名稱,標記用于定義頁面的元信息，可重復出現(xiàn)在頭部標記中，在HTML中是一個單標記。標記本身不包含任何內(nèi)容，通過“名稱/值”的形式成對的使用其屬性可定義頁面的相關參數(shù)，例如為搜索引擎提供網(wǎng)頁的關鍵字、作者姓名、內(nèi)容描述，以及定義網(wǎng)頁的刷新時間等。,2.1.4HTML文檔頭部相關標記,2.1什么是HTML,（1）設置網(wǎng)頁關鍵字，例如傳智播客官網(wǎng)關鍵字的設置：其中name屬性的值為keywords，用于定義搜索內(nèi)容名稱為網(wǎng)頁關鍵字，content屬性的值用于定義關鍵字的具體內(nèi)容，多個關鍵字內(nèi)容之間可以用“,”分隔。,2.1.4HTML文檔頭部相關標記,2.1什么是HTML,（2）設置網(wǎng)頁描述，例如傳智播客官網(wǎng)描述信息的設置：其中name屬性的值為description，用于定義搜索內(nèi)容名稱為網(wǎng)頁描述，content屬性的值用于定義描述的具體內(nèi)容。需要注意的是網(wǎng)頁描述的文字不必過多。,2.1.4HTML文檔頭部相關標記,2.1什么是HTML,（3）設置網(wǎng)頁作者，例如可以為傳智播客官網(wǎng)增加作者信息：其中name屬性的值為author，用于定義搜索內(nèi)容名稱為網(wǎng)頁作者，content屬性的值用于定義具體的作者信息。,2.1.4HTML文檔頭部相關標記,2.1什么是HTML,在標記中使用http-equiv/content屬性可以設置服務器發(fā)送給瀏覽器的HTTP頭部信息，為瀏覽器顯示該頁面提供相關的參數(shù)。其中，http-equiv屬性提供參數(shù)類型，content屬性提供對應的參數(shù)值。默認會發(fā)送，通知瀏覽器發(fā)送的文件類型是HTML。,2.1.4HTML文檔頭部相關標記,2.1什么是HTML,（1）設置字符集，例如傳智播客官網(wǎng)字符集的設置：其中http-equiv屬性的值為Content-Type，content屬性的值為text/html和charset=utf-8，中間用“;”隔開，用于說明當前文檔類型為HTML，字符集為utf-8(國際化編碼)。utf-8是目前最常用的字符集編碼方式，常用的字符集編碼方式還有gbk和gb2312。,2.1.4HTML文檔頭部相關標記,2.1什么是HTML,（2）設置頁面自動刷新與跳轉(zhuǎn)，例如定義某個頁面10秒后跳轉(zhuǎn)至傳智播客官網(wǎng)：其中http-equiv屬性的值為refresh，content屬性的值為數(shù)值和url地址，中間用“;”隔開，用于指定在特定的時間后跳轉(zhuǎn)至目標頁面，該時間默認以秒為單位。,2.1.4HTML文檔頭部相關標記,2.1什么是HTML,一個頁面往往需要多個外部文件的配合，在中使用標記可引用外部文件，一個頁面允許使用多個標記引用多個外部文件。其基本語法格式如下：,2.1.4HTML文檔頭部相關標記,2.1什么是HTML,2.1.4HTML文檔頭部相關標記常用屬性,2.1什么是HTML,2.1.4HTML文檔頭部相關標記,2.1什么是HTML,標記用于為HTML文檔定義樣式信息，位于頭部標記中，其基本語法格式如下：在HTML中使用style標記時，常常定義其屬性為type，相應的屬性值為text/css，表示使用內(nèi)嵌式的CSS樣式。,樣式內(nèi)容,2.2HTML文本控制標記,為了使網(wǎng)頁更具有語義化，我們經(jīng)常會在頁面中用到標題標記，HTML提供了6個等級的標題，即、和，從到重要性遞減。其基本語法格式如下：該語法中n的取值為1到6，align屬性為可選屬性，用于指定標題的對齊方式。,2.2.1標題和段落標記標題標記,標題文本,2.2HTML文本控制標記,align屬性設置對齊方式，其取值如下：,2.2.1標題和段落標記標題標記,left設置標題文字左對齊（默認值）center設置標題文字居中對齊right設置標題文字右對齊,2.2HTML文本控制標記,在網(wǎng)頁中要把文字有條理地顯示出來，離不開段落標記，就如同我們平常寫文章一樣，整個網(wǎng)頁也可以分為若干個段落，而段落的標記就是。該語法中align屬性為標記的可選屬性，和標題標記一樣，同樣可以使用align屬性設置段落文本的對齊方式。是HTML文檔中最常見的標記，默認情況下，文本在一個段落中會根據(jù)瀏覽器窗口的大小自動換行。,2.2.1標題和段落標記段落標記,段落文本,在網(wǎng)頁中常常看到一些水平線將段落與段落之間隔開，使得文檔結構清晰，層次分明。這些水平線可以通過插入圖片實現(xiàn)，也可以簡單地通過標記來完成，就是創(chuàng)建橫跨網(wǎng)頁水平線的標記。其基本語法格式如下：是單標記，在網(wǎng)頁中輸入一個，就添加了一條默認樣式的水平線。,2.2.1標題和段落標記水平線標記,2.2HTML文本控制標記,2.2.1標題和段落標記水平線標記屬性,2.2HTML文本控制標記,在HTML中，一個段落中的文字會從左到右依次排列，直到瀏覽器窗口的右端，然后自動換行。如果希望某段文本強制換行顯示，就需要使用換行標記，這時如果還像在word中直接敲回車鍵換行就不起作用了。,2.2.1標題和段落標記換行標記,2.2HTML文本控制標記,多種多樣的文字效果可以使網(wǎng)頁變得更加絢麗，為此HTML提供了文本樣式標記，用來控制網(wǎng)頁中文本的字體、字號和顏色。其基本語法格式如下：標記常用的屬性:,2.2.2文本樣式標記,2.2HTML文本控制標記,文本內(nèi)容,在網(wǎng)頁中，有時需要為文字設置粗體、斜體或下劃線效果，這時就需要用到HTML中的文本格式化標記，使文字以特殊的方式顯示。文本格式化常用標記,2.2.3文本格式化標記,2.2HTML文本控制標記,2.2HTML文本控制標記,HTML為這些特殊字符準備了專門的替代代碼,2.2.4特殊字符標記,2.3HTML圖像標記,GIF格式GIF最突出的地方就是他支持動畫，同時GIF也是一種無損的圖像格式，也就是說修改圖片之后，圖片質(zhì)量幾乎沒有損失。再加上GIF支持透明（全透明或全不透明），因此很適合在互聯(lián)網(wǎng)上使用。但GIF只能處理256種顏色。在網(wǎng)頁制作中，GIF格式常常用于Logo、小圖標及其他色彩相對單一的圖像。,2.3.1常用的圖像格式GIF,2.3HTML圖像標記,PNG格式PNG包括PNG-8和真色彩PNG（PNG-24和PNG-32）。相對于GIF，PNG最大的優(yōu)勢是體積更小，支持alpha透明（全透明，半透明，全不透明），并且顏色過渡更平滑，但PNG不支持動畫。同時需要注意的是IE6是可以支持PNG-8的，但在處理PNG-24的透明時會顯示為灰色。通常，圖片保存為PNG-8會在同等質(zhì)量下獲得比GIF更小的體積，而半透明的圖片只能使用PNG-24。,2.3.1常用的圖像格式PNG,2.3HTML圖像標記,JPG格式PNG包括PNG-8和真色彩PNG（PNG-24和PNG-32）。相對于GIF，PNG最大的優(yōu)勢是體積更小，支持alpha透明（全透明，半透明，全不透明），并且顏色過渡更平滑，但PNG不支持動畫。同時需要注意的是IE6是可以支持PNG-8的，但在處理PNG-24的透明時會顯示為灰色。通常，圖片保存為PNG-8會在同等質(zhì)量下獲得比GIF更小的體積，而半透明的圖片只能使用PNG-24。,2.3.1常用的圖像格式JPG,2.3HTML圖像標記,2.3.2圖像標記,HTML網(wǎng)頁中任何元素的實現(xiàn)都要依靠HTML標記，要想在網(wǎng)頁中顯示圖像就需要使用圖像標記，接下來將詳細介紹圖像標記以及和他相關的屬性。其基本語法格式如下：該語法中src屬性用于指定圖像文件的路徑和文件名，他是img標記的必需屬性。,2.3HTML圖像標記,2.3.2圖像標記,標記屬性,2.3.3相對路徑和絕對路徑,什么是路徑？實際工作中，通常新