HTML基礎(chǔ)知識(shí)

1、HTML 學(xué)習(xí)任何一門(mén)語(yǔ)言，都要首先掌握它的基本格式，就像寫(xiě)信需要符合書(shū)信的格式要求一樣。HTML標(biāo)記語(yǔ)言也 不例外，同樣需要遵從一定的規(guī)范。接下來(lái)將具體講解HTML文檔的基本格式。 HTML文檔的基本格式主要包括文檔類型聲明、根標(biāo)記、頭部標(biāo)記、主體標(biāo)記，具體介紹如下： (1) 標(biāo)記 標(biāo)記位于文檔的最前面，用于向?yàn)g覽器說(shuō)明當(dāng)前文檔使用哪種HTML或XHTML(可擴(kuò)展超文 坐標(biāo)記語(yǔ)言)標(biāo)準(zhǔn)規(guī)范，必需在開(kāi)頭處使用標(biāo)記為所有的XHTML文檔指定XHTML版本和類型，只有這而I覽器才能將該網(wǎng)頁(yè)作為有效的XHTML文檔，并按指定的文檔類型進(jìn)行解析。 (2) 標(biāo)記 標(biāo)記位于標(biāo)記之后，也稱為根標(biāo)記，用于告知

2、瀏覽器其自身是一個(gè)HTML文檔， 標(biāo)記標(biāo)志著HTML文檔的開(kāi)始，標(biāo)記標(biāo)志著HTML文檔的結(jié)束，在它們之間的是文檔的頭部和主體內(nèi)容。 在之后有一串代碼“xmlns=用于聲明XHTML統(tǒng)一的默認(rèn)命名空間。 (3) 標(biāo)記 標(biāo)記用于定義HTML文檔的頭部信息，也稱為頭部標(biāo)記，緊跟在標(biāo)記之后，主要用來(lái)封裝其他位于文檔頭部的標(biāo)記，例如、及等，用來(lái)描述文檔的標(biāo)題、作者以及和其他文檔的多宏箋 一個(gè)HTML文檔只能含有一對(duì)標(biāo)記，絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會(huì)真正作為內(nèi)容顯示在頁(yè)面中。 (4) 標(biāo)記 標(biāo)記用于定義HTML文檔所要顯示的內(nèi)容，也稱為主體標(biāo)記。瀏覽器中顯示的所有文本、圖像、音頻和視頻等信息都必須位于

3、標(biāo)記內(nèi)，標(biāo)記中的信息才是最終展示給用戶看的。 一個(gè)HTML文檔只能含有一對(duì)標(biāo)記，且標(biāo)記必須在標(biāo)記內(nèi)，位于頭部標(biāo)記之后，與標(biāo)記是并列關(guān)系。 在HTML頁(yè)面中，帶有”符號(hào)的元素被稱為HTML標(biāo)記，如上面提到的、都是HTML標(biāo)記。所謂標(biāo)記就是放在“”標(biāo)記符中表示某個(gè)功能的編碼命令，也稱為HTML標(biāo)簽或HTML元素，本書(shū) 統(tǒng)一稱作HTML標(biāo)記。 為了方便學(xué)習(xí)和理解，通常將HTML標(biāo)記分為兩大類，分別是“雙標(biāo)記”與“單標(biāo)記”。 (1)雙標(biāo)記 雙標(biāo)記也稱體標(biāo)記，是指由開(kāi)始和結(jié)束兩個(gè)標(biāo)記符組成的標(biāo)記。其基本語(yǔ)法格式如下： 該語(yǔ)法中“”表示該標(biāo)記的作用開(kāi)始，一般稱為“開(kāi)始標(biāo)記(starttag)”，“”表示該

4、標(biāo)記的作用結(jié)束，一般稱為“結(jié)束標(biāo)記(endtag)”。和開(kāi)始標(biāo)記相比，結(jié)束標(biāo)記只是在前面加了一個(gè)關(guān)閉符“/”。 (2)單標(biāo)記 單標(biāo)記也稱空標(biāo)記，是指用一個(gè)標(biāo)記符號(hào)即可完整地描述某個(gè)功能的標(biāo)記。其基本語(yǔ)法格式如下： 一篇結(jié)構(gòu)清晰的文章通常都有標(biāo)題和段落，HTML網(wǎng)頁(yè)也不例外，為了使網(wǎng)頁(yè)中的文字有條理地顯示出來(lái)， HTML提供了相應(yīng)的標(biāo)記。 (1)標(biāo)題標(biāo)記 為了使網(wǎng)頁(yè)更具有語(yǔ)義化，經(jīng)常會(huì)在頁(yè)面中用到標(biāo)題標(biāo)記，HTML提供了6個(gè)等級(jí)的標(biāo)題，即、 、和,從到重要性遞減。其基本語(yǔ)法格式如下：標(biāo)題 文本 該語(yǔ)法中n的取值為1到6,align屬性為可選屬性，用于指定標(biāo)題的對(duì)齊方式，下面來(lái)演示標(biāo)題標(biāo)記的使用。

5、 (2)段落標(biāo)記 在網(wǎng)頁(yè)中要把文字有條理地顯示出來(lái)，離不開(kāi)段落標(biāo)記，就如同我們平常寫(xiě)文章一樣，整個(gè)網(wǎng)頁(yè)也可以分為若干個(gè)段落，而段落的標(biāo)記就是。其基本語(yǔ)法格式如下： 段落文本 該語(yǔ)法中align屬性為標(biāo)記的可選屬性，和標(biāo)題標(biāo)記一樣，同樣可以使用align屬性設(shè)置段落 文本的對(duì)齊方式。 制作網(wǎng)頁(yè)時(shí)，經(jīng)常需要設(shè)置頁(yè)面的基本信息，如頁(yè)面的標(biāo)題、作者、和其他文檔的關(guān)系等。為此HTML提供了 一系列的標(biāo)記，這些標(biāo)記通常都寫(xiě)在標(biāo)記內(nèi)，因此被稱為頭部相關(guān)標(biāo)記。 11)標(biāo)記 標(biāo)記用于定義HTML頁(yè)面的標(biāo)題，即給網(wǎng)頁(yè)取一個(gè)名字，必須位于標(biāo)記之內(nèi)。一個(gè)HTML文檔只能含有一對(duì)標(biāo)記，之間的內(nèi)容將顯示在瀏覽器窗口的標(biāo)題

6、欄中。其基本語(yǔ)法格式如下： 網(wǎng)頁(yè)標(biāo)題名稱 (2)標(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í)間等。 (3) 標(biāo)記 一個(gè)頁(yè)面往往需要多個(gè)外部文件的配合，在中使用標(biāo)記可引用外部文件，一個(gè)頁(yè)面允許使用多 個(gè)標(biāo)記引用多個(gè)外部文件。其基本語(yǔ)法格式如下： 屬性 名 常用屬性值 描述 href URL 指定引用外部文檔的地址 指定當(dāng)前文檔與引用外部文檔 rel stylesheet 的關(guān)系，該屬性值通常為style

7、sheet, 表示定義一個(gè)外部樣式表 引用外部文檔的類型為CSS樣text/css 式表 type 引用外部文檔的類型為text/javascript javascript腳本 (4) 標(biāo)記 標(biāo)記用于為HTML文檔定義樣式信息，位于頭部標(biāo)記中，其基本語(yǔ)法格式如下：樣式內(nèi)容 在HTML中使用style標(biāo)記時(shí)，常常定義其屬性為type,相應(yīng)的屬性值為text/css，表示使用內(nèi)嵌式的CSS樣式。 多種多樣的文字效果可以使網(wǎng)頁(yè)變得更加絢麗，為此HTML提供了文本樣式標(biāo)記,用來(lái)控制網(wǎng)頁(yè)中文本 的字體、字號(hào)和顏色。其基本語(yǔ)法格式如下： font屬性=屬性值文本內(nèi)容 標(biāo)記常用的屬性： 屬性名含義 face

8、設(shè)置文字的字體，例如微軟雅黑、黑體、宋體等 size設(shè)置文字的大小，可以取1至IJ7之間的整數(shù)值 color設(shè)置文字的顏色 使用HTML制作網(wǎng)頁(yè)時(shí)，如果想讓HTML標(biāo)記提供更多的信息，例如希望標(biāo)題文本的字體為“微軟雅黑”且居中顯示，此時(shí)僅僅依靠HTML標(biāo)記的默認(rèn)顯示樣式已經(jīng)不能滿足需求了，需要使用HTML標(biāo)記的屬性加以設(shè)置。其基本 語(yǔ)法格式如下： 標(biāo)記名屬性1=屬性值1屬性2=屬性值2內(nèi)容 在上面的語(yǔ)法中，標(biāo)記可以擁有多個(gè)屬性，必須寫(xiě)在開(kāi)始標(biāo)記中，位于標(biāo)記名后面。屬性之間不分先后順序，標(biāo)記名與屬性、屬性與屬性之間均以空格分開(kāi)，任何標(biāo)記的屬性都有默認(rèn)值，省略該屬性則取默認(rèn)值。 其中align為屬

9、性名，center為屬性值，表示標(biāo)題文本居中對(duì)齊，對(duì)于標(biāo)題標(biāo)記還可以設(shè)置文本左對(duì)齊或右對(duì)齊， 對(duì)應(yīng)的屬性值分別為left和right。如果省略align屬性，標(biāo)題文本則按默認(rèn)值左對(duì)齊顯示。標(biāo) 題文本 在網(wǎng)頁(yè)中，有時(shí)需要為文字設(shè)置粗體、斜體或下劃線效果，這時(shí)就需要用到HTML中的文本格式化標(biāo)記，使文 字以特殊的方式顯示，常用文本格式化標(biāo)記如下表所示。 標(biāo)記顯示效果 和 文字以粗體方式顯示（XHTML推薦使用strong） 和 文字以斜體方式顯示（XHTML推薦使用em） 和 文字以加刪除線方式顯示（XHTML推薦使用del） 和 文字以加下劃線方式顯示（XHTML不贊成使用u） 一個(gè)引人入勝的網(wǎng)

10、頁(yè)，往往包含很多圖片。合理地使用圖文混排，能使枯燥的網(wǎng)頁(yè)變得豐富多彩。本節(jié)將使用“圖像標(biāo)記”，并通過(guò)設(shè)置其相對(duì)路徑”來(lái)制作一個(gè)圖文混排頁(yè)面，如下圖所示。 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)記的必需屬性。 (1)圖像的替換文本屬性alt 由于一些原因圖像可能無(wú)法正常顯示，比如網(wǎng)速太慢，瀏覽器版本過(guò)低等。因此為頁(yè)面上的圖像加上替換文本 是個(gè)很好的習(xí)慣，在圖像無(wú)法顯示時(shí)告訴用戶1圖片的內(nèi)容。這就需要使用圖像的alt屬

11、性，接下來(lái)通過(guò)一個(gè)案例來(lái)演 示alt屬性的用法。 注意：各瀏覽器對(duì)alt屬性的解析不同，本書(shū)這里使用的是Firefox,如果使用其他的瀏覽器如IE、谷歌等，顯示 效果可能存在一定的差異。 各瀏覽器對(duì)alt屬性的解析不同，本書(shū)這里使用的是Firefox,如果使用其他的瀏覽器如IE、谷歌等，顯示效果可 能存在一定的差異。 多學(xué)一招：使用title屬性設(shè)置提示文字 圖像標(biāo)記img有一個(gè)和alt屬性十分類似的屬性title,title屬性用于設(shè)置鼠標(biāo)懸停時(shí)圖像的提示文字，下面來(lái)演示title屬性的使用。 (2)圖像的寬度、高度屬性width、height 通常情況下，如果不給img標(biāo)記設(shè)置寬和高，圖片

12、就會(huì)按照它的原始尺寸顯示，當(dāng)然也可以手動(dòng)更改圖片的大小。width和height屬性用來(lái)定義圖片的寬度和高度，通常我們只設(shè)置其中的一個(gè)，另一個(gè)會(huì)按原圖等比例顯示。如果同時(shí)設(shè)置兩個(gè)屬性，且其比例和原圖大小的比例不一致，顯示的圖像就會(huì)變形或失真。 (3)圖像的邊框?qū)傩詁order 默認(rèn)情況下圖像是沒(méi)有邊框的，通過(guò)border屬性可以為圖像添加邊框、設(shè)置邊框的寬度，但邊框顏色的調(diào)整僅僅通過(guò)HTML屬性是不能夠?qū)崿F(xiàn)的。 了解了圖像的寬度、高度以及邊框?qū)傩?，接下?lái)使用這些屬性對(duì)圖像進(jìn)行修飾。(4)圖像的邊距屬性vspace和hspace 在網(wǎng)頁(yè)中，由于排版需要，有時(shí)候還需要調(diào)整圖像的邊距。HTML中通過(guò)

13、vspace和hspace屬性可以分別調(diào)整圖 像的垂直邊距和水平邊距。 (5)圖像的對(duì)齊屬性align 圖文混排是網(wǎng)頁(yè)中的常見(jiàn)效果，默認(rèn)情況下圖像的底部會(huì)相對(duì)于文本的第一行文字對(duì)齊，如下圖所示。但是在 制作網(wǎng)頁(yè)時(shí)經(jīng)常需要實(shí)現(xiàn)圖像和文字的環(huán)繞效果，例如圖像居左文字居右等，這就需要使用圖像的對(duì)齊屬性align。 網(wǎng)頁(yè)中的路徑通常分為兩種，具體如下： (1)絕對(duì)路徑 絕對(duì)路徑一般是指帶有盤(pán)符的路徑。 例如： “D:HTML+CSS+JavaScript網(wǎng)頁(yè)制作案例教程教材案例chapter02imageslogo.gif”,或完整的網(wǎng)絡(luò)地 屬性 srcalttidewidttiheightborde

14、rvspacehspace align URL 文本 文本 像素(XHTML不支持頁(yè)面百分比) 像素LXHTML不支持盟頁(yè)面有守比; 數(shù)字 像素 像素 借ft right top middle boltom 圖愫的踞隆 國(guó)像不然箍示時(shí)的營(yíng)換文本 鼠標(biāo)懸停射顯示的內(nèi)容 設(shè)置圖像的寬度 設(shè)亙圖像的高度 議冒匡勇心根的蜜室 出置匡壕口力二荏底兒的空白(垂直辿距； 設(shè)置圖像左便I和右側(cè)的空白水平邊跑將圖像對(duì)齊司左邊 將圖像對(duì)齊到右邊 將圖像的頂埼和文本的第一行文字對(duì)齊，其他文字居圖像下方 將圖像的水平中線和文本的第一行文字對(duì)齊.其他文字居圖像下方 將圖像的底部和文本的第一行文字對(duì)齊,其但文字居圖像下方

15、 址。 例如： (2)相對(duì)路徑 相對(duì)路徑不帶有盤(pán)符，通常是以HTML網(wǎng)頁(yè)文件為起點(diǎn)，通過(guò)層級(jí)關(guān)系描述目標(biāo)圖像的位置。 例如： 相對(duì)路徑的設(shè)置分為以下3種： ?圖像文件和html文件位于同一文件夾：只需輸入圖像文件的名稱即可，如。 ?圖像文件位于html文件的下一級(jí)文件夾：輸入文件夾名和文件名，之間用“/”隔開(kāi)，如。 ?圖像文件位于html文件的上一級(jí)文件夾：在文件名之前加入“./，如果是上兩級(jí)，則需要使用“././，以此類推，如。 (1) GIF格式 GIF最突出的地方就是它支持動(dòng)畫(huà)，同時(shí)GIF也是一種無(wú)損的圖像格式，也就是說(shuō)修改圖片之后，圖片質(zhì)量幾乎 沒(méi)有損失。再加上GIF支持透明(全透明或

16、全不透明)，因此很適合在互聯(lián)網(wǎng)上使用。但GIF只能處理256種顏色。在網(wǎng) 頁(yè)制作中，GIF格式常常用于Logo、小圖標(biāo)及其他色彩相對(duì)單一的圖像。 (2) PNG格式 PNG包括PNG-8和真色彩PNG(PNG-24和PNG-32)。相對(duì)于GIF,PNG最大的優(yōu)勢(shì)是體積更小，支持alpha透明(全透明，半透明，全不透明)，并且顏色過(guò)渡更平滑，但PNG不支持動(dòng)畫(huà)。同時(shí)需要注意的是IE6是可以支持PNG-8的，但在處理PNG-24的透明時(shí)會(huì)顯示為灰色。通常，圖片保存為PNG-8會(huì)在同等質(zhì)量下獲得比GIF更小的體積，而半 透明的圖片只能使用PNG-24。 (3) JPG格式 JPG所能顯示的顏色比GIF和PNG要多的多，可以用來(lái)保存超過(guò)256種顏色的圖像，但是JPG是一種有損壓縮的 圖像格式，這就意味著每修改一次圖片都會(huì)造成一些圖像數(shù)據(jù)的丟失。JPG是特別為照片圖像設(shè)計(jì)的文件格式，網(wǎng)頁(yè)制 作過(guò)程中類似于照片的圖像比如橫幅廣告(banner)、商品圖片、較大