《超文本標記語言》PPT課件

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

2、注釋標記 (1) 格式:(2) 功能與說明: 注釋內容 不顯示在網(wǎng)頁上; 主要功能是提高代碼的可讀性.2. HTML元素 內容起始標記結束標記,有些標記可以省寫結束標記2.3 HTML元素類別允許包含的元素文檔結構元素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內嵌對象元素APPLET,OBJECT,PARAM,EMBED2.3.1 文檔結構 HTML 文件的正文寫在這里 1. 文檔標記HTML 2. 文檔頭標記 頭部元素： 頭部用表示開始，用表示結束。標簽用于定義文檔的頭部，它是所有頭部元素的容器。 在頭部元素中我們一般都會用到，他是網(wǎng)頁的標題，將顯示在網(wǎng)頁的標題欄當中。2.3.2 頭部元素 可以嵌套在head元素中的元素。1. TITLE標記 功能: 設置網(wǎng)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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