ASP程序設(shè)計及實訓(xùn)指導(dǎo)

1、專業(yè)課第2章 HTML語言基礎(chǔ)主講:劉鳳玲內(nèi)容簡介：本章主要講授HTML語言的使用,內(nèi)容包括: 文本編輯的基本方法 多媒體和超鏈接 制作表格 框架結(jié)構(gòu) 使用CSS格式化網(wǎng)頁 學(xué)習(xí)目的與要求：掌握HTML語言的使用掌握文本編輯的基本方法 了解多媒體和超鏈接 了解制作表格 了解框架結(jié)構(gòu) 掌握使用CSS格式化網(wǎng)頁 重點：HTML語言的使用難點：HTML語言中的各標記的使用第2章 HTML語言基礎(chǔ) 2.1 HTML語言概述 2.2 文本編輯的基本方法 2.3 多媒體和超鏈接 2.4 制作表格 2.5 框架結(jié)構(gòu) 2.6 使用CSS格式化網(wǎng)頁 2.7 技能與實訓(xùn)2.8 思考與練習(xí)2.1 HTML語言概述2

2、.1.1 HTML語言簡介 HTML（Hyper Text Markup Language 超文本置標語言）是一種用來制作超文本文檔的簡單標記語言。一個html文件應(yīng)具有下面的結(jié)構(gòu)： html文件開始 文件頭開始 文件頭 文件頭結(jié)束 文件體開始 文件體 文件體結(jié)束 html文件結(jié)束2.2 文本編輯的基本方法 在大多數(shù)網(wǎng)頁中，文本是網(wǎng)頁的核心，只有適當?shù)貙ξ谋具M行編輯，才能夠得到豐富多彩的網(wǎng)頁，很好地突出網(wǎng)頁主體。2.2.1 網(wǎng)頁體 作為網(wǎng)頁的主體部分，可以設(shè)置很多的屬性，這些屬性用于定義網(wǎng)頁的總體風格。例如，bgcolor屬性用來指定網(wǎng)頁背景顏色，background來指定網(wǎng)頁背景圖片，當設(shè)置

3、了背景顏色時，背景圖片被覆蓋。 2.2.2 字體 元素的屬性有color、size、face 等。color屬性指定字體的顏色，其數(shù)值含義與網(wǎng)頁背景顏色參數(shù)相同，不再贅述，如果不設(shè)置該屬性，則默認字體顏色為黑色。Size屬性指定字體大小，其值從1到7表示字體從小到大。Face屬性設(shè)置字體格式，例如宋體。 2.2.3 標題 標題元素共有6種，為h1、h2、h3、h4、h5、h6，用于表示文章中各種題目，標題字號越小，字體越大。 Hn可以設(shè)置對齊屬性，如align=left，align=center，align=right分別表示居左,居中，居右對齊方式，不設(shè)置該屬性時，默認為居左對齊。 2.2.

4、4 分段 文本分段完全依賴于分段元素 。標簽也可以有多種屬性，例如align屬性可以控制其對齊方式，clear屬性可以控制圖文混排方式，align屬性同元素，而clear屬性含義為：clear=left：下一段顯示在左邊界處的空白區(qū)域。clear=right：下一段顯示在右邊界處的空白區(qū)域。clear=all：下一段的左右兩邊都不許有別的內(nèi)容。 2.2.5 列表 列表用于列舉內(nèi)容，常用的列表有如下三種格式：無序列表、有序列表和自定義列表2.2.5.1無序列表 無序列表用開始，列表中的每一個條目都用引用。注意，列表條目不需要結(jié)尾標簽，輸出時每一個列表條目縮進，并且以黑點表示。2.2.5.2有序列

5、表 有序列表用開始，列表中的每一個條目也都用引用。有序列表為數(shù)字方式。2.2.5.3自定義列表 與上述兩種列表不同的是，自定義列表用于對列表條目進行簡單說明，用開始，列表條目以為引導(dǎo)，說明用。2.2.6 預(yù)定格式 在編輯文檔時，希望在瀏覽網(wǎng)頁時仍能保留在編輯工具中已經(jīng)排好的形式顯示內(nèi)容，這時可以使用標記。使用標記時，默認使用2號字體（10磅）。 2.2.7 居中很多元素都有對其方式屬性align，例如段落、表格、標題、單元格等，其用法如下： 段落居中 表格居中 標題居中 單元格內(nèi)容居中也可以直接使用元素使所包含內(nèi)容居中顯示。 2.3 多媒體和超鏈接 多媒體和超鏈接在網(wǎng)頁中起著非常重要的作用。多

6、媒體可以使網(wǎng)頁更加豐富多彩，超鏈接使包含不同信息的網(wǎng)頁連接在一起，這在資源共享的時代非常重要。2.3.1插入多媒體 1. 插入圖像 插入圖像的格式為。含有的屬性有：圖像來源位置src 、圖像寬度width、圖像高度height、替代文字alt、圖像邊框border、對齊方式align等。2.插入視頻或動畫 用插入視頻或動畫時。含有的屬性有：多媒體來源位置dynsrc、播放次數(shù)loop、兩次播放的時間間隔loopdelay、指定何時開始播放start等。其中，loop取值為-1或infinite時，表示無限次循環(huán)播放。 2.3.2 加入超鏈接 創(chuàng)建超鏈接就是在當前頁面與其他頁面間建立鏈接。創(chuàng)建超

7、鏈接使用標記。含有的屬性有：鏈接目標的位置href、顯示鏈接目標的框架target等 2.4 制作表格 表格在網(wǎng)頁中應(yīng)用非常廣泛一個表格由table開始，/table結(jié)束，表的內(nèi)容由tr,th和td定義。tr說明表的一個行，表有多少行就有多少個tr；th說明表的列數(shù)和相應(yīng)欄目的名稱，有多少個欄就有多少個th；td則填充由tr和th組成的表格。是否用表格線分開為部分內(nèi)容用border屬性說明。2.4.1 有通欄的表1. 有橫向通欄的表用th colspan=#屬性說明。colspan表示橫向欄距，#代表通欄占據(jù)的網(wǎng)格數(shù)，它是一個小于表的橫向網(wǎng)格數(shù)的整數(shù)。2. 有縱向通欄的表用rowspan=#屬

8、性說明。rowspan表示縱向欄距，#表示通欄占據(jù)的網(wǎng)格數(shù)，應(yīng)小于縱向網(wǎng)絡(luò)數(shù)。需要說明的是有縱向通欄的表，每一行必須用/tr明確給出一橫向欄目結(jié)束,這是和表的基本形式不同的。2.4.2 表的大小、邊框?qū)挾?、表格間距 1.表的大小用width=#和height=#屬性說明。前者為表寬，后者為表高，#是以象素為單位的整數(shù)。2.邊框?qū)挾扔蒪order=#說明，#為寬度值，單位是象素。3.表格間距即劃分表格的線的粗細用cellspacing=#表示，#的單位是象素。2.4.3 表中文本的輸出 1. 文本與表框的距離用cellpadding=#說明。2. 表格的后度大于其中的文本后度時，文本在其中的輸出

9、位置與用align=#說明。3. 表格的高度大于其中文本的高度時，可以用valign=#說明文本在其中的位置。 2.4.4 浮動表格 所謂浮動表格是指表與文件中重中內(nèi)容對齊時，若在現(xiàn)在位置上不能滿足其對齊方式，表格含上下移動，即擠開一些內(nèi)容，直到滿足其對齊要求。浮動屬性一般由align=left或right指定。2.4.5 表格顏色 表格的顏色用bgcolor=#指定。#是16進制的6位數(shù)，格式為rrggbb，分別表示紅、綠、藍三色的分量?；蛘呤?6種已定義好的顏色名稱，參見文本顏色。2.5 框架結(jié)構(gòu)2.5.1 框架結(jié)構(gòu)的文件格式 框架將流覽器的窗口分成多個區(qū)域，每個區(qū)域可以單獨顯示一個htm

10、l文件，各個區(qū)域也可相關(guān)連地顯示某一個內(nèi)容，比如可以將索引放在一個區(qū)域，文件內(nèi)容顯示在另一個區(qū)域?？蚣艿幕窘Y(jié)構(gòu)如下:.2.5.2 框架結(jié)構(gòu)的標記使用 用來定義一個框架容器，中可以包含多個框架，主要屬性如下表：標記屬性功能rows=size設(shè)置多重框架的高度cols =size設(shè)置多重框架的寬度onload=script設(shè)置框架被載入的事件onunload=script 設(shè)置框架被卸載的事件2.5.3 FRAME標記 標記屬性功能src=URL設(shè)置要鏈接到的HTML文件name=framename表示子窗口的名字marginwidth=size用來控制顯示內(nèi)容和窗口左右邊界的距離，默認為1ma

11、rginheight= size用來控制顯示內(nèi)容和窗口上下邊界的距離，默認為1scrolling=scrollingstyle指定子窗口是否使用滾動條，有YES/NO/AUTO三個值，默認AUTO，即根據(jù)窗口內(nèi)容決定是否有滾動條noresize使用該屬性后，指定窗口不能調(diào)整窗口大小2.5.4 TARGET屬性的使用 三種常見的用法：1用于A標記 2用于BASE標記 3用于FORM標記2.6 使用CSS格式化網(wǎng)頁 CSS（Cascading Style Sheets，層疊樣式表），又稱格式頁。用戶可以利用CSS精確地控制頁面里每一個元素的字體樣式、背景、排列方式、區(qū)域尺寸等。 2.6.1 CSS

12、樣式表的定義 1通過HTML標記定義 2用id屬性定義樣式表 3使用class定義樣式表 2.6.2 在html中加入css的方法 1嵌入式樣式表 2內(nèi)聯(lián)式樣式表 3外聯(lián)式樣式表 4輸入式樣式表 2.7 技能與實訓(xùn) 設(shè)計一張網(wǎng)頁，要求： 在網(wǎng)頁中添加一個表格。設(shè)置網(wǎng)頁背景圖片。并在相應(yīng)單元格中添加相應(yīng)文字和圖片，設(shè)置文字字體為宋體，大小為4號字，加粗。 “新浪網(wǎng)”、“搜狐網(wǎng)”、“東方教育網(wǎng)” 分別添加鏈接。 如圖所示 ：2.8 思考與練習(xí)1. 填空題(1) HTML又稱為_語言。(2) 無序列表用_標記開始，列表中的每一個條目都用_標記引用。(3) 網(wǎng)頁中插入圖像時，設(shè)置圖像來源位置使用屬性_

13、標記。(4) 表格由_標記標識。 (5) _標記用來定義一個框架容器。(6) 指定 form的方法為post，動作為login.asp 。(7) 可以使用VBScript客戶端的腳本_實現(xiàn)向頁面輸出“大家好！”。2. 選擇題(1) ( )標記是文件頭的開始。A. B. C. D. (2) 設(shè)置圖像的替代文字使用標記的( )屬性。A. srcB. altC. align D. width(3) 定義表格的行的標記為( )。A. B. C. D. 3. 判斷題(1) 標題元素共有6種，即h1、h2、h3、h4、h5、h6，用于表示網(wǎng)頁中的各種題目，標題字號越小，字體越小。( )(2) 使用標記可以在瀏覽網(wǎng)頁時仍能保留在編輯工具中已經(jīng)排好的形式顯示內(nèi)容。( )(3) 用插入視頻或動畫時，loop取值為1