動(dòng)態(tài)網(wǎng)頁(yè)制作與編程-2-HTML代碼

1、動(dòng)態(tài)網(wǎng)頁(yè)制作與編程孟宇龍mengyulong哈爾濱工程大學(xué)計(jì)算機(jī)科學(xué)與技術(shù)學(xué)院1計(jì)算機(jī)科學(xué)與技術(shù)學(xué)院608教研室本次課程主要內(nèi)容一、認(rèn)識(shí)HTML語(yǔ)言二、HTML語(yǔ)言語(yǔ)法規(guī)則三、HTML語(yǔ)言標(biāo)簽分類2一、認(rèn)識(shí)THML語(yǔ)言HTML只不過(guò)是組合成一個(gè)文本文件的一系列標(biāo)簽。一般有兩類標(biāo)簽圍堵標(biāo)記空標(biāo)記3一、認(rèn)識(shí)THML語(yǔ)言（續(xù)上）圍堵標(biāo)記:顧名思義，它以起始標(biāo)記及終結(jié)標(biāo)記將文字圍住，令其達(dá)到預(yù)期顯示效果。例如空標(biāo)記:是指標(biāo)記單獨(dú)出現(xiàn)，只有起始標(biāo)記沒(méi)有終結(jié)標(biāo)記。例如4二、HTML語(yǔ)法規(guī)則HTML文件總是以htm或html作為文件的擴(kuò)展名。HTML標(biāo)簽不區(qū)分大小寫(xiě)，如與是一樣的。多個(gè)HTML標(biāo)簽間可以循環(huán)

2、嵌套，但不可以交叉嵌套。HTML文件一行可以寫(xiě)多個(gè)標(biāo)簽，一個(gè)標(biāo)簽也可分多行書(shū)寫(xiě)，不用加任何續(xù)行符。HTML文件由瀏覽器解釋時(shí)只認(rèn)標(biāo)簽，并不解釋源文件中的換行、回車(chē)和多個(gè)連續(xù)空格。若要顯示換行則用標(biāo)簽，換段則用標(biāo)簽。5三、HTML語(yǔ)言標(biāo)簽分類網(wǎng)頁(yè)結(jié)構(gòu)類標(biāo)簽段落類標(biāo)簽列表類標(biāo)簽格式化類標(biāo)簽超鏈接類標(biāo)簽圖像類標(biāo)簽表格類標(biāo)簽框架類標(biāo)簽61 網(wǎng)頁(yè)結(jié)構(gòu)類標(biāo)簽1.1 HTML文檔標(biāo)簽格式：說(shuō)明：處于文檔的最前面，表示HTML文檔的開(kāi)始，即瀏覽器從開(kāi)始解釋，直到為止。1.2 HTML文件頭標(biāo)簽格式：說(shuō)明：緊跟標(biāo)簽的后面，表示文件頭部開(kāi)始，到結(jié)束。其內(nèi)容包含了該HTML頁(yè)面的標(biāo)題和說(shuō)明信息，如編碼方式、關(guān)鍵字、

3、編輯軟件、作者信息等。71 網(wǎng)頁(yè)結(jié)構(gòu)類標(biāo)簽（續(xù)上）1.3 HTML文件標(biāo)題標(biāo)簽格式：說(shuō)明：該標(biāo)簽定義的標(biāo)題內(nèi)容不在瀏覽器窗口中顯示，而是在瀏覽器的標(biāo)題欄中顯示。通過(guò)該標(biāo)題內(nèi)容的設(shè)定，可以使讀者迅速了解該網(wǎng)頁(yè)的主要內(nèi)容以及在使用搜索引擎時(shí)可以找到該頁(yè)。81 網(wǎng)頁(yè)結(jié)構(gòu)類標(biāo)簽（續(xù)上）1.4 HTML文件說(shuō)明信息標(biāo)簽格式：說(shuō)明：該標(biāo)簽可以用來(lái)設(shè)定說(shuō)明信息，一般放在文件頭部?jī)?nèi)。屬性：（1）描述語(yǔ)言字符集的信息，例如：，常用的#可以為gb2312、x-mac-roman、big5等。（2）描述文檔的自身信息，如作者信息、過(guò)期時(shí)間、關(guān)鍵詞列表等。例如：91 網(wǎng)頁(yè)結(jié)構(gòu)類標(biāo)簽（續(xù)上）1.5 HTML文件主體標(biāo)簽

4、格式：說(shuō)明：位于頭部之后，以開(kāi)始，直到結(jié)束。定義了網(wǎng)頁(yè)上顯示的主要內(nèi)容與顯示格式，是整個(gè)網(wǎng)頁(yè)的核心，瀏覽器窗口中所能顯示的內(nèi)容全部被包含在該標(biāo)簽中。屬性：用于設(shè)定網(wǎng)頁(yè)的總體風(fēng)格。其中：bgcolor設(shè)置網(wǎng)頁(yè)的背景色。background設(shè)置網(wǎng)頁(yè)的背景圖像。text設(shè)置網(wǎng)頁(yè)文本的顏色。link設(shè)置尚未被訪問(wèn)過(guò)的超鏈接顏色，默認(rèn)為藍(lán)色。vlink設(shè)置已被訪問(wèn)過(guò)的超鏈接顏色，默認(rèn)為藍(lán)色。alink設(shè)置一個(gè)正被激活的超鏈接顏色，默認(rèn)為紅色。101 網(wǎng)頁(yè)結(jié)構(gòu)類標(biāo)簽（續(xù)上）1.6 注釋標(biāo)簽格式：說(shuō)明：在HTML文件中加入注釋可以使程序清晰，容易理解。該標(biāo)簽中的內(nèi)容在被瀏覽器解釋時(shí)會(huì)被忽略，也不會(huì)被顯示。這

5、樣做有助于您在以后的時(shí)間對(duì)代碼的編輯。112 段落類標(biāo)簽（續(xù)上）2.1 標(biāo)題標(biāo)簽格式：說(shuō)明：該標(biāo)簽可以用來(lái)指明頁(yè)面上的n級(jí)標(biāo)題，其中n=16，主要用于對(duì)文本中的章節(jié)進(jìn)行劃分。2.2 段落標(biāo)簽格式：說(shuō)明：定義段落，自動(dòng)在其前后創(chuàng)建一些空白。瀏覽器會(huì)自動(dòng)添加這些空間，也可以在樣式表中規(guī)定。屬性：align用來(lái)設(shè)定段落的對(duì)齊方式。取值有：left、right和center。122 段落類標(biāo)簽（續(xù)上）2.3 換行標(biāo)簽格式：說(shuō)明：此標(biāo)簽是不分段換行。只是插入一個(gè)簡(jiǎn)單的換行符。 標(biāo)簽是空標(biāo)簽，意味著它沒(méi)有結(jié)束標(biāo)簽。請(qǐng)注意， 標(biāo)簽只是簡(jiǎn)單地開(kāi)始新的一行132 段落類標(biāo)簽（續(xù)上）2.4 水平線標(biāo)簽格式：說(shuō)明：

6、該標(biāo)簽可以用來(lái)在頁(yè)面上插入一條水平標(biāo)尺線。屬性：align用來(lái)設(shè)定橫線放置的位置。取值有：left、right和center。size用來(lái)設(shè)定線條粗細(xì)，取值為n個(gè)像素，默認(rèn)為2。width用來(lái)設(shè)定線段長(zhǎng)度，取值可為絕對(duì)值（n個(gè)像素）或相對(duì)值（相對(duì)于當(dāng)前窗口的百分比），默認(rèn)值為100%。143 列表類標(biāo)簽（續(xù)上）3.1 編號(hào)列表標(biāo)簽格式：說(shuō)明：該編號(hào)列表中每一項(xiàng)由開(kāi)頭。屬性：type，用來(lái)設(shè)定編號(hào)方案。其中：type=1默認(rèn)值，用數(shù)字對(duì)應(yīng)編號(hào)符，如1，2，3等。type=A用大寫(xiě)字母編號(hào)表項(xiàng)，如A，B，C等。type=a用小寫(xiě)字母編號(hào)表項(xiàng)，如a，b，c等。type=I用大寫(xiě)羅馬字母編號(hào)表項(xiàng)，如I

7、，II，III，IV等。type=i用小寫(xiě)羅馬字母編號(hào)表項(xiàng)，如i，ii，iii，iv等。153 列表類標(biāo)簽（續(xù)上）3.2 項(xiàng)目列表標(biāo)簽格式：說(shuō)明：該項(xiàng)目列表中每一項(xiàng)也由開(kāi)頭。屬性：type，用來(lái)設(shè)定項(xiàng)目符的形狀。其中：type=DISC實(shí)心圓點(diǎn)（默認(rèn)值）。type=CIRCLE空心圓點(diǎn)。type=SQUARE實(shí)心方塊。164 格式化類標(biāo)簽4.1 字符風(fēng)格標(biāo)簽格式：粗體斜體下劃線刪除線以較大字體顯示以較小字體顯示上標(biāo)下標(biāo)174 格式化類標(biāo)簽（續(xù)上）粗體居中 呈現(xiàn)類似打字機(jī)或等寬的文本效果。 顯示斜體文本效果。這些標(biāo)簽均是字體樣式標(biāo)簽。可以使用這些標(biāo)簽。但是如果只是希望通過(guò)這些標(biāo)簽單純地改變文本的

8、樣式，則建議使用樣式表來(lái)取得更加豐富的效果。184 格式化類標(biāo)簽（續(xù)上）4.2 預(yù)格式化標(biāo)簽格式：說(shuō)明：多數(shù)情況下，html文件中的文本是基于html標(biāo)簽進(jìn)行格式化的，文本中任何額外的空白字符（空格、制表符、回車(chē)符等）都將被瀏覽器忽略。這個(gè)規(guī)則的一個(gè)例外就是使用標(biāo)簽。任何被該標(biāo)簽括起來(lái)的空白字符都可以出現(xiàn)在最后的屏幕輸出中。194 格式化類標(biāo)簽（續(xù)上）4.3 字符格式標(biāo)簽格式：說(shuō)明：該標(biāo)簽可以文字的字體、字號(hào)和顏色。屬性：size 設(shè)置文字大小，取值范圍是從1到7，其中3是默認(rèn)值。face 設(shè)置文字字體。color 設(shè)置文字顏色，取值是顏色名（如red）或顏色數(shù)值（如#003366）。 204

9、 格式化類標(biāo)簽（續(xù)上）4.4使字體變?yōu)樾斌w的幾種方式定義變量。 顯示斜體文本效果。強(qiáng)調(diào)，顯示斜體文本效果。 定義引用，可使用該標(biāo)簽對(duì)參考文獻(xiàn)的引用進(jìn)行定義，比如書(shū)籍或雜志的標(biāo)題。定義一個(gè)定義項(xiàng)目。 可定義一個(gè)地址（比如電子郵件地址），使用它來(lái)定義地址、簽名或者文檔的作者身份。 還有換行功能。 標(biāo)簽修飾的內(nèi)容用于強(qiáng)調(diào)，現(xiàn)在都是用斜體字來(lái)顯示，但這些內(nèi)容也具有更廣泛的含義，將來(lái)的某一天，瀏覽器也可能會(huì)使用其他的特殊效果來(lái)顯示強(qiáng)調(diào)的文本。 215 超鏈接類標(biāo)簽1、超鏈接的定義：是一個(gè)網(wǎng)頁(yè)指向另一個(gè)目的端的鏈接，目的端可以是另一個(gè)網(wǎng)頁(yè)或者同一個(gè)網(wǎng)頁(yè)上的不同位置2、常用有兩種鏈接方式鏈接到網(wǎng)頁(yè) 鏈接到錨

10、點(diǎn)，兩個(gè)步驟步驟一：設(shè)置錨點(diǎn)：步驟二：鏈接錨點(diǎn)，兩種錨點(diǎn)鏈接方式：a.本地文檔錨點(diǎn)：b.另一文檔錨點(diǎn)：文檔路徑可以分為:絕對(duì)路徑、文檔相對(duì)路徑和根相對(duì)路徑。225 超鏈接類標(biāo)簽（續(xù)上）在所有瀏覽器中，鏈接的默認(rèn)外觀是：未被訪問(wèn)的鏈接帶有下劃線而且是藍(lán)色的 已被訪問(wèn)的鏈接帶有下劃線而且是紫色的 活動(dòng)鏈接帶有下劃線而且是紅色的235 超鏈接類標(biāo)簽（續(xù)上）同理，也可以使用圖像來(lái)作鏈接： usemap屬性：通過(guò)設(shè)置圖片的熱區(qū)，可以實(shí)現(xiàn)單擊圖片不同位置鏈接到不同網(wǎng)頁(yè)的效果。246 圖像類標(biāo)簽圖像格式：要想把在文檔放置圖像，其格式可以是GIF、JPEG、XBM、TIFF、BMP和PICT等。其中：GIF格

11、式文件最多只能顯示256中顏色，一般用于制作透明、隔行和動(dòng)畫(huà)效果圖片等；而JPEG格式文件可以擁有計(jì)算機(jī)所能提供的最多種顏色，適合存放高質(zhì)量的彩色圖片、照片。256 圖像類標(biāo)簽（續(xù)上）：用來(lái)在文檔中嵌入圖像。屬性：src用來(lái)設(shè)定要被包含的圖像的位置和文件名，其路徑名使用規(guī)則同超鏈接中的href屬性。alt用來(lái)設(shè)定在純文本瀏覽器中替換圖像的文本。width和height用來(lái)設(shè)定圖像的尺寸，可取絕對(duì)值或相對(duì)值。border用來(lái)設(shè)定圖像邊框的寬度，其默認(rèn)值為0，無(wú)圖像邊框。align用來(lái)設(shè)定圖像的位置，取值有bottom、middle、top等。hspace定義圖像左側(cè)和右側(cè)的空白。不贊成使用。vs

12、pace定義圖像頂部和底部的空白。不贊成使用。lowsrc低質(zhì)量替代圖片267 表格類標(biāo)簽說(shuō)明：表格標(biāo)簽除了可以顯示大量數(shù)據(jù)列表格式外，往往還可以用于網(wǎng)頁(yè)的布局。277 表格類標(biāo)簽（續(xù)上）屬性： border用來(lái)設(shè)定表格邊框粗細(xì)。若省略，則無(wú)邊框。Width用來(lái)設(shè)定表格，可取絕對(duì)值或相對(duì)值。 height 用來(lái)設(shè)定表格高度，可取絕對(duì)值或相對(duì)值。cellspacing用來(lái)設(shè)定表格間隙。cellpadding用來(lái)設(shè)定表格內(nèi)部空白。 background設(shè)置表格的背景圖像bgcolor設(shè)置表格的背景顏色align設(shè)置表格的對(duì)齊方式：center,left和rightrowspan設(shè)置跨行數(shù)colsp

13、an設(shè)置跨列數(shù)287 表格類標(biāo)簽（續(xù)上）298 框架類標(biāo)簽框架：將同一個(gè)畫(huà)面上分解為多個(gè)獨(dú)立網(wǎng)頁(yè)，通過(guò)使用框架，可以在同一個(gè)瀏覽器窗口中顯示多個(gè)頁(yè)面 ：框架集，可以包含多個(gè)框窗，取得多個(gè)URL,每個(gè)框窗存有獨(dú)立的文檔。 308 框架類標(biāo)簽（續(xù)上）的文件組成：一般有多個(gè)文件組成318 框架類標(biāo)簽（續(xù)上）的屬性：cols：垂直切割畫(huà)面(如分左右兩個(gè)畫(huà)面)，接受整數(shù)值、百分?jǐn)?shù)， * 則代表占用剩余的空間。數(shù)值的個(gè)數(shù)代表分成的視窗數(shù)目且以逗號(hào)分隔。rows：橫向切割，將畫(huà)面上下分開(kāi)，數(shù)值設(shè)定同上。 frameborder：設(shè)定框架的邊框，其值只有 0 和 1 ， 0 表示不要邊框， 1 表示要顯示邊框。border：設(shè)定框架的邊框厚度，以 pixels 為單位。bordercolor：設(shè)定框架的邊框顏色。328 框架類標(biāo)簽（續(xù)上）的屬性name：設(shè)定這個(gè)框窗的名稱，這樣才能指定框架來(lái)作鏈接，必須但任意命名。scrolling：設(shè)定是否要顯示卷軸noresize：設(shè)定是否可以改變這個(gè)框的大小。marginhight： 框架高度部分邊緣所保留空間。marginwidth：框架寬度部分邊緣所保留空間。 framespacing：框架與框架間保留的空白的距離。338 框