《超文本標(biāo)記語(yǔ)言》PPT課件

1、第2章 網(wǎng)頁(yè)設(shè)計(jì)的基本描述語(yǔ)言HTML2.1 HTML概述2.2 HTML文檔的構(gòu)成2.3 HTML元素2.1 HTML概述HTML(Hypertext Markup Language)：是一種規(guī)范，是一種標(biāo)準(zhǔn)。他是通過(guò)標(biāo)記符(tag)來(lái)標(biāo)記顯示網(wǎng)頁(yè)的各個(gè)部分。所有網(wǎng)頁(yè)都是HTML格式的文件。HTML通過(guò)元素來(lái)告訴瀏覽器如何處理兩個(gè)標(biāo)記符之間的信息。HTML元素的格式：正文2.2 HTML文檔的構(gòu)成網(wǎng)頁(yè)總是以標(biāo)記開(kāi)始，在文件的末尾以結(jié)束，表示文件是HTML格式。網(wǎng)頁(yè)文件通常有兩部分組成：頭部(head)和主體(body)。1. HTML文檔的基本結(jié)構(gòu) HTML 文件的正文寫(xiě)在這里 標(biāo)記和標(biāo)記對(duì)

2、注釋標(biāo)記 (1) 格式:(2) 功能與說(shuō)明: 注釋內(nèi)容 不顯示在網(wǎng)頁(yè)上; 主要功能是提高代碼的可讀性.2. HTML元素 內(nèi)容起始標(biāo)記結(jié)束標(biāo)記,有些標(biāo)記可以省寫(xiě)結(jié)束標(biāo)記2.3 HTML元素類別允許包含的元素文檔結(jié)構(gòu)元素HTML,HEAD,BODY,FRAMESET頭部元素TITLE,META,LINK,BASE,STYLE塊元素CENTER, Hx, ADDRESS, PRE, P, BR, DIV列表元素DIR,DL,DT,DD,LI,OL,UL表格元素TABLE,TR,TD,TH,CAPTION表單元素FORM,INPUT,SELECT,OPTION,TEXTAREA超鏈接元素A,MAP,

3、AREA字符格式元素FONT,B,I,U,S等幀元素FRAMESET,FRAME,NOFRAME,IFRAME圖片元素IMG層元素DIV,SPAN,LAYER,ILAYER腳本元素SCRIPT內(nèi)嵌對(duì)象元素APPLET,OBJECT,PARAM,EMBED2.3.1 文檔結(jié)構(gòu) HTML 文件的正文寫(xiě)在這里 1. 文檔標(biāo)記HTML 2. 文檔頭標(biāo)記 頭部元素： 頭部用表示開(kāi)始，用表示結(jié)束。標(biāo)簽用于定義文檔的頭部，它是所有頭部元素的容器。 在頭部元素中我們一般都會(huì)用到，他是網(wǎng)頁(yè)的標(biāo)題，將顯示在網(wǎng)頁(yè)的標(biāo)題欄當(dāng)中。2.3.2 頭部元素 可以嵌套在head元素中的元素。1. TITLE標(biāo)記 功能: 設(shè)置網(wǎng)

4、頁(yè)標(biāo)題.說(shuō)明: 該標(biāo)記只能嵌入在標(biāo)記對(duì)中使用.2. META標(biāo)記 (1) 功能: 指明網(wǎng)頁(yè)作者、制作工具等.(2)說(shuō)明: 該標(biāo)記可以重復(fù)出現(xiàn)在標(biāo)記對(duì)中;該標(biāo)記中的信息不顯示在網(wǎng)頁(yè)中.3. 其他標(biāo)記 LINK 最常見(jiàn)的用途是鏈接樣式表。 STYLE BASE 標(biāo)簽為頁(yè)面上的所有鏈接規(guī)定默認(rèn)地址或 默認(rèn)目標(biāo)。3. 文檔體標(biāo)記 文檔體標(biāo)記的常用屬性屬性功 能 描 述link設(shè)定頁(yè)面默認(rèn)的鏈接顏色alink設(shè)定鼠標(biāo)正在單擊時(shí)的鏈接顏色vlink設(shè)定訪問(wèn)后鏈接文字的顏色background設(shè)定頁(yè)面背景圖像bgcolor 設(shè)定頁(yè)面背景顏色leftmargin 設(shè)定頁(yè)面的左邊距topmargin設(shè)定頁(yè)面的上

5、邊距bgproperties設(shè)定頁(yè)面背景圖像為固定，不隨頁(yè)面的滾動(dòng)而滾動(dòng)text設(shè)定頁(yè)面文字的顏色2.3.3 塊 CENTER標(biāo)記 標(biāo)題標(biāo)記H1H6P標(biāo)記BR標(biāo)記PRE標(biāo)記等1. 文本居中標(biāo)記 功能: 居中顯示文本.2. 標(biāo)題標(biāo)記(1) 格式: (2) 功能:字號(hào)最大,字號(hào)最小.n為163 分段標(biāo)記(1) 格式: (2) 說(shuō)明:該標(biāo)記可單獨(dú)使用，也可成對(duì)使用。單獨(dú)使用時(shí)，下一個(gè)的開(kāi)始就意味著上一個(gè)的結(jié)束。 作用：將文本換行，并空出一個(gè)文本行的間距。 (3)對(duì)齊屬性 align 取 值 功 能 left缺省設(shè)置,段落內(nèi)容左對(duì)齊 center段落內(nèi)容居中對(duì)齊 right段落內(nèi)容右對(duì)齊 justif

6、y段落內(nèi)容兩端對(duì)齊 4. 換行標(biāo)記 (1) 格式: (2) 功能與說(shuō)明: 換行標(biāo)記為單標(biāo)記,且一般不包含屬性;在段落間換行,不產(chǎn)生空行(與標(biāo)記不同)作用：將文本換行，但沒(méi)有行間距。5. 原樣顯示標(biāo)記(1) 格式: 作用：保持文本的原始格式，并顯示在網(wǎng)頁(yè)上。6. 分隔線標(biāo)記(1) 格式: (2) 功能與說(shuō)明: 標(biāo)記為單標(biāo)記.作用： 在網(wǎng)頁(yè)中顯示一條水平分隔線。(3) 標(biāo)記的屬性屬性參數(shù)功能單位默認(rèn)值 size設(shè)置線的粗細(xì)pixel(像素）2 width設(shè)置的寬度pixel(像素）100% align left center right設(shè)置線的對(duì)齊方式center color設(shè)置線的顏色black

7、 noshade取消線的3d陰影2.3.4 字符格式 FONT標(biāo)記 B標(biāo)記 I標(biāo)記 U標(biāo)記等1. 字體格式標(biāo)記 (1) 格式:(2) 屬性 屬性功 能默認(rèn)值 face設(shè)置文字字體宋體 size設(shè)置文字的大小3 color設(shè)置文字的顏色黑色作用：設(shè)置字符的顏色、大小和字體。(3) 說(shuō)明如果系統(tǒng)中沒(méi)有face屬性所指定的字體,則使用默認(rèn)字體;size屬性的取值為17;也可以用+n或-n來(lái)設(shè)定字號(hào)的相對(duì)值;color屬性的值為：rgb顏色(#rrggbb). RGB色彩模式 是工業(yè)界的一種顏色標(biāo)準(zhǔn)，是通過(guò)對(duì)紅(R)、綠(G)、藍(lán)(B)三個(gè)顏色通道的變化以及它們相互之間的疊加來(lái)得到各式各樣的顏色的RG

8、B顏色查詢對(duì)照表2. 物理字體標(biāo)記(1)粗體標(biāo)記放在與標(biāo)記之間的文字將以粗體方式顯示。(2)斜體標(biāo)記放在與標(biāo)記之間的文字將以斜體方式顯示。(3)下劃線標(biāo)記 放在與標(biāo)記之間的文字將以下劃線方式顯示。(4) 刪除線標(biāo)記 放在與標(biāo)記之間的文字將以下劃線方式顯示。3. 上標(biāo)標(biāo)記和下標(biāo)標(biāo)記(1)上標(biāo)標(biāo)記放在與標(biāo)記之間的文字將以上標(biāo)方式顯示.(2)下標(biāo)標(biāo)記放在與標(biāo)記之間的文字將以下標(biāo)方式顯示.2.3.5 圖像 (1) 格式:單標(biāo)記必須指定的屬性(2) img標(biāo)記的其他常用屬性屬性功能描 述 alt指定提示文本,即鼠標(biāo)停留在圖像上時(shí)顯示的文本 height width指定圖像在網(wǎng)頁(yè)中顯示的高度,單位為像素指

9、定圖像在網(wǎng)頁(yè)中顯示的寬度,單位為像素 hspace vspace指定圖像左右的間距 , 單位為像素指定圖像上下的間距 , 單位為像素 align指定圖像與文本的對(duì)齊方式,取值為: top、middle、bottom、left、right border指定圖像邊框的寬度，單位為像素(3) 使用img標(biāo)記的注意事項(xiàng) img標(biāo)記沒(méi)有結(jié)束標(biāo)記; 圖片文件一般使用.gif或.jpg文件,以保證下載速度; 圖片文件的URL盡量使用相對(duì)路徑. 絕對(duì)路徑就是你的網(wǎng)頁(yè)上的文件或目錄在硬盤(pán)上真正的路徑，在制作網(wǎng)頁(yè)中實(shí)際很少用到。 包含了標(biāo)識(shí)Internet上的文件所需要的所有信息。包括完整的協(xié)議名稱、主機(jī)名稱、文

10、件夾名稱和文件名稱 。例如: /special/000120MC/drought060816.html協(xié)議名主機(jī)名文件夾名文件名絕對(duì)路徑相對(duì)路徑相對(duì)路徑是指目標(biāo)文件地址相對(duì)于源文件的路徑。如果鏈接到同一目錄下,只需輸入要鏈接文件的名稱.要鏈接到下級(jí)目錄中的文件,需先輸入目錄名,然后加/,再輸入文件名.要鏈接到上一級(jí)目錄中文件,則先輸入./,再輸入文件名.相對(duì)路徑示例相對(duì)路徑名含 義href=abc.htmabc.htm 是本地當(dāng)前路徑下的文件href=web/abc.htm abc.htm 是本地當(dāng)前路徑下web子目錄下的文件href=./ abc.htm abc.htm 是本地當(dāng)前目錄的上一

11、級(jí)子目錄下的文件href=././ abc.htm abc.htm 是本地當(dāng)前目錄的上兩級(jí)子目錄下的文件舉例Index鏈接到contents: 支持/contents.htmlContents鏈接到index： ./index.html 2.3.6 超鏈接鏈接的基本概念創(chuàng)建超鏈接標(biāo)記常見(jiàn)的鏈接目標(biāo)1. 鏈接的基本概念源端點(diǎn)目的端點(diǎn) 本網(wǎng)頁(yè)內(nèi)的某處(錨點(diǎn)) 網(wǎng)頁(yè)文件或其他文件 E-mail FTP服務(wù)器 文字 圖片 動(dòng)畫(huà) 圖片的一個(gè)區(qū)域(熱點(diǎn))2. 創(chuàng)建超鏈接標(biāo)記(1) 文字為超鏈接源,超鏈接標(biāo)記的常用格式 源端點(diǎn)文字 絕對(duì)路徑 相對(duì)路徑 _blank: 在新窗口中顯示目標(biāo) _self: 在當(dāng)前

12、網(wǎng)頁(yè)窗口中顯示目標(biāo)_parent: 在當(dāng)前網(wǎng)頁(yè)的上一級(jí)窗口中顯示目標(biāo)_top: 忽略框架,在整個(gè)瀏覽器中窗口中顯示目標(biāo) 嵌套了一個(gè)標(biāo)記(2) 圖像為超鏈接源,超鏈接標(biāo)記的常用格式3. 常見(jiàn)的超鏈接目標(biāo)(1) 鏈接到網(wǎng)頁(yè)或其他文件在標(biāo)記的href屬性中指定網(wǎng)頁(yè)文件或其他文件所在的路徑和文件名即可.(2) 鏈接到錨點(diǎn)也叫書(shū)簽鏈接 ,常常用于那些內(nèi)容龐大繁瑣的網(wǎng)頁(yè)，通過(guò)點(diǎn)擊命名錨點(diǎn)，不僅讓我們能指向文檔，還能指向頁(yè)面里的特定段落，更能當(dāng)作精準(zhǔn)鏈接的便利工具，便于瀏覽者查看網(wǎng)頁(yè)內(nèi)容。 (1) 定義錨點(diǎn) 錨點(diǎn)內(nèi)容 (2) 鏈接到錨點(diǎn) 超鏈接內(nèi)容 (3) 鏈接到FTP 超鏈接內(nèi)容 (4) 鏈接到E-mai

13、l 超鏈接內(nèi)容 2.3.7 列表 有序列表 無(wú)序列表 定義列表 嵌套列表1. 有序列表 第1項(xiàng) 第n項(xiàng) (1) 格式:單標(biāo)記(2) 有序列表中type屬性的取值取值功能描 述type=1表示列表項(xiàng)目用數(shù)字標(biāo)號(hào)(1 , 2 , 3.)type=A表示列表項(xiàng)目用大寫(xiě)字母標(biāo)號(hào)(A , B , C.)type=a表示列表項(xiàng)目用小寫(xiě)字母標(biāo)號(hào)(a , b , c.)type=I表示列表項(xiàng)目用大寫(xiě)羅馬數(shù)字標(biāo)號(hào)(,.)type=i表示列表項(xiàng)目用小寫(xiě)羅馬數(shù)字標(biāo)號(hào)(i , ii , iii.)2. 無(wú)序列表 第1項(xiàng) 第n項(xiàng) (1) 格式:(2) 無(wú)序列表中type屬性的取值取值功能描 述type=disc表示項(xiàng)目

14、符號(hào)用小圓點(diǎn)(默認(rèn)樣式)type=square表示項(xiàng)目符號(hào)用小正方形()type=circle表示項(xiàng)目符號(hào)用小圓圈()3. 定義列表 術(shù)語(yǔ)1 術(shù)語(yǔ)解釋1 術(shù)語(yǔ)2 術(shù)語(yǔ)解釋2 術(shù)語(yǔ)3 術(shù)語(yǔ)解釋3 (1) 格式:2.3.8 表格標(biāo) 記描 述.用于定義一個(gè)表格開(kāi)始和結(jié)束.定義一行，一對(duì)行標(biāo)記內(nèi)可以建立多對(duì)由或標(biāo)記所定義的單元格.定義表頭單元格。表頭單元格中的文字將以粗體顯示，此標(biāo)記不是必需的.標(biāo)記必須放在標(biāo)記內(nèi).定義一個(gè)單元格，一對(duì)標(biāo)記將建立一個(gè)單元格，標(biāo)記必須放在標(biāo)記內(nèi).定義表格的基本語(yǔ)法1. 表格標(biāo)記的常用屬性屬 性功能描 述width表格的寬度。單位可以是像素,也可以是百分比height表格的

15、高度。單位可以是像素,也可以是百分比align表格在頁(yè)面的水平擺放位置(left, center, right)background表格的背景圖片bgcolor表格的背景顏色border表格邊框的寬度(以像素為單位)。 默認(rèn)為0,無(wú)邊框bordercolor表格邊框顏色frame(了解)表格外邊框線的顯示方式(取值見(jiàn)后)rules(了解)表格內(nèi)邊框線的顯示方式(取值見(jiàn)后)cellspacing單元格之間的間距cellpadding單元格內(nèi)容與單元格邊界之間的空白距離的大小單元格邊距(表格填充)(cellpadding) - 代表單元格外面的一個(gè)距離,用于隔開(kāi)單元格與單元格空間 單元格間距(表格

16、間距)(cellspacing) - 代表表格邊框與單元格補(bǔ)白的距離,也是單元格補(bǔ)白之間的距離 2. 行標(biāo)記的常用屬性屬 性功能描 述 align 文本的水平對(duì)齊方式,取值為: left、center、right、justify等 valign 行中文本的垂直對(duì)齊方式,取值為： top、middle、bottom、baseline bgcolor 行的背景顏色3. 單元格標(biāo)記和的常用屬性屬 性描 述width/height單元格的寬和高，單位為像素或colspan單元格向右打通的欄數(shù)rowspan單元格向下打通的列數(shù)align單元格內(nèi)容的水平對(duì)齊方式， left, center, right。

17、valign單元格內(nèi)容的垂直對(duì)齊方式， top, middle, bottom。bgcolor單元格的背景色background單元格的背景圖片，與 bgcolor 任用其一4. 標(biāo)題標(biāo)記該標(biāo)記是標(biāo)記的子元素；功能是設(shè)置表格的標(biāo)題或說(shuō)明；可用屬性: align，取值為： top標(biāo)題位于表格上邊居中對(duì)齊（默認(rèn)值）； bottom標(biāo)題位于表格下邊居中對(duì)齊； left標(biāo)題位于表格上邊，左對(duì)齊； right 標(biāo)題位于表格上邊，右對(duì)齊。習(xí)題：用HTML編寫(xiě)一個(gè)網(wǎng)頁(yè)，要求建立文字超鏈接，單擊這個(gè)鏈接會(huì)在新窗口打開(kāi)工大主頁(yè)()用HTNL編寫(xiě)網(wǎng)頁(yè)，要求單擊圖片(/home/deco/2009/0330/log

18、o_home.gif)會(huì)在同一個(gè)窗口中打開(kāi)sina網(wǎng)主頁(yè)(http:/)2.3.9 表單表單標(biāo)記表單元素標(biāo)記 (也稱為控件)和 表單元素標(biāo)記 1. 表單標(biāo)記 表單元素標(biāo)記 (1) 格式: 常用屬性:actionmethodname等 表單元素標(biāo)記:inputtextareaselect(2) name屬性name屬性: 為表單指定一個(gè)名稱. 網(wǎng)頁(yè)上的其他對(duì)象或JavaScript代碼可以通過(guò)該名稱訪問(wèn)表單和表單中的各個(gè)表單控件.(3) method屬性method屬性: 用于指定表單提交時(shí)數(shù)據(jù)的傳送方式. 取值如下:get: 將表單數(shù)據(jù)放在HTTP頭中, 作為URL的參數(shù)傳遞, 因而數(shù)據(jù)量不能

19、太大.post: 將表單數(shù)據(jù)放在HTTP正文中傳送, 可以傳送較大量的數(shù)據(jù)(常用). (4) action屬性action屬性: 用于指定表單所要提交到的URL，一般是一個(gè)動(dòng)態(tài)網(wǎng)頁(yè)，如CGI、ASP、JSP或PHP的網(wǎng)頁(yè)。例: 2. 表單元素標(biāo)記 P45name屬性: 指定控件名稱, 通過(guò)該名稱可以訪問(wèn)該控件;type屬性: 指定控件類型(可用的控件類型見(jiàn)下頁(yè)表格) ;value屬性: 設(shè)定輸入默認(rèn)值;其他屬性: 根據(jù)控件類型的不同,還有其他可用屬性.(1)普通按鈕(type=button)單擊該按鈕時(shí)的處理,其值為JavaScript或VBScript代碼(2) 提交按鈕(type=subm

20、it) 重置按鈕(type=reset)或 reset(3)單行文本框(type=text)文本框的寬度(字符數(shù))文本框中允許輸入的字符個(gè)數(shù)(4)密碼文本框(type=password)文本框的寬度(字符數(shù))文本框中允許輸入的字符個(gè)數(shù)(5)單選按鈕(type=radio)說(shuō)明:(1) 一組單選按鈕的name屬性必須相同,value屬性必須不同;(2)一組按鈕中只有一個(gè)按鈕設(shè)置checked屬性,表示初始為選中狀態(tài).(6)復(fù)選框(type=checkbox)說(shuō)明:(1) 一組復(fù)選框的name屬性必須相同,value屬性必須不同;(2)一組中可以有多個(gè)選框設(shè)置checked屬性,表示初始為選中狀態(tài)

21、.3. 表單元素標(biāo)記多行文本框 文本區(qū)中的初始內(nèi)容 4. 表單元素標(biāo)記/下拉菜單滾動(dòng)列表由 size 屬性決定 一個(gè)option標(biāo)記對(duì)應(yīng)一個(gè)列表項(xiàng)(1) select標(biāo)記中常用的屬性multiple屬性: 設(shè)置列表框中允許多選.size屬性: 設(shè)置列表框中可以顯示的行數(shù). 格式為: size=行數(shù)onchange屬性: 列表框中的選擇發(fā)生改變時(shí)觸發(fā)該事件. 格式為: onchange=javascript等代碼(2) option標(biāo)記中常用的屬性selected屬性: 設(shè)置當(dāng)前列表項(xiàng)為選中狀態(tài).2.3.10 框架(也稱為幀元素 P54) 框架集框架1. 框架集標(biāo)記的常用屬性屬 性說(shuō) 明bord

22、er設(shè)置邊框粗細(xì),默認(rèn)是5象素,如果設(shè)置小于5,分隔線將不可見(jiàn)bordercolor設(shè)置邊框顏色frameborder指定是否顯示邊框.=0: 不顯示邊框，=1:顯示邊框cols用象素?cái)?shù) 和 %左右分隔窗口,*表示剩余部分rows用象素?cái)?shù) 和 %上下分隔窗口,*表示剩余部分2. 框架標(biāo)記的常用屬性(之一)屬 性描 述 name設(shè)置框架名稱,是鏈接標(biāo)記的 target所要的參數(shù)src設(shè)置框架中加載的url文件的地址frameborder設(shè)置是否顯示邊框, 1顯示邊框，0不顯示border設(shè)置邊框粗細(xì) bordercolor設(shè)置邊框顏色noresize設(shè)置不能調(diào)整框架的大小,省略此項(xiàng)時(shí)可以調(diào)整3. 框架嵌套略 4. 框架間的超鏈接關(guān)鍵: 在 標(biāo)記的target指定的目標(biāo)窗口為框架名. 框架名:在標(biāo)記中通過(guò)name屬性指定.2