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

2、.1.1 HTML語言簡介 HTML（Hyper Text Markup Language 超文本置標語言）是一種用來制作超文本文檔的簡單標記語言。一個html文件應具有下面的結(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)頁的主體部分，可以設置很多的屬性，這些屬性用于定義網(wǎng)頁的總體風格。例如，bgcolor屬性用來指定網(wǎng)頁背景顏色，background來指定網(wǎng)頁背景圖片，當

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

4、2.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é)尾標簽，

5、輸出時每一個列表條目縮進，并且以黑點表示。 熟悉在Dreamweaver中的用法,2.2.5.2有序列表 有序列表用開始，列表中的每一個條目也都用引用。有序列表為數(shù)字方式。 2.2.5.3自定義列表 與上述兩種列表不同的是，自定義列表用于對列表條目進行簡單說明，用開始，列表條目以為引導，說明用。 熟悉在Dreamweaver中的用法,2.2.6 預定格式 在編輯文檔時，希望在瀏覽網(wǎng)頁時仍能保留在編輯工具中已經(jīng)排好的形式顯示內(nèi)容，這時可以使用標記。使用標記時，默認使用2號字體（10磅）。,2.2.7 居中 很多元素都有對其方式屬性align，例如段落、表格、標題、單元格等，其用法如下： 段落居中

6、 表格居中 標題居中 單元格內(nèi)容居中 也可以直接使用元素使所包含內(nèi)容居中顯示。,2.3 多媒體和超鏈接,多媒體和超鏈接在網(wǎng)頁中起著非常重要的作用。多媒體可以使網(wǎng)頁更加豐富多彩，超鏈接使包含不同信息的網(wǎng)頁連接在一起，這在資源共享的時代非常重要。,2.3.1 插入多媒體,1. 插入圖像 插入圖像的格式為。含有的屬性有：圖像來源位置src 、圖像寬度width、圖像高度height、替代文字alt、圖像邊框border、對齊方式align等。 2.插入視頻或動畫 用插入視頻或動畫時。含有的屬性有：多媒體來源位置dynsrc、播放次數(shù)loop、兩次播放的時間間隔loopdelay、指定何時開始播放st

7、art等。其中，loop取值為-1或infinite時，表示無限次循環(huán)播放。,2.3.2 加入超鏈接,創(chuàng)建超鏈接就是在當前頁面與其他頁面間建立鏈接。創(chuàng)建超鏈接使用標記。含有的屬性有：鏈接目標的位置href、顯示鏈接目標的框架target等,2.4 制作表格,表格在網(wǎng)頁中應用非常廣泛一個表格由table開始，/table結(jié)束，表的內(nèi)容由tr,th和td定義。tr說明表的一個行，表有多少行就有多少個tr；th說明表的列數(shù)和相應欄目的名稱，有多少個欄就有多少個th；td則填充由tr和th組成的表格。是否用表格線分開為部分內(nèi)容用border屬性說明。,2.4.1 有通欄的表,1. 有橫向通欄的表用th

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

9、g=#表示，#的單位是象素。,2.4.3 表中文本的輸出,1. 文本與表框的距離用cellpadding=#說明。 2. 表格的后度大于其中的文本后度時，文本在其中的輸出位置與用align=#說明。 3. 表格的高度大于其中文本的高度時，可以用valign=#說明文本在其中的位置。,2.4.4 浮動表格,所謂浮動表格是指表與文件中重中內(nèi)容對齊時，若在現(xiàn)在位置上不能滿足其對齊方式，表格含上下移動，即擠開一些內(nèi)容，直到滿足其對齊要求。浮動屬性一般由align=left或right指定。,2.4.5 表格顏色,表格的顏色用bgcolor=#指定。#是16進制的6位數(shù)，格式為rrggbb，分別表示紅、

10、綠、藍三色的分量。或者是16種已定義好的顏色名稱，參見文本顏色。,2.5 框架結(jié)構(gòu),2.5.1 框架結(jié)構(gòu)的文件格式 框架將流覽器的窗口分成多個區(qū)域，每個區(qū)域可以單獨顯示一個html文件，各個區(qū)域也可相關連地顯示某一個內(nèi)容，比如可以將索引放在一個區(qū)域，文件內(nèi)容顯示在另一個區(qū)域。 框架的基本結(jié)構(gòu)如下: . . ,2.5.2 框架結(jié)構(gòu)的標記使用,用來定義一個框架容器，中可以包含多個框架，主要屬性如下表：,2.5.3 FRAME標記,2.5.4 TARGET屬性的使用,三種常見的用法： 1用于A標記 2用于BASE標記 3用于FORM標記,2.6 使用CSS格式化網(wǎng)頁,CSS（Cascading St

11、yle Sheets，層疊樣式表），又稱格式頁。用戶可以利用CSS精確地控制頁面里每一個元素的字體樣式、背景、排列方式、區(qū)域尺寸等。,2.6.1 CSS樣式表的定義 1通過HTML標記定義 2用id屬性定義樣式表 3使用span或class定義樣式表 2.6.2 在html中加入css的方法 實例 1嵌入式樣式表 2內(nèi)聯(lián)式樣式表 3外聯(lián)式樣式表 4輸入式樣式表 例：dc文件夾中softmanage.asp 更多CSS教程：,2.7 技能與實訓,設計一張網(wǎng)頁，要求： 網(wǎng)頁中使用分欄技術，上欄為標題，我的第一個設計，可進行圖片等設計；左欄為導航目錄，添加表格（4*1），書寫“新浪網(wǎng)”、“搜狐網(wǎng)”、

12、“東方教育網(wǎng)” 、“鄭州航空工業(yè)管理學院”，設置文字字體為宋體，大小為4號字，加粗，并作出頁面鏈接在右欄顯示；右欄設置網(wǎng)頁背景圖片，并添加Flash動畫等。,2.8 思考與練習,1. 填空題 (1) HTML又稱為_語言。 (2) 無序列表用_標記開始，列表中的每一個條目都用_標記引用。 (3) 網(wǎng)頁中插入圖像時，設置圖像來源位置使用屬性_標記。 (4) 表格由_標記標識。,超文本標記,src,(5) _標記用來定義一個框架容器。 (6) 指定 form的方法為post，動作為login.asp 。 (7) 可以使用VBScript客戶端的腳本_實現(xiàn)向頁面輸出“大家好！”。,Login.asp

13、,post,document.write (“大家好！”),2. 選擇題 (1) ( )標記是文件頭的開始。 A. B. C. D. (2) 設置圖像的替代文字使用標記的( )屬性。 A. src B. alt C. align D. width (3) 定義表格的行的標記為( )。 A. B. C. D. ,B,B,B,3. 判斷題 (1) 標題元素共有6種，即h1、h2、h3、h4、h5、h6，用于表示網(wǎng)頁中的各種題目，標題字號越小，字體越小。( ) (2) 使用標記可以在瀏覽網(wǎng)頁時仍能保留在編輯工具中已經(jīng)排好的形式顯示內(nèi)容。( ) (3) 用插入視頻或動畫時，loop取值為1或infinite時，表