HTML教學(xué)（課堂PPT）

1、1第2章 超文本標(biāo)記語言HTML 網(wǎng)頁設(shè)計(jì)與制作教程2 2.2 文字和段落標(biāo)記 2.3 列表標(biāo)記2.1 HTML文件的基本結(jié)構(gòu) 2.4 圖片標(biāo)記目 錄 2.5 表格標(biāo)記 2.6 超鏈接標(biāo)記 2.7 表單標(biāo)記 2.8 框架標(biāo)記32.1 HTML文件的基本結(jié)構(gòu)2.1.1 HTML概述2.1.2 HTML語法2.1.3 HTML文件的基本結(jié)構(gòu)42.1.1 HTML概述 HTML是一種描述性語言，用HTML可以創(chuàng)建能在互聯(lián)網(wǎng)上傳輸?shù)男畔㈨?，即通常所稱的主頁或網(wǎng)頁。HTML語言使用描述性標(biāo)記符（稱為標(biāo)記）來指明文本的不同內(nèi)容。HTML是一種語言，但并不算是“程序”語言。HTML文檔包含兩種信息：頁面本身

2、的文本和表示頁面元素、結(jié)構(gòu)、格式、及其他超文本鏈接的HTML標(biāo)記。52.1.2 HTML語法 受標(biāo)記影響的內(nèi)容受標(biāo)記影響的內(nèi)容例如，可以用字體標(biāo)記的字號屬性size指定文字的大小，HTML語句如下：本行字將以較小字體顯示62.1.3 HTML文件的基本結(jié)構(gòu)網(wǎng)頁的標(biāo)題文檔主體，正文部分72.1.3 HTML文件的基本結(jié)構(gòu)HTML文件頭2. HTML文件主體81. HTML文件頭TITLE 標(biāo)記：標(biāo)題名META標(biāo)記：給瀏覽器、搜索引擎或其他應(yīng)用程序提供本HTML文件的有關(guān)信息（如作者，終止日期，關(guān)鍵詞列表等等）。9META標(biāo)記的格式為：10name屬性主要用于描述網(wǎng)頁，其常用的選項(xiàng)有GENERAT

3、OR、Keywords、description、robots、author等。GENERATOR用來說明制作本網(wǎng)頁所用的編輯工具，Keywords用來告訴搜索引擎本網(wǎng)頁的關(guān)鍵字是什么，description用來告訴搜索引擎本網(wǎng)頁的主要內(nèi)容，robots用來告訴搜索機(jī)器人那些頁面需要索引，哪些頁面不需要索引，author用來標(biāo)注網(wǎng)頁的作者。11http-equiv屬性相當(dāng)于http的文件頭作用，它可以向?yàn)g覽器傳回一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁內(nèi)容，其常用的選項(xiàng)有Content-Type、Expires、Refresh等等。Content-Type用以說明網(wǎng)頁所使用的字符集；Expir

4、es用于設(shè)定網(wǎng)頁的到期時間；一旦網(wǎng)頁過期，必須到服務(wù)器上重新傳輸；Refresh用于自動刷新并指向新頁面。Name屬性和http-equiv屬性不能在同一個標(biāo)記中使用。12Content屬性則根據(jù)name選項(xiàng)或http-equiv選項(xiàng)的定義來決定此項(xiàng)填寫什么樣的字符串。例如：向搜索引擎說明本網(wǎng)頁的關(guān)鍵詞。告訴搜索引擎本網(wǎng)站的主要內(nèi)容。13 通知瀏覽器本HTML文件使用了gb2312字符集，是簡體中文網(wǎng)頁?？梢允巩?dāng)前網(wǎng)頁在2秒后自動轉(zhuǎn)到北京化工大學(xué)北方學(xué)院的主頁（http:/） 去，這就是META的刷新作用，在Content中，2代表設(shè)置的時間（單位為秒），而URL就是在指定的時間后自動連接的網(wǎng)

5、頁地址。如果網(wǎng)頁地址就是本頁的地址，那么就是自動刷新。14使用META標(biāo)記，還可以在進(jìn)入網(wǎng)頁或者離開網(wǎng)頁時實(shí)現(xiàn)動畫效果。例如的意思是，進(jìn)入本頁面（http-equiv=”Page-Enter”）時，頁面將按水平百葉窗（transition=9）的形式展開，整個展開過程歷時3秒（duration=3）。的意思是離開本網(wǎng)頁時，頁面將按圓形收縮的形式切換成其他網(wǎng)頁，并且整個切換時間為5秒。152. HTML文件主體 HTML文件主體標(biāo)記的格式為：網(wǎng)頁的內(nèi)容16Background：設(shè)置網(wǎng)頁的背景圖像；Bgcolor：設(shè)置網(wǎng)頁的背景色；Text：設(shè)置文本的顏色Link：設(shè)置尚未被訪問過的超文本鏈接的顏

6、色；Vlink：設(shè)置已被訪問過的超文本鏈接的顏色；Alink：設(shè)置超文本鏈接在被訪問瞬間的顏色。17顏色的表示方法 以命名方式定義常用的顏色，如RED、blue等。 以RGB值表示，如#FF0000表示red，#0000ff表示blue。18常用16種色彩的英文名和RGB值對照預(yù)定義色彩預(yù)定義色彩RGB值值預(yù)定義色彩預(yù)定義色彩RGB值值A(chǔ)qua#00FFFFgray#808080Navy#000080silver#C0C0C0Black#000000green#008000Olive#808000teal#008080Blue#0000FFlime#00FF00Purple#800080yel

7、low#FFFF00Fuchsia#FF00FFmaroon#800000Red#FF0000white#FFFFFF19例2-1 一個簡單的HTML文件一個簡單的HTML示例我是中國人，我熱愛我的祖國。202.2 文字和段落標(biāo)記2.2.1 標(biāo)題文字標(biāo)記標(biāo)題文字標(biāo)記2.2.2 文字標(biāo)記文字標(biāo)記2.2.3 段落標(biāo)記段落標(biāo)記212.2.1 標(biāo)題文字標(biāo)記標(biāo)題文字標(biāo)記22標(biāo)題文字標(biāo)記的格式為：標(biāo)題文字標(biāo)題文字屬性n用來指定標(biāo)題文字的大小，可以取16的整數(shù)值，取1時文字最大，6時文字最小。在一個標(biāo)題行中無法使用不同大小的字體。屬性align用來設(shè)置標(biāo)題在頁面中的對齊方式，有l(wèi)eft（左對齊）、cente

8、r（居中）和right（右對齊）三種選擇。23例2-2 用設(shè)置標(biāo)題設(shè)置標(biāo)題 第1級標(biāo)題H1 第2級標(biāo)題H2 第3級標(biāo)題H3 第4級標(biāo)題H4242.2.2 文字標(biāo)記文字標(biāo)記25文字標(biāo)記的格式為：被設(shè)置的文字26屬性size用來設(shè)置文字的大小文字的大小。數(shù)字的取值范圍從17，size取1時文字最小，取7時文字最大。屬性face用來設(shè)置字體字體。如黑體、宋體、楷體_GB2312、仿宋_Gb312、隸書、Times New Roman等。屬性color用來設(shè)置文字顏色文字顏色。顏色可以用相應(yīng)英文單詞或以“#”引導(dǎo)的一個十六進(jìn)制數(shù)代碼來表示，參見表2-1。 27例2-3 用設(shè)置文字的大小、字體和顏色。用

9、FONT標(biāo)記設(shè)置文字大小、字體和顏色普通文字1號字7號字宋體4號字華文彩云3號字紅色藍(lán)色隸屬6號字28受影響的文字粗體受影響的文字斜體受影響的文字加下劃線受影響的文字標(biāo)準(zhǔn)打印機(jī)字體受影響的文字大型字體受影響的文字小型字體受影響的文字閃爍效果受影響的文字下標(biāo)受影響的文字上標(biāo)受影響的文字加刪除線表2-2 設(shè)置各種字型的標(biāo)記29例2-4 設(shè)置字型設(shè)置字型普通文字 加粗字 斜體字 加下劃線 大型字體小型字體 加刪除線 X2+Y2=Z2302.2.3 段落標(biāo)記強(qiáng)制換行標(biāo)記強(qiáng)制換段標(biāo)記設(shè)置段落標(biāo)記水平線31 強(qiáng)制換行標(biāo)記強(qiáng)制換行的格式為：文字32例2-5 強(qiáng)制換行標(biāo)記的使用 強(qiáng)制換行標(biāo)記的使用登鶴雀樓白日

10、依山盡黃河入海流欲窮千里目，更上一層樓。br登鶴雀樓白日依山盡， 黃河入海流。欲窮千里目， 更上一層樓。332. 強(qiáng)制換段標(biāo)記 段落標(biāo)記放在一段文字的末尾，就定義了一個新段落的開始。標(biāo)記不但能使后面的文字換到下一行，還可以是兩段之間留一空行。由于一段的結(jié)束意味著新一段的開始，所以使用也可省略結(jié)束標(biāo)記。強(qiáng)制換段標(biāo)記的格式為：文字強(qiáng)制換段標(biāo)記可以看作兩個強(qiáng)制換行標(biāo)記34設(shè)置段落標(biāo)記設(shè)置段落標(biāo)記的格式為：文字其中屬性align用來設(shè)置段落的對齊方式，可以為left、center或right，分別表示段落左對齊、段落居中、段落右對齊。默認(rèn)為left。35例2-6 段落標(biāo)記的使用。段落標(biāo)記的使用登鶴雀樓

11、白日依山盡，黃河入海流。欲窮千里目，更上一層樓。364. 水平線 水平線標(biāo)記的格式為：。37Align屬性： 設(shè)定線條放置的位置，可選擇left、right或 center。Size屬性： 設(shè)定線條厚度，以像素作單位，默認(rèn)為2。Width屬性： 設(shè)定線條長度，可以是絕對值或相對值， 默認(rèn)值為100%。Color屬性： 設(shè)定線條顏色，默認(rèn)為黑色。Noshade屬性：設(shè)定線條為平面顯示（沒有三維效果），若 缺省，則有陰影或立體效果。38例2-7 水平線標(biāo)記的使用水平線標(biāo)記的使用392-3 列表標(biāo)記2.3.1 無序列表無序列表2.3.2 有序列表有序列表2.3.3 列表的嵌套列表的嵌套402.3.1

12、無序列表無序列表中每一個表項(xiàng)的前面是項(xiàng)目符號（如 、 等）。建立無序列表使用標(biāo)記和表項(xiàng)標(biāo)記。格式為： 第一個列表項(xiàng) 第二個列表項(xiàng) 41標(biāo)記：是單標(biāo)記，即一個表項(xiàng)的開始，就是前一個表項(xiàng)的結(jié)束。Type： 指定每個表項(xiàng)左端的符號類型，可為disc（實(shí)心圓點(diǎn)）、circle（空心圓點(diǎn)）、square（方塊），還可以自己設(shè)置圖片， 如默認(rèn)為實(shí)心圓點(diǎn)。42例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)432.3.2 有序列表 使用標(biāo)記可以建立有序列表，表項(xiàng)的標(biāo)記仍為LI，格式為： 第一個表項(xiàng) 第二個表項(xiàng) 44type屬性可設(shè)定5種序號：數(shù)字（type=1）、大

13、寫英文字母（type=A）、小寫英文字母（type=a）、大寫羅馬字母（type=I）、小寫羅馬字母（type=i），缺省的序號標(biāo)記是數(shù)字。45例2-9 有序列表標(biāo)記的使用。 有序列表標(biāo)記的使用通過撥號網(wǎng)絡(luò)連接Internet的步驟安裝調(diào)制解調(diào)器創(chuàng)建撥號連接設(shè)置撥號網(wǎng)絡(luò)設(shè)置撥號網(wǎng)絡(luò)462.3.3 列表的嵌套 列表嵌套可以把網(wǎng)頁分為多個層次，例如書的目錄，給人以很強(qiáng)的層次感。有序列表和無序列表不僅可以自身嵌套，而且可以互相嵌套。47例2-10 無序列表中套無序列表。例2-11 有序列表中套無序列表。482.4 圖片標(biāo)記2.4.1 網(wǎng)頁中的圖片網(wǎng)頁中的圖片2.4.2 圖片標(biāo)記圖片標(biāo)記2.4.3 設(shè)

14、定圖片的布局設(shè)定圖片的布局492.4.1 網(wǎng)頁中的圖片 Web中圖片的幾種常用格式為GIF、JPEG和PNG，此外還可使用矢量格式。其中最常用的是GIF和JPEG格式，幾乎所有瀏覽器都支持這兩種格式。502.4.2 圖片標(biāo)記 圖片標(biāo)記的格式為：512.4.3 設(shè)定圖片的布局 布局是圖像放在網(wǎng)頁中的位置以及圖像與文本的排放關(guān)系。實(shí)現(xiàn)這種功能，除了利用標(biāo)記的align屬性外，還有、等標(biāo)記。1. 設(shè)置圖像的對齊方式2.設(shè)置圖像與文本間的關(guān)系 521. 設(shè)置圖像的對齊方式 圖像可放在頁面的左邊（left）、中間（center）和右邊（right）。使用標(biāo)記的align屬性可實(shí)現(xiàn)圖像的居左、居中和居右。

15、格式為：另外，實(shí)現(xiàn)圖像居中還可以使用標(biāo)記，格式為： 53例 2-12 設(shè)置圖像的對齊方式542. 設(shè)置圖像與文本間的關(guān)系 （1）設(shè)置圖像與文本之間的空白（2）文本與圖像在垂直方向上的對齊（3）文本環(huán)繞圖像552. 設(shè)置圖像與文本間的關(guān)系 （1）設(shè)置圖像與文本之間的空白標(biāo)記的hspace和vspace屬性可實(shí)現(xiàn)該功能。562. 設(shè)置圖像與文本間的關(guān)系 （2）文本與圖像在垂直方向上的對齊文本 文本其中align的值可?。簍op文本與圖像的頂部對齊；middle文本與圖像的中央對齊；bottom文本與圖像的底部對齊。572. 設(shè)置圖像與文本間的關(guān)系 （3）文本環(huán)繞圖像文本其中align的值可?。簂e

16、ft 圖像居左，文本在圖像的右邊；right 圖像居右，文本在圖像的左邊。使用該標(biāo)記設(shè)置文本環(huán)繞方式后，將一直有效，直到遇到下一個設(shè)置標(biāo)記。如果想取消文本環(huán)繞圖像，可用標(biāo)記，其后的文本將不再環(huán)繞圖像。其格式為：58例 2-13 設(shè)置圖像與文本間的關(guān)系592.5 表格標(biāo)記2.5.1 建立簡單表格建立簡單表格2.5.2 表格的屬性設(shè)置表格的屬性設(shè)置602.5.1 建立簡單表格建立簡單表格一般格式為： 標(biāo)題 表頭1 表頭2表頭n 表項(xiàng)11表項(xiàng)12表項(xiàng)1n 表項(xiàng)m1表項(xiàng)m2表項(xiàng)mn61例 2-14 一個簡單的表格622.5.2 表格的屬性設(shè)置 1. 表格標(biāo)記屬性 2. 單元格的合并 3. 表格的分組顯

17、示 4. 表格邊框和分隔線的顯示控制632.5.2 表格的屬性設(shè)置 1. 表格標(biāo)記屬性 （1）標(biāo)記的屬性設(shè)置 （2）標(biāo)記的屬性設(shè)置 （3）標(biāo)記的屬性設(shè)置 642.5.2 表格的屬性設(shè)置 1. 表格標(biāo)記屬性 （1）標(biāo)記的屬性設(shè)置 652.5.2 表格的屬性設(shè)置 1. 表格標(biāo)記屬性 （2）標(biāo)記的屬性設(shè)置 662.5.2 表格的屬性設(shè)置 1. 表格標(biāo)記屬性 （3）標(biāo)記的屬性設(shè)置 67例 2-15 表格的屬性設(shè)置682.5.2 表格的屬性設(shè)置 2. 單元格的合并 其中，i表示合并的列數(shù)，j表示合并的行數(shù)。69例 2-16 表格單元格的合并70例 2-17 表格單元格的隨意合并712.5.2 表格的屬性

18、設(shè)置 3. 表格的分組顯示 （1）按行分組 （2）按列分組722.5.2 表格的屬性設(shè)置 3. 表格的分組顯示 （1）按行分組 表頭 表尾 表體1 表體n 73例2-18 按行組制作表格。742.5.2 表格的屬性設(shè)置 3. 表格的分組顯示 （2）按列分組 標(biāo)記可一次設(shè)定列組中的列數(shù)以及各列屬性。其格式為： 標(biāo)記可以設(shè)定一列的屬性，它可以放在中使用，也可單獨(dú)用于定義列組以外列的屬性，但它不能構(gòu)造列組。其格式為：75例2-19 設(shè)置列組。762.5.2 表格的屬性設(shè)置 4. 表格邊框和分隔線的顯示控制 （1）邊框的顯示可以通過在標(biāo)記中設(shè)置frame屬性來控制。其方法為：屬性值box（顯示所有4個

19、邊框）、above（只顯示上邊框）、below（只顯示下邊框）、hsides（只顯示上、下邊框）、vsides（只顯示左、右邊框）、lhs（只顯示左邊框）、rhs（只顯示右邊框）和void（不顯示任何邊框）。772.5.2 表格的屬性設(shè)置 4. 表格邊框和分隔線的顯示控制 （2）分隔線的顯示可以通過在標(biāo)記中設(shè)置rules屬性來控制。其方法為：屬性值可以為all（顯示所有分隔線）、groups（只顯示組與組之間的分隔線）、rows（只顯示行與行之間的分隔線）、cols（只顯示列與列之間的分隔線）、none（不顯示任何分隔線）。782.6 超鏈接標(biāo)記2.6.1 超鏈接標(biāo)記超鏈接標(biāo)記2.6.2 頁面

20、鏈接頁面鏈接2.6.3 書簽鏈接書簽鏈接2.6.4 電子郵件鏈接電子郵件鏈接792.6.1 超鏈接標(biāo)記超鏈接標(biāo)記熱點(diǎn)屬性href為超文本引用，它的值為一個URL地址，是目標(biāo)資源的有效地址。 可以是相對路徑或者絕對路徑。屬性name指定當(dāng)前文檔內(nèi)的一個字符串，作為鏈接時可以使用的有效的 目標(biāo)資源的地址。屬性target用于設(shè)定鏈接被按后結(jié)果所要顯示的窗口?？蛇x值為_blank （或new）、_parent、_self、_top、框架名稱。802.6.2 頁面鏈接頁面鏈接字符串812.6.3 書簽鏈接書簽鏈接 首先在目標(biāo)位置設(shè)置標(biāo)記，稱為書簽，設(shè)置格式為：text在跳轉(zhuǎn)調(diào)用處定義超鏈接，格式為：t

21、ext如果在一個網(wǎng)頁中（如A頁面）要建立指向其他頁面（如B頁面）中某一處的超鏈接，方法為：在B頁面中要跳轉(zhuǎn)到的目標(biāo)位置設(shè)置標(biāo)記，格式為：在A頁面中定義超鏈接，格式為：text。822.6.4 電子郵件鏈接電子郵件鏈接熱點(diǎn)文本83例2-21 超鏈接標(biāo)記的使用。842.7 表單標(biāo)記2.7.1 表單的標(biāo)記表單的標(biāo)記2.7.2 常用的表單域常用的表單域852.7.1 表單的標(biāo)記表單的標(biāo)記HTML中與設(shè)計(jì)表單有關(guān)的常用標(biāo)記有、等標(biāo)記。862.7.1 表單的標(biāo)記表單的標(biāo)記（1）表單標(biāo)記的主要作用是設(shè)定表單的起止位置，并指定處理表單數(shù)據(jù)程序的URL地址。其基本格式為：872.7.1 表單的標(biāo)記表單的標(biāo)記（1

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

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

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

25、取一項(xiàng)。其基本格式為：注意同組單選鈕必須具備相同的name名稱。（2）復(fù)選框就是可以從一組選擇項(xiàng)中選取多項(xiàng)。其基本格式為：同組復(fù)選框也必須具備相同的name名稱。在其中還可以加入checked屬性表示默認(rèn)選定值。932.7.2 常用的表單域常用的表單域3 . 列表框一個列表框的基本格式為： 選項(xiàng)1 選項(xiàng)2 選項(xiàng)n942.7.2 常用的表單域常用的表單域4 . 多行文本框基本格式為：952.7.2 常用的表單域常用的表單域按鈕按鈕包括“提交”按鈕（type=submit）、“重置”按鈕（type=reset）和普通按鈕（type=button）?！疤峤弧卑粹o是將表單內(nèi)容提交給服務(wù)器的按鈕，“重置”按鈕是將表單內(nèi)容全部清除，讓瀏覽者重新填寫的按鈕。按鈕的基本格式為：96例2-22 表單的使用。972.8 框架標(biāo)記2.8.1 建立框架建立框架2.8.2 框架的屬性設(shè)置框架的屬性設(shè)置2.8.3 框架間的鏈接框架間的鏈接982.8.1 建立框架建立框架一個框架的基本結(jié)構(gòu)為： 1. 標(biāo)記 2.標(biāo)記 3. 標(biāo)記992.8.1 建立框架建立框架 1. 標(biāo)記基本格式為：1002.8.1 建立框架建立框架 2.標(biāo)記標(biāo)記是一個單標(biāo)記，其格式為：1012.8.1 建立框架建立框架 3. 標(biāo)記。例如： 很抱歉，您使用的瀏覽器不支持框架功能，請轉(zhuǎn)用新的瀏覽器。 102例2-23 框架的嵌套。1032.8.