項(xiàng)目3HTML語言課件

1、項(xiàng)目3 HTML語言,4/18/2021,2,任務(wù)5 表單標(biāo)記,任務(wù)4 超鏈接標(biāo)記,任務(wù)3 表格標(biāo)記,任務(wù)2 頁面排版標(biāo)記,任務(wù)1 認(rèn)識(shí)HTML語言,項(xiàng)目3 HTML語言,4/18/2021,3,任務(wù)分析 該任務(wù)通過一個(gè)簡單的網(wǎng)頁實(shí)例來認(rèn)識(shí)HTML文件的基本結(jié)構(gòu)和HTML語言的基本語法。網(wǎng)頁背景顏色為深紅色，文本顏色為白色。,任務(wù)1 認(rèn)識(shí)HTML語言,4/18/2021,4,一什么是HTML語言,HTML（Hyper Text Markup Language，超文本標(biāo)記語言）是一種用來制作超文本文檔的簡單標(biāo)記語言。用HTML編寫的超文本文檔稱為HTML文檔，通常它的擴(kuò)展名為“.html”或“.

2、htm”。,任務(wù)1 認(rèn)識(shí)HTML語言,4/18/2021,5,二HTML基本語法,任務(wù)1 認(rèn)識(shí)HTML語言,HTML語言是通過各種標(biāo)記來標(biāo)識(shí)文檔的結(jié)構(gòu)和文字、圖形、動(dòng)畫、聲音、表格、鏈接等信息的。HTML的標(biāo)記總是放在一對(duì)尖括號(hào)中，它有兩種形式：單標(biāo)記和雙標(biāo)記。,1單標(biāo)記 單獨(dú)使用就可以表達(dá)語意的標(biāo)記。 語法： 如，換行標(biāo)記 。,2雙標(biāo)記 雙標(biāo)記必需成對(duì)出現(xiàn)，由“始標(biāo)記”和“尾標(biāo)記”兩部分 組成。“尾標(biāo)記”是在“始標(biāo)記”前加一個(gè)斜杠（/）。 語法： 如，段落標(biāo)記 ,4/18/2021,6,二HTML基本語法,任務(wù)1 認(rèn)識(shí)HTML語言,3.標(biāo)記屬性,為了使呈現(xiàn)的頁面更加美觀，除了使用標(biāo)記，還可以

3、使用標(biāo)記的屬性對(duì) 標(biāo)記之間的內(nèi)容進(jìn)行修飾， 其語法為： 如，,屬性是可以省略的，省略時(shí)即取默認(rèn)值。各個(gè)屬性之間無先后次序，但是各屬性間必須用空格隔開，屬性的值用英文半角的雙引號(hào)括起來。,4/18/2021,7,二HTML基本語法,任務(wù)1 認(rèn)識(shí)HTML語言,頭部,主體,HTML文檔,4.文檔的結(jié)構(gòu),HTML文檔通常由包含在 標(biāo)記和 標(biāo)記之間的頭部和正文兩大 部分構(gòu)成，基本結(jié)構(gòu)如圖：,4/18/2021,8,二HTML基本語法,任務(wù)1 認(rèn)識(shí)HTML語言,表示文檔的開頭和結(jié)尾，在文檔的最外層，文檔中的所有 信息都是都包含在這一對(duì)標(biāo)簽中。,是html文檔的頭部，這一對(duì)標(biāo)簽中的內(nèi)容用于說明網(wǎng)頁 文件的標(biāo)

4、題()和其他公共的屬性，是不顯示在瀏覽器窗口中的。,這對(duì)標(biāo)記之間的內(nèi)容是瀏覽器窗口中顯示的內(nèi)容。,文檔結(jié)構(gòu)的幾點(diǎn)說明：,4/18/2021,9,二HTML基本語法,任務(wù)1 認(rèn)識(shí)HTML語言,5.文檔的屬性,標(biāo)記對(duì)應(yīng)網(wǎng)頁的主體部分，其標(biāo)記屬性就是頁面的屬性。 如bgcolor、background、text等。 bgcolor=顏色 設(shè)置文檔背景色 background=圖像文件的路徑/圖像文件的名字 設(shè)置文檔背景圖像文件 text=顏色 設(shè)置文檔文字默認(rèn)顏色,在HTML中，色彩的表示方法有兩種：一種是用英文單詞來表示的，如“red”、“blue”等幾種常用顏色。另一種是用16進(jìn)制的紅（R）、綠

5、（G）、藍(lán)（B），即數(shù)字0-9和字母A-F來表示的，如“#FF0000”（紅色）。,4/18/2021,10,三. 任務(wù)實(shí)施,任務(wù)1 認(rèn)識(shí)HTML語言,2打開Windows記事本程序。輸入如下HTML語句：, 例3-1 這是一個(gè)簡單的例子 ,1使用“我的電腦”或“資源管理器”在我們已經(jīng)創(chuàng)建的example站點(diǎn)（mwmw文件夾）， 創(chuàng)建一個(gè)新文件夾，命名為exam。,4/18/2021,11,三. 任務(wù)實(shí)施,任務(wù)1 認(rèn)識(shí)HTML語言,4打開mwmw文件夾中的exam文件夾，雙擊ex01.html網(wǎng)頁文件，在瀏覽器中可以 觀察到其效果。,3保存此文件到exam文件夾中，命名為ex01.html。,

6、4/18/2021,12,任務(wù)1 認(rèn)識(shí)HTML語言,網(wǎng)頁的預(yù)覽效果,返回,4/18/2021,13,任務(wù)分析 該任務(wù)結(jié)合“優(yōu)秀員工評(píng)比的通知”網(wǎng)頁，介紹頁面標(biāo)記的使用方法。,任務(wù)2 頁面排版標(biāo)記,4/18/2021,14,一標(biāo)題標(biāo)記,任務(wù)2 頁面排版標(biāo)記,格式： 其中，“#”的取值范圍為1-6。取1時(shí)為一級(jí)標(biāo)題，字體最大；取6時(shí)為六級(jí)標(biāo)題，字體最小。 作用：設(shè)置文檔的各級(jí)標(biāo)題。,常用屬性：align，用于定義標(biāo)題的對(duì)齊方式， 默認(rèn)值為“左對(duì)齊”，屬性值如表所示。,4/18/2021,15,二版面格式標(biāo)記,任務(wù)2 頁面排版標(biāo)記,1說明標(biāo)記 格式： 作用：為文檔加上說明，但是不顯示在網(wǎng)頁頁面中。,

7、2段落標(biāo)記 格式：或者 作用：使標(biāo)記后的內(nèi)容另起一段，并加一個(gè)空白行。 常用屬性：align，用于定義段落的對(duì)齊方式。 （取值方式如上表 ）,3換行標(biāo)記 格式： 作用：使標(biāo)記后的內(nèi)容換一行顯示，但是不換段落。,4/18/2021,16,二版面格式標(biāo)記,任務(wù)2 頁面排版標(biāo)記,4字體標(biāo)記 格式： 作用：設(shè)置標(biāo)記間內(nèi)容的字體、大小、顏色等格式。 常用屬性：如表所示。,4/18/2021,17,二版面格式標(biāo)記,任務(wù)2 頁面排版標(biāo)記,5字體修飾標(biāo)記 作用：設(shè)置標(biāo)記間內(nèi)容的粗體、斜體、下劃線等特殊效果，,字體修飾標(biāo)記的 功能如表所示。,4/18/2021,18,二版面格式標(biāo)記,任務(wù)2 頁面排版標(biāo)記,6文本

8、居中對(duì)齊標(biāo)記 格式： 作用：設(shè)置居中對(duì)齊方式。 功能與等標(biāo)記中的屬性align=center相同。,4/18/2021,19,二版面格式標(biāo)記,任務(wù)2 頁面排版標(biāo)記,7水平線標(biāo)記 格式： 作用：在文檔中插入一根水平線。 常用屬性：如表所示。,4/18/2021,20,二版面格式標(biāo)記,任務(wù)2 頁面排版標(biāo)記,8特殊符號(hào) 作用：在文檔中顯示特殊符號(hào)。 各種特殊符號(hào)的字符名稱如表所示。,4/18/2021,21,三項(xiàng)目符號(hào)標(biāo)記,任務(wù)2 頁面排版標(biāo)記,有序列表：它的主要標(biāo)記有和 。其中，標(biāo)記 放在外層，標(biāo)記放在內(nèi)層用于區(qū)分 每個(gè)列表項(xiàng)。列表效果如圖所示。,格式： 列表項(xiàng)1 列表項(xiàng)n 作用：列表分為有序列表

9、和無序列表兩類。,4/18/2021,22,三項(xiàng)目符號(hào)標(biāo)記,任務(wù)2 頁面排版標(biāo)記,無序列表:即項(xiàng)目符號(hào)，它的主要標(biāo)記有 和。其中，標(biāo)記放在外 層，標(biāo)記放在內(nèi)層用于區(qū)分每個(gè)列表項(xiàng)。 列表效果如圖所示。,格式： 列表項(xiàng)1 列表項(xiàng)n 作用：列表分為有序列表和無序列表兩類。,4/18/2021,23,三項(xiàng)目符號(hào)標(biāo)記,任務(wù)2 頁面排版標(biāo)記,項(xiàng)目符號(hào)標(biāo)記的屬性,項(xiàng)目符號(hào)標(biāo)記的屬性,4/18/2021,24,四圖像標(biāo)記,任務(wù)2 頁面排版標(biāo)記,格式： 作用：在文檔中插入圖像文件，其中插入的圖像文件的格式可以是：.JPG、.GIF和.PNG。 常用屬性：如表顯示。,4/18/2021,25,五. 任務(wù)實(shí)施,任務(wù)

10、2 頁面排版標(biāo)記,1運(yùn)行Dreamweaver CS3，打開站點(diǎn)example。,2新建一個(gè)文件夾article，在此文件夾中新建一個(gè)空白的網(wǎng)頁文件 notice.html。切換到代碼視圖。,3刪除其中原有的語句，輸入語句。,4認(rèn)識(shí)并分析網(wǎng)頁文件中所使用的標(biāo)記及其屬性。,5保存此網(wǎng)頁文件，并瀏覽。,4/18/2021,26,任務(wù)2 頁面排版標(biāo)記,網(wǎng)頁的預(yù)覽效果,返回,4/18/2021,27,任務(wù)分析 任務(wù)2中的通知網(wǎng)頁結(jié)構(gòu)過于單調(diào)，在網(wǎng)頁中增加一些相關(guān)元素后就會(huì)有較好的顯示效果。為了使得這些增加的內(nèi)容和原先的通知內(nèi)容有機(jī)結(jié)合、統(tǒng)一布局，使用表格是一種可取的方法。,任務(wù)3 表格標(biāo)記,4/18/

11、2021,28,一幾種表格標(biāo)記,任務(wù)3 表格標(biāo)記,表格中的主要 標(biāo)記有五種：,1表格標(biāo)記 格式： 作用：標(biāo)志表格的開始和結(jié)束。 常用屬性：如表所示。,4/18/2021,29,一幾種表格標(biāo)記,任務(wù)3 表格標(biāo)記,表格中的主要 標(biāo)記有五種：,2表格標(biāo)題標(biāo)記 格式： 作用：用于設(shè)置表格的標(biāo)題，該標(biāo)記可省略。,4/18/2021,30,一幾種表格標(biāo)記,任務(wù)3 表格標(biāo)記,表格中的主要 標(biāo)記有五種：,3行標(biāo)記 格式： 作用：表格中的一行。 常用屬性：如表所示。,4/18/2021,31,一幾種表格標(biāo)記,任務(wù)3 表格標(biāo)記,表格中的主要 標(biāo)記有五種：,4單元格標(biāo)記 格式： 作用：表示表格中的一個(gè)普通單元格，但

12、是該標(biāo)記必須放在標(biāo)記中。 常用屬性：如表所示。,4/18/2021,32,一幾種表格標(biāo)記,任務(wù)3 表格標(biāo)記,表格中的主要 標(biāo)記有五種：,5表頭單元格標(biāo)記 格式： 作用：表示表格中的表頭單元格，該標(biāo)記也必須放在標(biāo)記中， 但是該標(biāo)記可以省略。 常用屬性：同標(biāo)記的常用屬性，如上表所示。,注：如果標(biāo)記中屬性值與標(biāo)記中的屬性值沖突時(shí)，以標(biāo)記中屬性值為主。,4/18/2021,33,二合并單元格,任務(wù)3 表格標(biāo)記,在建立表格時(shí)，常常需要一些不規(guī)則的表格，那么就需要使用標(biāo)記中的rowspan屬性和colspan屬性來實(shí)現(xiàn)。其中colspan是橫向合并，rowspan是縱向合并。,右圖所示的表格就左圖表格通過

13、合并單元格后得到的。右圖 中的A2單元格是縱向合并（設(shè)置rowspan=“2”）得到的， B3和C2單元格都是橫向合并（分別設(shè)置colspan=“2”和 colspan=“3”）得到的。,4/18/2021,34,二合并單元格,任務(wù)3 表格標(biāo)記,在進(jìn)行單元格合并時(shí)要注意一下幾點(diǎn)：,整個(gè)表格中，每行的列數(shù)和是相同的。,如果在某行中使用了colspan屬性，即在該行中橫向合并。 例如：colspan=“2”，則從當(dāng)前單元格向右合并2個(gè)兩個(gè) 單元格，那么在當(dāng)前行標(biāo)記中就要少包含一個(gè) 標(biāo)記，以此類推。,如果在某列中使用了rowspan屬性，即在該列中縱向合并。 例如：rowspan=“2”，則從當(dāng)前單

14、元格向下合并2個(gè)兩個(gè) 單元格。那么在下一行中，就少包含一個(gè)單元格，即下一行的 標(biāo)記中要少寫一個(gè)標(biāo)記，以此類推。,4/18/2021,35,三. 任務(wù)實(shí)施,任務(wù)3 表格標(biāo)記,1運(yùn)行Dreamweaver CS3，打開站點(diǎn)example的中article文件夾中 的notice.html文件。,2切換到代碼視圖。,3在原有的語句，進(jìn)行補(bǔ)充。,4認(rèn)識(shí)并分析網(wǎng)頁文件中所使用的標(biāo)記及其屬性。,5保存此網(wǎng)頁文件，并瀏覽。,4/18/2021,36,任務(wù)3 表格標(biāo)記,網(wǎng)頁的預(yù)覽效果,返回,4/18/2021,37,任務(wù)分析 創(chuàng)建超鏈接是HTML語言中一個(gè)重要的部分，網(wǎng)站是有多個(gè)網(wǎng)頁構(gòu)成的，每個(gè)網(wǎng)頁之間就是通

15、過超鏈接將他們連接在一起，可以互相訪問。,任務(wù)4 超鏈接標(biāo)記,4/18/2021,38,一超鏈接標(biāo)記,任務(wù)4 超鏈接標(biāo)記,其中，target屬性值可取以下四種之一： _blank：在新窗口中打開。 _parent：在上一級(jí)窗口中打開。 _self：在當(dāng)前窗口打開，為默認(rèn)值。 _top：在瀏覽器的整個(gè)窗口中打開，會(huì)刪除所有框架。,格式： 作用：通過點(diǎn)擊網(wǎng)頁中的文本、 圖像等對(duì)象連接到其他的網(wǎng)頁、 圖像或文件等。 常用屬性：如表所示。,4/18/2021,39,二絕對(duì)路徑和相對(duì)路徑,任務(wù)4 超鏈接標(biāo)記,HTML有兩種路徑： 絕對(duì)路徑和相對(duì)路徑。,1絕對(duì)路徑 完整的描述文件位置的路徑就是絕對(duì)路徑。

16、如，F(xiàn):/mwmw/image/top.jpg或者 http:/。,2相對(duì)路徑 與文檔保存位置相對(duì)的位置叫相對(duì)路徑。,4/18/2021,40,二絕對(duì)路徑和相對(duì)路徑,任務(wù)4 超鏈接標(biāo)記,在使用相對(duì)路徑時(shí)，需注意：,如果網(wǎng)頁文檔和引用的文件在同一個(gè)文件夾中，直接 寫引用文件的文件名。 如：在當(dāng)前站點(diǎn)中有index.html文件和home.html文件。 當(dāng)網(wǎng)頁文檔index.html的超鏈接中引用home.html時(shí)， 可以直接寫。,如果引用的文件在網(wǎng)頁文檔的下級(jí)文件夾中，直接寫文件 夾的路徑即可。 如：在當(dāng)前站點(diǎn)中有文件夾images，在images中有圖像 文件top01.jpg,當(dāng)網(wǎng)頁文檔

17、index.html中引用top1.jpg 時(shí)，可以寫。,“./”來表示網(wǎng)頁文檔的上一級(jí)文件夾，“././”表示 網(wǎng)頁文檔的上上級(jí)的文件夾，以此類推。 如：在當(dāng)前站點(diǎn)中有文件夾article，在此文件夾中有 notice.html文件。則，此網(wǎng)頁文件中要引用images文件夾 中的top.jpg文件，可以寫。,4/18/2021,41,三任務(wù)實(shí)施,任務(wù)4 超鏈接標(biāo)記,1運(yùn)行Dreamweaver CS3，打開站點(diǎn)example的中index.html文件。,2切換到代碼視圖。,4/18/2021,42,三任務(wù)實(shí)施,任務(wù)4 超鏈接標(biāo)記,4保存文件，并瀏覽網(wǎng)頁。鼠標(biāo)點(diǎn)擊“點(diǎn)擊進(jìn)入”時(shí)，會(huì)產(chǎn)生頁面跳

18、轉(zhuǎn)。,3在文檔偏后的位置找到下列語句： 點(diǎn)擊進(jìn)入 修改成： 點(diǎn)擊進(jìn)入 ,4/18/2021,43,任務(wù)4 超鏈接標(biāo)記,網(wǎng)頁的預(yù)覽效果,返回,4/18/2021,44,任務(wù)分析 表單是網(wǎng)頁上的一個(gè)特定的區(qū)域，是用戶交互的控件集合，相當(dāng)于一個(gè)容器，其中可以包含按鈕、文本框，下拉框等，表單在HTML頁面中發(fā)揮了重要作用，利用表單可以收集用戶端提交的信息，是聯(lián)系用戶和站點(diǎn)擁有者的重要橋梁，是實(shí)現(xiàn)交互的重要手段。,任務(wù)5 表單標(biāo)記,4/18/2021,45,一表單,任務(wù)5 表單標(biāo)記,格式： 作用：標(biāo)志表單的開始和結(jié)束，在和之間，可以使用 以外 的任何HTML標(biāo)記，這使表單變得非常靈活。 常用屬性：如表所

19、示。,4/18/2021,46,二常用的表單標(biāo)記,任務(wù)5 表單標(biāo)記,表單中主要元素,4/18/2021,47,二常用的表單標(biāo)記,任務(wù)5 表單標(biāo)記,1標(biāo)記 表單的不同類型的元素是通過設(shè)定屬性TYPE=表單類型。,文本框和密碼框 類型分別：type=“text”文本框， type=password密碼框。 常用的屬性見下表：,4/18/2021,48,二常用的表單標(biāo)記,任務(wù)5 表單標(biāo)記,例如，下面這段語句對(duì)應(yīng)下圖所示的效果。 用戶名： 密碼：,4/18/2021,49,二常用的表單標(biāo)記,任務(wù)5 表單標(biāo)記,1標(biāo)記 表單的不同類型的元素是通過設(shè)定屬性TYPE=表單類型。,按鈕 按鈕分為：普通按鈕、提交

20、按鈕、復(fù)位按鈕。 普通按鈕：（type=buttom）單擊后執(zhí)行設(shè)定的代碼。 提交按鈕：（type=“submit”）當(dāng)用戶單擊這個(gè)按鈕后， 用戶的輸入信息即被傳送到服務(wù)器。 重置按鈕：（type=“reset”）當(dāng)用戶單擊這個(gè)按鈕后， 用戶輸入的信息全部清除，用戶重新輸入信息。 常用的屬性如表所示。,4/18/2021,50,二常用的表單標(biāo)記,任務(wù)5 表單標(biāo)記,1標(biāo)記 表單的不同類型的元素是通過設(shè)定屬性TYPE=表單類型。,單選框 類型為type=“radio”，單選框是好將多個(gè)選項(xiàng)讓使用者 選擇，一次只能選一個(gè)。 常用的屬性見下表：,4/18/2021,51,二常用的表單標(biāo)記,任務(wù)5 表單標(biāo)記,例如，下面這段語句對(duì)應(yīng)下圖所示的效果。 性 別： 男 女,4/18/2021,52,二常用的表單標(biāo)記,任務(wù)5 表單標(biāo)記,1標(biāo)記 表單的不同類型的元素是通過設(shè)定屬性TYPE=表單類型。,復(fù)選框 類型為type=“checkbox”，復(fù)選框是將多個(gè)選項(xiàng)讓使用者 選擇，一次能選多個(gè)。常用的屬性見下表：,4/18/