第2章補充 HTML語言

1、2內(nèi)容 本章主要介紹了本章主要介紹了HTML顯示原理、顯示原理、HTML制作工具以及常用的制作工具以及常用的HTML標記等標記等 。33.1 HTML簡介 HTML是在標準通用標記語言SGML定義下的一個描述性語言，是SGML的一個子集。HTML不是一種像C#、Java之類的程序語言，而是一種描述文檔結(jié)構的標記語言，它是一種應用非常廣泛的網(wǎng)頁格式，也是最早被用來顯示W(wǎng)eb頁的語言之一。它與操作系統(tǒng)平臺的選擇無關，只要有瀏覽器就可以運行HTML文檔，顯示網(wǎng)頁內(nèi)容。 HTML文檔類似于.txt文本文件，不同的是，文檔里還包含一種被稱為標記的符號。 43.1.1 HTML顯示原理首先瀏覽一下搜狐網(wǎng)站

2、的首頁面。在瀏覽器的地址欄里輸入網(wǎng)址http:/，按回車鍵后，就可以看到搜狐網(wǎng)站的首頁面，如圖3.1所示 圖3.1 搜狐首頁頁面有整齊的布局，有漂亮的動畫及圖片，有可以輸入信息的文本框，有可以點擊的文本等，那么究竟瀏覽器是根據(jù)什么才顯示出這樣的頁面呢？53.1.1 HTML顯示原理打開瀏覽器“查看”菜單，選擇“源文件”命令，會彈出如圖3.2所示的記事本窗口，圖3.1 搜狐首頁窗口中顯示的文本即是搜狐首頁的源代碼，源代碼中有很多用一對尖括號“”括起來的文本，如等，這些就是HTML標記，瀏覽器就是根據(jù)這些標記把文本、圖像等內(nèi)容顯示在網(wǎng)頁中的。63.1.2 HTML制作工具制作HTML文檔，需要兩個

3、基本工具，一個HTML編輯器，一個Web瀏覽器。HTML編輯器可分為兩類：基于文本或代碼的編輯器和所見即所得(WYSIWYG)編輯器。前者在創(chuàng)建文檔時只能看到HTML代碼，后者在編輯時即顯示出類似于最終瀏覽器窗口顯示的結(jié)果。Web瀏覽器用來瀏覽HTML文檔，在Windows操作系統(tǒng)上，常用的瀏覽器有360,火狐,Microsoft Internet Explorer，也常簡稱為IE，常用的版本有IE 6.0、IE 7.0、IE 8.0。7HTML程序的組成n HTML程序由開始,到結(jié)束n 里面的內(nèi)容有n 頭部標記n body為主體標記83.1.3 HTML標記用記事本制作第一個網(wǎng)頁的步驟如下：

4、1) 打開記事本。2) 在記事本中輸入以下代碼： 我的第一個網(wǎng)頁 這是我用記事本做的第一個網(wǎng)頁，我會努力學好HTML！ 93.1.3 HTML標記3) 保存文件：HTML文件的擴展名為.htm或.html，因為有些Web服務器對中文文件名不能很好支持，所以文件名中盡量不要使用漢字4) 用瀏覽器打開上步保存的文件，即可看到如圖3.3所示的頁面圖3.3 第一個網(wǎng)頁注:為了滿足DOS僅能識別8.3的文件名而已，因為一些老的系統(tǒng)(win32)不能識別四位文件名，所以某些網(wǎng)頁服務器要求index.html 10頭部標記n 頭部標記包括頭部標記包括:n 頭部的起始與結(jié)束標記n 定義用于顯示瀏覽器標題欄的字

5、符串n 用于定義css樣式n 元素可提供有關頁面的元信息,在與之間,常用的屬性有:http-equiv,name.n 1.http-equiv 類似于頭部的協(xié)議,它回應給瀏覽器一些有用的信息,常用的屬性值有:n(1)content-type:顯示字符集的設定,例如:nn(2)refresh 刷新與跳轉(zhuǎn)(重定向)頁面 nrefresh用于刷新與跳轉(zhuǎn)(重定向)頁面nrefresh:刷新或跳轉(zhuǎn)的開始時間與跳轉(zhuǎn)的網(wǎng)址,例如:nn表示頁面打開30秒鐘后自動轉(zhuǎn)到新浪主頁11n (3)pragma設定禁止瀏覽器從本地機的緩存中調(diào)閱頁面內(nèi)容,設定后一旦離開網(wǎng)頁就無法從Cache中再調(diào)出,例如:n n (4)S

6、et-Cookie cookie設定,如果網(wǎng)頁過期,存盤的cookie將被刪除.必須使用GMT時間格式,例如:n n (5)Expires 設定網(wǎng)頁的到期時間.一旦網(wǎng)頁過期,必須到服務器上重新調(diào)閱,例如:n 12 n 2.Name 主要用于描述網(wǎng)頁n 對應的屬性值為content，主要是便于搜索引擎機器人查找信息和分類信息用的。格式是：。n (1)Keywords 告訴搜索引擎你網(wǎng)頁的關鍵字n 例：n (2)description 告訴搜索引擎你的網(wǎng)站主要內(nèi)容n 例如：133.1.3 HTML標記標記常用的屬性有：1) text：用來設定網(wǎng)頁中文本的顏色，屬性值可以是顏色的名稱，也可以是#后面

7、跟6位十六進制數(shù)字，如text=black和text=#000000都可以把文本顏色設為黑色。2) bgcolor：用來設定整個頁面的背景顏色，如bgcolor=green。3) link：用來設定鏈接文本的顏色，如link=blue。4) alink：用來設定活動鏈接文本的顏色，也就是剛按下鼠標左鍵還沒松開時的顏色。5) vlink：用來設定訪問過的鏈接文本的顏色，如vlink=#ff0000。 143.1.3 HTML標記6) background：用來設定頁面的背景圖片，屬性值可以是圖片文件的相對路徑或絕對路徑，如background=bg.gif。7) leftmargin：用來設定整

8、個網(wǎng)頁內(nèi)容與瀏覽器窗口左右邊框之間空白大小，屬性值為整數(shù)，單位為像素，如leftmargin=4。8) topmargin：用來設定整個網(wǎng)頁內(nèi)容與瀏覽器窗口上下邊框之間空白大小。9) bgproperties：當屬性值為fixed時，可固定頁面的背景圖片，拖動滾動軸時背景圖片不會隨著文本而滾動。153.1.3 HTML標記書寫HTML代碼時應注意以下幾點：1) HTML標記及屬性中字母不區(qū)分大小寫，如與對瀏覽器來說是完全相同的。2) 標記名與左尖括號之間不能留有空白，如是錯誤的。3) 屬性要寫在開始標記的尖括號中，放在標記名之后，并且與標記名之間要有空白；多個屬性之間也要有空白；屬性值最好用單

9、引號或雙引號引起來，引號一定要是英文的引號，不能是中文的引號。4) 結(jié)束標記要書寫正確，不能忘掉斜杠。163.2 框架標記n 框架提供將一個瀏覽器窗口劃分為多個區(qū)域、每個區(qū)域都可以顯示不同HTML文檔的方法。當創(chuàng)建一個具有框架的網(wǎng)頁時，該網(wǎng)頁有一個URL，該網(wǎng)頁上的每一個區(qū)域（框架）都有一個它自己的URL，所以可以將其它網(wǎng)頁裝載到瀏覽器的某一個區(qū)域，而其它區(qū)域的網(wǎng)頁保持靜止?？蚣艹３Ｓ脕砜刂普军c布局、進行頁面導航。17主框架文檔n 一般框架放在主頁，不含具體內(nèi)容，用于主頁布局n 定義一組框架的布局和屬性,結(jié)構如下:標題 n 用來指示瀏覽器如何劃分窗口，用來指示每一個窗口要加載的文檔以及指定窗口

10、的名字等。把窗口劃分為n個區(qū)域，就會有n個相對應。18、n常用屬性：1. cols:指定列寬。rows:指定行高。2. frameborder：是否顯示框架邊框。3. Border:邊框厚度。4. bordercolor:邊框顏色。5. framespacing:框架間距。n常用屬性:src、name、noresize、scrolling、frameborder、framespacing、marginheight、marginwidth。19劃分窗口(1) n 只有行的框架： 我的網(wǎng)頁我作主 20只有列的框架： 21劃分窗口(3)n嵌套：）如下例：我的框架網(wǎng)頁 此網(wǎng)頁使用了框架，但您的瀏覽器不

11、支持框架。 22內(nèi)聯(lián)框架n內(nèi)聯(lián)框架語法:內(nèi)容。n常用屬性：1. src：顯示的文檔。2. name：內(nèi)聯(lián)框架的名字。3. height：內(nèi)聯(lián)框架的高度。4. width：內(nèi)聯(lián)框架的寬度。5. scrolling：是否顯示滾動條 。23框架標記舉例（代碼）打開主框架文檔：打開左窗口中的鏈接：243.3 常用HTML標記本節(jié)分類介紹常用的HTML標記及其常用屬性，其它標記的詳細情況請參考相關書籍2.排版標記4.字體列表標記6. 表單標記8. 其它標記1. 鏈接標記3. 表格標記5. 圖像標記7. 框架標記253.3.1 鏈接標記n 鏈接的作用就是把頁面中的文本或圖片鏈接到其它的頁面、文本或圖片。如

12、果沒有鏈接，看到的只是一個單獨的網(wǎng)頁，而不是一個站點，這樣Web也將不成為Web。鏈接用標記來定義，它是網(wǎng)頁中最為常用的標記。26n 定義鏈接的語法：文本或圖片n 常用屬性：1. href：鏈接的目標。2. name：錨點的名字(可在框架中使用，也用于在一個頁面中要跳轉(zhuǎn)的地方先標名錨點)。3. target：目標窗口。保留目標名有：_blank、_parent、_top、_self。注:href:Hyperlink Reference 27的幾種用法1. 鏈接網(wǎng)頁：a2. 鏈接非Web數(shù)據(jù)：簡歷3. 電子郵件鏈接：聯(lián)系4. 空鏈接：a5. 腳本鏈接：click me28鏈接文件路徑n 絕對路徑

13、：文件的絕對路徑提供文檔的完整URL，如果指定存放在外部網(wǎng)站的文件，只能使用絕對路徑，如果指定存放在本地的文件，盡管可以使用絕對路徑，但建議最好使用相對路徑。n 相對路徑：相對路徑又分為根相對路徑和文檔相對路徑，根相對路徑總是以站點根目錄“/”為起始目錄，寫起來比較簡單；文檔相對路徑是以當前文件所在路徑為起始目錄，進行相對的文件查找。在站點內(nèi)，通常都采用文檔相對路徑，便于站點的移植。 293.3.2 排版標記n 3.3.1 n 像很多語言一樣，HTML也提供注釋功能，注釋以結(jié)束，之間所有的內(nèi)容會被瀏覽器忽略。利用注釋可以為HTML文檔的不同部分加上說明，方便日后修改，也可以利用注釋為HTML文

14、檔加上版權聲明。303.3 排版標記n 3.3. 2 n 稱為段落標記，用來創(chuàng)建一個段落，段落內(nèi)容顯示時與前后的內(nèi)容之間保留一空白行。如果兩個段落相連，則可以省略第一個段落的結(jié)束標記，因為第二段的開始自動結(jié)束第一段，如“第一段第二段”，當然結(jié)束標記也可以不省略。的常用屬性align，用來設定段落的對齊方式，可取屬性值有：n 1) left：左對齊。n 2) center：居中對齊。n 3) right：右對齊。313.3 排版標記n 3.3.3 n 稱為換行標記，在網(wǎng)頁設計中比較常用。它的作用就是換行，這一點與相同，與不同的是換行后行之間不留空白行，頁面看起來比較緊湊。屬于空標記，沒有結(jié)束標記

15、。323.3 排版標記n 3.3.4 n 稱為預格式化標記，它的作用是按原始代碼的排列方式顯示內(nèi)容。通常情況下，瀏覽器顯示時會忽略內(nèi)容中的空白及換行，而與之間的空白及換行會被保留。333.3 排版標記n 3.3.5 n 稱為水平線標記，可以在頁面中產(chǎn)生一條水平線，屬于空標記，沒有結(jié)束標記。的常用屬性有：n 1) align：用來設定水平線的對齊方式，可取屬性值有：left、center、right。n 2) width：用來設定水平線的水平長度，屬性值可以是絕對值或相對值，如width=“300”表示長度為300像素，是絕對長度，width=“50%”表示水平長度為上一級(父級)容器水平總長度

16、的一半，是相對長度343.2.1 排版標記n 3) size：用來設定水平線的厚度，屬性值為整數(shù)，單位為像素，如size=4。n 4) color：用來設定水平線的顏色。n 5) noshade：水平線默認為立體顯示，具有陰影，加上此屬性可刪除水平線陰影，如353.2.1 排版標記n n 稱為居中標記，可以使標記的內(nèi)容居中顯示，屬于圍堵標記，使用時需要結(jié)束標記。363.2.1 排版標記 排版標記舉例例3.1 新建網(wǎng)頁文檔3-2.htm，其代碼如下： 排版標記舉例 這是一個居中對齊段落，有三行第二行第三行373.2.1 排版標記 月落烏啼霜滿天，江楓漁火對愁眠。 故

17、蘇城外寒山寺，夜半鐘聲到客船。 383.3 排版標記用瀏覽器打開3-2.htm，可看到如圖3.4所示的效果。圖3.4 排版標記393.4 字體列表標記3.4.1 為粗體標記，與之間的文本產(chǎn)生加粗效果。使用此標記時如果忘掉結(jié)束標記，則后面所有的文本都將以粗體顯示。 為斜體標記，與之間的文本產(chǎn)生斜體效果。使用此標記時如果忘掉結(jié)束標記，則后面所有的文本都將以斜體顯示。 403.4 字體列表標記3.4.2為加底線標記，與之間的文本顯示時會加底線。使用此標記時如果忘掉結(jié)束標記，則后面所有的文本都將加上底線。 為加刪除線標記，與之間的文本顯示時會加刪除線。使用此標記時如果忘掉結(jié)

18、束標記，則后面所有的文本都將加上刪除線。413.4 字體列表標記3.4.3 與之間的文本顯示時會加大。 與之間的文本顯示時會縮小。 為下標字標記，與之間的文本以下標字顯示。423.4 字體列表標記3.4.4 為上標字標記，與之間的文本以上標字顯示。 、到為標題標記，每個標題標記所標記的文本加粗顯示獨占一行且上下保留一空白行，由到字體依次變小。433.4 字體列表標記3.4.5的常用屬性有：1) face：用來設定文本的字體，屬性值為逗號隔開的字體列表，如果瀏覽器所在機器上沒有安裝指定的任何一種字體，則以瀏覽器默認字體顯示，所以使用時最好不使用特殊字體。

19、2) size：用來設定文本的大小，屬性值可以是絕對的或相對的，如size=5是絕對的，表示文本以5號字顯示，size=+2是相對的，表示文本在原先大小的基礎上再增大2級。3) color：用來設定文本的顏色，如color=red。443.2.2 字體列表標記2.2.11 定義項目列表的語法為： 項1 項2 的常用屬性只有一個type，用來設定列表項前面出現(xiàn)的符號，可取屬性值有：1) disc：列表項前面加上符號。2) circle：列表項前面加上符號。3) square：列表項前面加上符號。453.2.2 字體列表標記2 定義編號列表的語法為： 項1 項2 463.2.2 字體

20、列表標記的常用屬性有：1) type：用來設定列表的編號形式，可取屬性值有：1：用阿拉伯數(shù)字1，2，3，編號。a：用小寫英文字母a，b，c，編號。A：用大寫英文字母A，B，C，編號。i：用小寫羅馬字母，編號。I：用大寫羅馬字母，編號。2) start：用來設定列表開始編號的位置，不論采用何種編號形式，屬性值都為整數(shù)，如start=3表示第一項從第3的位置開始編號。473.2.2 字體列表標記3 用來標記列表的一項，需同或一起使用，它的屬性有：1) type：用來設定列表項的符號，如果用在里，屬性取值為disc、circle或square，如果用在里，則屬性取值為1、a、A、i或I

21、。2) value：此屬性僅當用在里有效，屬性值為一整數(shù)，用來設定當前項的編號，其后的項目將以此值為起始數(shù)目遞增，前面各項不受影響。483.4 字體列表標記3.4.6字體列表標記舉例例3.2 新建網(wǎng)頁文檔3-3.htm，其代碼如下： 字體列表標記舉例 字體列表標記舉例 這一行為粗體字 這一行為斜體字 這一行文字會加上下畫線493.4 字體列表標記 這一行文字會加上刪除線 多個標記可同時使用 上標和下標標記可用來寫數(shù)學公式A2+X2=？ 來一個好玩的字：J 書寫HTML代碼應注意以下幾點： HTML代碼不區(qū)分大小寫 兩個屬性間要加上空格 結(jié)束標記不要忘寫斜杠503.4 字體列表標記 建立一個網(wǎng)頁

22、的步驟： 打開記事本 輸入HTML代碼 以.htm或.html為擴展名保存文件 513.4 字體列表標記用瀏覽器打開3-3.htm，可看到如圖3.5所示的效果。圖3.5 字體列表標記523.5 表格標記n 表格現(xiàn)已成為對文本和圖形進行布局的強有力的工具。表格由一行或多行組成；每行又由一個或多個單元格組成。HTML中一個表格通常是由、三個標記來定義的，這三個標記分別表示表格、表格行、單元格。在對表格進行設置時，可以設置整個表格()或表格中的行()或單元格()的屬性，它們優(yōu)先順序為：單元格()優(yōu)先于行()，行()優(yōu)先于表格()。53n 整個表格始于而終于，是一個容器標記，、等只能在它的范圍內(nèi)使用。

23、常用的屬性有：1. width：表格寬度。 2. align：表格水平對齊方式。3. border：表格邊框厚度。4. cellpadding：邊距。5. cellspacing：間距。6. bgcolor：表格背景顏色。7. background：表格背景圖像。54n用于定義表格行，是單元格（或）的容器。常用屬性有：1. align：這一行單元格水平對齊方式。2. bgcolor：這一行的背景顏色。3. valign：用來設定這一行單元格中內(nèi)容的垂直對齊方式，可取屬性值有：n top：頂端對齊。n middle：中間對齊。n bottom：底端對齊。55、n ,用于單元格標記，具體內(nèi)容的容器

24、，使用時要放在與之間。常用屬性有：1. align：水平對齊方式。2. background：背景圖像。3. bgcolor：背景顏色。4. colspan：跨列數(shù)目。5. nowrap：限制自動換行。6. rowspan：跨行數(shù)目。7. valign：垂直對齊方式。8. width：寬度。 height：高度。注:表示內(nèi)容單元格 則表示標題,一般用在一列的第一格,里面的內(nèi)容會自動加粗加黑 56表格標記舉例 李四 98 43 王曉彬 97 78 成大才 94 表格標記舉例 期中成績表 姓名 語文 數(shù)學 張三100 573.6 圖像標記n加入圖像加入圖像的語法：的語法： n常用屬性：1. src

25、：圖像文件。2. alt：替代文本。3. height：高度。width：寬度。4. vspace：垂直邊距。hspace：水平邊距。5. border：邊框?qū)挾取?83.7 表單標記n表單的作用是從訪問Web站點的用戶那里獲取信息。訪問者可以使用諸如文本框、列表框、復選框以及單選按鈕之類的表單對象輸入信息，然后單擊某個按鈕提交這些信息。n ：表單區(qū)域n常用屬性：1. action：處理表單數(shù)據(jù)的頁面或腳本。2. method：表單數(shù)據(jù)傳輸方法，屬性值：n get：表單數(shù)據(jù)附加到URL中。n post：表單數(shù)據(jù)嵌入HTTP 請求中。n （Get是用來從服務器上獲得數(shù)據(jù)，而Post是用來向服務器上傳遞數(shù)據(jù)。 ）59表單對象(1)n 文本框：。 常用屬性：常用屬性：name、value、size、maxlength。n 密碼框：。n 單選按鈕：。常用屬性：name、value、checked。同一組中所有單選按鈕的name屬性必須設置相同。n 復選框：。常用屬性：name、value、checked。60表單對象(2)n 下拉選項 河南省北京市value屬性指定選中一項后傳送的值，加入selected屬性可以使菜單項初始為選中狀態(tài) 61表單對象(4)n 列表： 河南省北京市size用來設定列表中顯示的選項個數(shù)；加入multiple屬性允許用戶從列表中選擇多項。 62表單對象(5