浙江省計(jì)算機(jī)高考復(fù)習(xí)HTML語言.ppt

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

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

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

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

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

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

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

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

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

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

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

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

13、括網(wǎng)頁的標(biāo)題部分：。 ：表示網(wǎng)頁的主體即正文部分。 HTML語言并不要求在書寫時(shí)縮進(jìn)，但為了程序的易讀性，建議網(wǎng)頁設(shè)計(jì)制作者使標(biāo)記的首尾對(duì)齊，內(nèi)部的內(nèi)容向右縮進(jìn)幾格。,【例2-1】簡單的HTML文件。 簡單的HTML文件 最簡單的網(wǎng)頁 ,圖2-1 例2-1的顯示效果,將文件以2_1.htm為文件名存盤，存放的位置是本機(jī)的工作目錄：ASP例（參見1.2.3）。有以下兩種方式可以執(zhí)行HTML文件2_1.htm：,2.2.2 HTML入門 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)記

14、的格式為： HTML文檔的內(nèi)容 HTML文檔的標(biāo)記。處于文檔的最前面，表示HTML文檔的開始，即瀏覽器從開始解釋，直到遇到為止。每個(gè)HTML文件均以開始，以結(jié)束。,2. HTML文件頭標(biāo)記 HEAD是英文“頭”的意思，習(xí)慣上將HTML文檔分為文件頭和文件主體兩個(gè)部分。文件主體是在Web瀏覽器窗口的用戶區(qū)顯示的內(nèi)容，而文件頭則用來規(guī)定該文檔的標(biāo)題（瀏覽器標(biāo)題欄中的內(nèi)容）和文檔的一些屬性。HTML文件頭標(biāo)記的格式為： 頭部的內(nèi)容 ,說明：HTML文件的頭部在文件標(biāo)記之后，在開始標(biāo)記和結(jié)束標(biāo)記間定義。其內(nèi)容可以是標(biāo)題名，文本文件地址、創(chuàng)作信息等網(wǎng)頁信息說明。對(duì)應(yīng)于相應(yīng)的標(biāo)記，有標(biāo)題標(biāo)記等。 標(biāo)記在H

15、TML文件中不是必須的，如果沒有，瀏覽器也會(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)題欄中顯示。盡管頭部定義的信息很多，但能在瀏覽器標(biāo)題欄中顯示的信息只有標(biāo)題。,4. HTML文件主體標(biāo)記 HTML文件主體標(biāo)記的格式為： 文件主體 說明： 主體位于頭部之后，以為開始標(biāo)記，為結(jié)束標(biāo)記。它定義了網(wǎng)頁上顯示的主要內(nèi)容與顯示格式，是整個(gè)網(wǎng)頁的核心，網(wǎng)頁中要真正顯示的內(nèi)容都包含在本標(biāo)記中。 有很多屬性，這些屬性用于設(shè)定網(wǎng)頁的總體風(fēng)格，可以定義頁面的背景圖像、背景顏色、文字

16、顏色、超文本鏈接的顏色。其中常用的屬性見表2-1。,表2-1 標(biāo)記的屬性,表2-1中，涉及顏色的屬性，取值可以是英文顏色名，也可以用“#”引導(dǎo)的一個(gè)十六進(jìn)制數(shù)代碼來表示，見表2-2。如果顏色值用十六進(jìn)制數(shù)代碼，則顏色數(shù)比表2-2列出的數(shù)目多得多。,表2-2 顏色代碼表,【例2-2】使用網(wǎng)頁的背景色（bgcolor）屬性，可以設(shè)定整個(gè)網(wǎng)頁的背景顏色；使用網(wǎng)頁的文本色（text）屬性，可以設(shè)定整個(gè)網(wǎng)頁文字的顏色。, 這是主體之外的文本 試試BODY標(biāo)記的屬性 設(shè)置網(wǎng)頁的背景色屬性為黃綠色, 設(shè)置網(wǎng)頁的文本色屬性為藍(lán)色 顯示效果如圖2-2所示。,圖2-2 使用網(wǎng)頁的bgcolor屬性,5. 注釋標(biāo)記

17、 像很多程序語言一樣，HTML文件也提供注解功能。瀏覽器會(huì)忽略此標(biāo)記中的文字（可以是很多行）而不作顯示。通常使用“注釋”為文中的不同部分加上說明，以方便日后閱讀和修改。注釋標(biāo)記的格式為： 注釋內(nèi)容不局限于一行，長度也不受限制。即結(jié)束標(biāo)識(shí)符不必與開始標(biāo)識(shí)符在同一行上。,2.2.3 段落和文字標(biāo)記 1. 標(biāo)題文字標(biāo)記 2. 文本文字標(biāo)記 3. 設(shè)置字型 4. 強(qiáng)制換行、換段標(biāo)記 5. 分區(qū)顯示標(biāo)記 6. 水平線 7. 特殊符號(hào),在多數(shù)網(wǎng)頁中，文檔是核心內(nèi)容，所以要經(jīng)常設(shè)置文檔的格式。設(shè)置文檔的標(biāo)記包括標(biāo)題和文字的字體、字號(hào)、字型、顏色、段落格式、文本的布局等。 1. 標(biāo)題文字標(biāo)記 這里的標(biāo)題是指頁

18、面中文本的標(biāo)題，而不是用定義的網(wǎng)頁標(biāo)題，標(biāo)題格式顯示在瀏覽器窗口內(nèi)，而不顯示在瀏覽器的標(biāo)題欄中。 在頁面中，標(biāo)題是一段文字內(nèi)容的核心，所以總是用加強(qiáng)的效果來表示。網(wǎng)頁中的信息可以分為主要點(diǎn)、次要點(diǎn)，可以通過設(shè)置不同大小的標(biāo)題，為文章增加條理。標(biāo)題文字標(biāo)記的格式為： 標(biāo)題文字 ,說明： 屬性n用來指定標(biāo)題文字的大小。n可以取16的整數(shù)值，取1時(shí)文字最大，6時(shí)文字最小。 屬性align用來設(shè)置標(biāo)題在頁面中的對(duì)齊方式，取值有：left（左對(duì)齊）、center（居中）或right（右對(duì)齊）。 標(biāo)記缺省顯示宋體字。 標(biāo)記會(huì)自動(dòng)插入一個(gè)空行。在一個(gè)標(biāo)題行中無法使用不同大小的字體。,【例2-3】使用標(biāo)題標(biāo)記

19、設(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)頁中為了增強(qiáng)頁面的層次，其中的文字可以用不同的大小、字體、字型、顏色。文本文字標(biāo)記用來設(shè)定文字的字體、字號(hào)和顏色。其格式為： 被設(shè)置的文字 說明：標(biāo)記的屬性包括：size、face、color。 size屬性用來設(shè)置文字的大小。數(shù)字的取值范圍從17，size取1時(shí)最小，取7時(shí)最大。, face屬性用來設(shè)置字體。如黑體、宋體

20、、楷體_GB2312、隸書、Times New Roman等。 當(dāng)文字為漢字時(shí)，格式中的“字體名”可以為：宋體、幼圓、隸書、楷體_GB2312、黑體、仿宋_GB2312等。當(dāng)文字為英文時(shí)，字體名可以為Times New Roman等約50種字體。其實(shí)，這里的字體名字就是在Word的“字體”工具欄中顯示的字體名。 color屬性用來設(shè)置文字顏色，其取值見表2-2。,【例2-4】使用標(biāo)記的size屬性設(shè)置文字的大?。籪ace屬性設(shè)置字體。color屬性設(shè)置文字顏色。, 使用FONT標(biāo)記 設(shè)置文字的屬性 1號(hào)字青色 2號(hào)字綠色 3號(hào)幼圓桔黃色 4號(hào)隸書深紅色 5號(hào)黑體黃綠色 6號(hào)方正舒體水藍(lán)色 7號(hào)

21、華文彩云淡紫色 ,在瀏覽器中的顯示效果如圖2-4所示。,圖2-4 設(shè)置文本文字屬性,說明： 和標(biāo)記都可以設(shè)置文字的大小，二者的區(qū)別見表2-3。,表2-3 與標(biāo)記的區(qū)別,另外，當(dāng)中的size取7時(shí)，文字比要大。 標(biāo)記中的text屬性和標(biāo)記中的color屬性都可以設(shè)置文本的顏色，標(biāo)記直接作用其后的文字，可在文件中多處設(shè)定，使網(wǎng)頁中文字的顏色絢麗多彩。 當(dāng)與標(biāo)記同時(shí)對(duì)文字顏色進(jìn)行定義時(shí)，標(biāo)記優(yōu)先。,3. 設(shè)置字型 字型就是文字的風(fēng)格，如加粗、斜體、帶下劃線、上標(biāo)、下標(biāo)等。字型的控制標(biāo)記見表2-4。,表2-4 設(shè)置各種字型的標(biāo)記,【例2-5】使用字型標(biāo)記設(shè)置文字的風(fēng)格。, 設(shè)置字型 黑體 斜體 帶下劃

22、線 標(biāo)準(zhǔn)打印機(jī)字體 帶刪除線 下標(biāo) 上標(biāo) 大字體 小字體 ,在瀏覽器中的顯示效果如圖2-5所示。,4. 強(qiáng)制換行、換段標(biāo)記 在HTML文檔中，無法用多個(gè)回車、空格、Tab鍵來調(diào)整文檔段落的格式。要用HTML的標(biāo)記來強(qiáng)制換行、分段。 強(qiáng)制換行標(biāo)記放在一行的末尾，可以使后面的文字、圖片、表格等顯示于下一行，而又不會(huì)在行與行之間留下空行，即強(qiáng)制文本換行。由于瀏覽器會(huì)自動(dòng)忽略原始碼中空白和換行的部分，這使成為最常用的標(biāo)記之一。強(qiáng)制換行標(biāo)記的格式為： 文字 說明：瀏覽器解釋時(shí)，從該處換行。換行標(biāo)記單獨(dú)使用，可使頁面清晰、整齊。, 段落標(biāo)記定義一個(gè)新段落的開始。標(biāo)記不但能使后面的文字換到下一行，還可以使兩

23、段之間多一空行。由于一段的結(jié)束意味著新一段的開始，所以使用也可省略結(jié)束標(biāo)記。 強(qiáng)制換段標(biāo)記的格式為： 說明：段落標(biāo)記的屬性align用來設(shè)置段落的對(duì)齊方式，其取值可以為left、center或right，分別表示居左、居中、居右。缺省時(shí)默認(rèn)為left。 一個(gè)強(qiáng)制換段標(biāo)記可以看作是兩個(gè)強(qiáng)制換行標(biāo)記。,【例2-6】換行與換段標(biāo)記的使用。, 強(qiáng)制換行、換段標(biāo)記的使用 學(xué)生之家 新 學(xué)習(xí)窗口 健康信箱 聊 天 室 來信 ,說明：HTML語言忽略多余的空格，最多只空一個(gè)空格。在需要空格的位置，可以用“”插入一個(gè)空格，或者輸入全角中文空格。在瀏覽器中顯示。,5. 分區(qū)顯示標(biāo)記 分區(qū)顯示標(biāo)記可以使文本塊或一

24、段文字在網(wǎng)頁上：左對(duì)齊、居中和右對(duì)齊。分區(qū)顯示標(biāo)記的格式為： 文本或圖像 說明：屬性align的取值分別為：left、center和right。,【例2-7】分區(qū)顯示標(biāo)記的使用。, 分區(qū)顯示標(biāo)記的應(yīng)用 分區(qū)顯示標(biāo)記的應(yīng)用 居中center居中center 居左left居左left 居右right居右right ,在瀏覽器中顯示,6. 水平線 在頁面中插入一條水平標(biāo)尺線，可以使不同功能的文字分隔開，看起來整齊、明了。當(dāng)瀏覽器執(zhí)行HTML文件中的標(biāo)記時(shí)，會(huì)在此處換行，并加入一條水平線段。線段的樣式由標(biāo)識(shí)的參數(shù)決定。水平線標(biāo)記的格式為： 說明： 屬性align設(shè)定橫線放置的位置，可選擇left（居左

25、）、right（居右）或center（居中）。 屬性size設(shè)定線條粗細(xì)，以像素為單位，默認(rèn)為2。, 屬性width設(shè)定線段長度，可以是絕對(duì)值（以像素為單位）或相對(duì)值（相對(duì)于當(dāng)前窗口的百分比）。所謂絕對(duì)值，是指線段的長度是固定的，不隨窗口尺寸的改變而改變。所謂相對(duì)值，是指長度相對(duì)于窗口的寬度而定，窗口的寬度改變時(shí)，線段的長度也隨之增減，默認(rèn)值為100%，即始終填滿當(dāng)前窗口。 屬性color設(shè)定線條顏色，默認(rèn)為黑色。可以采用顏色的名稱。顏色可以用相應(yīng)英文單詞或以“#”引導(dǎo)的一個(gè)十六進(jìn)制數(shù)代碼來表示，見表2-2。 屬性noshade設(shè)定線條為平面顯示（沒有三維效果），若缺省則有陰影或立體效果。,【

26、例2-8】水平線標(biāo)記的使用。, 水平線段標(biāo)記的應(yīng)用 水平線 ,在瀏覽器中的顯示。瀏覽時(shí)，改變一下窗口的大小，可以看到線段的變化效果。,7. 特殊符號(hào) 瀏覽器解釋HTML文件時(shí)，是根據(jù)“”來識(shí)別標(biāo)記的，然后再確定這兩個(gè)符號(hào)中的內(nèi)容是否為HTML文件標(biāo)記，若是則按其規(guī)則解讀。所以，要在網(wǎng)頁中顯示“”，就要作為特殊字符。其他常用的特殊字符見表2-5。,表2-5 特殊替換字符,2.2.4 建立超級(jí)鏈接 1. 熱點(diǎn)標(biāo)記 2. 創(chuàng)建指向其他頁面的鏈接 3. 創(chuàng)建指向本頁中的鏈接,超鏈接（Hyperlink）可以看作是一個(gè)“熱點(diǎn)”，它可以從當(dāng)前Web頁定義的位置跳轉(zhuǎn)到其他位置，包括當(dāng)前頁的某個(gè)位置、Inte

27、rnet或本地硬盤或局域網(wǎng)上的其他文件，甚至跳轉(zhuǎn)到聲音、圖片等多媒體文件。瀏覽Web頁是超鏈接最普遍的一種應(yīng)用，通過超鏈接還可以獲得不同形態(tài)的服務(wù)，如文件傳輸、資料查詢、電子函件、遠(yuǎn)程訪問等。 當(dāng)Web頁包含超鏈接時(shí)，Web頁中的外觀形式為彩色（一般為藍(lán)色）且?guī)聞澗€的文字或圖片。單擊這些文本或圖片，可跳轉(zhuǎn)到相應(yīng)位置。鼠標(biāo)指針指向超鏈接的顯示文本或圖片時(shí)，將變成手形。超文本鏈接使用熱點(diǎn)標(biāo)記來定義。,1. 熱點(diǎn)標(biāo)記 熱點(diǎn)由標(biāo)記定義，它在網(wǎng)頁上建立超文本鏈接。通過單擊一個(gè)詞、句或圖片，可從此處轉(zhuǎn)到另一個(gè)鏈接資源（目標(biāo)資源），這個(gè)目標(biāo)資源有唯一的地址（URL）。具有以上特點(diǎn)的詞、句或圖片就稱為熱點(diǎn)。

28、標(biāo)記的格式為： 熱點(diǎn) 說明： href為超文本引用，它的值為一個(gè)URL，是目標(biāo)資源的有效地址。在書寫URL時(shí)要注意，如果資源放在自己的服務(wù)器上，可以寫相對(duì)路徑。否則，應(yīng)寫絕對(duì)路徑。href不能與name同時(shí)使用。, name指定當(dāng)前文檔內(nèi)的一個(gè)字符串作為鏈接時(shí)可以使用有效的目標(biāo)資源的地址。 target設(shè)定鏈接被按后結(jié)果所要顯示的窗口?？蛇x值為：_blank，_parent，_self，_top，框架名稱。其說明見表2-6。,表2-6 target屬性的取值,2. 創(chuàng)建指向其他頁面的鏈接 創(chuàng)建指向其他頁面的鏈接，就是在當(dāng)前頁面與其他相關(guān)頁面間建立超鏈接。無論目標(biāo)文件與當(dāng)前文件的目錄關(guān)系如何，其

29、格式為： 熱點(diǎn) 根據(jù)目標(biāo)文件與當(dāng)前文件的目錄關(guān)系，有4種寫法： 鏈接到同一目錄內(nèi)的網(wǎng)頁文件，其格式為： 熱點(diǎn) 目標(biāo)文件名是鏈接所指向的文件。, 鏈接到下一級(jí)目錄中的網(wǎng)頁文件，其格式為： 熱點(diǎn) 鏈接到上一級(jí)目錄中的網(wǎng)頁文件，其格式為： 熱點(diǎn) 其中“./”表示退到上一級(jí)目錄中。 鏈接到同級(jí)目錄中的網(wǎng)頁文件，其格式為： 熱點(diǎn) 表示先退到上一級(jí)目錄中，然后再進(jìn)入到目標(biāo)文件所在的目錄。,3. 創(chuàng)建指向本頁中的鏈接 要在當(dāng)前頁面內(nèi)實(shí)現(xiàn)超鏈接，需要定義兩個(gè)標(biāo)記：一個(gè)為超鏈接標(biāo)記，另一個(gè)為書簽標(biāo)記。超鏈接標(biāo)記的格式為： 熱點(diǎn) 單擊熱點(diǎn)文本，將跳轉(zhuǎn)到“記號(hào)名”開始的文本。 書簽就是用標(biāo)記對(duì)該文本作一個(gè)記號(hào)。如果

30、有多個(gè)鏈接，不同目標(biāo)文本要設(shè)置不同的書簽名，書簽名在的name屬性中定義。格式為： 目標(biāo)文本附近的字符串 ,【例2-9】鏈接本頁中的文本。, 學(xué)生之家 歡迎來到“學(xué)生之家” 新聞 新聞 . 返回 學(xué)習(xí)園地 . 返回 健康信箱 . 返回 ,在瀏覽器中的顯示。單擊超鏈接，將跳轉(zhuǎn)到頁面的相應(yīng)位置，,2.2.5 加入圖片 1. 圖片文件的格式 2. 設(shè)置網(wǎng)頁的背景 3. 圖片標(biāo)記 4. 用圖片作為超鏈接,1. 圖片文件的格式 加入網(wǎng)頁中的圖片，通常使用GIF格式和JPEG格式。 GIF格式文件最多只能顯示256種顏色，這使得它很少用于存儲(chǔ)照片。但是，存放圖標(biāo)、剪貼畫和藝術(shù)線條等對(duì)顏色要求不高的圖片，已

31、經(jīng)足夠了。GIF格式圖片的優(yōu)點(diǎn)在于制作透明、隔行和動(dòng)畫效果。 JPEG格式文件可以擁有計(jì)算機(jī)所能提供的最多種顏色，適合存放高質(zhì)量的彩色圖片、照片。另外，JPEG格式文件采用壓縮方式存儲(chǔ)文件信息，相同的圖片，所占空間比GIF文件小，所以下載時(shí)間較短，瀏覽速度較快。但是，JPEG格式的文件沒有GIF格式文件的三種特殊效果。,2. 設(shè)置網(wǎng)頁的背景 網(wǎng)頁的背景可以是某種顏色，也可以是圖片。無論是圖片，還是背景色，都通過標(biāo)記的相應(yīng)屬性來設(shè)置。 (1) 設(shè)置背景色 利用色彩作背景，比較容易在顏色上協(xié)調(diào)，而且下載速度比采用圖片作為背景快。網(wǎng)頁缺省為白色，的bgcolor屬性用于設(shè)置網(wǎng)頁的背景色。格式為： 其中，“顏色值”可以為顏色的英文名或相應(yīng)十六進(jìn)制值。,(2) 用圖片作為背景 使用標(biāo)記的background屬性，可為網(wǎng)頁鋪上背景圖片。格式為： 其中“圖片文件名”包括文件存放的路徑，可以是相對(duì)路徑，也可以是絕對(duì)路徑。圖片文件可為GIF格式或JPEG格式的文件。 在瀏覽器中，作為背景的圖片將按原來的大小復(fù)制，重復(fù)鋪滿整個(gè)網(wǎng)頁。作為背景的圖片文件，要做的很小，以便加快下載速度。,【例2-10】圖片背景。