HTML語言基礎(chǔ)教程

1、HTML教程本教材由億瑪客網(wǎng)絡(luò)營銷學(xué)院整理編輯億瑪客網(wǎng)絡(luò)營銷學(xué)院中國首家網(wǎng)絡(luò)營銷職業(yè)教育機構(gòu)中國首家網(wǎng)絡(luò)營銷職業(yè)教育產(chǎn)品提供單位中國最專業(yè)、最系統(tǒng)、最完整的網(wǎng)絡(luò)營銷培訓(xùn)機構(gòu)工信部權(quán)威認(rèn)證國家級網(wǎng)絡(luò)營銷工程師實訓(xùn)中心 全國高校畢業(yè)生就業(yè)工程網(wǎng)絡(luò)營銷人才實訓(xùn)基地工信部人才交流中心“網(wǎng)絡(luò)營銷學(xué)院”項目組唯一執(zhí)行單位HTML入門 HTIW 英語意思是：Hypertext MarkedLanguage,即超文本標(biāo)記語言通過HTML可以實現(xiàn)頁面之間的跳轉(zhuǎn)通過HTML可以展現(xiàn)多媒體的效果標(biāo)簽 “v標(biāo)簽名字屬性” HTML 與 XMLHTML控制顯示XML存儲和交換數(shù)據(jù)HTML的基本結(jié)構(gòu)文檔頭、文檔體 頭部f

2、e息文檔主體，正文部分HTML的基本結(jié)構(gòu)(cont.)下面是一個最基本的超文本文檔的源碼: 一個簡單的 H TML 示例 歡迎光臨我的主頁這是我第一次做主頁，無論怎么樣，我都會努力做好！超文本中的標(biāo)簽單標(biāo)簽標(biāo)簽名稱vBR雙標(biāo)簽V標(biāo)簽內(nèi)容v/標(biāo)簽EM強調(diào)/EM標(biāo)簽屬性標(biāo)簽名字屬性1屬性2屬性3 . 第6頁頁面布局及文字設(shè)計fig換行vBR段落標(biāo)簽vP水平線段vHR文字的大小設(shè)置文字的字體與樣式文字的顏色位置控制綜合示例第一級標(biāo)題 第二級標(biāo)題 第三級標(biāo)題 第四級標(biāo)題 第五級標(biāo)題 第六級標(biāo)題標(biāo)題 HTML中提供了相應(yīng)的標(biāo)題標(biāo)簽vHn，其中n為標(biāo)題的等 HTML總共提供六個等級的標(biāo)題，n越小，標(biāo)題字號

3、就越 大.vH6 v/H6換行BR在HTML語言規(guī)范里，每當(dāng)瀏覽器窗口被縮 小時，瀏覽器會自動將右邊的文字轉(zhuǎn)折至 下一行。所以，編寫者對于自己需要斷行 的地方，應(yīng)加上vBR標(biāo)簽第10頁段落標(biāo)簽p文件段落的開始由vP來標(biāo)記，段落的結(jié)束 由v/P來標(biāo)記，v/P是可以省略的，因為 下一個vP的開始就意味著上一個vP的結(jié) vP標(biāo)簽還有一個屬性ALING,它用來指名 字符顯示時的對齊方式，一般值有CENTER、LEFT、RIGHT三不申水平線段vHR這個標(biāo)簽可以在屏幕上顯示一條水平線，用以分 割頁面中的不同部分。 vHR有四個屬性:size水平線的寬度width水平線的長，用占屏幕寬度的百分比或象素值來

4、表示align水平線的對齊方式，有LEFT RIGHTCENTER三種noshade線段無陰影屬性，為實心線段第門頁文字的大小設(shè)置提供設(shè)置字號大小的是FONT, FONT有一 個屬性SIZE,通過指定SIZE屬性就能設(shè)置 字號大小，而SIZE屬性的有效值范圍為1 7,其中缺省值為3。我們可以SIZE屬性值 之前加上“ + ”、“一”字符，來指定相 對于字號初始值的增量或減量。文字的字體與樣式 HTML4.0提供了定義字體的功能，用FACE 屬性來完成這個工作。FACE的屬性值可以 是本機上的任一字體類型，只有對方的電 腦中裝有相同的字體才可以在他的瀏覽器 中出現(xiàn)你預(yù)先設(shè)計的風(fēng)格。文字的字體與樣

5、式(cont.)為了讓文字富有變化，或者為了著意強調(diào)某一部 分，HTML提供了一些標(biāo)簽產(chǎn)生這些效果，現(xiàn)將 常用的標(biāo)簽列舉如下：粗體HTML語言斜體HTML語言加下劃線HTML語言打字機字體HTML語言大型字體HTML語言小型字體HTML語言閃爍效果HTML語言表示強調(diào)，一般為斜體HTML語言 表示特別強調(diào)，一般為粗體HTML語言用于引證、舉例，一般為斜體HTML語言文字的顏色文字顏色設(shè)置格式如下：vfont color=color_value. v/font這里的顏色值可以是一個十六進(jìn)制數(shù)（用“#”作為前綴）, 也可以是以下16種顏色名稱女口： Black = #000000“ Green =

6、 #008000Red = #FF0000u Blue = ”#0000FF“第17頁位置控制通過ALIGN屬性可以選擇文字或圖片的對齊方式, LEFT表示向左對齊，RIGHT表示向右對齊， CENTER表示居中?；菊Z法如下：#=left / right / cen怕r另外，ALIGN屬性也常常用在其它標(biāo)簽中，引起 其內(nèi)容位置的變動。女口： #=left / right / center前面我們所講是單獨使用一個標(biāo)簽的方法， 在實際的編寫中，許多標(biāo)簽和一些屬性是結(jié) 合起來使用的，比如：文字列表無序號列表序號列表定義性列表第18頁無序號列表無序號列表使用的一對標(biāo)簽是ulx/ul, 每一個列表項

7、前使用vLI。其結(jié)構(gòu)如下所 示：LI第一項LI第二項LI第三項序號列表序號列表和無序號列表的使用方法基本相同，它 使用標(biāo)簽,每一個列表項前使用vL卜。 每個項目都有前后順序之分，多數(shù)用數(shù)字表示。 其結(jié)構(gòu)如下所示：vLI第一項第二項第三項定義性列表定義性列表可以用來給每一個列表項再加上一段 說明性文字，說明獨立于列裏項另赴一行顯示。 在應(yīng)用中，列表項使用標(biāo)簽vDT標(biāo)明，說明性文 字使用vDD表示。在定義性列表中，還有一個屬 性是COMPACT，使用這個屬性后，說明文字和列 表項將顯示在同一行。其結(jié)構(gòu)如下所示：DLvDT第一項vDD敘述第一項的定義 DT第二項vDD敘述第二項的定義 DT第三項vD

8、D敘述第三項的定義 /DLTABLE表格表格的基本結(jié)構(gòu)表格的標(biāo)題表格的尺寸設(shè)置表格內(nèi)文字的對齊、布局跨多行、多歹U的表元表格的顏色表格的基本結(jié)構(gòu) . 定義表格 . 定義標(biāo)題 定義表行定義表頭定義表元（表格的具體數(shù)據(jù)）表格的標(biāo)題表格標(biāo)題的位置，可由ALIGN屬性來設(shè)置, 其位置分別由表格上方和表格下方。下面 為表格標(biāo)題位置的設(shè)置格式。設(shè)置標(biāo)題位于表格上方： 設(shè)置標(biāo)題位于表格下方： 表格尺寸設(shè)置表格的大小一就情況下，表格的總長度和總寬度是根據(jù) 各行和各列的總和自動調(diào)整的，如果我們要直接 固定表格的大小，可以使用下列方式：width和height屬性分別指定表格一個固定的寬度 和長度，和n2可以用像

9、素來表示，也可以用百 分比（與整個屏幕相比的大小比例）來表示表格尺寸設(shè)置（cont）邊框尺寸設(shè)置邊框是用border屬性來體現(xiàn)的，它表示表格的邊 框邊厚度和框線。將border設(shè)成不同的值，有不 同的效果。如: 定貨 單 v/captio n 蘋果 香蕉 葡萄 v/th 200 公斤 v /tdxtd200 公斤 v /tdxtd100 公斤v/td表格尺寸設(shè)置（cont）格間線寬度格與格之間的線為格間線，它的寬度可以使用vTABLE中 的CELLSPACING屬性加以調(diào)節(jié)。格式是：#表示要取用的像素值例：vcaption 定貨單 v/caption 蘋果 # 蕉 v/thxth 葡萄 v/t

10、h 200 公斤 200 公斤 v /tdxtd100 公斤 表格尺寸設(shè)置（cont）內(nèi)容與格線之間的寬度我們還可以在VTABLE中設(shè)置CELLPADDING屬性，用來規(guī)定肉容與格線Z間的寬度。格式為：#表示要取用的像素值例：vcaption 定貨單 v/caption 蘋果 香蕉 葡萄 v/th 200 公斤 200 公斤 v /tdxtd100 公斤 表格內(nèi)文字的對齊/布局表格中數(shù)據(jù)的排列方式有兩種，分別是左右排列和上下排 歹U。左右排列是以ALIGN屬性來設(shè)置，而上下排列則由 VALIGN屬性來設(shè)置。其中左右排列的位置可分為三種： 居左(left)、居若(right)和居中(center

11、)；而上下排列基本 上比較常啟的有四種：上齊(top)居申(middle)、下齊 (bottom)和基線(baseline) o #=left5 center, right #=top, middle, bottom, baseline表格內(nèi)文字的對齊/布局(cont.)左右排列 vtable border=1 width=200 居左 v /thxth 居中 v/thxth 居右 v/th A B C 表格內(nèi)文字的對齊/布局(cont.)上下排列 齊v/thxth居中v/th 下齊 基線 v/thA B CD跨多行、多列的表元要創(chuàng)建跨多行、多列的表元，只需在vTH或vTD中加入ROWSPAN

12、 或COLSPAN屬性，這兩個屬性的值，表明了表元中要跨越的行或列 的個數(shù)。 跨多列的表元 vth colspan=# colspan表示跨越的勿數(shù)，例如colspan=2表示這一格的寬度為兩 個列的寬度。 跨多行的表元 rowspan所要表示的意義是指跨越的行敘例如rowspan=2就表 示這一格跨越表格兩個行的高度?？缍嗔械谋碓缍嘈械谋碓砀竦念伾诒砀裰校瓤梢詫φ麄€表格填入底色，也可以 對任i可一行、一個義元険由背景色。表格的背景色彩vtable bgcolor=#行的背景色彩 vtr bgcolor=#表兀的背景色彩 vth bgcolor=# 或 vtd bgcolor=#=rr

13、ggbb16進(jìn)制RGB數(shù)碼,或者是下列預(yù)定義色彩名稱：Black, Olive, Teal, Red，Blue, Maroon, Navy, Gray, Lime, Fuchsia, ，Green, Purple, Silver, ，Aqua文件之間的鏈接超文本中的鏈接是其最重要的特性之一，使用者可以從一個頁而直接 跳轉(zhuǎn)到其他的頁而、圖象或者服務(wù)器。一個鏈接的基本格式如：A HREF=H資源地址、鏈接文字v/A標(biāo)簽vA表示一個鏈接的開始，v/A表示鏈接的結(jié)束；屬性“HREF”定義了這個鏈接所指的地方；通過點擊“鏈接文字”可以到達(dá)指定的文件。 西南財經(jīng)大學(xué) v/A 本地鏈接 URL鏈接 H錄鏈接

14、本地鏈接以絕對路徑表示： 文件的鏈接 v/A以相對路徑表示： 文件的鏈接 v/A鏈接上一目錄中的文件：AHREF=H././lnternet/IP 地址、IP 地址 URL鏈接 URL鏈接的形式是：協(xié)議名：主機域名/路徑/文件名 其中協(xié)議包括：file http ftp telnet mailto news gopher wais本地系統(tǒng)文件WWW服務(wù)器 ftp服務(wù)器 基于TELNET的協(xié)議電子郵件Usenet新聞組GOPHER服務(wù)器WAIS服務(wù)器寫在HTML文件中，鏈接其他主機上的文件時， 格式如下：A HREF=u 財大 bbsv/A目錄鏈接直接指到某文件上部、下部或是中央部分制作目錄鏈接

15、方法是：首先把把某段落設(shè)置為鏈接位置，格式是：A NAME鏈接位置名 稱” 在調(diào)用此鏈接部分的文件，定義連接：vAHREF文件名#鏈接位 置名稱” 鏈接文字v/A如果是在一個文件內(nèi)跳轉(zhuǎn)，文件名可以省略不寫。請看例子多視窗口 FRAMES使用Frames結(jié)構(gòu)設(shè)計的HTML文件，能夠?qū)⒄麄€窗口分成兒個獨立的 小窗口，每一個窗口可分別載入不同的文件，令人高興的是，每個窗 口是可以相互溝通的。 Frames結(jié)構(gòu)的基本格式.各窗口的尺寸設(shè)置-各窗口間相互操作-FRAME的其它屬件F rames結(jié)構(gòu)的基本格式 vframesrcJuiT 在有Frames結(jié)構(gòu)的HTML文件中，F(xiàn)rames文件的整體結(jié)構(gòu)為:

16、 vFRAMESRCuiTvFRAMESRCuiT各窗口的尺寸設(shè)置我們將窗口分割為兒塊，橫向分用ROWS屬性，縱向分用COLS屬性, 每一塊的大小可以由這兩個屬性的值來實現(xiàn)。 例:frameset cols=100,200,300、 例： #的值為一對用引號括起來的字符串，字符串中的數(shù)字表示每個 分窗口所占的尺寸，數(shù)字中間用逗號隔開，有兒個數(shù)字就表示分出了 兒個窗口。當(dāng)然，這其中的任何一個數(shù)字也可以由“來代替，這 樣表示由瀏覽器自動設(shè)置其大小。如：將 100 像素以外的窗 口平均分配 將窗 口分為三等份各窗口間相互操作(Frame Target)由Frames分出來的兒個窗口的內(nèi)容并不是靜止不

17、變的， 往往一個窗口的內(nèi)容隨著另一個窗口的要求而不斷變化， 這就提高了Frames的利用價值。為了完成名窗口之間的 相互操作，我們必須為每一個窗口起一個名字，這個名字 用屬性Name耒定義。窗口標(biāo)識(Frame Name)vframe src=url name=“窗口名” 例如： 定義了窗口名稱，還應(yīng)該有Target來配合使用，Target屬 性指定了所鏈接的文件岀現(xiàn)在哪一窗口。Target的值可以 是name定夂的右祿，也可以是以下四類值： 文件的窗口va href=url target二 topx顯示一個新窗口顯氈在同一個窗口顯示在Fram eset的前一份顯示在整個瀏覽器窗口Frame的

18、其它屬性 frame frameborder=# #=yes，no各窗口邊框的設(shè)置，yes表示有邊框，no表示沒有邊框 #的值為像素點設(shè)置各窗口的上下左右邊界寬度，如不設(shè)置，由瀏覽器自動決定。 #=yes，no, auto滾動條設(shè)置，yes表示有，no表示沒有，auto表示由瀏覽器自動設(shè)置, #=缺省值是auto noresize屬性來設(shè)置不可變動的框邊網(wǎng)頁布局與層疊樣式表樣式表的概念并不是新創(chuàng)造的，文字處理 器和桌面印刷系統(tǒng)長期以來都在使用做某 種特殊樣式的排版樣式表最重要的作用是提供了一種能使所有Web頁面的樣式保持一致的方法css的必要性許多HTML元素都有外觀屬性，如果在元素中 沒有指

19、定相應(yīng)的值，那么瀏覽器將使用這些屬 性的默認(rèn)值。例如，vh2元素中包含font-size屬性,某個瀏 覽器可能將這個屬性的默認(rèn)值設(shè)定為30個點(pt)而通過樣式表則可以將該默認(rèn)值更改為26個， 這種改動可以只對某個vh2元素有效，也可以 對這個文檔中所有的vh2元素都有效。css的必要性樣式表的某些功能可能需要借助元素的各 種屬性、字體的樣式以及字體的尺寸元素 來實現(xiàn)然而，利用樣式表可以對這些樣式說明進(jìn) 行更精確、更一致的描述目前已經(jīng)不提倡直接絕大多數(shù)用于描述外 觀的元素屬性，而是建議使用樣式表。樣式表的層次樣式表的三個層次按照從低層到高層的順 序依次是：-內(nèi)S(inline)樣式表-文檔層(

20、document level)樣式表-外部(external)樣式表。樣式表的層次 HTML樣式表之所以被稱為層疊樣式表，是 因為文檔樣式可以三個不同層次上進(jìn)行定 義低層樣式表可以取代高層樣式表，所以某 個元素內(nèi)容的樣式是由樣式表的疊加來確 定的。樣式表的層次-內(nèi)置樣式表適用于單個元素的內(nèi)容-文檔層樣式表適用于整個文檔的主體-外部樣式表則可以應(yīng)用在多個文檔的主體中。在使用時，內(nèi)置樣式表優(yōu)先于文檔樣式表, 而文檔樣式表又優(yōu)先于外部樣式表。在岀現(xiàn)沖突的情況下，低層次的樣式表具 有使用上的優(yōu)先權(quán)。css可能遇到的問題與元素和元素屬性所面臨的情況一樣，某 種特殊的瀏覽器可能不能處理樣式表中指 定的一些

21、屬性值。對于這種情況，瀏覽器要么用一個可選擇 的值進(jìn)行替代，要么將簡單地忽略所給出 的這些屬性值。內(nèi)置樣式內(nèi)置樣式說明出現(xiàn)在元素中，并且僅適用 于那個元素中的內(nèi)容。這種細(xì)粒度的樣式應(yīng)用背離了樣式表的主 要設(shè)計思想對完整文檔的各種元素進(jìn) 行樣式統(tǒng)一對內(nèi)置樣式說明應(yīng)當(dāng)謹(jǐn)慎使用。文檔層樣式文檔層樣式說明出現(xiàn)在文檔的頭部分，并 且適用于文檔的整個主體。這是對文檔所有內(nèi)容的顯示外觀進(jìn)行格式 統(tǒng)一的一種方法。外部樣式表在網(wǎng)站建設(shè)中，往往希望網(wǎng)站的整體風(fēng)格 能夠一致，這就是外部樣式表的主要應(yīng)用 目的外部樣式表并不是它們所適用的文檔的一 部分。外部樣式表單獨存儲，并且在所有 使用它們的文檔中都要進(jìn)行說明。外部

22、樣式表可以用MIME類型text/css將外部樣式表編寫成一 些文本文件，它們可以存儲在因特網(wǎng)上的任何一 臺計算機中，瀏覽器獲取外部樣式表就如同獲取 文檔一樣。網(wǎng)頁首部的link元素也可用于指定外部樣式表, 在vlink元素中，rel屬性用于指定被鏈接的文檔 與包含該鏈接的文檔之間的關(guān)系，而href屬性用 于指定樣式表文檔的URL地址外部樣式表的引用 指向一個外部樣式表的鏈接必須放在HTML 基本文檔的頭部（header容器中）。第50頁樣式說明格式一個樣式說明的格式取決于該樣式表的層 次。在一個元素中內(nèi)置樣式說明是以style 屬性值的形式出現(xiàn)的，其一般形式如下：style = proper

23、ty_l: value_l ； property_2:value_2;./property _n: value_n;55內(nèi)置樣式說明的作用范圍只限于所處元素 中的內(nèi)容部分。文檔層樣式說明在文檔頭部以一個 元素內(nèi)容的形式出現(xiàn)，該說明的格式與內(nèi) 置樣式表的格式有很大的區(qū)別。在style元素中內(nèi)容的一般形式如下:?rule_list style元素中的type屬性向瀏覽器指明了 在style元素中樣式說明的類型。在上面這個例子中，type屬性被設(shè)置成 “text/css,即層疊梓式表。由于還有許多其他類型的樣式表，因此樣 式說明的類型還是必要的。注意，vstyle元素中的規(guī)則列表是出現(xiàn)在 HTML注

24、釋中的。由于這些規(guī)則列表并不是真正的HTML,在 規(guī)則列表中所包含的是提供給瀏覽器的有 關(guān)外觀樣式的信息，而不是使用者看到的 內(nèi)容。第54頁規(guī)則列表ruleliststyle元素的注釋由于style元素的內(nèi)容是一個HTML注釋， 所以必須使用一種不同的方法在style元 素的內(nèi)容中添加真正的注釋在style元素中這種注釋由“嚴(yán)開始至/” 結(jié)束。規(guī)則列表中的樣式規(guī)則均包含兩部分:-選擇器(selector)-列表前者用于指出受規(guī)則影響的一個或多個元 素，后者由若干成對的屬性/值組成。與元素屬性的屬性/值不同（在元素符屬性 的每一對屬性/值中，兩個部分之間使用等 號相分隔，而所形成的列表使用雙引號

25、進(jìn) 行界定）;在一個樣式規(guī)則中，樣式屬性一值的各咅E 分使用冒號相分隔，而所形成的列表則出 現(xiàn)在大括弧之間。一個樣式規(guī)則的格式如下所示： 七ag_name_l i s t p roperty_l: value_l；property_2 : value_2 ； property_n :value_n其中，tag_name_list可以是單個元素名稱, 或一個用逗號相隔的若干元義右稱矗列義。 tag_name_l i st p roperty_l: value_l；property_2 : value_2 ； property_n :value_n這里所用的詞是元素名稱，而不是元素, 因此并沒有包

26、含尖括號。如果某個屬性被賦予了若干個值，那么這 些值通常使用空格進(jìn)行分隔，但是某些屬 性使用逗號分隔這些屬性值。外部樣式表的格式與文檔樣式表的格式相類似， 這個外部文件由樣式規(guī)則的列表構(gòu)成。通常情況下，一個樣式屬性在樣式表的作用范圍 內(nèi)適用于所有的元素，一個內(nèi)置樣式表的作用范 圍是元素中所包含白6內(nèi)容。對于文檔樣式表來說，其作用范圍是文檔的主體， 而對于外部樣式表來說，其作用范圍則是所有使 用它的文檔的主體。第60頁樣式類樣式類允許在不同地方出現(xiàn)的同一個元素 使用來自文檔樣式表或外部樣式表不同樣 式說明通過在style元素中給定一個名稱來對樣 式類進(jìn)行定義，這個名稱用一個句點與元 素的名稱相連

27、。例如，在某個文檔中如果需要設(shè)置兩種段 落樣式，譬如normal和special,那么可以 在style元素的注釋中定義這兩個類，形 式如下：pnormalproperty-value listpspecialproperty-value list然后可以有如下的代碼:這個問題是可以用”普通”的風(fēng)格進(jìn)行展示 p class = special” 那個問題是可以用”特殊”的風(fēng)格進(jìn)行展示有時候需要一種能作用于若干元素的內(nèi)容的樣式 說明類，這可以使用一個普通類實現(xiàn)，在定義這 個普通類的時候，它的名稱中不包括元素的名稱, 而用一個以句點開頭的通用類的名稱替代元素的 名稱。例如： italic font-style: italic然后在某個文檔的主體中可以包含下面這 些代碼：第 3章首先，需要注意的是：但是，還需要提醒