第2章Web頁面制作基礎(chǔ)

1、第第2章章 Web頁面制作基礎(chǔ)頁面制作基礎(chǔ)n2.1 HTML語言概述語言概述n2.2 文檔的格式與風(fēng)格文檔的格式與風(fēng)格n2.3 加入多媒體與超級鏈接加入多媒體與超級鏈接n2.4 制作表格制作表格n2.5 制作表單制作表單n2.6 框架結(jié)構(gòu)框架結(jié)構(gòu)n2.7 CSS基礎(chǔ)基礎(chǔ)本章學(xué)習(xí)目標(biāo)本章學(xué)習(xí)目標(biāo)本章將詳細(xì)介紹使用本章將詳細(xì)介紹使用HTML語言（語言（Hyper Text Markup Language）編輯絢麗多彩的編輯絢麗多彩的Web頁面。通過本章的學(xué)習(xí)，讀者應(yīng)掌握以頁面。通過本章的學(xué)習(xí)，讀者應(yīng)掌握以下內(nèi)容：下內(nèi)容：nWeb頁面文檔格式的設(shè)計方法頁面文檔格式的設(shè)計方法n如何加入多媒體和超級鏈接

2、如何加入多媒體和超級鏈接n表單的制作表單的制作n框架的使用框架的使用nCSS基礎(chǔ)知識基礎(chǔ)知識2.1 HTML語言概述語言概述n2.1.1 HTML概述概述n2.1.2 HTML文檔的結(jié)構(gòu)文檔的結(jié)構(gòu)n2.1.3 HTML標(biāo)記標(biāo)記n2.1.4 常用常用HTML編輯工具編輯工具返回首頁2.1.1 HTML概述概述nHTML是（是（Hyper Text Markup Language，超文本標(biāo)記語言）的縮寫，最早源于超文本標(biāo)記語言）的縮寫，最早源于SGML語語言（言（Standard General Markup Language，標(biāo)準(zhǔn)通用化標(biāo)記語言），是由標(biāo)準(zhǔn)通用化標(biāo)記語言），是由Web頁面的發(fā)頁面

3、的發(fā)明者明者Tim Berners-Lee和同事和同事Daniel W.Connolly于于1990年創(chuàng)立的一種新穎的標(biāo)年創(chuàng)立的一種新穎的標(biāo)記式語言，它是記式語言，它是SGML的應(yīng)用。到的應(yīng)用。到90年代后期，年代后期，由于網(wǎng)絡(luò)的飛速發(fā)展，使得由于網(wǎng)絡(luò)的飛速發(fā)展，使得HTML也達(dá)到了空也達(dá)到了空前的繁榮，在前的繁榮，在WWW革命中扮演了核心技術(shù)的革命中扮演了核心技術(shù)的角色。角色。返回本節(jié)2.1.2 HTML文檔的結(jié)構(gòu)文檔的結(jié)構(gòu)HTML語言的基本結(jié)構(gòu)：語言的基本結(jié)構(gòu)： 頭部信息頭部信息 正文部分正文部分 圖2-1 一個說明HTML結(jié)構(gòu)的網(wǎng)頁返回本節(jié)2.1.3 HTML標(biāo)記標(biāo)記1HTML文檔標(biāo)記格

4、式：格式：功能：標(biāo)志文檔開始和結(jié)尾的標(biāo)記。功能：標(biāo)志文檔開始和結(jié)尾的標(biāo)記。 2HTML文件頭標(biāo)記文件頭標(biāo)記格式：格式：功能：用于包含文件的基本信息。功能：用于包含文件的基本信息。3HTML文件主體標(biāo)記文件主體標(biāo)記格式：格式：功能：文件主體標(biāo)記。功能：文件主體標(biāo)記。返回本節(jié)2.1.4 常用常用HTML編輯工具編輯工具n使用使用HTML編輯器可以很容易的設(shè)計精彩的編輯器可以很容易的設(shè)計精彩的網(wǎng)頁，實際上，任何一個文檔編輯器都是網(wǎng)頁，實際上，任何一個文檔編輯器都是HTML編輯器，這也是網(wǎng)頁制作之所以流行的編輯器，這也是網(wǎng)頁制作之所以流行的一個原因。一個原因。 nHTML作為最基本的網(wǎng)頁編輯語言，能夠

5、實作為最基本的網(wǎng)頁編輯語言，能夠?qū)崿F(xiàn)網(wǎng)頁的各種效果。但是，它畢竟是一種語言，現(xiàn)網(wǎng)頁的各種效果。但是，它畢竟是一種語言，需要記住一些標(biāo)記。需要記住一些標(biāo)記。 返回本節(jié)2.2 文檔的格式與風(fēng)格文檔的格式與風(fēng)格n2.2.1 設(shè)置設(shè)置的屬性的屬性n2.2.2 段落格式化段落格式化n2.2.3 建立列表建立列表n2.2.4 字符的格式化字符的格式化返回首頁2.2.1 設(shè)置設(shè)置的屬性的屬性n作為網(wǎng)頁的主體部分，作為網(wǎng)頁的主體部分，有很多的內(nèi)置屬性，這些屬性用于設(shè)定網(wǎng)頁的有很多的內(nèi)置屬性，這些屬性用于設(shè)定網(wǎng)頁的總體風(fēng)格。例如，定義頁面的背景圖像、背景總體風(fēng)格。例如，定義頁面的背景圖像、背景顏色、文字顏色以及

6、超文本鏈接顏色等，主要顏色、文字顏色以及超文本鏈接顏色等，主要屬性如表屬性如表2-1所示。所示。 標(biāo)記屬性功能background=URL設(shè)置網(wǎng)頁的背景圖片bgcolor=colorvalue設(shè)置網(wǎng)頁的背景顏色text=colorvalue設(shè)置文本的顏色link=colorvalue設(shè)置尚未被訪問過的超文本鏈接的顏色，默認(rèn)為藍(lán)色vlink=colorvalue設(shè)置已被訪問過的超文本鏈接的顏色，默認(rèn)為紫色alink=colorvalue設(shè)置超文本鏈接在被單擊的瞬間的顏色，默認(rèn)為紅色bgproperties =fixed設(shè)置背景是否隨滾動條滾動leftmargin=size設(shè)置網(wǎng)頁左邊的空白top

7、margin=size設(shè)置網(wǎng)頁上方的空白margingwidth=size設(shè)置網(wǎng)頁空白的寬度marginheight =size設(shè)置網(wǎng)頁空白的高度表2-1 BODY標(biāo)記屬性值返回本節(jié)2.2.2 段落格式化段落格式化1標(biāo)題標(biāo)記格式：格式：，功能：設(shè)置各種大小不同標(biāo)題的標(biāo)記。功能：設(shè)置各種大小不同標(biāo)題的標(biāo)記。2段落標(biāo)記格式：格式：功能：設(shè)置段落標(biāo)記。功能：設(shè)置段落標(biāo)記。3預(yù)定義格式標(biāo)記格式：格式：功能：在瀏覽器中瀏覽時，按照文檔中預(yù)先排好的形功能：在瀏覽器中瀏覽時，按照文檔中預(yù)先排好的形式顯示內(nèi)容。式顯示內(nèi)容。4分區(qū)顯示標(biāo)記格式：格式：功能：分區(qū)顯示標(biāo)記。功能：分區(qū)顯示標(biāo)記。5換行標(biāo)記格式：格式：

8、功能：強(qiáng)制換行。功能：強(qiáng)制換行。6水平線標(biāo)記水平線標(biāo)記格式：格式：功能：插入水平線標(biāo)記。功能：插入水平線標(biāo)記。7注釋標(biāo)記格式：格式：功能：注釋標(biāo)記。功能：注釋標(biāo)記。標(biāo)題標(biāo)記例例2-2： 標(biāo)題示例！標(biāo)題示例！ hello world!hello world!hello world!hello world!hello world!hello world!圖2-2 標(biāo)題的效果預(yù)定義格式標(biāo)記預(yù)定義格式標(biāo)記 例例2-3：顯示顯示<p>與與<pre>的區(qū)別的區(qū)別春曉春曉春眠不覺曉，處處聞啼鳥。春眠不覺曉，處處聞啼鳥。夜來風(fēng)雨聲，花落知多少。夜來風(fēng)雨聲

9、，花落知多少。 春曉春曉春眠不覺曉，處處聞啼鳥。春眠不覺曉，處處聞啼鳥。夜來風(fēng)雨聲，花落知多少。夜來風(fēng)雨聲，花落知多少。 圖2-3 與的區(qū)別水平線標(biāo)記水平線標(biāo)記標(biāo)記屬性功能align=alignstyle設(shè)置對齊方式。alignstyle的取值為：left，right，centersize =size設(shè)置線條寬度（即高度）width=size設(shè)置線條長度color=colorvalue設(shè)置線條顏色，默認(rèn)為黑色noshade設(shè)置線條是否有陰影表2-2 屬性值 注釋標(biāo)記例例2-4：標(biāo)記的使用標(biāo)記的使用三種標(biāo)記的使用！三種標(biāo)記的使用！我在中間！我在中間！中間中間我在左邊！我在左邊！左邊左邊我在右邊！

10、我在右邊！右邊右邊圖2-4 三種標(biāo)記的使用返回本節(jié)2.2.3 建立列表建立列表1有序列表格式：格式： 功能：建立有序列表。功能：建立有序列表。2無序列表格式：格式： 功能：建立無序列表。功能：建立無序列表。例例2-5：列表示例列表示例計算機(jī)新書計算機(jī)新書ASP程序設(shè)計程序設(shè)計HTML網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計FrontPage使用指南使用指南英語新書英語新書外經(jīng)貿(mào)英語外經(jīng)貿(mào)英語實用英語翻譯實用英語翻譯朗文英語語法朗文英語語法圖2-5 有序列表與無序列表的區(qū)別3自定義列表除了上述兩種列表以外，還可以根據(jù)需要自定義列表除了上述兩種列表以外，還可以根據(jù)需要自定義列表樣式。格式為：樣式。格式為： 返回本節(jié)2.2

11、.4 字符的格式化字符的格式化1字體設(shè)置標(biāo)記字體設(shè)置標(biāo)記格式：格式：功能：設(shè)置字體格式標(biāo)記。功能：設(shè)置字體格式標(biāo)記。標(biāo)記提供了幾種屬性，如表標(biāo)記提供了幾種屬性，如表2-3所示，所示，使用它們可以很容易的設(shè)置字體的大小、顏色、使用它們可以很容易的設(shè)置字體的大小、顏色、字型等。字型等。標(biāo)記屬性功能size=size設(shè)置文字的大小face=fontstyle設(shè)置字體color=colorvalue設(shè)置文字的顏色表2-3 屬性值例例2-6：字符格式設(shè)置字符格式設(shè)置我是我是<font>標(biāo)記！標(biāo)記！我是我是<h1>標(biāo)記！標(biāo)記！我是我是<

12、U>標(biāo)記！標(biāo)記！我是我是<S>標(biāo)記！標(biāo)記！我是我是<B>標(biāo)記！標(biāo)記！我是我是<I>標(biāo)記！標(biāo)記！我是我是<BLINK>標(biāo)記！標(biāo)記！圖2-6 字符格式設(shè)置標(biāo)記的使用返回本節(jié)2.3 加入多媒體與超級鏈接加入多媒體與超級鏈接n2.3.1 加入圖像、視頻、動畫加入圖像、視頻、動畫n2.3.2 加入超級鏈接加入超級鏈接返回首頁2.3.1 加入圖像、視頻、動畫加入圖像、視頻、動畫n1插入圖像插入圖像當(dāng)使用當(dāng)使用插入圖像時，含有的屬性如表插入圖像時，含有的屬性如表2-5所示。所示。標(biāo)記

13、屬性功能src =URL通過URL給出圖像來源的位置，不可缺省width=size設(shè)置圖像寬度height =size設(shè)置圖像高度alt= txt設(shè)置在圖像未載入前圖片位置顯示的文字border= size設(shè)置圖像邊框，缺省為0align=alignstyle對齊方式。取值：top，middle，bottom，left，righthspace=size設(shè)置圖片左右邊沿空白vspace=size設(shè)置圖片上下邊沿空白2插入視頻插入視頻當(dāng)使用當(dāng)使用插入視頻或插入視頻或Gif動畫時，含有的屬性如動畫時，含有的屬性如表表2-6所示。所示。標(biāo)記屬性功能dynsrc=URL設(shè)置多媒體來源位置loop=siz

14、e設(shè)置視頻播放的次數(shù)loopdelay=time設(shè)置兩次播放的間隔時間start=value指定何時開始播放視頻文件返回本節(jié)2.3.2 加入超級鏈接加入超級鏈接格式：格式：功能：在當(dāng)前頁和其他頁間建立超鏈接。功能：在當(dāng)前頁和其他頁間建立超鏈接。主要屬性如表主要屬性如表2-7所示。所示。標(biāo)記屬性功能href=URL給定鏈接目標(biāo)的位置target=frametarget設(shè)置顯示鏈接目標(biāo)的框架accesskey=character設(shè)置快捷鍵tabindex=num設(shè)置Tab鍵的順序rel=linktype設(shè)置到鏈接的關(guān)系返回本節(jié)2.4 制作表格制作表格n2.4.1 建立表格建立表格n2.4.2 定制

15、表格定制表格返回首頁2.4.1 建立表格建立表格格式：格式： 功能：創(chuàng)建表格。功能：創(chuàng)建表格。在瀏覽器中顯示時，表格的整體外觀由該標(biāo)記在瀏覽器中顯示時，表格的整體外觀由該標(biāo)記的屬性決定，主要屬性如表的屬性決定，主要屬性如表2-8所示。所示。標(biāo)記屬性功能border=size設(shè)置表格邊框大小width= size設(shè)置表格的寬度height=size設(shè)置表格的高度cellspacing=size設(shè)置單元格間距cellpadding =size設(shè)置單元格的填充距background =URL設(shè)置表格背景圖片bgcolor =colorvalue設(shè)置表格背景色align=alignstyle設(shè)置對齊方

16、式cols =size設(shè)置表格的列數(shù)表2-8 屬性值返回本節(jié)2.4.2 定制表格定制表格使用使用只是定義空表格，還需要定義只是定義空表格，還需要定義行和單元格。行和單元格。格式：格式：功能：定義表格的一行。功能：定義表格的一行。對于每一行，可以定義行屬性，主要屬性如表對于每一行，可以定義行屬性，主要屬性如表2-9所示。所示。標(biāo)記屬性功能bgcolor=colorvalue設(shè)置行背景顏色align=alignstyle設(shè)置行對齊方式valign=valignstyle設(shè)置單元格垂直對齊方式表2-9 中行的屬性格式：格式：功能：定義表格中的單元格。功能：定義表格中的單元格。對于每一個單元格，主要屬

17、性如表對于每一個單元格，主要屬性如表2-10所示。所示。 標(biāo)記屬性功能bgcolor=colorvalue設(shè)置單元格背景顏色rowspan=num設(shè)置單元格所占的行數(shù)colspan =num設(shè)置單元格所占的列數(shù)align =alignstyle設(shè)置對齊方式valign =valignstyle設(shè)置單元格垂直對齊方式width =size設(shè)置單元格寬度height=size設(shè)置單元格高度例例2-7：多層表格嵌套實例！多層表格嵌套實例！ 跟我學(xué)網(wǎng)頁制作跟我學(xué)網(wǎng)頁制作 基礎(chǔ)知識簡介基礎(chǔ)知識簡介 第一講第一講 HTML簡介簡介 第二講第二講 HTML標(biāo)記標(biāo)記 第三講第三講 CSS基礎(chǔ)基礎(chǔ) HTML最新

18、課堂最新課堂 高級應(yīng)用技術(shù)高級應(yīng)用技術(shù) 多層表格嵌套示例多層表格嵌套示例圖2-7 表格的嵌套返回本節(jié)2.5 制作表單制作表單n2.5.1 表單的結(jié)構(gòu)表單的結(jié)構(gòu)n2.5.2 FORM中常用的標(biāo)記中常用的標(biāo)記返回首頁2.5.1 表單的結(jié)構(gòu)表單的結(jié)構(gòu)在在Web網(wǎng)頁上，包含各式各樣的輸入表單（網(wǎng)頁上，包含各式各樣的輸入表單（FORM）。）。格式：格式：功能：定義表單。功能：定義表單。在在中要包含很多控件來實現(xiàn)整個表單的交互功中要包含很多控件來實現(xiàn)整個表單的交互功能，另外能，另外標(biāo)記還有很多的屬性來協(xié)助完成此項標(biāo)記還有很多的屬性來協(xié)助完成此項功能。功能。返回本節(jié)2.5.2 FORM中常用的標(biāo)記中常用的標(biāo)

19、記n1輸入域n（1）單行輸入域。）單行輸入域。格式：格式：功能：單一標(biāo)記，是表單中提供給用戶進(jìn)行輸功能：單一標(biāo)記，是表單中提供給用戶進(jìn)行輸入的一種形式。入的一種形式。 標(biāo)記屬性功能type= inputtype設(shè)置輸入域的類型name=cdata設(shè)置表項的控制名，在表單處理時起作用（適用于除submit和reset外的其他類型）size=num設(shè)置表單域的長度maxlength =num設(shè)置允許輸入的最大字符數(shù)（適用于text和password類型）value=cdata設(shè)置輸入域的值（適用于radio和checkbox類型）checked設(shè)置是否被選中（適用于radio，button，che

20、ckbox類型）表2-11 標(biāo)記的屬性值n 1）text類型。類型。n 2）password類型。類型。n 3）radio類型。類型。n 4）checkbox類型。類型。n 5）submit類型。類型。 n 6）reset類型。類型。n 7）hidden類型。類型。（2）多行輸入域。）多行輸入域。格式為：格式為：功能：定義多行文本輸入域。主要屬性如表功能：定義多行文本輸入域。主要屬性如表2-12所示。所示。標(biāo)記屬性功能name=cdata設(shè)置FORM提交的輸入信息的名稱rows=num設(shè)置文本域的行數(shù)cols= num設(shè)置文本域的列數(shù)tabindex=num設(shè)置tab鍵的次序圖2-8 輸入域例

21、題2按鈕定義按鈕時，除了可以使用定義按鈕時，除了可以使用標(biāo)記外，標(biāo)記外，還可以使用還可以使用標(biāo)記，此標(biāo)記為非表標(biāo)記，此標(biāo)記為非表單控件的行內(nèi)標(biāo)記。單控件的行內(nèi)標(biāo)記。格式：格式：功能：定義按鈕。功能：定義按鈕。主要屬性如表主要屬性如表2-13所示。所示。 標(biāo)記屬性功能name=cdata設(shè)置已發(fā)送表單的關(guān)鍵字value=cdata設(shè)置已發(fā)送表單的值type= buttontype設(shè)置按鈕的類型tabindex=num設(shè)置tab鍵的次序表2-13 屬性值 3選擇域格式：格式： 選項一選項一 選項二選項二 功能：定義選擇欄。功能：定義選擇欄。 標(biāo)記屬性功能name=cdata設(shè)置選擇欄的名字size

22、=num設(shè)置在選擇欄中一次可見的選項個數(shù)multiple設(shè)置選項欄是否支持多選表2-14 屬性值標(biāo)記屬性功能value=cdata設(shè)置選項的默認(rèn)值selected表示此選項為預(yù)置項表2-15 屬性值例例2-9：選擇域選擇域! 請選擇喜歡的顏色請選擇喜歡的顏色: 紅色紅色 藍(lán)色藍(lán)色 綠色綠色 黑色黑色 白色白色 紫色紫色 返回本節(jié)2.6 框架結(jié)構(gòu)框架結(jié)構(gòu)n2.6.1 框架結(jié)構(gòu)的文件格式框架結(jié)構(gòu)的文件格式n2.6.2 框架結(jié)構(gòu)標(biāo)記的使用框架結(jié)構(gòu)標(biāo)記的使用n2.6.3 FRAME標(biāo)記標(biāo)記n2.6.4 TARGET屬性的使用屬性的使用返回首頁2.6.1 框架結(jié)構(gòu)的文件格式框架結(jié)構(gòu)的文件格式框架結(jié)構(gòu)有開

23、始標(biāo)記和結(jié)束標(biāo)記，框架所有內(nèi)容都應(yīng)該在框架結(jié)構(gòu)有開始標(biāo)記和結(jié)束標(biāo)記，框架所有內(nèi)容都應(yīng)該在和和之間。在之間。在 標(biāo)標(biāo)記內(nèi)使用記內(nèi)使用標(biāo)記來指定框架中每個小（子）窗口的內(nèi)容。標(biāo)記來指定框架中每個小（子）窗口的內(nèi)容。其具體格式如下：其具體格式如下：返回本節(jié)2.6.2 框架結(jié)構(gòu)標(biāo)記的使用框架結(jié)構(gòu)標(biāo)記的使用格式：格式：功能：定義一個框架容器。主要屬性見如功能：定義一個框架容器。主要屬性見如2-16所示。所示。 標(biāo)記屬性功能rows=size設(shè)置多重框架的高度cols =size設(shè)置多重框架的寬度onload=script設(shè)置框架被載入的事件onunload=script 設(shè)置框架被卸載的事件返回本節(jié)2.

24、6.3 FRAME標(biāo)記標(biāo)記格式：格式：功能：在網(wǎng)頁中定義框架。功能：在網(wǎng)頁中定義框架。F R A M E 是 一 個 單 一 標(biāo) 記 ， 使 用 時 放 在是 一 個 單 一 標(biāo) 記 ， 使 用 時 放 在FRAMESET的開始和結(jié)束標(biāo)記之間。它有的開始和結(jié)束標(biāo)記之間。它有6個個屬性來描述每個子窗口的風(fēng)格，屬性值的功能屬性來描述每個子窗口的風(fēng)格，屬性值的功能如表如表2-17所示。所示。標(biāo)記屬性功能src=URL設(shè)置要鏈接到的HTML文件name=framename表示子窗口的名字marginheight= size用來控制顯示內(nèi)容和窗口上下邊界的距離，默認(rèn)為1scrolling=scrollingstyle指定子窗口是否使用滾動條，有YES/NO/AUTO三個值，默認(rèn)為AUTO，即根據(jù)窗口內(nèi)容決定是否有滾動條noresize使用該屬性后，指定窗口不能調(diào)整窗口大小表2-17 主要屬性值返回本節(jié)2.6.4 TARGET屬性的使用屬性的使用1用于用于A標(biāo)記標(biāo)記在在A標(biāo)記中，除了指定被鏈接的文件之外，還可以用標(biāo)記中，除了指定被鏈接的文件之外，還可以用TARGET屬性指定被鏈接的文件顯示在哪個子窗口。語法如下