第2章HTML入門

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