第2章HTML入門

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