ASP網(wǎng)頁(yè)數(shù)據(jù)庫(kù)第2章ppt課件

1、1.1 課前導(dǎo)讀1.2 課堂教學(xué) 2.2.1 HTML基礎(chǔ) 2.2.2 HTML入門(mén)簡(jiǎn)單標(biāo)記的認(rèn)識(shí)與使用 2.2.3 段落和文字標(biāo)記 2.2.4 建立超級(jí)鏈接 2.2.5 加入圖片1.3 上機(jī)練習(xí)1.4 課后作業(yè)1.1 課前導(dǎo)讀 1. 什么是HTML 2. HTML的作用 3. HTML的編輯環(huán)境 4. 專(zhuān)用的網(wǎng)頁(yè)編輯器1. 什么是HTML HTML是Hyper Text Markup Language超文本標(biāo)記語(yǔ)言的縮寫(xiě)，它是構(gòu)成Web頁(yè)面Page的主要工具，是用來(lái)表示網(wǎng)上信息的符號(hào)標(biāo)記語(yǔ)言。 HTML是一種用于網(wǎng)頁(yè)制作的排版語(yǔ)言，是Web最基本的構(gòu)成元素。HTML并非一種編程語(yǔ)言。用HTM

2、L標(biāo)記文檔或給文檔添加標(biāo)記，使文檔可在WWW上發(fā)布。用HTML準(zhǔn)備的文檔包含引用圖形和格式標(biāo)記。用Web瀏覽器可以查看這些HTML文檔。 用HTML的語(yǔ)法規(guī)則建立的文檔可以運(yùn)行在不同操作系統(tǒng)的平臺(tái)上。因而，HTML文檔屬于純文本文件它能用任意的文本編寫(xiě)器書(shū)寫(xiě)）。2. HTML的作用 HTML語(yǔ)言作為一種網(wǎng)頁(yè)編輯語(yǔ)言，易學(xué)易懂，能制作出精美的網(wǎng)頁(yè)效果，其作用如下： 格式化文本。如設(shè)置標(biāo)題、字體、字號(hào)、顏色；設(shè)置文本的段落、對(duì)齊方式等。 建立超鏈接。通過(guò)超鏈接檢索在線(xiàn)的信息，只需用鼠標(biāo)單擊，就可以到達(dá)任何一處。 創(chuàng)建列表。把信息用一種易讀的方式表現(xiàn)出來(lái)。 插入圖像。使網(wǎng)頁(yè)圖文并茂，還可以設(shè)置圖像的

3、各種屬性，如大小、邊框、布局等。 建立表格。表格為瀏覽者提供了快速找到需要信息的顯示方式，還可以用表格來(lái)設(shè)定整個(gè)網(wǎng)頁(yè)的布局。 加入多媒體?？梢栽诰W(wǎng)頁(yè)中加入音頻、視頻、動(dòng)畫(huà)，還能設(shè)定播放的時(shí)間和次數(shù)。 交互式窗體、計(jì)數(shù)器等。為獲取遠(yuǎn)程服務(wù)而設(shè)計(jì)窗體，可用于檢索信息、定購(gòu)產(chǎn)品等。 HTML是最基本的網(wǎng)頁(yè)制作語(yǔ)言，其他的專(zhuān)用網(wǎng)頁(yè)編輯器如FrontPage，Dreamweaver等都是以HTML為基礎(chǔ)的。3. HTML的編輯環(huán)境 HTML的編輯環(huán)境很簡(jiǎn)單，任何一臺(tái)計(jì)算機(jī)都可以編輯網(wǎng)頁(yè)。但要看到用戶(hù)自己設(shè)計(jì)的網(wǎng)頁(yè)效果，就需要安裝一個(gè)瀏覽器，如Internet Explorer，Netscape Navi

4、gator等。因而，只要計(jì)算機(jī)能運(yùn)行某個(gè)瀏覽器，就具備了網(wǎng)頁(yè)制作的硬件環(huán)境。HTML要求的軟件環(huán)境更為簡(jiǎn)單，任何文本編輯器都可以用來(lái)制作網(wǎng)頁(yè)，包括記事本、寫(xiě)字板、Word、WPS等編輯程序。不過(guò)在保存時(shí)，一定要用純文本方式存盤(pán)。 HTML文件的設(shè)計(jì)制作與一般程序設(shè)計(jì)語(yǔ)言之間最大的不同在于，HTML具有跨平臺(tái)的處理能力。也就是說(shuō)，只要有適當(dāng)?shù)臑g覽器，不管使用何種操作系統(tǒng)，都能閱讀制作的HTML文件。4. 專(zhuān)用的網(wǎng)頁(yè)編輯器 HTML作為最基本的網(wǎng)頁(yè)編輯語(yǔ)言，能實(shí)現(xiàn)制作網(wǎng)頁(yè)的各種效果。但是，它畢竟是一種代碼，得記住一些標(biāo)記。因而，為了使設(shè)計(jì)網(wǎng)頁(yè)更加簡(jiǎn)單方便，有些公司和人員就設(shè)計(jì)了專(zhuān)用的網(wǎng)頁(yè)編輯器。專(zhuān)

5、用的網(wǎng)頁(yè)編輯器主要分為3大類(lèi)。 完全的所見(jiàn)即所得工具：所謂所見(jiàn)即所得，就是在編輯網(wǎng)頁(yè)時(shí)看到的效果，與使用瀏覽器時(shí)看到的效果基本一致。如果希望建立一個(gè)美觀(guān)而又不復(fù)雜的站點(diǎn)，這種工具非常適合，可以很輕松地制作想要的效果，但是必須按照這些軟件的要求來(lái)設(shè)計(jì)。典型的工具有Drumbeat、NetobjectFusion。 純粹的HTML代碼編輯工具：用純粹的HTML代碼編輯工具，用戶(hù)可以對(duì)頁(yè)面進(jìn)行完全的控制。使用這些工具時(shí)，直接編輯原始的HTML代碼，在對(duì)頁(yè)面進(jìn)行加工時(shí)，不會(huì)破壞原有的代碼。 當(dāng)然，這并不是說(shuō)用戶(hù)得從頭到尾編寫(xiě)每一種效果的HTML源代碼。因?yàn)檫@些工具通常帶有許多輔助工具，可以幫助用戶(hù)創(chuàng)建

6、表格、表單，以及其他復(fù)雜的結(jié)構(gòu)，并對(duì)創(chuàng)建的頁(yè)面進(jìn)行預(yù)覽。 這些工具最大的不足是必須會(huì)HTML語(yǔ)言。當(dāng)然，要想成為一個(gè)好的網(wǎng)頁(yè)制作人員，HTML還是應(yīng)當(dāng)掌握的。 這 類(lèi) 工 具 中 典 型 的 有 H o m e S i t e 、HotDogProfessional、HTMLedPro、WebEditPro。 混合型工具：介于上面兩種工具之間，混合型工具在所見(jiàn)即所得的工作環(huán)境下可以完成主要的工作，同時(shí)也能切換到一個(gè)文本編輯器，對(duì)HTML源代碼進(jìn)行直接地調(diào)整。 像所見(jiàn)即所得的工具一樣，混合型的創(chuàng)作工具通常也不能完全控制HTML頁(yè)的代碼。但Macromedia Dreamweaver在對(duì)已有的HT

7、ML頁(yè)進(jìn)行編輯時(shí)，會(huì)嚴(yán)格保持原有代碼的格式。典型的混合型工具還有Adobe PageMill、FrontPage、CutePage、QuickSite等。 FrontPage是較好的所見(jiàn)即所得的網(wǎng)頁(yè)編輯工具，也是常用的網(wǎng)頁(yè)編輯器。它對(duì)一個(gè)Web站點(diǎn)有很強(qiáng)的控制能力，可以統(tǒng)一Web站點(diǎn)內(nèi)頁(yè)面的外觀(guān)和風(fēng)格。它的Web管理功能也很強(qiáng)大，用戶(hù)可以通過(guò)圖形的方式觀(guān)察和調(diào)整站點(diǎn)的結(jié)構(gòu)。 Dreamweaver的最佳特性就是它的“往返式RoundtripHTML編輯能力，這種特性使圖形編輯工具和代碼編輯工具輸出同樣的HTML代碼。Dreamweaver是圖形化HTML編輯工具中惟一不干擾原有HTML代碼的工

8、具，所以用Dreamweaver編輯后，仍然可以轉(zhuǎn)回到原來(lái)的代碼中用編輯工具進(jìn)行修改。用其他工具修改后，Dreamweaver能自動(dòng)更新相應(yīng)的頁(yè)面。它能很方便地產(chǎn)生動(dòng)畫(huà)，嵌入JavaApplet、ActiveX控件，以及Netscape插件，并對(duì)用戶(hù)的動(dòng)作作出反應(yīng)。此外，Dreamweaver在Internet Explorer和Netscape Navigator兩種瀏覽器之間的兼容性問(wèn)題上處理得也很好。 2.2 課堂教學(xué)2.2.1 HTML基礎(chǔ)2.2.2 HTML入門(mén)簡(jiǎn)單標(biāo)記的認(rèn)識(shí)與使用2.2.3 段落和文字標(biāo)記2.2.4 建立超級(jí)鏈接2.2.5 加入圖片2.2.1 HTML基礎(chǔ) 1. H

9、TML文件的組成 2. 標(biāo)志 3. 標(biāo)記的屬性 4. HTML文件的基本結(jié)構(gòu) HTML文件是一種純文本文件，可以通過(guò)瀏覽器讀取HTML文件，并用瀏覽器內(nèi)含的語(yǔ)法分析器來(lái)解讀各種特殊標(biāo)記。1. HTML文件的組成 一個(gè)HTML文件可由下列3部分組成。 標(biāo)志：是HTML的基本元素，可以說(shuō)一個(gè)HTML文件大部分都是由字符信息加上一些標(biāo)記呈現(xiàn)出來(lái)的。也就是說(shuō)，只要在HTML文件中適當(dāng)?shù)奈恢蒙霞由纤铇?biāo)記，就可依照各標(biāo)記所代表的意義實(shí)現(xiàn)各種特殊的功效?；镜臉?biāo)記可分為兩種：?jiǎn)我粯?biāo)記只要一個(gè)標(biāo)記就能完成所要表示的功能和成對(duì)標(biāo)記需要兩個(gè)標(biāo)記組合才能完成所需功能） 文字與圖形資料：是指要提供給瀏覽信息的人閱讀

10、的內(nèi)容。WWW顯示的圖形一般都以獨(dú)立文件的形式存在，如果要顯示圖形圖形文件要用其他程序建立），就必須用特殊的標(biāo)記指向圖形文件。 統(tǒng)一資源定位器URLUniform Resource Locator）：是WWW上文件的參照格式，瀏覽者在瀏覽器的地址處輸入U(xiǎn)RL格式的內(nèi)容，就可獲取所指主機(jī)的主頁(yè)。2. 標(biāo)志 HTML文件由標(biāo)記和被標(biāo)記的內(nèi)容組成。標(biāo)志tag能產(chǎn)生所需的各種效果。就像一個(gè)排版程序，它將網(wǎng)頁(yè)的內(nèi)容排成理想的效果。這些標(biāo)記名稱(chēng)大都為相應(yīng)的英文單詞首字母或縮寫(xiě)，如P表示Paragraph段落）、IMG為Image圖像的縮寫(xiě)，很好記憶。各種標(biāo)記的效果差別很大，但總的表示形式卻大同小異，大多數(shù)

11、成對(duì)出現(xiàn)，格式為： 受標(biāo)記影響的內(nèi)容 說(shuō)明： 每個(gè)標(biāo)記都用“”（大于號(hào)圍住，如，以表示這是HTML代碼而非普通文本。注意，“”與標(biāo)記名之間不能留有空格或其它字符。 在標(biāo)記名前加上符號(hào)“/”便是其結(jié)束標(biāo)記，表示這種標(biāo)記內(nèi)容的結(jié)束，如。標(biāo)記也有不用結(jié)尾的，稱(chēng)之為單標(biāo)記。 標(biāo)記字母大小寫(xiě)皆可，沒(méi)有限制。 對(duì)同一段要標(biāo)記的內(nèi)容，可以用多個(gè)標(biāo)記來(lái)共同作用，產(chǎn)生一定的效果。此時(shí)，各個(gè)標(biāo)記間的順序也是任意的。3. 標(biāo)記的屬性 標(biāo)記只是規(guī)定這是什么信息，或是文本，或是圖片，但怎樣顯示或控制這些信息，就需要在標(biāo)記后面加上相關(guān)的屬性來(lái)表示，每個(gè)標(biāo)記有一系列的屬性。標(biāo)記要通過(guò)屬性來(lái)制作出各種效果。格式為： 受影響的

12、內(nèi)容 例如字體標(biāo)記，有屬性size和color等。屬性size表示文字的大小，屬性color表示文字的顏色。表示為： 屬性示例 需要注意的是： 并不是所有的標(biāo)記都有屬性，如換行標(biāo)記就沒(méi)有。 根據(jù)需要可以用該標(biāo)記的所有屬性，也可以只用需要的幾個(gè)屬性，在使用時(shí)，屬性之間沒(méi)有順序。多個(gè)屬性之間用空格隔開(kāi)。 屬性和標(biāo)記一樣，都不區(qū)分大小寫(xiě)。但為了閱讀方便，本書(shū)用大寫(xiě)字母表示標(biāo)記，小寫(xiě)字母表示屬性。4. HTML文件的基本結(jié)構(gòu) HTML文件是一種純文本格式的文件，HTML文件包括頭部head和主體body）。文件的基本結(jié)構(gòu)為： 網(wǎng)頁(yè)的標(biāo)題 網(wǎng)頁(yè)的內(nèi)容 說(shuō)明： HTML文件以開(kāi)頭，以結(jié)尾。 ：表示這是網(wǎng)頁(yè)

13、的頭部，用來(lái)說(shuō)明文件命名和與文件本身的相關(guān)信息?？梢园ňW(wǎng)頁(yè)的標(biāo)題部分：。 ：表示網(wǎng)頁(yè)的主體即正文部分。 HTML語(yǔ)言并不要求在書(shū)寫(xiě)時(shí)縮進(jìn)，但為了程序的易讀性，建議網(wǎng)頁(yè)設(shè)計(jì)制作者使標(biāo)記的首尾對(duì)齊，內(nèi)部的內(nèi)容向右縮進(jìn)幾格?！纠?-1】簡(jiǎn)單的HTML文件。 簡(jiǎn)單的HTML文件 最簡(jiǎn)單的網(wǎng)頁(yè) 圖2-1 例2-1的顯示效果 將文件以2_1.htm為文件名存盤(pán)，存放的位置是本機(jī)的工作目錄：ASP例參見(jiàn)1.2.3）。有以下兩種方式可以執(zhí)行HTML文件2_1.htm： 打開(kāi)Internet信息服務(wù)器窗口，找到虛擬目錄myasp，在右邊的文件列表中選擇文件2_1.htm，然后在“操作菜單中選擇“閱讀項(xiàng)； 打開(kāi)

14、瀏覽器，在地址欄中直接輸入虛擬目錄名及文件名： /myasp/2_1.htm 在瀏覽器上的顯示效果如圖2-1所示。2.2.2 HTML入門(mén) 1. HTML文檔標(biāo)記 2. HTML文件頭標(biāo)記 3. HTML文件標(biāo)題標(biāo)記 4. HTML文件主體標(biāo)記 5. 注釋標(biāo)記1. HTML文檔標(biāo)記 HTML文檔標(biāo)記的格式為： HTML文檔的內(nèi)容 HTML文檔的標(biāo)記。處于文檔的最前面，表示HTML文檔的開(kāi)始，即瀏覽器從開(kāi)始解釋?zhuān)钡接龅綖橹?。每個(gè)HTML文件均以開(kāi)場(chǎng)，以完畢。2. HTML文件頭標(biāo)記 HEAD是英文“頭的意思，習(xí)慣上將HTML文檔分為文件頭和文件主體兩個(gè)部分。文件主體是在Web

15、瀏覽器窗口的用戶(hù)區(qū)顯示的內(nèi)容，而文件頭則用來(lái)規(guī)定該文檔的標(biāo)題瀏覽器標(biāo)題欄中的內(nèi)容和文檔的一些屬性。HTML文件頭標(biāo)記的格式為： 頭部的內(nèi)容 說(shuō)明：HTML文件的頭部在文件標(biāo)記之后，在開(kāi)始標(biāo)記和結(jié)束標(biāo)記間定義。其內(nèi)容可以是標(biāo)題名，文本文件地址、創(chuàng)作信息等網(wǎng)頁(yè)信息說(shuō) 明 。 對(duì) 應(yīng) 于 相 應(yīng) 的 標(biāo) 記 ， 有 標(biāo) 題 標(biāo) 記等。 標(biāo)記在HTML文件中不是必須的，如果沒(méi)有，瀏覽器也會(huì)照常解讀文件。3. HTML文件標(biāo)題標(biāo)記 HTML文件標(biāo)題標(biāo)記的格式為： 標(biāo)題名 設(shè)定HTML文件標(biāo)題的標(biāo)記。在文件頭部定義的標(biāo)題內(nèi)容不在瀏覽器窗口中顯示，而是在瀏覽器的標(biāo)題欄中顯示。盡管頭部定義的信息很多，但能在瀏

16、覽器標(biāo)題欄中顯示的信息只有標(biāo)題。4. HTML文件主體標(biāo)記 HTML文件主體標(biāo)記的格式為： 文件主體 說(shuō)明： 主體位于頭部之后，以為開(kāi)始標(biāo)記，為結(jié)束標(biāo)記。它定義了網(wǎng)頁(yè)上顯示的主要內(nèi)容與顯示格式，是整個(gè)網(wǎng)頁(yè)的核心，網(wǎng)頁(yè)中要真正顯示的內(nèi)容都包含在本標(biāo)記中。 有很多屬性，這些屬性用于設(shè)定網(wǎng)頁(yè)的總體風(fēng)格，可以定義頁(yè)面的背景圖像、背景顏色、文字顏色、超文本鏈接的顏色。其中常用的屬性見(jiàn)表2-1。 表2-1 標(biāo)記的屬性 表2-1中，涉及顏色的屬性，取值可以是英文顏色名，也可以用“#”引導(dǎo)的一個(gè)十六進(jìn)制數(shù)代碼來(lái)表示，見(jiàn)表2-2。如果顏色值用十六進(jìn)制數(shù)代碼，則顏色數(shù)比表2-2列出的數(shù)目多得多。表2-2 顏色代碼

17、表【例2-2】使用網(wǎng)頁(yè)的背景色bgcolor屬性，可以設(shè)定整個(gè)網(wǎng)頁(yè)的背景顏色；使用網(wǎng)頁(yè)的文本色text屬性，可以設(shè)定整個(gè)網(wǎng)頁(yè)文字的顏色。 這是主體之外的文本 試試BODY標(biāo)記的屬性 設(shè)置網(wǎng)頁(yè)的背景色屬性為黃綠色, 設(shè)置網(wǎng)頁(yè)的文本色屬性為藍(lán)色 顯示效果如圖2-2所示。圖2-2 使用網(wǎng)頁(yè)的bgcolor屬性5. 注釋標(biāo)記 像很多程序語(yǔ)言一樣，HTML文件也提供注解功能。瀏覽器會(huì)忽略此標(biāo)記中的文字可以是很多行而不作顯示。通常使用“注釋為文中的不同部分加上說(shuō)明，以方便日后閱讀和修改。注釋標(biāo)記的格式為： 注釋內(nèi)容不局限于一行，長(zhǎng)度也不受限制。即結(jié)束標(biāo)識(shí)符不必與開(kāi)始標(biāo)識(shí)符在同一行上。2.2.3 段落和文字

18、標(biāo)記 1. 標(biāo)題文字標(biāo)記 2. 文本文字標(biāo)記 3. 設(shè)置字型 4. 強(qiáng)制換行、換段標(biāo)記 5. 分區(qū)顯示標(biāo)記 6. 水平線(xiàn) 7. 特殊符號(hào) 在多數(shù)網(wǎng)頁(yè)中，文檔是核心內(nèi)容，所以要經(jīng)常設(shè)置文檔的格式。設(shè)置文檔的標(biāo)記包括標(biāo)題和文字的字體、字號(hào)、字型、顏色、段落格式、文本的布局等。1. 標(biāo)題文字標(biāo)記 這里的標(biāo)題是指頁(yè)面中文本的標(biāo)題，而不是用定義的網(wǎng)頁(yè)標(biāo)題，標(biāo)題格式顯示在瀏覽器窗口內(nèi)，而不顯示在瀏覽器的標(biāo)題欄中。 在頁(yè)面中，標(biāo)題是一段文字內(nèi)容的核心，所以總是用加強(qiáng)的效果來(lái)表示。網(wǎng)頁(yè)中的信息可以分為主要點(diǎn)、次要點(diǎn)，可以通過(guò)設(shè)置不同大小的標(biāo)題，為文章增加條理。標(biāo)題文字標(biāo)記的格式為： 標(biāo)題文字 說(shuō)明： 屬性n用

19、來(lái)指定標(biāo)題文字的大小。n可以取16的整數(shù)值，取1時(shí)文字最大，6時(shí)文字最小。 屬性align用來(lái)設(shè)置標(biāo)題在頁(yè)面中的對(duì)齊方式，取值有：left左對(duì)齊）、center居中或right右對(duì)齊）。 標(biāo)記缺省顯示宋體字。 標(biāo)記會(huì)自動(dòng)插入一個(gè)空行。在一個(gè)標(biāo)題行中無(wú)法使用不同大小的字體?！纠?-3】使用標(biāo)題標(biāo)記設(shè)置標(biāo)題內(nèi)容的大小與對(duì)齊方式。 設(shè)置標(biāo)題 第1級(jí)標(biāo)題H1） 第2級(jí)標(biāo)題H2） 第3級(jí)標(biāo)題H3） 第4級(jí)標(biāo)題H4）（居左） 第5級(jí)標(biāo)題H5）（居中） 第6級(jí)標(biāo)題H6）（居右） 圖2-3 設(shè)置標(biāo)題文字大小 瀏覽器的顯示效果如圖2-3所示。2. 文本文字標(biāo)記 在網(wǎng)頁(yè)中為了增強(qiáng)頁(yè)面的層次，其中的文字可以用不同的

20、大小、字體、字型、顏色。文本文字標(biāo)記用來(lái)設(shè)定文字的字體、字號(hào)和顏色。其格式為： 被設(shè)置的文字 說(shuō)明：標(biāo)記的屬性包括：size、face、color。 size屬性用來(lái)設(shè)置文字的大小。數(shù)字的取值范圍從17，size取1時(shí)最小，取7時(shí)最大。 face屬性用來(lái)設(shè)置字體。如黑體、宋體、楷體_GB2312、隸書(shū)、Times New Roman等。 當(dāng)文字為漢字時(shí)，格式中的“字體名可以為：宋體、幼圓、隸書(shū)、楷體_GB2312、黑體、仿宋_GB2312等。當(dāng)文字為英文時(shí)，字體名可以為T(mén)imes New Roman等約50種字體。其實(shí)，這里的字體名字就是在Word的“字體工具欄中顯示的字體名。 color屬性

21、用來(lái)設(shè)置文字顏色，其取值見(jiàn)表2-2?！纠?-4】使用標(biāo)記的size屬性設(shè)置文字的大??；face屬性設(shè)置字體。color屬性設(shè)置文字顏色。 使用FONT標(biāo)記 設(shè)置文字的屬性 1號(hào)字青色 2號(hào)字綠色 3號(hào)幼圓桔黃色 4號(hào)隸書(shū)深紅色 5號(hào)黑體黃綠色 6號(hào)方正舒體水藍(lán)色 7號(hào)華文彩云淡紫色 在瀏覽器中的顯示效果如圖2-4所示。圖2-4 設(shè)置文本文字屬性 說(shuō)明： 和標(biāo)記都可以設(shè)置文字的大小，二者的區(qū)別見(jiàn)表2-3。表2-3 與標(biāo)記的區(qū)別 另外，當(dāng)中的size取7時(shí)，文字比要大。 標(biāo)記中的text屬性和標(biāo)記中的color屬性都可以設(shè)置文本的顏色，標(biāo)記直接作用其后的文字，可在文件中多處設(shè)定，使網(wǎng)頁(yè)中文字的顏色

22、絢麗多彩。 當(dāng)與標(biāo)記同時(shí)對(duì)文字顏色進(jìn)行定義時(shí)，標(biāo)記優(yōu)先。3. 設(shè)置字型 字型就是文字的風(fēng)格，如加粗、斜體、帶下劃線(xiàn)、上標(biāo)、下標(biāo)等。字型的控制標(biāo)記見(jiàn)表2-4。表2-4 設(shè)置各種字型的標(biāo)記【例2-5】使用字型標(biāo)記設(shè)置文字的風(fēng)格。 設(shè)置字型 黑體 斜體 帶下劃線(xiàn) 標(biāo)準(zhǔn)打印機(jī)字體 帶刪除線(xiàn) 下標(biāo) 上標(biāo) 大字體 小字體 在瀏覽器中的顯示效果如圖2-5所示。4. 強(qiáng)制換行、換段標(biāo)記 在HTML文檔中，無(wú)法用多個(gè)回車(chē)、空格、Tab鍵來(lái)調(diào)整文檔段落的格式。要用HTML的標(biāo)記來(lái)強(qiáng)制換行、分段。 強(qiáng)制換行標(biāo)記放在一行的末尾，可以使后面的文字、圖片、表格等顯示于下一行，而又不會(huì)在行與行之間留下空行，即強(qiáng)制文本換行。

23、由于瀏覽器會(huì)自動(dòng)忽略原始碼中空白和換行的部分，這使成為最常用的標(biāo)記之一。強(qiáng)制換行標(biāo)記的格式為：文字 說(shuō)明：瀏覽器解釋時(shí)，從該處換行。換行標(biāo)記單獨(dú)使用，可使頁(yè)面清晰、整齊。 段落標(biāo)記定義一個(gè)新段落的開(kāi)始。標(biāo)記不但能使后面的文字換到下一行，還可以使兩段之間多一空行。由于一段的結(jié)束意味著新一段的開(kāi)始，所以使用也可省略結(jié)束標(biāo)記。 強(qiáng)制換段標(biāo)記的格式為： 說(shuō)明：段落標(biāo)記的屬性align用來(lái)設(shè)置段落的對(duì)齊方式，其取值可以為left、center或right，分別表示居左、居中、居右。缺省時(shí)默認(rèn)為left。 一個(gè)強(qiáng)制換段標(biāo)記可以看作是兩個(gè)強(qiáng)制換行標(biāo)記?！纠?-6】換行與換段標(biāo)記的使用。 強(qiáng)制換行、換段標(biāo)記的

24、使用 學(xué)生之家 新    聞          學(xué)習(xí)窗口 健康信箱 聊 天 室 來(lái)信 說(shuō)明：HTML語(yǔ)言忽略多余的空格，最多只空一個(gè)空格。在需要空格的位置，可以用“ ”插入一個(gè)空格，或者輸入全角中文空格。在瀏覽器中顯示。5. 分區(qū)顯示標(biāo)記 分區(qū)顯示標(biāo)記可以使文本塊或一段文字在網(wǎng)頁(yè)上：左對(duì)齊、居中和右對(duì)齊。分區(qū)顯示標(biāo)記的格式為： 文本或圖像 說(shuō)明：屬性align的取值分別為：left、center和right?！纠?-7】分區(qū)顯示標(biāo)記的使用。 分區(qū)顯示標(biāo)記的應(yīng)用 分區(qū)

25、顯示標(biāo)記的應(yīng)用 居中center居中center 居左left居左left 居右right居右right 在瀏覽器中顯示6. 水平線(xiàn) 在頁(yè)面中插入一條水平標(biāo)尺線(xiàn)，可以使不同功能的文字分隔開(kāi)，看起來(lái)整齊、明了。當(dāng)瀏覽器執(zhí)行HTML文件中的標(biāo)記時(shí)，會(huì)在此處換行，并加入一條水平線(xiàn)段。線(xiàn)段的樣式由標(biāo)識(shí)的參數(shù)決定。水平線(xiàn)標(biāo)記的格式為： 說(shuō)明： 屬性align設(shè)定橫線(xiàn)放置的位置，可選擇left居左）、right居右或center居中）。 屬性size設(shè)定線(xiàn)條粗細(xì)，以像素為單位，默認(rèn)為2。 屬性width設(shè)定線(xiàn)段長(zhǎng)度，可以是絕對(duì)值以像素為單位或相對(duì)值相對(duì)于當(dāng)前窗口的百分比）。所謂絕對(duì)值，是指線(xiàn)段的長(zhǎng)度是固定

26、的，不隨窗口尺寸的改變而改變。所謂相對(duì)值，是指長(zhǎng)度相對(duì)于窗口的寬度而定，窗口的寬度改變時(shí)，線(xiàn)段的長(zhǎng)度也隨之增減，默認(rèn)值為100%，即始終填滿(mǎn)當(dāng)前窗口。 屬性color設(shè)定線(xiàn)條顏色，默認(rèn)為黑色?？梢圆捎妙伾拿Q(chēng)。顏色可以用相應(yīng)英文單詞或以“#”引導(dǎo)的一個(gè)十六進(jìn)制數(shù)代碼來(lái)表示，見(jiàn)表2-2。 屬性noshade設(shè)定線(xiàn)條為平面顯示沒(méi)有三維效果），若缺省則有陰影或立體效果?！纠?-8】水平線(xiàn)標(biāo)記的使用。 水平線(xiàn)段標(biāo)記的應(yīng)用 水平線(xiàn) 在瀏覽器中的顯示。瀏覽時(shí)，改變一下窗口的大小，可以看到線(xiàn)段的變化效果。 7. 特殊符號(hào) 瀏覽器解釋HTML文件時(shí)，是根據(jù)“”來(lái)識(shí)別標(biāo)記的，然后再確定這兩個(gè)符號(hào)中的內(nèi)容是否為

27、HTML文件標(biāo)記，若是則按其規(guī)則解讀。所以，要在網(wǎng)頁(yè)中顯示“”，就要作為特殊字符。其他常用的特殊字符見(jiàn)表2-5。表2-5 特殊替換字符2.2.4 建立超級(jí)鏈接 1. 熱點(diǎn)標(biāo)記 2. 創(chuàng)建指向其他頁(yè)面的鏈接 3. 創(chuàng)建指向本頁(yè)中的鏈接 超鏈接Hyperlink可以看作是一個(gè)“熱點(diǎn)”，它可以從當(dāng)前Web頁(yè)定義的位置跳轉(zhuǎn)到其他位置，包括當(dāng)前頁(yè)的某個(gè)位置、Internet或本地硬盤(pán)或局域網(wǎng)上的其他文件，甚至跳轉(zhuǎn)到聲音、圖片等多媒體文件。瀏覽Web頁(yè)是超鏈接最普遍的一種應(yīng)用，通過(guò)超鏈接還可以獲得不同形態(tài)的服務(wù)，如文件傳輸、資料查詢(xún)、電子函件、遠(yuǎn)程訪(fǎng)問(wèn)等。 當(dāng)Web頁(yè)包含超鏈接時(shí)，Web頁(yè)中的外觀(guān)形式為彩

28、色一般為藍(lán)色且?guī)聞澗€(xiàn)的文字或圖片。單擊這些文本或圖片，可跳轉(zhuǎn)到相應(yīng)位置。鼠標(biāo)指針指向超鏈接的顯示文本或圖片時(shí)，將變成手形。超文本鏈接使用熱點(diǎn)標(biāo)記來(lái)定義。1. 熱點(diǎn)標(biāo)記 熱點(diǎn)由標(biāo)記定義，它在網(wǎng)頁(yè)上建立超文本鏈接。通過(guò)單擊一個(gè)詞、句或圖片，可從此處轉(zhuǎn)到另一個(gè)鏈接資源目標(biāo)資源），這個(gè)目標(biāo)資源有唯一的地址URL）。具有以上特點(diǎn)的詞、句或圖片就稱(chēng)為熱點(diǎn)。標(biāo)記的格式為： 熱點(diǎn) 說(shuō)明： href為超文本引用，它的值為一個(gè)URL，是目標(biāo)資源的有效地址。在書(shū)寫(xiě)URL時(shí)要注意，如果資源放在自己的服務(wù)器上，可以寫(xiě)相對(duì)路徑。否則，應(yīng)寫(xiě)絕對(duì)路徑。href不能與name同時(shí)使用。 name指定當(dāng)前文檔內(nèi)的一個(gè)字符串作為

29、鏈接時(shí)可以使用有效的目標(biāo)資源的地址。 target設(shè)定鏈接被按后結(jié)果所要顯示的窗口?？蛇x值為：_blank，_parent，_self，_top，框架名稱(chēng)。其說(shuō)明見(jiàn)表2-6。表2-6 target屬性的取值2. 創(chuàng)建指向其他頁(yè)面的鏈接 創(chuàng)建指向其他頁(yè)面的鏈接，就是在當(dāng)前頁(yè)面與其他相關(guān)頁(yè)面間建立超鏈接。無(wú)論目標(biāo)文件與當(dāng)前文件的目錄關(guān)系如何，其格式為： 熱點(diǎn) 根據(jù)目標(biāo)文件與當(dāng)前文件的目錄關(guān)系，有4種寫(xiě)法： 鏈接到同一目錄內(nèi)的網(wǎng)頁(yè)文件，其格式為： 熱點(diǎn) 目標(biāo)文件名是鏈接所指向的文件。 鏈接到下一級(jí)目錄中的網(wǎng)頁(yè)文件，其格式為： 熱點(diǎn) 鏈接到上一級(jí)目錄中的網(wǎng)頁(yè)文件，其格式為： 熱點(diǎn) 其中“./”表示退到

30、上一級(jí)目錄中。 鏈接到同級(jí)目錄中的網(wǎng)頁(yè)文件，其格式為： 熱點(diǎn) 表示先退到上一級(jí)目錄中，然后再進(jìn)入到目標(biāo)文件所在的目錄。3. 創(chuàng)建指向本頁(yè)中的鏈接 要在當(dāng)前頁(yè)面內(nèi)實(shí)現(xiàn)超鏈接，需要定義兩個(gè)標(biāo)記：一個(gè)為超鏈接標(biāo)記，另一個(gè)為書(shū)簽標(biāo)記。超鏈接標(biāo)記的格式為： 熱點(diǎn) 單擊熱點(diǎn)文本，將跳轉(zhuǎn)到“記號(hào)名開(kāi)始的文本。 書(shū)簽就是用標(biāo)記對(duì)該文本作一個(gè)記號(hào)。如果有多個(gè)鏈接，不同目標(biāo)文本要設(shè)置不同的書(shū)簽名，書(shū)簽名在的name屬性中定義。格式為： 目標(biāo)文本附近的字符串 【例2-9】鏈接本頁(yè)中的文本。 學(xué)生之家 歡迎來(lái)到“學(xué)生之家” 新聞     學(xué)習(xí)園地  &nbs

31、p;  健康信箱     新聞 . 返回 學(xué)習(xí)園地 . 返回 健康信箱 . 返回 在瀏覽器中的顯示。單擊超鏈接，將跳轉(zhuǎn)到頁(yè)面的相應(yīng)位置，2.2.5 加入圖片 1. 圖片文件的格式 2. 設(shè)置網(wǎng)頁(yè)的背景 3. 圖片標(biāo)記 4. 用圖片作為超鏈接1. 圖片文件的格式 加入網(wǎng)頁(yè)中的圖片，通常使用GIF格式和JPEG格式。 GIF格式文件最多只能顯示256種顏色，這使得它很少用于存儲(chǔ)照片。但是，存放圖標(biāo)、剪貼畫(huà)和藝術(shù)線(xiàn)條等對(duì)顏色要求不高的圖片，已經(jīng)足夠了。GIF格式圖片的優(yōu)點(diǎn)在于制作透明、隔行和動(dòng)畫(huà)效果。 JPEG格式文件可以擁有計(jì)算機(jī)所能提供的最多種顏

32、色，適合存放高質(zhì)量的彩色圖片、照片。另外，JPEG格式文件采用壓縮方式存儲(chǔ)文件信息，相同的圖片，所占空間比GIF文件小，所以下載時(shí)間較短，瀏覽速度較快。但是，JPEG格式的文件沒(méi)有GIF格式文件的三種特殊效果。2. 設(shè)置網(wǎng)頁(yè)的背景 網(wǎng)頁(yè)的背景可以是某種顏色，也可以是圖片。無(wú)論是圖片，還是背景色，都通過(guò)標(biāo)記的相應(yīng)屬性來(lái)設(shè)置。 (1) 設(shè)置背景色 利用色彩作背景，比較容易在顏色上協(xié)調(diào)，而且下載速度比采用圖片作為背景快。網(wǎng)頁(yè)缺省為白色，的bgcolor屬性用于設(shè)置網(wǎng)頁(yè)的背景色。格式為： 其中，“顏色值可以為顏色的英文名或相應(yīng)十六進(jìn)制值。 (2) 用圖片作為背景 使用標(biāo)記的background屬性，可

33、為網(wǎng)頁(yè)鋪上背景圖片。格式為： 其中“圖片文件名包括文件存放的路徑，可以是相對(duì)路徑，也可以是絕對(duì)路徑。圖片文件可為GIF格式或JPEG格式的文件。 在瀏覽器中，作為背景的圖片將按原來(lái)的大小復(fù)制，重復(fù)鋪滿(mǎn)整個(gè)網(wǎng)頁(yè)。作為背景的圖片文件，要做的很小，以便加快下載速度?！纠?-10】圖片背景。 圖片背景 用圖片作為背景 在瀏覽器中，作為背景的圖片將按原來(lái)的大小復(fù)制，重復(fù)鋪滿(mǎn)整 個(gè)網(wǎng)頁(yè)。因而，作為背景的圖片文件，要做的很小，以便加快下 載速度。 在瀏覽器中的顯示效果。 3. 圖片標(biāo)記 使用圖片標(biāo)記，可以把一幅圖片加入到網(wǎng)頁(yè)中。用圖片標(biāo)記還可以設(shè)置圖片的替代文本、尺寸、布局等屬性。格式為： 說(shuō)明：標(biāo)記中的屬

34、性說(shuō)明見(jiàn)表2-7。表2-7 圖片標(biāo)記的屬性說(shuō)明 (1) 圖片的尺寸 使用標(biāo)記的width和height屬性可以設(shè)置圖片的大小，width和height屬性的值可取像素?cái)?shù)，也可取百分?jǐn)?shù)瀏覽器窗口）。如果不設(shè)定圖片的尺寸，圖片將按照其本身的大小顯示。 【例2-11】設(shè)置圖片的尺寸。 設(shè)定圖片的尺寸 設(shè)定圖片的尺寸 原始大小 寬85，高120 寬40%，高40% 在瀏覽器中的顯示效果。 (2) 圖片的布局 所謂布局，就是圖片放在網(wǎng)頁(yè)中的位置，以及圖片與文本的排放關(guān)系。實(shí)現(xiàn)這種功能，可以使用標(biāo)記的align屬性。align屬性的取值見(jiàn)表2-8。表2-8 圖片標(biāo)記的屬性說(shuō)明 除此之外，使用標(biāo)記的align屬性或標(biāo)記也可以實(shí)現(xiàn)相應(yīng)的功能。 當(dāng)設(shè)置文本環(huán)繞方式left或right后，將一直有效，如果想取消環(huán)繞方式，可使用標(biāo)記的clear屬性，其后的文本將不再環(huán)繞圖片。格式為：【例2-12】文本環(huán)繞圖片及其解除。 設(shè)定圖片的對(duì)齊方式 設(shè)定圖片的對(duì)齊