線性控制系統(tǒng).ppt

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

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

3、設(shè)置了背景顏色時(shí)，背景圖片被覆蓋。,2.2.2 字體,元素的屬性有color、size、face 等。color屬性指定字體的顏色，其數(shù)值含義與網(wǎng)頁(yè)背景顏色參數(shù)相同，不再贅述，如果不設(shè)置該屬性，則默認(rèn)字體顏色為黑色。Size屬性指定字體大小，其值從1到7表示字體從小到大。Face屬性設(shè)置字體格式，例如宋體。,2.2.3 標(biāo)題,標(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ì)齊。,2.

4、2.4 分段與換行標(biāo)記,文本分段完全依賴于分段元素 。純粹換行使用。添加不換行空格的方法。 標(biāo)簽也可以有多種屬性，例如align屬性可以控制其對(duì)齊方式，clear屬性可以控制圖文混排方式，align屬性同元素，而clear屬性含義為： clear=left：下一段顯示在左邊界處的空白區(qū)域。 clear=right：下一段顯示在右邊界處的空白區(qū)域。 clear=all：下一段的左右兩邊都不許有別的內(nèi)容。,2.2.5 列表,列表用于列舉內(nèi)容，常用的列表有如下三種格式：無序列表、有序列表和自定義列表。 2.2.5.1無序列表 無序列表用開始，列表中的每一個(gè)條目都用引用。注意，列表?xiàng)l目不需要結(jié)尾標(biāo)簽，

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

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

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

8、 colspan=#屬性說明。colspan表示橫向欄距，#代表通欄占據(jù)的網(wǎng)格數(shù)，它是一個(gè)小于表的橫向網(wǎng)格數(shù)的整數(shù)。 2. 有縱向通欄的表用rowspan=#屬性說明。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.表格間距即劃分表格的線的粗細(xì)用cellspacin

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

10、綠、藍(lán)三色的分量?；蛘呤?6種已定義好的顏色名稱，參見文本顏色。,2.5 框架結(jié)構(gòu),2.5.1 框架結(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)如下: . . ,2.5.2 框架結(jié)構(gòu)的標(biāo)記使用,用來定義一個(gè)框架容器，中可以包含多個(gè)框架，主要屬性如下表：,2.5.3 FRAME標(biāo)記,2.5.4 TARGET屬性的使用,三種常見的用法： 1用于A標(biāo)記 2用于BASE標(biāo)記 3用于FORM標(biāo)記,2.6 使用CSS格式化網(wǎng)頁(yè),CSS（Cascading St

11、yle Sheets，層疊樣式表），又稱格式頁(yè)。用戶可以利用CSS精確地控制頁(yè)面里每一個(gè)元素的字體樣式、背景、排列方式、區(qū)域尺寸等。,2.6.1 CSS樣式表的定義 1通過HTML標(biāo)記定義 2用id屬性定義樣式表 3使用span或class定義樣式表 2.6.2 在html中加入css的方法 實(shí)例 1嵌入式樣式表 2內(nèi)聯(lián)式樣式表 3外聯(lián)式樣式表 4輸入式樣式表 例：dc文件夾中softmanage.asp 更多CSS教程：,2.7 技能與實(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），書寫“新浪網(wǎng)”、“搜狐網(wǎng)”、

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

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