1、第3章 HTML語言基礎(chǔ) 3.1 HTML語言的基本結(jié)構(gòu)標(biāo)記3.1.1 常用頁面標(biāo)記 1、 開始和結(jié)束標(biāo)記 HTML文檔的開始標(biāo)記是,它告訴瀏覽器下面的內(nèi)容是HTML文檔，在HTML文檔結(jié)束處要有對(duì)應(yīng)的標(biāo)記，它告訴瀏覽器HTML文檔結(jié)束了。它的語法格式如下： HTML文件的所有內(nèi)容 2、頭部標(biāo)記 HTML文檔的頭部標(biāo)記是,它告訴瀏覽器下面的內(nèi)容是HTML文檔的頭部，顯示在文本之前，而標(biāo)記告訴瀏覽器頭部內(nèi)容結(jié)束了。頭部里面一般包括注釋、Meta和標(biāo)題。它的語法格式為 HTML文檔的頭部內(nèi)容 第3章 HTML語言基礎(chǔ) 3.1 HTML語言的基本結(jié)構(gòu)3、標(biāo)題標(biāo)記 和標(biāo)記中間所包括的文字將成為這個(gè)We

2、b頁面的標(biāo)題，一般寫在頭部標(biāo)記之中。標(biāo)題文字會(huì)顯示在Web瀏覽器最上面的title(標(biāo)題)欄上。瀏覽器用戶可以把標(biāo)題加入收藏夾中，。標(biāo)題文字最好使用中文并且有明確的意義。它的語法格式為 Web頁面的標(biāo)題 我們先看一個(gè)例子頭部標(biāo)記和標(biāo)題標(biāo)記使用的例子例 3-1 頭部標(biāo)記和標(biāo)題標(biāo)記這是頁面的標(biāo)題3、標(biāo)題標(biāo)記4、4、 主體標(biāo)記標(biāo)記是Web頁面主體標(biāo)記的開始，并對(duì)應(yīng)結(jié)束符.Web頁面的主要內(nèi)容都出現(xiàn)在和標(biāo)記之中。它的語法格式為： 主體內(nèi)容 例3-2HTML語言的主體標(biāo)記 例3-2 這是使用HTML語言編寫的Web頁面文件z 標(biāo)記還具有一些可以設(shè)定Web頁面背景的屬性，可使用圖片/圖像作背景，確定鏈接的

3、顏色，設(shè)置文字的顏色等。 它的語法格式為： 文檔內(nèi)容 4、4、 主體標(biāo)記3.1.2 文本格式標(biāo)記 1、 標(biāo)題標(biāo)記符在HTML中，用戶可以通過Hn標(biāo)記符來標(biāo)識(shí)文檔中的標(biāo)題和副標(biāo)題，其中：n是1-6的數(shù)字；表示最大的標(biāo)題，表示最小的標(biāo)題。使用標(biāo)題樣式時(shí)，必須使用結(jié)束標(biāo)記符。 它的語法格式為： 標(biāo)題文字(I=1,26)例3-4 不同的標(biāo)題文字例3-4這是7號(hào)字體這是5號(hào)字體這是3號(hào)字體這是號(hào)字體3.1.2 文本格式標(biāo)記 1、 標(biāo)題標(biāo)記符 2、字體控制標(biāo)識(shí)符FONT標(biāo)記符用于控制字符的樣式，包括開始標(biāo)記符和結(jié)束標(biāo)記符，F(xiàn)ONT標(biāo)記符具有3個(gè)常用的屬性：size 屬性 字號(hào)屬性的值可以從 1 到 7，3

4、 是默認(rèn)值，字號(hào)越大顯示的字符就越大。該屬性值也可以用 +n 或 -n 來作為相對(duì)值指定。color 屬性 字體標(biāo)記符的 COLOR 屬性可用來控制文字的顏色，使用方法與正文標(biāo)記符中使用的 BGCOLOR 屬性相同。face 屬性 face 屬性用來指定字體樣式。在這個(gè)屬性中用戶可以指定一個(gè)或幾個(gè)字體名稱 例3-5 字體設(shè)置 例3-5 這是7號(hào)字體 這是5號(hào)字體 這是3號(hào)字體 這是號(hào)字體 2、字體控制標(biāo)識(shí)符 3、 段落標(biāo)記和換行標(biāo)記在HTML中一般用來標(biāo)記段落，在HTML中，一般使用標(biāo)記符的align屬性來設(shè)置段落的對(duì)齊方式它的語法格式為： 文本 另處一個(gè)類似的標(biāo)記元素是,這個(gè)標(biāo)記用來標(biāo)識(shí)一個(gè)

5、換行動(dòng)作。在HTML文件中可以用它來調(diào)整行間距 4、水平線標(biāo)記 在HTML中除了可以用P標(biāo)記劃分落，還可以用添加水平線的方法分隔文檔的不同部分。 水平線的標(biāo)記符為，它包括以下屬性： SIZE 屬性用來改變水平線的粗細(xì)程度 WIDTH 屬性用來更改水平線的長度 NOSHADE 屬性用來使水平線以實(shí)線顯示 COLOR 屬性用來設(shè)置水平線的顏色 ALIGN 屬性用來設(shè)置水平線的對(duì)齊方式 其中：COLOR 屬性在 Microsoft Internet Explorer 3 及更高版本中，通過在中設(shè)置 COLOR 屬性可以控制水平線的顏色。 3、 段落標(biāo)記和換行標(biāo)記 5、 物理字符標(biāo)記所謂物理字符樣式，

6、是指標(biāo)記符本身就說明了所修飾文字的效果的標(biāo)記符。常用的物理標(biāo)記符有：斜體：(italic)或(emphasize)黑體：(black)或添加下劃線： (underline)選擇打印機(jī)字體:標(biāo)記HTML語句:標(biāo)記定義的語句:標(biāo)記鍵盤字符:標(biāo)記某個(gè)命令的例子:標(biāo)記程序變量: 5、 物理字符標(biāo)記3.2 超鏈接標(biāo)記 3.2.1 什么是超鏈接 超鏈接是WWW的一種鏈接技巧 ，它通過已定義好的關(guān)鍵字和圖形，只要您點(diǎn)取某個(gè)圖標(biāo)或某段文字，就可以自動(dòng)連上相對(duì)應(yīng)的其他文件。 所以在WWW的站點(diǎn)畫面中 ， 您可以通過超鏈接點(diǎn)取的方式，從一個(gè)網(wǎng)頁鏈接到另一個(gè)網(wǎng)頁 。超鏈接標(biāo)記為與 3.2.2 鏈接到其他的文件 稱連

7、結(jié)標(biāo)記，由 與 所圍的文字、圖片等等可以成為一個(gè)連結(jié)。 的一般參數(shù)設(shè)定：例如href=“index.html”這參數(shù)不能與另一參數(shù) name 同時(shí)使用，使用這參數(shù)才能造成可按的連結(jié)。當(dāng)作為一外部連結(jié)時(shí)： href 所設(shè)定的是該連結(jié)所要連到的文件名稱，若 該文件與此 html 檔不是同在一目錄請(qǐng)加上適當(dāng)?shù)穆窂?，相?duì)絕對(duì)皆可。3.2 超鏈接標(biāo)記 3.2.1 什么是超鏈接 當(dāng)作為一內(nèi)部連結(jié)時(shí)： 除了鏈接到另一個(gè)HTML文件，也可以在一篇文章內(nèi)隨心所欲地鏈接。需要先做出一個(gè)“錨”標(biāo)記，即鏈接的目標(biāo)地，再做到“錨”的鏈接。做“錨”標(biāo)記用例如在文章中先選擇第一章做“錨”標(biāo)記，第一章,再做到“錨”的鏈接，從

8、這里可以鏈接到第一章 name=“hello”： 這參數(shù)是為文件埋下參考點(diǎn)，作為被連結(jié)，不會(huì)被顯示。所以說造成一個(gè)內(nèi)部連 結(jié)要使用兩次 連結(jié)標(biāo)記。一個(gè)使用參數(shù) name 事先於文件中埋下一參考 點(diǎn)，另一個(gè)使用參數(shù) href 連到這個(gè)參考點(diǎn)。 target=“_top”: 設(shè)定連結(jié)被按後之結(jié)果所要顯示的視窗?？蛇x值為： _blank, _parent, _self, _top, 框 窗名稱。 target=“框窗名稱” 這只運(yùn)用于框架中，若被設(shè)定則連結(jié)結(jié)果將顯示於該“框窗名稱”之框窗 中，框窗名稱是事先由框架標(biāo)記所命名。 target=“_blank” 或 target=“new“ 將連結(jié)的畫面

9、內(nèi)容，開在新的瀏覽視窗中。 target=”_parent“ 將連結(jié)的畫面內(nèi)容，當(dāng)成文件的上一個(gè)畫面。 target=_self“ 將連結(jié)的畫面內(nèi)容，顯示在目前的視窗中。(內(nèi)定值)target=_top 當(dāng)作為一內(nèi)部連結(jié)時(shí)： 除了鏈接到另一個(gè)HTML文件，也可以在3.3 加入音頻、視頻和圖像 3.3.1 加入音頻和視頻 在WEB頁面中加入音頻的方法很簡單，只要把href指定的URL寫上相應(yīng)的音頻文件名就可以了。例如： 在這里欣賞音樂 視頻與音頻類似，例如： 在這里欣賞視頻 3.3.2 圖像標(biāo)記 我們要可以在頁面中插入一些漂亮的圖像，使文章圖文并茂，如何在Web頁面上插入圖像呢？它的語法格式為：

10、 例 例3-12 插入一個(gè)圖像 單擊這里可以看到一個(gè)圖像 單擊這里可以欣賞音樂 3.3 加入音頻、視頻和圖像 3.3.1 加入音頻和視頻3.4 制作表格 3.4.1 基本表格標(biāo)記 表格的語法格式分為5部分：1、表格標(biāo)記 表示下面是一個(gè)表格的內(nèi)容的開始，表示表格結(jié)束。2、表格標(biāo)題標(biāo)記 表格標(biāo)題 表示一個(gè)表格的標(biāo)題也可不要。其中參數(shù)align可選擇top(放在表格上面居中),bottom(放在表格下面居中),默認(rèn)時(shí)標(biāo)題放在表格上面居中3、表格行標(biāo)記表示表格一行的開始和結(jié)束4、字段名標(biāo)記字段名 在和中間加入字段名，有幾個(gè)字段名就加入幾個(gè)字段名標(biāo)記3.4 制作表格 3.4.1 基本表格標(biāo)記 5、數(shù)據(jù)標(biāo)

11、記數(shù)據(jù) 在與中間加入數(shù)據(jù)，一般有幾個(gè)字段名就要加入幾個(gè)數(shù)據(jù) 標(biāo)記相關(guān)屬性：Border= #表示表的邊框，默認(rèn)時(shí)表沒有邊框Cellspacing= #表示表格的寬度，默認(rèn)時(shí)為2Cellpadding= #表示邊框和內(nèi)容間的距離，默認(rèn)值為1Colspan= # 表示占用列數(shù)，默認(rèn)值為1Rowspan= # 表示占用行 數(shù)，默認(rèn)值為1Width= #%表示表格寬度。3.4.2 表頭單元格標(biāo)記 通過TD和TH標(biāo)記的下列屬性可以對(duì)指定單元格的格式進(jìn)行設(shè)置：(1) ALIGN：指定單元格內(nèi)文本的水平對(duì)齊方式，取值為left（默認(rèn)值）、center或right。(2) BACKGROUND：指定圖像的UR

12、L，該圖像用作單元格的背景。(3) BGCOLOR：指定單元格的背景顏色。(4) BORDERCOLOR：指定單元格的邊框顏色。5、數(shù)據(jù)標(biāo)記(5) BORDERCOLORDARK：用于指定單元格的3D邊框的陰影顏色。(6) BORDERCOLORLIGHT：用于指定單元格的3D邊框的高亮顏色。(7) COLSPAN：指定合并單元格時(shí)一個(gè)單元格跨越的表格列數(shù)。(8) NOWRAP：若指定該屬性，則避免Web瀏覽器將單元格里的文本換行。(9) ROWSPAN：指定合并單元格時(shí)一個(gè)單元格跨越的表格行數(shù)。(10) VALIGN：指定單元格中文本的垂直對(duì)齊方式，取值可以是top、middle（默認(rèn)值）、

13、bottom或baseline。 3.4.3 表格設(shè)計(jì)實(shí)例 (5) BORDERCOLORDARK：用于指定單元格的3D3.5 制作表單 3.5.1 表單標(biāo)記 表單的基本語法格式為：method=“POST” 傳送資料給asp的的方式，可選值為 POST, GET。其中的Post是允許傳輸大量數(shù)據(jù)的方法，而Get方法會(huì)將所要傳輸?shù)臄?shù)據(jù)附在網(wǎng)址后面，然后一起送達(dá)服務(wù)器，因此傳送的數(shù)據(jù)量就會(huì)受到限制，但是執(zhí)行效率卻比Post方法好。 使用Get或Post方法都可以將數(shù)據(jù)送至服務(wù)器，使用Request對(duì)象接收數(shù)據(jù)的相對(duì)應(yīng)方法如下： Get：Request.QueryString（“字段名稱”），也可

14、以寫成Request （“字段名稱”） Post：Request.Form （“字段名稱”），也可以寫成Request （“字段名稱” 3.5 制作表單 3.5.1 表單標(biāo)記 3.5.2 文本框標(biāo)記 簡單輸入文本框提供給讀者輸入簡短一行回答的方式。其HTML語言十分簡單，只是在標(biāo)記后加入并以結(jié)束即可。其中屬性size可以設(shè)置文本框的大小。其中默認(rèn)值為20。屬性maxlength=N限制最多輸入的字節(jié)。屬性name是文本框的名字，也是以后將輸入值傳給其他程序時(shí)使用的輸入信息的名字 3.5.3 下拉式菜單標(biāo)記和選項(xiàng)標(biāo)記 下拉菜單也是以標(biāo)記開始，再緊接標(biāo)記。標(biāo)記表明讀者可以在一個(gè)給定的選擇項(xiàng)范圍內(nèi)進(jìn)

15、行選擇。而這些選擇項(xiàng)是用來標(biāo)記的。標(biāo)記需放在每個(gè)選擇項(xiàng)之前。所以一個(gè)下拉菜單的標(biāo)記可以為：選擇項(xiàng)1選擇項(xiàng)2./select3.5.2 文本框標(biāo)記 滾動(dòng)菜單與下拉菜單差不多，只不過是在標(biāo)記中加入multiple屬性，允許讀者一次選多個(gè)選項(xiàng)，類似多選框如.如果缺省multiple,一次只能選擇一項(xiàng)，類似于單選框。其中size=x是你想一次同時(shí)顯示在菜單里的選擇項(xiàng)（或選擇行）數(shù)。例 創(chuàng)建滾動(dòng)菜單例3-20滾動(dòng)菜單可多選蘋果香蕉葡萄櫻桃草莓 滾動(dòng)菜單與下拉菜單差不多，只不過是在標(biāo)記 單選框是提供給作者一些可選的內(nèi)容，從中只能選擇一項(xiàng)。要?jiǎng)?chuàng)建一個(gè)單選框(radio button)非常容易，只需在標(biāo)記后加

16、上input type=“radio”，再以結(jié)束 有時(shí)讀者需要選擇多項(xiàng)內(nèi)容，這時(shí)我們就要用到多選框。多選框的實(shí)現(xiàn)是在標(biāo)記后加上并以結(jié)束。記住在每一個(gè)“checkbox”后面加入所要用于選擇的文本內(nèi)容或圖像。如果在幾個(gè)checkboxes里出現(xiàn)一具已劃鉤的選擇項(xiàng)表示默認(rèn)，只需在標(biāo)記里加入一個(gè)checked(已選擇)的屬性 單選框是提供給作者一些可選的內(nèi)容，從中只能選擇一項(xiàng)。3.5.4 提交及重置按鈕提交（submit)是為了把讀者所輸入的內(nèi)容提交給發(fā)問的“人”，實(shí)際上是把輸入的信息提交給相關(guān)程序，讓服務(wù)器進(jìn)行處理。標(biāo)記是在標(biāo)記下面再加入重新設(shè)置按鈕（reset button）是把讀者所輸入的內(nèi)容清除掉，重新輸入。它的標(biāo)記是在標(biāo)記下面再加入在input標(biāo)記里，輸入val