1、第2章 超文本標(biāo)記語言HTML,網(wǎng)頁設(shè)計(jì)與制作教程,目 錄,2.1.1 HTML概述 2.1.2 HTML語法 2.1.3 HTML文件的基本結(jié)構(gòu),2.1.1 HTML概述 HTML是一種描述性語言，用HTML可以創(chuàng)建能在互聯(lián)網(wǎng)上傳輸?shù)男畔㈨?，即通常所稱的主頁或網(wǎng)頁。 HTML語言使用描述性標(biāo)記符（稱為標(biāo)記）來指明文本的不同內(nèi)容。 HTML是一種語言，但并不算是“程序”語言。 HTML文檔包含兩種信息：頁面本身的文本和表示頁面元素、結(jié)構(gòu)、格式、及其他超文本鏈接的HTML標(biāo)記。,2.1.2 HTML語法 受標(biāo)記影響的內(nèi)容 受標(biāo)記影響的內(nèi)容 例如，可以用字體標(biāo)記的字號屬性size指定文字的大小，H

2、TML語句如下： 本行字將以較小字體顯示,2.1.3 HTML文件的基本結(jié)構(gòu) 網(wǎng)頁的標(biāo)題 文檔主體，正文部分 ,2.1.3 HTML文件的基本結(jié)構(gòu) HTML文件頭 2. HTML文件主體,1. HTML文件頭 TITLE 標(biāo)記：標(biāo)題名 META標(biāo)記：給瀏覽器、搜索引擎或其他應(yīng)用程序提供本HTML文件的有關(guān)信息（如作者，終止日期，關(guān)鍵詞列表等等）。,META標(biāo)記的格式為： ,name屬性主要用于描述網(wǎng)頁，其常用的選項(xiàng)有GENERATOR、Keywords、description、robots、author等。 GENERATOR用來說明制作本網(wǎng)頁所用的編輯工具，Keywords用來告訴搜索引擎本

3、網(wǎng)頁的關(guān)鍵字是什么，description用來告訴搜索引擎本網(wǎng)頁的主要內(nèi)容，robots用來告訴搜索機(jī)器人那些頁面需要索引，哪些頁面不需要索引， author用來標(biāo)注網(wǎng)頁的作者。,http-equiv屬性相當(dāng)于http的文件頭作用，它可以向?yàn)g覽器傳回一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁內(nèi)容，其常用的選項(xiàng)有Content-Type、Expires、Refresh等等。 Content-Type用以說明網(wǎng)頁所使用的字符集； Expires用于設(shè)定網(wǎng)頁的到期時(shí)間；一旦網(wǎng)頁過期，必須到服務(wù)器上重新傳輸； Refresh用于自動刷新并指向新頁面。 Name屬性和http-equiv屬性不能在同一個(gè)

4、標(biāo)記中使用。,Content屬性則根據(jù)name選項(xiàng)或http-equiv選項(xiàng)的定義來決定此項(xiàng)填寫什么樣的字符串。例如： 向搜索引擎說明本網(wǎng)頁的關(guān)鍵詞。 告訴搜索引擎本網(wǎng)站的主要內(nèi)容。, 通知瀏覽器本HTML文件使用了gb2312字符集，是簡體中文網(wǎng)頁。 可以使當(dāng)前網(wǎng)頁在2秒后自動轉(zhuǎn)到北京化工大學(xué)北方學(xué)院的主頁（） 去，這就是META的刷新作用，在Content中，2代表設(shè)置的時(shí)間（單位為秒），而URL就是在指定的時(shí)間后自動連接的網(wǎng)頁地址。如果網(wǎng)頁地址就是本頁的地址，那么就是自動刷新。,使用META標(biāo)記，還可以在進(jìn)入網(wǎng)頁或者離開網(wǎng)頁時(shí)實(shí)現(xiàn)動畫效果。 例如的意思是，進(jìn)入本頁面（http-equiv

5、=”Page-Enter”）時(shí)，頁面將按水平百葉窗（transition=9）的形式展開，整個(gè)展開過程歷時(shí)3秒（duration=3）。 的意思是離開本網(wǎng)頁時(shí)，頁面將按圓形收縮的形式切換成其他網(wǎng)頁，并且整個(gè)切換時(shí)間為5秒。,2. HTML文件主體 HTML文件主體標(biāo)記的格式為： 網(wǎng)頁的內(nèi)容,Background：設(shè)置網(wǎng)頁的背景圖像； Bgcolor：設(shè)置網(wǎng)頁的背景色； Text：設(shè)置文本的顏色 Link：設(shè)置尚未被訪問過的超文本鏈接的顏色； Vlink：設(shè)置已被訪問過的超文本鏈接的顏色； Alink：設(shè)置超文本鏈接在被訪問瞬間的顏色。,以命名方式定義常用的顏色，如RED、blue等。 以RGB

6、值表示，如#FF0000表示red，#0000ff表示blue。,常用16種色彩的英文名和RGB值對照, 一個(gè)簡單的HTML示例 我是中國人，我熱愛我的祖國。 ,2.2.1 標(biāo)題文字標(biāo)記 2.2.2 文字標(biāo)記 2.2.3 段落標(biāo)記,標(biāo)題文字標(biāo)記的格式為： 標(biāo)題文字 屬性n用來指定標(biāo)題文字的大小，可以取16的整數(shù)值，取1時(shí)文字最大，6時(shí)文字最小。在一個(gè)標(biāo)題行中無法使用不同大小的字體。 屬性align用來設(shè)置標(biāo)題在頁面中的對齊方式，有l(wèi)eft（左對齊）、center（居中）和right（右對齊）三種選擇。,例2-2 用設(shè)置標(biāo)題, 設(shè)置標(biāo)題 第1級標(biāo)題H1 第2級標(biāo)題H2 第3級標(biāo)題H3 第4級標(biāo)題

7、H4 ,文字標(biāo)記的格式為： 被設(shè)置的文字 ,屬性size用來設(shè)置文字的大小。數(shù)字的取值范圍從17，size取1時(shí)文字最小，取7時(shí)文字最大。 屬性face用來設(shè)置字體。如黑體、宋體、楷體_GB2312、仿宋_Gb312、隸書、Times New Roman等。 屬性color用來設(shè)置文字顏色。顏色可以用相應(yīng)英文單詞或以“#”引導(dǎo)的一個(gè)十六進(jìn)制數(shù)代碼來表示，參見表2-1。,例2-3 用設(shè)置文字的大小、字體和顏色。, 用FONT標(biāo)記設(shè)置文字大小、字體和顏色 普通文字 1號字 7號字 宋體4號字 華文彩云3號字 紅色 藍(lán)色隸屬6號字 ,表2-2 設(shè)置各種字型的標(biāo)記,例2-4 設(shè)置字型, 設(shè)置字型 普通

8、文字 加粗字 斜體字 加下劃線 大型字體小型字體 加刪除線 X2+Y2=Z2 ,強(qiáng)制換行標(biāo)記 強(qiáng)制換段標(biāo)記 設(shè)置段落標(biāo)記 水平線,強(qiáng)制換行標(biāo)記 強(qiáng)制換行的格式為： 文字,例2-5 強(qiáng)制換行標(biāo)記的使用, 強(qiáng)制換行標(biāo)記的使用 登鶴雀樓 白日依山盡 黃河入海流 欲窮千里目， 更上一層樓。登鶴雀樓 白日依山盡， 黃河入海流。 欲窮千里目， 更上一層樓。 ,2. 強(qiáng)制換段標(biāo)記 段落標(biāo)記放在一段文字的末尾，就定義了一個(gè)新段落的 開始。標(biāo)記不但能使后面的文字換到下一行，還可以是 兩段之間留一空行。由于一段的結(jié)束意味著新一段的開始， 所以使用也可省略結(jié)束標(biāo)記。 強(qiáng)制換段標(biāo)記的格式為： 文字 強(qiáng)制換段標(biāo)記可以看

9、作兩個(gè)強(qiáng)制換行標(biāo)記,設(shè)置段落標(biāo)記 設(shè)置段落標(biāo)記的格式為： 文字 其中屬性align用來設(shè)置段落的對齊方式，可以為left、center 或right，分別表示段落左對齊、段落居中、段落右對齊。默 認(rèn)為left。,例2-6 段落標(biāo)記的使用。, 段落標(biāo)記的使用 登鶴雀樓 白日依山盡， 黃河入海流。 欲窮千里目， 更上一層樓。 ,4. 水平線 水平線標(biāo)記的格式為： 。,Align屬性： 設(shè)定線條放置的位置，可選擇left、right或 center。 Size屬性： 設(shè)定線條厚度，以像素作單位，默認(rèn)為2。 Width屬性： 設(shè)定線條長度，可以是絕對值或相對值， 默認(rèn)值為100%。 Color屬性：

10、設(shè)定線條顏色，默認(rèn)為黑色。 Noshade屬性：設(shè)定線條為平面顯示（沒有三維效果），若 缺省，則有陰影或立體效果。,例2-7 水平線標(biāo)記的使用, 水平線標(biāo)記的使用 ,2.3.1 無序列表 2.3.2 有序列表 2.3.3 列表的嵌套,2.3.1無序列表 無序列表中每一個(gè)表項(xiàng)的前面是項(xiàng)目符號（如 、 等）。 建立無序列表使用標(biāo)記和表項(xiàng)標(biāo)記。格式為： 第一個(gè)列表項(xiàng) 第二個(gè)列表項(xiàng) ,標(biāo)記：是單標(biāo)記，即一個(gè)表項(xiàng)的開始，就是前一個(gè)表 項(xiàng)的結(jié)束。 Type： 指定每個(gè)表項(xiàng)左端的符號類型，可為 disc（實(shí)心圓點(diǎn)）、 circle（空心圓點(diǎn)）、 square（方塊）， 還可以自己設(shè)置圖片， 如默認(rèn)為實(shí)心圓點(diǎn)

11、。,例2-8 無序列表標(biāo)記的使用, 無序列表標(biāo)記的使用 網(wǎng)絡(luò)的拓?fù)浣Y(jié)構(gòu) 總線結(jié)構(gòu) 星型結(jié)構(gòu) 環(huán)型結(jié)構(gòu) ,2.3.2 有序列表 使用標(biāo)記可以建立有序列表，表項(xiàng)的標(biāo)記仍為LI，格式為： 第一個(gè)表項(xiàng) 第二個(gè)表項(xiàng) ,type屬性可設(shè)定5種序號： 數(shù)字（type=1）、 大寫英文字母（type=A）、 小寫英文字母（type=a）、 大寫羅馬字母（type=I）、 小寫羅馬字母（type=i）， 缺省的序號標(biāo)記是數(shù)字。,例2-9 有序列表標(biāo)記的使用。, 有序列表標(biāo)記的使用 通過撥號網(wǎng)絡(luò)連接Internet的步驟 安裝調(diào)制解調(diào)器 創(chuàng)建撥號連接 設(shè)置撥號網(wǎng)絡(luò) 設(shè)置撥號網(wǎng)絡(luò) ,2.3.3 列表的嵌套 列表嵌套

12、可以把網(wǎng)頁分為多個(gè)層次，例如書的目錄，給人以 很強(qiáng)的層次感。有序列表和無序列表不僅可以自身嵌套，而 且可以互相嵌套。,例2-10 無序列表中套無序列表。,例2-11 有序列表中套無序列表。,2.4.1 網(wǎng)頁中的圖片 2.4.2 圖片標(biāo)記 2.4.3 設(shè)定圖片的布局,2.4.1 網(wǎng)頁中的圖片 Web中圖片的幾種常用格式為GIF、JPEG和PNG，此外還 可使用矢量格式。其中最常用的是GIF和JPEG格式，幾乎 所有瀏覽器都支持這兩種格式。,2.4.2 圖片標(biāo)記 圖片標(biāo)記的格式為： ,2.4.3 設(shè)定圖片的布局 布局是圖像放在網(wǎng)頁中的位置以及圖像與文本的排放關(guān)系。 實(shí)現(xiàn)這種功能，除了利用標(biāo)記的al

13、ign屬性外，還有 、等標(biāo)記。 1. 設(shè)置圖像的對齊方式 2.設(shè)置圖像與文本間的關(guān)系,1. 設(shè)置圖像的對齊方式 圖像可放在頁面的左邊（left）、中間（center）和右邊 （right）。 使用標(biāo)記的align屬性可實(shí)現(xiàn)圖像的居左、居中和居右。 格式為： 另外，實(shí)現(xiàn)圖像居中還可以使用標(biāo)記，格式為： ,例 2-12 設(shè)置圖像的對齊方式,2. 設(shè)置圖像與文本間的關(guān)系 （1）設(shè)置圖像與文本之間的空白 （2）文本與圖像在垂直方向上的對齊 （3）文本環(huán)繞圖像,2. 設(shè)置圖像與文本間的關(guān)系 （1）設(shè)置圖像與文本之間的空白 標(biāo)記的hspace和vspace屬性可實(shí)現(xiàn)該功能。,2. 設(shè)置圖像與文本間的關(guān)系

14、（2）文本與圖像在垂直方向上的對齊 文本 文本 其中align的值可?。?top文本與圖像的頂部對齊； middle文本與圖像的中央對齊； bottom文本與圖像的底部對齊。,2. 設(shè)置圖像與文本間的關(guān)系 （3）文本環(huán)繞圖像 文本 其中align的值可?。?left 圖像居左，文本在圖像的右邊； right 圖像居右，文本在圖像的左邊。 使用該標(biāo)記設(shè)置文本環(huán)繞方式后，將一直有效，直到遇到下 一個(gè)設(shè)置標(biāo)記。如果想取消文本環(huán)繞圖像，可用 標(biāo)記，其后的文本將不再環(huán)繞圖像。其格式為： ,例 2-13 設(shè)置圖像與文本間的關(guān)系,2.5.1 建立簡單表格 2.5.2 表格的屬性設(shè)置,2.5.1 建立簡單表格

15、 一般格式為： 標(biāo)題 表頭1 表頭2表頭n 表項(xiàng)11表項(xiàng)12表項(xiàng)1n 表項(xiàng)m1表項(xiàng)m2表項(xiàng)mn ,例 2-14 一個(gè)簡單的表格,2.5.2 表格的屬性設(shè)置 1. 表格標(biāo)記屬性 2. 單元格的合并 3. 表格的分組顯示 4. 表格邊框和分隔線的顯示控制,2.5.2 表格的屬性設(shè)置 1. 表格標(biāo)記屬性 （1）標(biāo)記的屬性設(shè)置 （2）標(biāo)記的屬性設(shè)置 （3）標(biāo)記的屬性設(shè)置,2.5.2 表格的屬性設(shè)置 1. 表格標(biāo)記屬性 （1）標(biāo)記的屬性設(shè)置 ,2.5.2 表格的屬性設(shè)置 1. 表格標(biāo)記屬性 （2）標(biāo)記的屬性設(shè)置 ,2.5.2 表格的屬性設(shè)置 1. 表格標(biāo)記屬性 （3）標(biāo)記的屬性設(shè)置 ,例 2-15 表格

16、的屬性設(shè)置,2.5.2 表格的屬性設(shè)置 2. 單元格的合并 其中，i表示合并的列數(shù)，j表示合并的行數(shù)。,例 2-16 表格單元格的合并,例 2-17 表格單元格的隨意合并,2.5.2 表格的屬性設(shè)置 3. 表格的分組顯示 （1）按行分組 （2）按列分組,2.5.2 表格的屬性設(shè)置 3. 表格的分組顯示 （1）按行分組 表頭 表尾 表體1 表體n ,例2-18 按行組制作表格。,2.5.2 表格的屬性設(shè)置 3. 表格的分組顯示 （2）按列分組 標(biāo)記可一次設(shè)定列組中的列數(shù)以及各列屬性。 其格式為： 標(biāo)記可以設(shè)定一列的屬性，它可以放在中使用， 也可單獨(dú)用于定義列組以外列的屬性，但它不能構(gòu)造列組。 其

17、格式為：,例2-19 設(shè)置列組。,2.5.2 表格的屬性設(shè)置 4. 表格邊框和分隔線的顯示控制 （1）邊框的顯示可以通過在標(biāo)記中設(shè)置frame屬性來控制。 其方法為： 屬性值box（顯示所有4個(gè)邊框）、above（只顯示上邊框）、below（只 顯示下邊框）、hsides（只顯示上、下邊框）、vsides（只顯示左、右邊 框）、lhs（只顯示左邊框）、rhs（只顯示右邊框）和void（不顯示任何 邊框）。,2.5.2 表格的屬性設(shè)置 4. 表格邊框和分隔線的顯示控制 （2）分隔線的顯示可以通過在標(biāo)記中設(shè)置rules屬性來控制。 其方法為： 屬性值可以為all（顯示所有分隔線）、groups（只

18、顯示組與組之間的分 隔線）、rows（只顯示行與行之間的分隔線）、cols（只顯示列與列之 間的分隔線）、none（不顯示任何分隔線）。,2.6.1 超鏈接標(biāo)記 2.6.2 頁面鏈接 2.6.3 書簽鏈接 2.6.4 電子郵件鏈接,2.6.1 超鏈接標(biāo)記 熱點(diǎn) 屬性href為超文本引用，它的值為一個(gè)URL地址，是目標(biāo)資源的有效地址。 可以是相對路徑或者絕對路徑。 屬性name指定當(dāng)前文檔內(nèi)的一個(gè)字符串，作為鏈接時(shí)可以使用的有效的 目標(biāo)資源的地址。 屬性target用于設(shè)定鏈接被按后結(jié)果所要顯示的窗口?？蛇x值為_blank （或new）、_parent、_self、_top、框架名稱。,2.6.

19、2 頁面鏈接 字符串 ,2.6.3 書簽鏈接 首先在目標(biāo)位置設(shè)置標(biāo)記，稱為書簽，設(shè)置格式為： text 在跳轉(zhuǎn)調(diào)用處定義超鏈接，格式為： text 如果在一個(gè)網(wǎng)頁中（如A頁面）要建立指向其他頁面（如B頁面）中某一處的超鏈 接，方法為：在B頁面中要跳轉(zhuǎn)到的目標(biāo)位置設(shè)置標(biāo)記，格式為： 在A頁面中定義超鏈接，格式為： text。,2.6.4 電子郵件鏈接 熱點(diǎn)文本,例2-21 超鏈接標(biāo)記的使用。,2.7.1 表單的標(biāo)記 2.7.2 常用的表單域,2.7.1 表單的標(biāo)記 HTML中與設(shè)計(jì)表單有關(guān)的常用標(biāo)記有、 、等標(biāo)記。,2.7.1 表單的標(biāo)記 （1） 表單標(biāo)記的主要作用是設(shè)定表單的起止位置，并指定處

20、理表單數(shù) 據(jù)程序的URL地址。其基本格式為： ,2.7.1 表單的標(biāo)記 （1） Action 屬性用于設(shè)定處理表單數(shù)據(jù)程序的URL地址。這樣的程序通常是ASP之類 的應(yīng)用程序，采用電子郵件方式時(shí)，用action=”mailto：指定的電子郵件地址”。 Method 屬性指定數(shù)據(jù)傳送到服務(wù)器的方式。有兩種主要的方式，其中POST方式 較為常用。當(dāng)method=get 時(shí)，將輸入數(shù)據(jù)加在action指定的地址后面?zhèn)魉偷椒?wù) 器；當(dāng)method =post 時(shí)則將輸入數(shù)據(jù)按照HTTP傳輸協(xié)議中的post傳輸方式傳送 到服務(wù)器，用電子郵件接收用戶信息采用這種方式。 Name 屬性用于設(shè)定表單的名稱。

21、Onsubmit 和 onreset 主要針對“submit”按鈕和“reset”按鈕來說的，分別設(shè) 定在按下相應(yīng)的按鈕之后要執(zhí)行的子程序。 Target 屬性指定輸入數(shù)據(jù)結(jié)果顯示在哪個(gè)窗口，這需要與標(biāo)記配合使用。,2.7.1 表單的標(biāo)記 （2） 標(biāo)記在表單中使用最頻繁，大部分表單內(nèi)容需要用到此標(biāo)記。 它主要用來設(shè)計(jì)表單中提供給用戶的輸入形式。 其基本格式為： ,2.7.1 表單的標(biāo)記 （2） name屬性設(shè)定當(dāng)前表項(xiàng)的名稱，主要在處理表單時(shí)起作用。 type 屬性決定了表單中表項(xiàng)的類型。其選項(xiàng)較多，有text、password、 checkbox、radio、submit、reset、fil

22、e、hidden、image、button等。 value屬性用于設(shè)定輸入默認(rèn)值，即如果用戶不輸入的話，就采用此默認(rèn)值。 src屬性是針對type=image的情況來說的，設(shè)定圖像文件的URL地址。 checked屬性表示選擇框（單選鈕或復(fù)選框）中，此項(xiàng)被默認(rèn)選中。 maxlength屬性表示在輸入單行文本的時(shí)候，最大輸入字符個(gè)數(shù)。 size屬性用于設(shè)定單行文本區(qū)域的寬度。,2.7.2 常用的表單域,文本框和密碼框 單選鈕和復(fù)選框 列表框 多行文本框 按鈕,2.7.2 常用的表單域,文本框和密碼框 （1）單行文本框的基本格式為： （2）密碼框的基本格式為： 在密碼框中輸入的表單內(nèi)容將以“*”顯

23、示。,2.7.2 常用的表單域,單選鈕和復(fù)選框 （1）單選鈕就是從一組選擇項(xiàng)中選取一項(xiàng)。其基本格式為： 注意同組單選鈕必須具備相同的name名稱。 （2）復(fù)選框就是可以從一組選擇項(xiàng)中選取多項(xiàng)。其基本格式為： 同組復(fù)選框也必須具備相同的name名稱。在其中還可以加入checked屬性表示默認(rèn)選定值。,2.7.2 常用的表單域,3 . 列表框 一個(gè)列表框的基本格式為： 選項(xiàng)1 選項(xiàng)2 選項(xiàng)n ,2.7.2 常用的表單域,4 . 多行文本框 基本格式為： ,2.7.2 常用的表單域,按鈕 按鈕包括“提交”按鈕（type=submit）、“重置”按鈕（type=reset）和普通按鈕（type=but

24、ton）。“提交”按鈕是將表單內(nèi)容提交給服務(wù)器的按鈕，“重置”按鈕是將表單內(nèi)容全部清除，讓瀏覽者重新填寫的按鈕。 按鈕的基本格式為： ,例2-22 表單的使用。,2.8.1 建立框架 2.8.2 框架的屬性設(shè)置 2.8.3 框架間的鏈接,2.8.1 建立框架 一個(gè)框架的基本結(jié)構(gòu)為： 1. 標(biāo)記 2.標(biāo)記 3. 標(biāo)記,2.8.1 建立框架 1. 標(biāo)記 基本格式為： ,2.8.1 建立框架 2.標(biāo)記 標(biāo)記是一個(gè)單標(biāo)記，其格式為： ,2.8.1 建立框架 3. 標(biāo)記。例如： 很抱歉，您使用的瀏覽器不支持框架功能，請轉(zhuǎn)用新的瀏覽器。 ,例2-23 框架的嵌套。,2.8.2 框架的屬性設(shè)置 1. 設(shè)定框架的有無和顏色 2固定邊框 3頁面空白區(qū)域的設(shè)置 4