1、HTML語(yǔ)言基礎(chǔ)線性控制系統(tǒng)內(nèi)容簡(jiǎn)介 第第2章章 HTML語(yǔ)言基礎(chǔ)語(yǔ)言基礎(chǔ) HTML語(yǔ)言基礎(chǔ)線性控制系統(tǒng)內(nèi)容簡(jiǎn)介 u本章主要講授本章主要講授HTMLHTML語(yǔ)言的使用語(yǔ)言的使用, ,內(nèi)容包括內(nèi)容包括: : u文本編輯的基本方法 u多媒體和超鏈接 u制作表格 u框架結(jié)構(gòu) u使用CSS格式化網(wǎng)頁(yè) HTML語(yǔ)言基礎(chǔ)線性控制系統(tǒng)內(nèi)容簡(jiǎn)介 u掌握HTML語(yǔ)言的使用 u掌握文本編輯的基本方法 u了解多媒體和超鏈接 u了解制作表格 u了解框架結(jié)構(gòu) u掌握使用CSS格式化網(wǎng)頁(yè) HTML語(yǔ)言基礎(chǔ)線性控制系統(tǒng)內(nèi)容簡(jiǎn)介 HTML語(yǔ)言的使用語(yǔ)言的使用 HTML語(yǔ)言中的各標(biāo)記的使用語(yǔ)言中的各標(biāo)記的使用 HTML語(yǔ)言基礎(chǔ)

2、線性控制系統(tǒng)內(nèi)容簡(jiǎn)介 第第2章章 HTML語(yǔ)言基礎(chǔ)語(yǔ)言基礎(chǔ) 2.1 HTML語(yǔ)言概述語(yǔ)言概述 2.2 文本編輯的基本方法文本編輯的基本方法 2.3 多媒體和超鏈接多媒體和超鏈接 2.4 制作表格制作表格 2.5 框架結(jié)構(gòu)框架結(jié)構(gòu) 2.6 使用使用CSS格式化網(wǎng)頁(yè)格式化網(wǎng)頁(yè) 2.7 技能與實(shí)訓(xùn)技能與實(shí)訓(xùn) 2.8 思考與練習(xí)思考與練習(xí) HTML語(yǔ)言基礎(chǔ)線性控制系統(tǒng)內(nèi)容簡(jiǎn)介 2.1 HTML語(yǔ)言概述語(yǔ)言概述 HTML（Hyper Text Markup Language 超文本置標(biāo)語(yǔ) 言）是一種用來(lái)制作超文本文檔的簡(jiǎn)單標(biāo)記語(yǔ)言。一個(gè) html文件應(yīng)具有下面的結(jié)構(gòu)： html文件開(kāi)始 文件頭開(kāi)始 文件

3、頭 文件頭結(jié)束 文件體開(kāi)始 文件體 文件體結(jié)束 html文件結(jié)束 HTML語(yǔ)言基礎(chǔ)線性控制系統(tǒng)內(nèi)容簡(jiǎn)介 2.2 文本編輯的基本方法文本編輯的基本方法 在大多數(shù)網(wǎng)頁(yè)中，文本是網(wǎng)頁(yè)的核心，只有適當(dāng)?shù)?對(duì)文本進(jìn)行編輯，才能夠得到豐富多彩的網(wǎng)頁(yè)，很好地 突出網(wǎng)頁(yè)主體。 網(wǎng)頁(yè)體網(wǎng)頁(yè)體 作為網(wǎng)頁(yè)的主體部分，可以設(shè)置很 多的屬性，這些屬性用于定義網(wǎng)頁(yè)的總體風(fēng)格。例如， bgcolor屬性用來(lái)指定網(wǎng)頁(yè)背景顏色，background來(lái)指定網(wǎng) 頁(yè)背景圖片，當(dāng)設(shè)置了背景顏色時(shí)，背景圖片被覆蓋。 HTML語(yǔ)言基礎(chǔ)線性控制系統(tǒng)內(nèi)容簡(jiǎn)介 元素的屬性有color、size、face 等。color屬 性指定字體的顏色，其數(shù)

4、值含義與網(wǎng)頁(yè)背景顏色參數(shù) 相同，不再贅述，如果不設(shè)置該屬性，則默認(rèn)字體顏 色為黑色。Size屬性指定字體大小，其值從1到7表示 字體從小到大。Face屬性設(shè)置字體格式，例如宋體。 HTML語(yǔ)言基礎(chǔ)線性控制系統(tǒng)內(nèi)容簡(jiǎn)介 標(biāo)題元素共有6種，為h1、h2、h3、h4、h5、h6， 用于表示文章中各種題目，標(biāo)題字號(hào)越小，字體越大。 Hn可以設(shè)置對(duì)齊屬性，如align=left， align=center，align=right分別表示居左,居中，居右 對(duì)齊方式，不設(shè)置該屬性時(shí)，默認(rèn)為居左對(duì)齊。 HTML語(yǔ)言基礎(chǔ)線性控制系統(tǒng)內(nèi)容簡(jiǎn)介 文本分段完全依賴于分段元素 。純粹換行使用 。添加不換行空格的方法。

5、標(biāo)簽也可以有多種屬性，例如align屬性可以控制 其對(duì)齊方式，clear屬性可以控制圖文混排方式，align屬性 同元素，而clear屬性含義為： clear=left：下一段顯示在左邊界處的空白區(qū)域。 clear=right：下一段顯示在右邊界處的空白區(qū)域。 clear=all：下一段的左右兩邊都不許有別的內(nèi)容。 HTML語(yǔ)言基礎(chǔ)線性控制系統(tǒng)內(nèi)容簡(jiǎn)介 列表用于列舉內(nèi)容，常用的列表有如下三種格式： 無(wú)序列表、有序列表和自定義列表。 無(wú)序列表用開(kāi)始，列表中的每一個(gè)條目都用 引用。注意，列表?xiàng)l目不需要結(jié)尾標(biāo)簽，輸出 時(shí)每一個(gè)列表?xiàng)l目縮進(jìn)，并且以黑點(diǎn)表示。 熟悉在Dreamweaver中的用法 HT

6、ML語(yǔ)言基礎(chǔ)線性控制系統(tǒng)內(nèi)容簡(jiǎn)介 有序列表用開(kāi)始，列表中的每一個(gè)條目也都用 引用。有序列表為數(shù)字方式。 與上述兩種列表不同的是，自定義列表用于對(duì)列表?xiàng)l目 進(jìn)行簡(jiǎn)單說(shuō)明，用開(kāi)始，列表?xiàng)l目以為引導(dǎo)， 說(shuō)明用。 熟悉在Dreamweaver中的用法 HTML語(yǔ)言基礎(chǔ)線性控制系統(tǒng)內(nèi)容簡(jiǎn)介 在編輯文檔時(shí)，希望在瀏覽網(wǎng)頁(yè)時(shí)仍能保留在 編輯工具中已經(jīng)排好的形式顯示內(nèi)容，這時(shí)可以使 用標(biāo)記。使用標(biāo)記時(shí)，默認(rèn)使用2號(hào)字體 （10磅）。 HTML語(yǔ)言基礎(chǔ)線性控制系統(tǒng)內(nèi)容簡(jiǎn)介 很多元素都有對(duì)其方式屬性align，例如段落、表 格、標(biāo)題、單元格等，其用法如下： 段落居中 表格居中 標(biāo)題居中 單元格內(nèi)容居中 也可以直接

7、使用元素使所包含內(nèi) 容居中顯示。 HTML語(yǔ)言基礎(chǔ)線性控制系統(tǒng)內(nèi)容簡(jiǎn)介 2.3 多媒體和超鏈接多媒體和超鏈接 多媒體和超鏈接在網(wǎng)頁(yè)中起著非常重要的作 用。多媒體可以使網(wǎng)頁(yè)更加豐富多彩，超鏈接使 包含不同信息的網(wǎng)頁(yè)連接在一起，這在資源共享 的時(shí)代非常重要。 HTML語(yǔ)言基礎(chǔ)線性控制系統(tǒng)內(nèi)容簡(jiǎn)介 1. 插入圖像插入圖像 插入圖像的格式為。含有的屬性有： 圖像來(lái)源位置src 、圖像寬度width、圖像高度height、替 代文字alt、圖像邊框border、對(duì)齊方式align等。 2.插入視頻或動(dòng)畫(huà)插入視頻或動(dòng)畫(huà) 用插入視頻或動(dòng)畫(huà)時(shí)。含有的屬性有：多媒 體來(lái)源位置dynsrc、播放次數(shù)loop、兩次

8、播放的時(shí)間間隔 loopdelay、指定何時(shí)開(kāi)始播放start等。其中，loop取值為 -1或infinite時(shí)，表示無(wú)限次循環(huán)播放。 HTML語(yǔ)言基礎(chǔ)線性控制系統(tǒng)內(nèi)容簡(jiǎn)介 創(chuàng)建超鏈接就是在當(dāng)前頁(yè)面與其他頁(yè)面間建立鏈 接。創(chuàng)建超鏈接使用標(biāo)記。含有的屬性有： 鏈接目標(biāo)的位置href、顯示鏈接目標(biāo)的框架target等 HTML語(yǔ)言基礎(chǔ)線性控制系統(tǒng)內(nèi)容簡(jiǎn)介 2.4 制作表格制作表格 表格在網(wǎng)頁(yè)中應(yīng)用非常廣泛一個(gè)表格由table 開(kāi)始，/table結(jié)束，表的內(nèi)容由tr,th和 td定義。tr說(shuō)明表的一個(gè)行，表有多少行就 有多少個(gè)tr；th說(shuō)明表的列數(shù)和相應(yīng)欄目的 名稱，有多少個(gè)欄就有多少個(gè)th；td則

9、填充 由tr和th組成的表格。是否用表格線分開(kāi)為 部分內(nèi)容用border屬性說(shuō)明。 HTML語(yǔ)言基礎(chǔ)線性控制系統(tǒng)內(nèi)容簡(jiǎn)介 1. 有橫向通欄的表用th colspan=#屬性說(shuō)明。colspan 表示橫向欄距，#代表通欄占據(jù)的網(wǎng)格數(shù)，它是一個(gè)小 于表的橫向網(wǎng)格數(shù)的整數(shù)。 2. 有縱向通欄的表用rowspan=#屬性說(shuō)明。 rowspan表示 縱向欄距，#表示通欄占據(jù)的網(wǎng)格數(shù)，應(yīng)小于縱向網(wǎng)絡(luò) 數(shù)。需要說(shuō)明的是有縱向通欄的表，每一行必須用 /tr明確給出一橫向欄目結(jié)束,這是和表的基本形式 不同的。 HTML語(yǔ)言基礎(chǔ)線性控制系統(tǒng)內(nèi)容簡(jiǎn)介 1. 表的大小用width=#和height=#屬性說(shuō)明。前者為

10、表寬， 后者為表高，#是以象素為單位的整數(shù)。 2. 邊框?qū)挾扔蒪order=#說(shuō)明，#為寬度值，單位是象素。 3. 表格間距即劃分表格的線的粗細(xì)用cellspacing=#表示，# 的單位是象素。 HTML語(yǔ)言基礎(chǔ)線性控制系統(tǒng)內(nèi)容簡(jiǎn)介 1. 文本與表框的距離用cellpadding=#說(shuō)明。 2. 表格的后度大于其中的文本后度時(shí)，文本在其中 的輸出位置與用align=#說(shuō)明。 3. 表格的高度大于其中文本的高度時(shí)，可以用 valign=#說(shuō)明文本在其中的位置。 HTML語(yǔ)言基礎(chǔ)線性控制系統(tǒng)內(nèi)容簡(jiǎn)介 所謂浮動(dòng)表格是指表與文件中重中內(nèi)容對(duì)齊時(shí)， 若在現(xiàn)在位置上不能滿足其對(duì)齊方式，表格含上下移 動(dòng)，

11、即擠開(kāi)一些內(nèi)容，直到滿足其對(duì)齊要求。浮動(dòng) 屬性一般由align=left或right指定。 HTML語(yǔ)言基礎(chǔ)線性控制系統(tǒng)內(nèi)容簡(jiǎn)介 表格的顏色用bgcolor=#指定。#是16進(jìn)制的6位數(shù)， 格式為rrggbb，分別表示紅、綠、藍(lán)三色的分量?；?者是16種已定義好的顏色名稱，參見(jiàn)文本顏色。 HTML語(yǔ)言基礎(chǔ)線性控制系統(tǒng)內(nèi)容簡(jiǎn)介 2.5 框架結(jié)構(gòu)框架結(jié)構(gòu) 框架將流覽器的窗口分成多個(gè)區(qū)域，每個(gè)區(qū)域可以單獨(dú)顯 示一個(gè)html文件，各個(gè)區(qū)域也可相關(guān)連地顯示某一個(gè)內(nèi)容，比 如可以將索引放在一個(gè)區(qū)域，文件內(nèi)容顯示在另一個(gè)區(qū)域。 框架的基本結(jié)構(gòu)如下: . . HTML語(yǔ)言基礎(chǔ)線性控制系統(tǒng)內(nèi)容簡(jiǎn)介 用來(lái)定義一個(gè)

12、框架容器， 中可以包含多個(gè)框架，主要屬性如下表： 標(biāo)記屬性功能 rows=size設(shè)置多重框架的高度 cols =size設(shè)置多重框架的寬度 onload=script設(shè)置框架被載入的事件 onunload=script 設(shè)置框架被卸載的事件 HTML語(yǔ)言基礎(chǔ)線性控制系統(tǒng)內(nèi)容簡(jiǎn)介 標(biāo)記屬性功能 src=URL設(shè)置要鏈接到的HTML文件 name=framename表示子窗口的名字 marginwidth=size用來(lái)控制顯示內(nèi)容和窗口左右邊界的距離，默認(rèn)為1 marginheight= size用來(lái)控制顯示內(nèi)容和窗口上下邊界的距離，默認(rèn)為1 scrolling=scrollingst yle

13、指定子窗口是否使用滾動(dòng)條，有YES/NO/AUTO三個(gè)值， 默認(rèn)AUTO，即根據(jù)窗口內(nèi)容決定是否有滾動(dòng)條 noresize使用該屬性后，指定窗口不能調(diào)整窗口大小 HTML語(yǔ)言基礎(chǔ)線性控制系統(tǒng)內(nèi)容簡(jiǎn)介 三種常見(jiàn)的用法： 1用于A標(biāo)記 2用于BASE標(biāo)記 3用于FORM標(biāo)記 HTML語(yǔ)言基礎(chǔ)線性控制系統(tǒng)內(nèi)容簡(jiǎn)介 2.6 使用使用CSS格式化網(wǎng)頁(yè)格式化網(wǎng)頁(yè) CSS（Cascading Style Sheets，層疊樣式表），又 稱格式頁(yè)。用戶可以利用CSS精確地控制頁(yè)面里每一個(gè) 元素的字體樣式、背景、排列方式、區(qū)域尺寸等。 HTML語(yǔ)言基礎(chǔ)線性控制系統(tǒng)內(nèi)容簡(jiǎn)介 1通過(guò)HTML標(biāo)記定義 2用id屬性定

14、義樣式表 3使用span或class定義樣式表 實(shí)例 1嵌入式樣式表 2內(nèi)聯(lián)式樣式表 3外聯(lián)式樣式表 4輸入式樣式表 例：dc文件夾中softmanage.asp HTML語(yǔ)言基礎(chǔ)線性控制系統(tǒng)內(nèi)容簡(jiǎn)介 2.7 技能與實(shí)訓(xùn)技能與實(shí)訓(xùn) 設(shè)計(jì)一張網(wǎng)頁(yè)，要求： 網(wǎng)頁(yè)中使用分欄技術(shù)，上欄為標(biāo)題，我的第一個(gè) 設(shè)計(jì)，可進(jìn)行圖片等設(shè)計(jì)；左欄為導(dǎo)航目錄，添加表 格（4*1），書(shū)寫(xiě)“新浪網(wǎng)”、“搜狐網(wǎng)”、“東方教 育網(wǎng)” 、“鄭州航空工業(yè)管理學(xué)院”，設(shè)置文字字體 為宋體，大小為4號(hào)字，加粗，并作出頁(yè)面鏈接在右欄 顯示；右欄設(shè)置網(wǎng)頁(yè)背景圖片，并添加Flash動(dòng)畫(huà)等。 HTML語(yǔ)言基礎(chǔ)線性控制系統(tǒng)內(nèi)容簡(jiǎn)介 2.8 2

15、.8 思考與練習(xí)思考與練習(xí) 1. 填空題填空題 (1) HTML又稱為_(kāi)語(yǔ)言。 (2) 無(wú)序列表用_標(biāo)記開(kāi)始，列表中的每一個(gè) 條目都用_標(biāo)記引用。 (3) 網(wǎng)頁(yè)中插入圖像時(shí)，設(shè)置圖像來(lái)源位置使用屬性 _標(biāo)記。 (4) 表格由_標(biāo)記標(biāo)識(shí)。 超文本標(biāo)記 src HTML語(yǔ)言基礎(chǔ)線性控制系統(tǒng)內(nèi)容簡(jiǎn)介 (5) _標(biāo)記用來(lái)定義一個(gè)框架容器。 (6) 指定 form的方法為post，動(dòng)作為login.asp 。 (7) 可以使用VBScript客戶端的腳本_實(shí)現(xiàn)向頁(yè) 面輸出“大家好！”。 Login.asp post document.write (“大家好！”) HTML語(yǔ)言基礎(chǔ)線性控制系統(tǒng)內(nèi)容簡(jiǎn)介 2. 選擇題選擇題 (1) ( )標(biāo)記是文件頭的開(kāi)始。 A. B. C. D. (2) 設(shè)置圖像的替代文字使用標(biāo)記的( )屬性。 A. src B. alt C. align D. width (3) 定義表格的行的標(biāo)記為( )。 A.