1、1.1 課前導讀1.2 課堂教學 2.2.1 HTML基礎 2.2.2 HTML入門簡單標記的認識與使用 2.2.3 段落和文字標記 2.2.4 建立超級鏈接 2.2.5 加入圖片1.3 上機練習1.4 課后作業1.1 課前導讀 1. 什么是HTML 2. HTML的作用 3. HTML的編輯環境 4. 專用的網頁編輯器1. 什么是HTML HTML是Hyper Text Markup Language超文本標記語言的縮寫，它是構成Web頁面Page的主要工具，是用來表示網上信息的符號標記語言。 HTML是一種用于網頁制作的排版語言，是Web最基本的構成元素。HTML并非一種編程語言。用HTM

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

3、各種屬性，如大小、邊框、布局等。 建立表格。表格為瀏覽者提供了快速找到需要信息的顯示方式，還可以用表格來設定整個網頁的布局。 加入多媒體。可以在網頁中加入音頻、視頻、動畫，還能設定播放的時間和次數。 交互式窗體、計數器等。為獲取遠程服務而設計窗體，可用于檢索信息、定購產品等。 HTML是最基本的網頁制作語言，其他的專用網頁編輯器如FrontPage，Dreamweaver等都是以HTML為基礎的。3. HTML的編輯環境 HTML的編輯環境很簡單，任何一臺計算機都可以編輯網頁。但要看到用戶自己設計的網頁效果，就需要安裝一個瀏覽器，如Internet Explorer，Netscape Navi

4、gator等。因而，只要計算機能運行某個瀏覽器，就具備了網頁制作的硬件環境。HTML要求的軟件環境更為簡單，任何文本編輯器都可以用來制作網頁，包括記事本、寫字板、Word、WPS等編輯程序。不過在保存時，一定要用純文本方式存盤。 HTML文件的設計制作與一般程序設計語言之間最大的不同在于，HTML具有跨平臺的處理能力。也就是說，只要有適當的瀏覽器，不管使用何種操作系統，都能閱讀制作的HTML文件。4. 專用的網頁編輯器 HTML作為最基本的網頁編輯語言，能實現制作網頁的各種效果。但是，它畢竟是一種代碼，得記住一些標記。因而，為了使設計網頁更加簡單方便，有些公司和人員就設計了專用的網頁編輯器。專

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

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

7、ML頁進行編輯時，會嚴格保持原有代碼的格式。典型的混合型工具還有Adobe PageMill、FrontPage、CutePage、QuickSite等。 FrontPage是較好的所見即所得的網頁編輯工具，也是常用的網頁編輯器。它對一個Web站點有很強的控制能力，可以統一Web站點內頁面的外觀和風格。它的Web管理功能也很強大，用戶可以通過圖形的方式觀察和調整站點的結構。 Dreamweaver的最佳特性就是它的“往返式RoundtripHTML編輯能力，這種特性使圖形編輯工具和代碼編輯工具輸出同樣的HTML代碼。Dreamweaver是圖形化HTML編輯工具中惟一不干擾原有HTML代碼的工

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

9、TML文件的組成 2. 標志 3. 標記的屬性 4. HTML文件的基本結構 HTML文件是一種純文本文件，可以通過瀏覽器讀取HTML文件，并用瀏覽器內含的語法分析器來解讀各種特殊標記。1. HTML文件的組成 一個HTML文件可由下列3部分組成。 標志：是HTML的基本元素，可以說一個HTML文件大部分都是由字符信息加上一些標記呈現出來的。也就是說，只要在HTML文件中適當的位置上加上所需標記，就可依照各標記所代表的意義實現各種特殊的功效。基本的標記可分為兩種：單一標記只要一個標記就能完成所要表示的功能和成對標記需要兩個標記組合才能完成所需功能） 文字與圖形資料：是指要提供給瀏覽信息的人閱讀

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

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

12、內容 例如字體標記，有屬性size和color等。屬性size表示文字的大小，屬性color表示文字的顏色。表示為： 屬性示例 需要注意的是： 并不是所有的標記都有屬性，如換行標記就沒有。 根據需要可以用該標記的所有屬性，也可以只用需要的幾個屬性，在使用時，屬性之間沒有順序。多個屬性之間用空格隔開。 屬性和標記一樣，都不區分大小寫。但為了閱讀方便，本書用大寫字母表示標記，小寫字母表示屬性。4. HTML文件的基本結構 HTML文件是一種純文本格式的文件，HTML文件包括頭部head和主體body）。文件的基本結構為： 網頁的標題 網頁的內容 說明： HTML文件以開頭，以結尾。 ：表示這是網頁

13、的頭部，用來說明文件命名和與文件本身的相關信息。可以包括網頁的標題部分：。 ：表示網頁的主體即正文部分。 HTML語言并不要求在書寫時縮進，但為了程序的易讀性，建議網頁設計制作者使標記的首尾對齊，內部的內容向右縮進幾格。【例2-1】簡單的HTML文件。 簡單的HTML文件 最簡單的網頁 圖2-1 例2-1的顯示效果 將文件以2_1.htm為文件名存盤，存放的位置是本機的工作目錄：ASP例參見1.2.3）。有以下兩種方式可以執行HTML文件2_1.htm： 打開Internet信息服務器窗口，找到虛擬目錄myasp，在右邊的文件列表中選擇文件2_1.htm，然后在“操作菜單中選擇“閱讀項； 打開

14、瀏覽器，在地址欄中直接輸入虛擬目錄名及文件名： /myasp/2_1.htm 在瀏覽器上的顯示效果如圖2-1所示。2.2.2 HTML入門 1. HTML文檔標記 2. HTML文件頭標記 3. HTML文件標題標記 4. HTML文件主體標記 5. 注釋標記1. HTML文檔標記 HTML文檔標記的格式為： HTML文檔的內容 HTML文檔的標記。處于文檔的最前面，表示HTML文檔的開始，即瀏覽器從開始解釋，直到遇到為止。每個HTML文件均以開場，以完畢。2. HTML文件頭標記 HEAD是英文“頭的意思，習慣上將HTML文檔分為文件頭和文件主體兩個部分。文件主體是在Web

15、瀏覽器窗口的用戶區顯示的內容，而文件頭則用來規定該文檔的標題瀏覽器標題欄中的內容和文檔的一些屬性。HTML文件頭標記的格式為： 頭部的內容 說明：HTML文件的頭部在文件標記之后，在開始標記和結束標記間定義。其內容可以是標題名，文本文件地址、創作信息等網頁信息說 明 。 對 應 于 相 應 的 標 記 ， 有 標 題 標 記等。 標記在HTML文件中不是必須的，如果沒有，瀏覽器也會照常解讀文件。3. HTML文件標題標記 HTML文件標題標記的格式為： 標題名 設定HTML文件標題的標記。在文件頭部定義的標題內容不在瀏覽器窗口中顯示，而是在瀏覽器的標題欄中顯示。盡管頭部定義的信息很多，但能在瀏

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

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

18、標記 1. 標題文字標記 2. 文本文字標記 3. 設置字型 4. 強制換行、換段標記 5. 分區顯示標記 6. 水平線 7. 特殊符號 在多數網頁中，文檔是核心內容，所以要經常設置文檔的格式。設置文檔的標記包括標題和文字的字體、字號、字型、顏色、段落格式、文本的布局等。1. 標題文字標記 這里的標題是指頁面中文本的標題，而不是用定義的網頁標題，標題格式顯示在瀏覽器窗口內，而不顯示在瀏覽器的標題欄中。 在頁面中，標題是一段文字內容的核心，所以總是用加強的效果來表示。網頁中的信息可以分為主要點、次要點，可以通過設置不同大小的標題，為文章增加條理。標題文字標記的格式為： 標題文字 說明： 屬性n用

19、來指定標題文字的大小。n可以取16的整數值，取1時文字最大，6時文字最小。 屬性align用來設置標題在頁面中的對齊方式，取值有：left左對齊）、center居中或right右對齊）。 標記缺省顯示宋體字。 標記會自動插入一個空行。在一個標題行中無法使用不同大小的字體。【例2-3】使用標題標記設置標題內容的大小與對齊方式。 設置標題 第1級標題H1） 第2級標題H2） 第3級標題H3） 第4級標題H4）（居左） 第5級標題H5）（居中） 第6級標題H6）（居右） 圖2-3 設置標題文字大小 瀏覽器的顯示效果如圖2-3所示。2. 文本文字標記 在網頁中為了增強頁面的層次，其中的文字可以用不同的

20、大小、字體、字型、顏色。文本文字標記用來設定文字的字體、字號和顏色。其格式為： 被設置的文字 說明：標記的屬性包括：size、face、color。 size屬性用來設置文字的大小。數字的取值范圍從17，size取1時最小，取7時最大。 face屬性用來設置字體。如黑體、宋體、楷體_GB2312、隸書、Times New Roman等。 當文字為漢字時，格式中的“字體名可以為：宋體、幼圓、隸書、楷體_GB2312、黑體、仿宋_GB2312等。當文字為英文時，字體名可以為Times New Roman等約50種字體。其實，這里的字體名字就是在Word的“字體工具欄中顯示的字體名。 color屬性

21、用來設置文字顏色，其取值見表2-2。【例2-4】使用標記的size屬性設置文字的大小；face屬性設置字體。color屬性設置文字顏色。 使用FONT標記 設置文字的屬性 1號字青色 2號字綠色 3號幼圓桔黃色 4號隸書深紅色 5號黑體黃綠色 6號方正舒體水藍色 7號華文彩云淡紫色 在瀏覽器中的顯示效果如圖2-4所示。圖2-4 設置文本文字屬性 說明： 和標記都可以設置文字的大小，二者的區別見表2-3。表2-3 與標記的區別 另外，當中的size取7時，文字比要大。 標記中的text屬性和標記中的color屬性都可以設置文本的顏色，標記直接作用其后的文字，可在文件中多處設定，使網頁中文字的顏色

22、絢麗多彩。 當與標記同時對文字顏色進行定義時，標記優先。3. 設置字型 字型就是文字的風格，如加粗、斜體、帶下劃線、上標、下標等。字型的控制標記見表2-4。表2-4 設置各種字型的標記【例2-5】使用字型標記設置文字的風格。 設置字型 黑體 斜體 帶下劃線 標準打印機字體 帶刪除線 下標 上標 大字體 小字體 在瀏覽器中的顯示效果如圖2-5所示。4. 強制換行、換段標記 在HTML文檔中，無法用多個回車、空格、Tab鍵來調整文檔段落的格式。要用HTML的標記來強制換行、分段。 強制換行標記放在一行的末尾，可以使后面的文字、圖片、表格等顯示于下一行，而又不會在行與行之間留下空行，即強制文本換行。

23、由于瀏覽器會自動忽略原始碼中空白和換行的部分，這使成為最常用的標記之一。強制換行標記的格式為：文字 說明：瀏覽器解釋時，從該處換行。換行標記單獨使用，可使頁面清晰、整齊。 段落標記定義一個新段落的開始。標記不但能使后面的文字換到下一行，還可以使兩段之間多一空行。由于一段的結束意味著新一段的開始，所以使用也可省略結束標記。 強制換段標記的格式為： 說明：段落標記的屬性align用來設置段落的對齊方式，其取值可以為left、center或right，分別表示居左、居中、居右。缺省時默認為left。 一個強制換段標記可以看作是兩個強制換行標記。【例2-6】換行與換段標記的使用。 強制換行、換段標記的

24、使用 學生之家 新    聞          學習窗口 健康信箱 聊 天 室 來信 說明：HTML語言忽略多余的空格，最多只空一個空格。在需要空格的位置，可以用“ ”插入一個空格，或者輸入全角中文空格。在瀏覽器中顯示。5. 分區顯示標記 分區顯示標記可以使文本塊或一段文字在網頁上：左對齊、居中和右對齊。分區顯示標記的格式為： 文本或圖像 說明：屬性align的取值分別為：left、center和right。【例2-7】分區顯示標記的使用。 分區顯示標記的應用 分區

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

26、的，不隨窗口尺寸的改變而改變。所謂相對值，是指長度相對于窗口的寬度而定，窗口的寬度改變時，線段的長度也隨之增減，默認值為100%，即始終填滿當前窗口。 屬性color設定線條顏色，默認為黑色。可以采用顏色的名稱。顏色可以用相應英文單詞或以“#”引導的一個十六進制數代碼來表示，見表2-2。 屬性noshade設定線條為平面顯示沒有三維效果），若缺省則有陰影或立體效果。【例2-8】水平線標記的使用。 水平線段標記的應用 水平線 在瀏覽器中的顯示。瀏覽時，改變一下窗口的大小，可以看到線段的變化效果。 7. 特殊符號 瀏覽器解釋HTML文件時，是根據“”來識別標記的，然后再確定這兩個符號中的內容是否為

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

28、色一般為藍色且帶下劃線的文字或圖片。單擊這些文本或圖片，可跳轉到相應位置。鼠標指針指向超鏈接的顯示文本或圖片時，將變成手形。超文本鏈接使用熱點標記來定義。1. 熱點標記 熱點由標記定義，它在網頁上建立超文本鏈接。通過單擊一個詞、句或圖片，可從此處轉到另一個鏈接資源目標資源），這個目標資源有唯一的地址URL）。具有以上特點的詞、句或圖片就稱為熱點。標記的格式為： 熱點 說明： href為超文本引用，它的值為一個URL，是目標資源的有效地址。在書寫URL時要注意，如果資源放在自己的服務器上，可以寫相對路徑。否則，應寫絕對路徑。href不能與name同時使用。 name指定當前文檔內的一個字符串作為

29、鏈接時可以使用有效的目標資源的地址。 target設定鏈接被按后結果所要顯示的窗口。可選值為：_blank，_parent，_self，_top，框架名稱。其說明見表2-6。表2-6 target屬性的取值2. 創建指向其他頁面的鏈接 創建指向其他頁面的鏈接，就是在當前頁面與其他相關頁面間建立超鏈接。無論目標文件與當前文件的目錄關系如何，其格式為： 熱點 根據目標文件與當前文件的目錄關系，有4種寫法： 鏈接到同一目錄內的網頁文件，其格式為： 熱點 目標文件名是鏈接所指向的文件。 鏈接到下一級目錄中的網頁文件，其格式為： 熱點 鏈接到上一級目錄中的網頁文件，其格式為： 熱點 其中“./”表示退到

30、上一級目錄中。 鏈接到同級目錄中的網頁文件，其格式為： 熱點 表示先退到上一級目錄中，然后再進入到目標文件所在的目錄。3. 創建指向本頁中的鏈接 要在當前頁面內實現超鏈接，需要定義兩個標記：一個為超鏈接標記，另一個為書簽標記。超鏈接標記的格式為： 熱點 單擊熱點文本，將跳轉到“記號名開始的文本。 書簽就是用標記對該文本作一個記號。如果有多個鏈接，不同目標文本要設置不同的書簽名，書簽名在的name屬性中定義。格式為： 目標文本附近的字符串 【例2-9】鏈接本頁中的文本。 學生之家 歡迎來到“學生之家” 新聞     學習園地  &nbs

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

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

33、為網頁鋪上背景圖片。格式為： 其中“圖片文件名包括文件存放的路徑，可以是相對路徑，也可以是絕對路徑。圖片文件可為GIF格式或JPEG格式的文件。 在瀏覽器中，作為背景的圖片將按原來的大小復制，重復鋪滿整個網頁。作為背景的圖片文件，要做的很小，以便加快下載速度。【例2-10】圖片背景。 圖片背景 用圖片作為背景 在瀏覽器中，作為背景的圖片將按原來的大小復制，重復鋪滿整 個網頁。因而，作為背景的圖片文件，要做的很小，以便加快下 載速度。 在瀏覽器中的顯示效果。 3. 圖片標記 使用圖片標記，可以把一幅圖片加入到網頁中。用圖片標記還可以設置圖片的替代文本、尺寸、布局等屬性。格式為： 說明：標記中的屬

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