HTML頁(yè)面基本元素

1、HTML、CSS、JavaScript網(wǎng)頁(yè)制作Email: 學(xué)無(wú)止境樂(lè)在其中1第3章 HTML頁(yè)面基本元素 3.1 HTML文本字符、注釋及標(biāo)記分類3.2 文本與修飾3.3 列表標(biāo)記3.4 插入圖像標(biāo)記3.5 超鏈接標(biāo)記3.6 圖像映射標(biāo)記 3.7 表格標(biāo)記 3.8 表格與DIV布局 23.1 HTML文本字符、注釋及標(biāo)記分類 在瀏覽器頁(yè)面內(nèi)顯示的內(nèi)容(包括文本、圖像、音頻或視頻等)都必須放在HTML文檔的主體標(biāo)記內(nèi)。一個(gè)HTML文檔最多一個(gè)body且必須在head之后。3.1.1 普通文本、實(shí)體字符與注釋標(biāo)記 1普通文本 在頁(yè)面中顯示不需要任何外觀、布局修飾的普通文本可在標(biāo)記中直接輸入，文本

2、的字體、字號(hào)、顏色使用標(biāo)記的設(shè)置，如不設(shè)置則按瀏覽器的默認(rèn)設(shè)置。2實(shí)體字符 實(shí)體字符就是文本中使用的特殊字符，例如“”在HTML中已經(jīng)作為標(biāo)記的定界符，當(dāng)我們作為尖括號(hào)、小于或大于號(hào)使用時(shí)必須使用這些字符的實(shí)體名稱或?qū)嶓w編號(hào)，否則被瀏覽器解析為標(biāo)記符號(hào)，就會(huì)引起混亂出現(xiàn)錯(cuò)誤。 注意：在HTML文檔的文本中不論使用多少空格或回車(chē)換行，在瀏覽器顯示時(shí)不起作用，最多只顯示一個(gè)空格，空格符必須使用或，換行用標(biāo)記。 3常用字符實(shí)體表特殊字符可以使用實(shí)體名稱、也可以使用實(shí)體編號(hào)代替。字符 描述 實(shí)體名稱 實(shí)體編號(hào) 空格 小于號(hào) 大于號(hào) & 和號(hào) & & 人民幣 版權(quán) 注冊(cè)商標(biāo) 度 加減號(hào) 乘號(hào) 除號(hào) 平方

3、2 立方3 開(kāi)始程序附件系統(tǒng)工具字符映射可獲取字符編號(hào)43注釋標(biāo)記 如果需要在HTML文檔中添加一些便于閱讀理解代碼、但不需要顯示在瀏覽器頁(yè)面中的注釋文字，可將注釋內(nèi)容放在注釋標(biāo)記內(nèi)。 或： 注釋內(nèi)容 注釋內(nèi)容作為HTML文檔的內(nèi)容也會(huì)被下載到客戶機(jī)器上，雖然瀏覽器頁(yè)面不顯示，但查看源代碼時(shí)可以看到。 注意：XHTML規(guī)范除了在注釋標(biāo)記的開(kāi)頭結(jié)尾使用“-”字符外，不能在注釋內(nèi)容中間連續(xù)使用“-”。 5【例h3-1.html】顯示實(shí)體字符，注意文檔與頁(yè)面的換行 顯示普通字符和實(shí)體字符 不需要任何外觀、布局修飾的文本可在標(biāo)記中 直接輸入。 HTML文檔中的空格、換行對(duì)瀏覽器頁(yè)面的顯示無(wú)效。 這里使

4、用了空格符和換行標(biāo)記。 這也是注釋內(nèi)容 63.1.2 HTML文檔的標(biāo)記與分類 在瀏覽器頁(yè)面內(nèi)顯示的所有內(nèi)容都必須作為標(biāo)記的內(nèi)容或?qū)傩苑旁诓煌臉?biāo)記內(nèi)由客戶端瀏覽器解析執(zhí)行這些標(biāo)記。 HTML標(biāo)記按頁(yè)面布局可分為塊級(jí)標(biāo)記、行內(nèi)標(biāo)記、列表標(biāo)記三大類，了解標(biāo)記的分類可為學(xué)習(xí)CSS打下基礎(chǔ)。1塊級(jí)標(biāo)記（display:block） 塊級(jí)標(biāo)記在頁(yè)面中以區(qū)域塊的形式出現(xiàn)，可設(shè)置塊的高度、寬度和邊框，在頁(yè)面中獨(dú)自占據(jù)一整行在開(kāi)頭結(jié)尾都會(huì)自動(dòng)換行。如標(biāo)題標(biāo)記、段落標(biāo)記和層標(biāo)記。2行內(nèi)標(biāo)記（display:inline） 行內(nèi)標(biāo)記也稱為內(nèi)聯(lián)或內(nèi)嵌標(biāo)記與它前后的標(biāo)記構(gòu)成一行，是某個(gè)區(qū)域塊中的一部分，不能獨(dú)立設(shè)置

5、高度、寬度和邊框。如超鏈接標(biāo)記、圖像標(biāo)記、標(biāo)記。3列表項(xiàng)標(biāo)記（display:list-item） 列表標(biāo)記中的每個(gè)列表項(xiàng)都會(huì)獨(dú)立分行顯示，如標(biāo)記。注意：在CSS中以上3類標(biāo)記都可通過(guò)display屬性的none值轉(zhuǎn)變?yōu)榱硪活愲[藏元素，在用戶操作時(shí)通過(guò)JavaScript代碼顯示。73.2 文本與修飾3.2.1 設(shè)置文本標(biāo)記 文本字體設(shè)置、修飾標(biāo)記都是行內(nèi)標(biāo)記，XHTML不贊成使用單純?cè)O(shè)置外觀的標(biāo)記用標(biāo)記配合CSS設(shè)置。1換行標(biāo)記 換行標(biāo)記只是在文本中插入一個(gè)換行符，但它沒(méi)有塊級(jí)標(biāo)記劃分段落的功能，前后內(nèi)容仍屬于同一區(qū)域塊是行內(nèi)標(biāo)記。 注意：傳統(tǒng)HTML可以使用，XHTML必須寫(xiě)為2水平線標(biāo)記

6、 size 指定線條粗細(xì)用像素為單位，默認(rèn)2（邊框1）align 指定對(duì)齊方式，取值為left、center（默認(rèn)）、rightwidth 指定寬度（線條長(zhǎng)度），可用像素?cái)?shù)字，也可用相對(duì)當(dāng)前瀏覽器寬度的百分比，默認(rèn)100%color 指定顏色，可用顏色名稱、#RGB、rgb(r,g,b) 默認(rèn)黑色 盡管前后插入換行符單獨(dú)一行仍是行內(nèi)標(biāo)記。 XHTML不贊成使用呈現(xiàn)屬性用id, class, style配合CSS83 縮寫(xiě)標(biāo)記 縮寫(xiě)短語(yǔ) 該標(biāo)記用于定義短語(yǔ)縮寫(xiě)，如Inc.、etc.IE7以下不支持 縮寫(xiě)名稱 該標(biāo)記用于只取首字母的縮寫(xiě)名稱短語(yǔ)，如 CCTV，可為拼寫(xiě)檢查程序、翻譯系統(tǒng)或搜索引擎提

7、供有用的信息。 、標(biāo)記可配合title屬性當(dāng)鼠標(biāo)移至縮略詞語(yǔ)上時(shí)，即可顯示完整內(nèi)容。4等寬文本標(biāo)記、顯示打字機(jī)風(fēng)格的文本效果 顯示鍵盤(pán)輸入的文本效果 顯示計(jì)算機(jī)代碼的文本效果顯示樣本的文本效果、標(biāo)記一般都顯示為固定寬度的字體。 95上下標(biāo)標(biāo)記、上標(biāo)： 上標(biāo)文本下標(biāo)： 下標(biāo)文本【例h3-2.html】使用字體設(shè)置標(biāo)記，當(dāng)鼠標(biāo)指向etc.時(shí)顯示“多余的人”，當(dāng)鼠標(biāo)指向UN時(shí)顯示“United Nations聯(lián)合國(guó)” 設(shè)置文本 使用縮寫(xiě)：不需要etc.。 使用縮寫(xiě)：這里是UN 。 this is a book! ABCDEFG正常顯示文本。 this is a book! ABCDEFG tt打字機(jī)

8、風(fēng)格文字 this is a book! ABCDEFG kbd鍵盤(pán)輸入文字效果 this is a book! ABCDEFG code計(jì)算機(jī)代碼效果 this is a book! ABCDEFG samp樣本文本效果 使用上標(biāo)：a2+b2=c2 使用下標(biāo)：xy上標(biāo)+x1下標(biāo)=z 106文本字體標(biāo)記文本 XHTML不贊成使用可用或配合CSS樣式。 113.2.2 文本修飾標(biāo)記加粗： 加粗文本 推薦使用：斜體： 斜體文本 推薦使用：刪除線： 或 推薦：引用： 可引用外部文檔作標(biāo)注斜體顯示項(xiàng)目： 可定義項(xiàng)目 斜體顯示插入文本： 加底劃線，配合產(chǎn)生更改效果 使用cite屬性可引用外部文檔作標(biāo)注，

9、解釋插入文本的原因 使用datetime屬性可定義文本插入的日期YYYYMMDD 加引號(hào)： 在行內(nèi)為文本自動(dòng)加引號(hào)IE不支持大字體：加大字號(hào)文本 小字體：減小字號(hào)文本下劃線： 容易混淆為超鏈接，xhtml不贊成使用 注意：以上標(biāo)記均可使用標(biāo)記配合CSS樣式設(shè)置。 12【例h3-3.html】傳統(tǒng)文本修飾及CSS設(shè)置字體與鼠標(biāo)指向時(shí)的提示標(biāo)注 字體修飾 .font font-family:楷體_GB2312; font-weight:bold; font-size:18pt; color:blue; 正常顯示文本 cite引用文本，dfn項(xiàng)目文本 傳統(tǒng)b加粗文本，推薦strong加粗文本 傳統(tǒng)i

10、斜體文本，推薦em斜體文本 傳統(tǒng)big大字體，傳統(tǒng)small小字體 傳統(tǒng)u帶下劃線文本，容易與超鏈接混淆13【例h3-3.html】傳統(tǒng)文本修飾及CSS設(shè)置字體 傳統(tǒng)s帶刪除線文本，傳統(tǒng)strike帶刪除線文本， 推薦del帶刪除線文本 ins標(biāo)記插入文本，可配合del產(chǎn)生更改效果： 跳樓大甩賣(mài)！原價(jià)180，現(xiàn)價(jià)30！ 用span標(biāo)記CSS設(shè)置藍(lán)色18磅楷體加粗文本 當(dāng)代最可愛(ài)的人鼠標(biāo)指向時(shí)顯示提示內(nèi)容 143.3.3 塊級(jí)文本標(biāo)記 單純?cè)O(shè)置文本段落的塊級(jí)標(biāo)記目前已逐漸被標(biāo)記取代。1標(biāo)題標(biāo)記 標(biāo)題 前后自動(dòng)換行塊級(jí)標(biāo)記，字號(hào)最大 XHTML不贊成使用align屬性，可用style=text-a

11、lign:對(duì)齊方式 屬性或CSS設(shè)置。2段落標(biāo)記 分段顯示的文本 標(biāo)記是前后自動(dòng)換行并保持一定間距（空行）的塊級(jí)標(biāo)記，用于定義一個(gè)文本段落。 XHTML不贊成使用所有設(shè)置字體、字號(hào)、顏色、背景、對(duì)齊方式的呈現(xiàn)屬性，可使用style屬性或CSS設(shè)置。 由于標(biāo)記段落之間的距離非常大，而且無(wú)法通過(guò)樣式表調(diào)整，往往不能完全符合頁(yè)面設(shè)計(jì)要求，已逐漸被取代。 注意：傳統(tǒng)HTML中可省略直到下一個(gè)，XHTML規(guī)范不能省略必須閉合。 15【例h3-4.html】使用標(biāo)題與段落標(biāo)記 標(biāo)題與段落 正常顯示文本標(biāo)題1：享受快樂(lè)這是普通的正文 這是換行后的正文這是使用段落的第一段文本 這是使用段落的第二段文本 居中標(biāo)

12、題2：享受生活 居中顯示的段落文本 右對(duì)齊標(biāo)題3：享受學(xué)習(xí)生活的快樂(lè) 右對(duì)齊顯示的段落文本 標(biāo)題4：享受學(xué)習(xí)生活的快樂(lè) 標(biāo)題5：享受學(xué)習(xí)生活的快樂(lè) 標(biāo)題6：享受學(xué)習(xí)生活的快樂(lè)正常顯示文本 163縮進(jìn)段落標(biāo)記 段落縮進(jìn)文本與標(biāo)記類似可定義一個(gè)文本段落，但該標(biāo)記內(nèi)的段落文本會(huì)在左、右兩邊都自動(dòng)縮進(jìn)5個(gè)字符，有的瀏覽器可能會(huì)使用斜體字。標(biāo)記可以嵌套，嵌套時(shí)每一級(jí)文本都會(huì)在左、右兩邊逐級(jí)縮進(jìn)5個(gè)字符。注意：標(biāo)記內(nèi)應(yīng)包含塊級(jí)標(biāo)記而不是純文本。4地址文本標(biāo)記 地址或郵箱文本 標(biāo)記可以突出顯示一個(gè)地址(比如電子郵件)、簽名或者文檔作者，通常顯示為斜體。大多數(shù)瀏覽器會(huì)在前后添加換行符并作為塊級(jí)標(biāo)記。17【例h

13、3-5.html】縮進(jìn)段落標(biāo)記與地址文本標(biāo)記 段落縮進(jìn)與地址文本 正常顯示文本1級(jí)縮進(jìn)文本 1級(jí)縮進(jìn)文本 2級(jí)縮進(jìn)文本 blockquote標(biāo)記類可定義一個(gè)自動(dòng)縮進(jìn)的文本段落，嵌套時(shí)每一級(jí)文本都會(huì)在左、右兩邊逐級(jí)縮進(jìn)5個(gè)字符，有的瀏覽器可能會(huì)使用斜體字。 1級(jí)縮進(jìn)文本 請(qǐng)聯(lián)系我們：商職學(xué)院計(jì)算機(jī)系 Email: 185預(yù)格式化標(biāo)記 等寬字體并保持原狀的文本 標(biāo)記可完全按HTML文檔內(nèi)書(shū)寫(xiě)的格式顯示該標(biāo)記內(nèi)的文本，標(biāo)記內(nèi)整塊文本顯示為等寬字體并保持原狀，包括空格、制表符tab和換行符。標(biāo)記前后換行并保持一定間距。 6忽略html標(biāo)記的標(biāo)記 包括HTML標(biāo)記都會(huì)保持原狀的文本 與標(biāo)記作用類似可原樣

14、顯示標(biāo)記內(nèi)文本，但該標(biāo)記內(nèi)的HTML標(biāo)記也會(huì)作為文本原樣顯示。19【例h3-6.html】預(yù)格式化標(biāo)記與忽略HTML標(biāo)記的標(biāo)記 預(yù)格式化與忽略HTML標(biāo)記 登黃鶴樓 白日依山盡， 黃河入海流。 登黃鶴樓 欲窮千里目， 更上一層樓。這是pre標(biāo)記內(nèi)的p段落文本 登黃鶴樓 欲窮千里目， 更上一層樓。這是xmp標(biāo)記內(nèi)的p段落文本 正常顯示文本 207居中顯示文本標(biāo)記 居中顯示的文本 標(biāo)記可對(duì)所包括的文本前后換行后居中顯示，包括其中沒(méi)有單獨(dú)設(shè)置對(duì)齊方式的其他塊級(jí)元素內(nèi)容。 XHTML不贊成使用該標(biāo)記，可用 style屬性或配合CSS代替。 213.2.4 樣式組織標(biāo)記 樣式組織標(biāo)記和也稱為布局元素，是

15、HTML4.0及XHTML1.0后增加的一種中性偽標(biāo)記，即沒(méi)有特定功能也不對(duì)頁(yè)面添加任何東西，僅僅通過(guò)id, class, title, style, dir, lang等標(biāo)準(zhǔn)屬性結(jié)合CSS樣式表、JavaScript腳本實(shí)現(xiàn)對(duì)頁(yè)面內(nèi)容的控制，為頁(yè)面增添視覺(jué)效果和動(dòng)態(tài)效果。1行內(nèi)樣式標(biāo)記 行內(nèi)顯示文本 是一個(gè)行內(nèi)標(biāo)記，通過(guò)CSS樣式表可為行內(nèi)部分文本設(shè)置視覺(jué)效果或配合JavaScript產(chǎn)生動(dòng)態(tài)效果。 目前大多數(shù)行內(nèi)修飾標(biāo)記例如綜合設(shè)置字體字號(hào)顏色標(biāo)記、加粗|、斜體|、大號(hào)、小號(hào)、下劃線等都已被取代。 注意：是行級(jí)容器標(biāo)記，標(biāo)記內(nèi)只能包含文字內(nèi)容而不能包含圖像或標(biāo)題、段落等塊級(jí)標(biāo)記，可以被塊級(jí)

16、標(biāo)記包含22 2塊級(jí)樣式標(biāo)記 文本、圖像、多媒體等任意頁(yè)面元素 div是division的簡(jiǎn)寫(xiě)，意為分割、區(qū)域或分組。W3C 對(duì)div的定義是：div元素通過(guò)與 id、class 等屬性配合，可提供向文檔添加額外結(jié)構(gòu)的通用機(jī)制。 標(biāo)記也稱為圖層標(biāo)記，標(biāo)記中的內(nèi)容自動(dòng)在開(kāi)始和結(jié)束時(shí)插入換行但沒(méi)有多余的間距，通過(guò)CSS樣式可分層格式化整塊文本，配合JavaScript產(chǎn)生動(dòng)態(tài)效果。 目前大多數(shù)塊級(jí)文本標(biāo)記如標(biāo)題、段落、居中、縮進(jìn)、列表、表格都可用代替 注意：標(biāo)記是塊級(jí)容器標(biāo)記，可包含多個(gè)段落、行、標(biāo)題、圖像，也可以嵌套多層，但不能在段落標(biāo)記中使用。 23【例h3-7.html】使用、標(biāo)記 用設(shè)置區(qū)

17、域塊背景顏色顯示本杰明弗蘭克林的名言，并用設(shè)置紅色、黑體顯示重點(diǎn)單詞(配合JavaScript還可在鼠標(biāo)指向單詞時(shí)變換字體或顯示圖像)。 使用span標(biāo)記 span color:red;font-family:黑體; 正常顯示文本 早睡早起使人健康、富裕和聰穎。 正常顯示文本 243.3 列表標(biāo)記 列表可提供容易閱讀、結(jié)構(gòu)化的索引信息，如提綱、目錄、索引清單，可以幫助訪問(wèn)者方便地找到信息，并引起訪問(wèn)者對(duì)重要信息的注意。例如以下列表類型的介紹就是一個(gè)無(wú)序列表： 有序列表： 列表項(xiàng)前有數(shù)組或字母變化的順序縮進(jìn)列表 無(wú)序列表： 列表項(xiàng)前有特殊項(xiàng)目符號(hào)的縮進(jìn)列表 定義列表： 列表項(xiàng)前沒(méi)有任何編號(hào)或符號(hào)

18、的縮進(jìn)列表 目錄列表： 類似無(wú)序列表 菜單列表： 類似無(wú)序列表 列表標(biāo)記都是塊級(jí)標(biāo)記。 253.3.1 有序列表 列表項(xiàng)1 列表項(xiàng)2 列表項(xiàng)3 標(biāo)記定義有序列表，至少包含一個(gè)列表項(xiàng)，每個(gè)列表項(xiàng)前自動(dòng)添加指定的遞增編號(hào)或字母，自動(dòng)分行且每行自動(dòng)縮進(jìn)。及標(biāo)記都必須閉合。 type編號(hào)類型 顯示內(nèi)容 start默認(rèn)值 1 (默認(rèn)) 數(shù)字 1、2、3 1 a 或 A 英文字母a b c或A B C a或A i 或 I 羅馬數(shù)字i ii iii 或I II III i或I XHTML不贊成使用type、start、value屬性，應(yīng)使用style 或設(shè)置CSS樣式。 263.3.2 無(wú)序列表 列表項(xiàng)1

19、列表項(xiàng)2 標(biāo)記定義無(wú)序列表，至少包含一個(gè)列表項(xiàng)，每個(gè)列表項(xiàng)前自動(dòng)添加指定的項(xiàng)目符號(hào)，自動(dòng)分行且每行自動(dòng)縮進(jìn)。及標(biāo)記都必須閉合。 type項(xiàng)目符號(hào)類型 顯示內(nèi)容 disc (第1級(jí)默認(rèn)) circle (第2級(jí)默認(rèn)) square (第3級(jí)默認(rèn)) XHTML不贊成使用type屬性，應(yīng)使用style或CSS樣式。 注意：項(xiàng)目符號(hào)類型必須小寫(xiě)，例如 Circle、Square無(wú)效。 27【例h3-8.html】使用有序、無(wú)序列表 有序無(wú)序列表 蘋(píng)果香蕉茄子 蘋(píng)果 香蕉 茄子 美國(guó)民主黨總統(tǒng)： 富蘭克林.D.羅斯福哈利.S.杜魯門(mén) 約翰.F.肯尼迪林登.B.約翰遜 吉米.卡特比爾.克林頓貝拉克奧巴馬

20、28【例h3-8.html】使用有序、無(wú)序列表 美國(guó)共和黨總統(tǒng)： 德懷特.D.艾森豪威爾理查德.尼克松 杰拉爾德.福特羅納德.里根 喬治.布什喬治.W.布什 293.3.3 定義列表 名詞1 名詞1定義1 名詞1定義2 名詞2 名詞2定義1 名詞2定義1 標(biāo)記定義無(wú)編號(hào)、無(wú)符號(hào)的術(shù)語(yǔ)“定義列表”，是一種兩個(gè)層次的列表，可提供術(shù)語(yǔ)名詞和該名稱解釋的兩級(jí)信息。 標(biāo)記指定術(shù)語(yǔ)名稱不縮進(jìn)，可省略但必須有文本 標(biāo)記指定對(duì)術(shù)語(yǔ)的解釋自動(dòng)縮進(jìn)，可省略。 一個(gè)術(shù)語(yǔ)定義可以有多個(gè)內(nèi)容解釋、也可內(nèi)嵌塊級(jí)元素。 30【例h3-9.html】定義列表 定義列表 星期日 一周的第一天 HTML 超文本標(biāo)記語(yǔ)言 描述頁(yè)面

21、內(nèi)容 網(wǎng)頁(yè)三劍客 Dreamweaver Flash Fireworks 313.3.4 目錄、菜單列表、1、目錄列表 列表項(xiàng)1 列表項(xiàng)2 2、菜單列表 列表項(xiàng)1 列表項(xiàng)2 目錄列表、菜單列表的功能與顯示效果與無(wú)序列表相同。32【例h3-10.html】目錄、菜單列表 目錄、菜單列表 聯(lián)系人聯(lián)系地址郵政編碼 聯(lián)系人：張明 聯(lián)系地址：濟(jì)南彩石 郵政編碼：250100 333.3.5 列表嵌套應(yīng)用【例h3-11.html】三種列表的嵌套示例自動(dòng)按所在層次縮進(jìn) 列表嵌套 水果類 蘋(píng)果 香蕉 茄子 蔬菜類 蘿卜 白菜 土豆 體育三大球 足球 籃球 排球 音樂(lè)分類 民族音樂(lè)中國(guó)傳統(tǒng)音樂(lè) 流行音樂(lè)中西結(jié)合

22、音樂(lè) 古典音樂(lè) 昨天的今天的 明天的 34【例h3-12.html】使用列表發(fā)布HTML教材部分目錄 HTML部分目錄 目錄 HTML頁(yè)面基本元素 HTML文本字符、注釋標(biāo)記及標(biāo)記分類 普通文本、實(shí)體字符與注釋標(biāo)記 HTML文檔的標(biāo)記與分類 文本與修飾標(biāo)記 設(shè)置文本標(biāo)記 文本修飾標(biāo)記 塊級(jí)文本標(biāo)記 標(biāo)題標(biāo)記 段落標(biāo)記 預(yù)格式化標(biāo)記 樣式組織標(biāo)記 span標(biāo)記 div標(biāo)記 35發(fā)布HTML教材部分目錄 HTML框架、表單、多媒體 框架集、框架標(biāo)記 框架集文檔的結(jié)構(gòu) 框架集標(biāo)記 框架標(biāo)記 浮動(dòng)框架標(biāo)記 表單標(biāo)記 創(chuàng)建表單標(biāo)記 表單輸入標(biāo)記 文本區(qū)標(biāo)記 按鈕標(biāo)記 363.4 插入圖片標(biāo)記 標(biāo)簽是行內(nèi)

23、元素，可在當(dāng)前行中插入一副圖像無(wú)論圖像大小都是區(qū)域塊中的一行，前后文本默認(rèn)與圖像底部對(duì)齊 注意：傳統(tǒng)HTML可寫(xiě)為，XHTML必須閉合1、必需屬性 src 指定圖片路徑及文件名（絕對(duì)或相對(duì)路徑見(jiàn)超鏈接），文件必須是jpeg(jpg)、gif及png格式。 alt 指定圖像不能顯示時(shí)的替代文本，如果省略了title當(dāng)鼠標(biāo)指向圖片時(shí)也顯示該文本作為提示不超過(guò)1024個(gè)字符。2、可選屬性 width 設(shè)置圖片在頁(yè)面中的顯示寬度(像素或頁(yè)面%) height 設(shè)置圖片的高度(像素或頁(yè)面%) lowsrc 低分辨率圖片 longdesc 指向圖像描述文檔的URL ismap 與標(biāo)簽配合指定圖像為服務(wù)器端

24、圖像映射 usemap 與和配合指定圖像為客戶端圖像映射373、xhtml不贊成使用的屬性采用CSS樣式 border：設(shè)置圖片的邊框?qū)挾?像素) vspace：設(shè)置圖片上下兩邊空白區(qū)域的垂直外間距(像素) hspace：設(shè)置圖片左右兩邊空白區(qū)域的水平外間距(像素) align： 設(shè)置同一行中圖片與文字的垂直對(duì)齊方式 align 屬性的取值： CSS樣式對(duì)應(yīng)屬性 vertical-align left： 圖像浮動(dòng)在左側(cè)原左側(cè)有文本會(huì)下移 right：圖像浮動(dòng)在右側(cè)原右側(cè)有文本會(huì)下移 top 或 texttop ： 圖片頂端與第一行文字上方對(duì)齊 middle 或 absmiddle ：圖片中間線

25、與第一行文字對(duì)齊 bottom 或 absbottom ：圖片底線與第一行文字對(duì)齊 baseline： 圖片底線與第一行文字基線對(duì)齊 注意：圖像可美化頁(yè)面，但圖像太多會(huì)影響下載時(shí)間。 如果設(shè)置圖像在頁(yè)面的左、中、右水平對(duì)齊，必須將標(biāo)記放在或父標(biāo)記中，用CSS“text-align:對(duì)齊方式”對(duì)父標(biāo)記設(shè)置對(duì)齊方式。 38【例h3-13.html】用表格顯示圖片 顯示圖片 設(shè)置圖片尺寸和邊框 原圖379x400 設(shè)置450 x550 設(shè)置300 x300帶邊框 鼠標(biāo)指向title關(guān)閉瀏覽器圖像刷新測(cè)試：工具Internet選項(xiàng)高級(jí)多媒體取消顯示圖片鼠標(biāo)指向alt鼠標(biāo)指向alt39【例h3-14.h

26、tml】圖片間距與對(duì)齊 圖片間距與對(duì)齊 設(shè)置圖片間距與對(duì)齊 圖片水平間距10，與文本上對(duì)齊 圖片水平間距20，與文本中對(duì)齊 圖片水平間距30、垂直30帶邊框，與文本下對(duì)齊 如果將3幅圖像的height屬性分別設(shè)置為占瀏覽器高度的15%、25%、35%則必須去掉標(biāo)記，否則XHTML不支持height屬性的百分比設(shè)置無(wú)效，如果必須使用百分比必須用CSS設(shè)置。 注意：目前流行的網(wǎng)頁(yè)制作中，裝飾性的圖像都不要放在頁(yè)面中，而是在CSS中作為背景圖像實(shí)現(xiàn)。 403.5 超鏈接標(biāo)記 一個(gè)網(wǎng)站往往有許多頁(yè)面，使用超鏈接可以建立彼此的關(guān)系，單擊超鏈接文本或圖像就可以轉(zhuǎn)向或打開(kāi)另一個(gè)頁(yè)面。 超鏈接的含義是通過(guò)鏈接

27、文本或圖形拋錨anchor到另一個(gè)頁(yè)面，或者拋錨到當(dāng)前頁(yè)面中的某一個(gè)錨點(diǎn)anchor。 413.5.1 超鏈接、設(shè)置錨點(diǎn)標(biāo)記 鏈接文本或圖像熱點(diǎn)文字 標(biāo)記是一個(gè)行內(nèi)標(biāo)記不會(huì)自動(dòng)換行。使用href屬性就是超鏈接標(biāo)記，點(diǎn)擊熱點(diǎn)文字就可拋錨到href指定的網(wǎng)頁(yè)或錨點(diǎn)。省略href屬性僅僅在文檔中設(shè)置一個(gè)錨點(diǎn)。 href 屬性指定鏈接文檔的URL、錨點(diǎn)或用Email發(fā)送郵件 target屬性指定鏈接頁(yè)面的顯示窗口xhtml1.1已禁用 _blank新窗口、_self當(dāng)前窗口(默認(rèn))、框架_parent、_top rel/rev 定義當(dāng)前文檔與目標(biāo)URL之間的關(guān)系 type 規(guī)定目標(biāo)URL的MIME類型

28、：MIME_type 鏈接熱點(diǎn)文本如果沒(méi)有設(shè)置CSS樣式，默認(rèn)以藍(lán)色帶下劃線顯示，點(diǎn)擊后變?yōu)樽霞t色，對(duì)鏈接圖像則默認(rèn)帶藍(lán)色邊框，點(diǎn)擊后為紫紅色邊框。可通過(guò)CSS設(shè)置各種操作狀態(tài)的外觀樣式。 423.5.2 超鏈接頁(yè)面的URL路徑 標(biāo)記用href指定鏈接頁(yè)面的URL路徑時(shí)可以采用絕對(duì)、相對(duì)或根路徑 也適用圖片的src路徑。1、絕對(duì)路徑 絕對(duì)路徑：文件的完整路徑主要用于其他網(wǎng)站的友情鏈接 如：/index.html 默認(rèn)首頁(yè)文件名：index.html、default.html 、index.jsp2、相對(duì)路徑 相對(duì)路徑：相對(duì)于當(dāng)前文件的路徑用于同網(wǎng)站內(nèi)其他頁(yè)面 同一目錄內(nèi)：只寫(xiě)被鏈接的文件名 如

29、：abc.html 下一級(jí)目錄：目錄名/文件名 如：view/abc.html 上一級(jí)目錄： ./目錄名/文件名 如：./view/abc.html3、根路徑 根路徑是設(shè)置為網(wǎng)站的文件夾并以/表示，后面是文件所在路徑及文件名用于同一網(wǎng)站不同文件夾內(nèi)的其他頁(yè)面。 如： /view/abc.html4#表示鏈接當(dāng)前頁(yè)面自己 43【例h3-15.html】主頁(yè)文件 被鏈接頁(yè)面h3-16.html與主頁(yè)面保存在同一文件夾目錄下、h3-17.html及圖像p3-3.jpg保存在當(dāng)前目錄下一級(jí)文件夾img中 超鏈接頁(yè)面 163網(wǎng)站 學(xué)習(xí)頁(yè)面 44【例h3-16.html、img/h3-17.html】超鏈

30、接子頁(yè)面【例h3-16.html】必須與主頁(yè)面保存在同一目錄中。 學(xué)習(xí)頁(yè)面 學(xué)習(xí)HTML課程頁(yè)面 被鏈接子頁(yè)面，與主頁(yè)面保存在同一目錄中。 【例h3-17.html】必須保存在主頁(yè)目錄的下一級(jí)文件夾img中 圖像頁(yè)面 圖像原圖 被鏈接子頁(yè)面，連同圖像p3-3.jpg保存在主頁(yè)文件目錄中的下一級(jí)文件夾img中。 45*3.5.3 關(guān)于target屬性 target 指定打開(kāi)鏈接頁(yè)面的窗口 xhtml已禁用該屬性防止有些網(wǎng)站惡意自動(dòng)打開(kāi)眾多的廣告頁(yè)面。 xhtml1.1雖然禁用，但可用javascript設(shè)置的target屬性、或在單擊事件中利用window對(duì)象的open方法打開(kāi)新窗口顯示 在需要

31、打開(kāi)新窗口的標(biāo)記中增加rel屬性也可設(shè)置id或class屬性作為標(biāo)識(shí)。 文本或圖片 在頁(yè)面文檔或外部.js文件中添加以下JavaScript代碼： window.onload=externalLinks; /頁(yè)面裝載完畢調(diào)用函數(shù) function externalLinks() /設(shè)置打開(kāi)新窗口函數(shù) var anchors=document.getElementsByTagName(a); for (var i=0; ianchors.length; i+) var a=anchorsi; if ( a.getAttribute(rel)=external ) a.target=_blank;

32、 463.5.4 鏈接到普通文檔、圖像或多媒體文件 使用超鏈接標(biāo)記也可以鏈接到普通的文檔、表格、圖像或音頻、視頻等多媒體文件，當(dāng)用戶單擊鏈接文本時(shí)瀏覽器會(huì)提示用戶“打開(kāi)”或“保存”該文件。 對(duì)音頻或視頻等多媒體文件，如果用戶機(jī)器上安裝了播放軟件則可選擇“打開(kāi)”文件進(jìn)行播放，如果沒(méi)有安裝播放軟件一般瀏覽器會(huì)為用戶提供下載軟件并自動(dòng)播放。如果不能播放可選擇“保存”，瀏覽器會(huì)將該文件下載保存到用戶計(jì)算機(jī)上供以后播放。 47【例h3-18.html】鏈接圖像或多媒體文件使用了背景圖片 鏈接視頻文件 單擊超鏈接小圖像可打開(kāi)查看或保存原圖： 單擊該動(dòng)畫(huà)可以鏈接播放或保存視頻文件： 483.5.5 設(shè)置錨點(diǎn)

33、與Email鏈接 錨點(diǎn)鏈接是點(diǎn)擊鏈接后跳轉(zhuǎn)到同一文檔或其他文檔中的某一個(gè)指定位置必須用不帶href的標(biāo)記在該位置設(shè)置錨點(diǎn)。 定義錨點(diǎn)不能使用href屬性，傳統(tǒng)html使用name屬性，而 XHTML統(tǒng)一使用id屬性，錨點(diǎn)標(biāo)識(shí)符必須惟一且不能數(shù)字開(kāi)頭，不同頁(yè)面的錨點(diǎn)可以相同。1、跳轉(zhuǎn)鏈接到同一頁(yè)面內(nèi)的指定錨點(diǎn)： 鏈接文本或圖像2、鏈接其他頁(yè)面中的指定錨點(diǎn) 鏈接文本或圖像493、鏈接Email地址發(fā)送電子郵件 鏈接文本或圖像 如果用戶機(jī)器已安裝Outlook郵件發(fā)送軟件，點(diǎn)擊該超鏈接時(shí)即可自動(dòng)啟動(dòng)郵件發(fā)送。 Email地址“?”可以帶有多個(gè)屬性，但屬性之間必須用&隔開(kāi)，例如： 提交作業(yè) 應(yīng)用技巧：

34、為防止垃圾郵件制造者自動(dòng)收集Email地址，可用字符實(shí)體替換其中的一些字符，如字母f使用“f” 例如：lf 可寫(xiě)為：lf 鏈接文本中的逗號(hào)可用%2C代替、空格可用下劃線_代替50【例h3-19.html】鏈接錨點(diǎn)頁(yè)面 超鏈接本頁(yè)面A、top錨點(diǎn)h3-20.htmlA、B錨點(diǎn)并發(fā)送郵件。 帶錨點(diǎn)主頁(yè)面 HTML學(xué)習(xí) 第一章 索引：1-1 1-2 2-1 2-2 1-1第一節(jié)：標(biāo)記 1-2第二節(jié)：屬性 返回開(kāi)始 聯(lián)系我們 提交作業(yè) 51【例h3-20.html】被鏈接頁(yè)面與主頁(yè)面保存在同一目錄 帶錨點(diǎn)子頁(yè)面 HTML學(xué)習(xí) 第二章 2-1第一節(jié)： 2-2第二節(jié)： 返回 523.6 圖像映射標(biāo)記 一幅

35、圖像可以整體作為超鏈接使用，如果需要將一幅圖像分為幾個(gè)部分分別鏈接不同的頁(yè)面可以使用圖像映射。 例如醫(yī)療用人體圖像，不同部位可鏈接不同醫(yī)療方案的頁(yè)面，再如用戶單擊中國(guó)地圖中的不同城市，則可鏈接到該城市的詳細(xì)地圖頁(yè)面。 圖像映射一般僅用于不規(guī)則比較復(fù)雜的圖像，對(duì)有規(guī)則的圖像可用圖像處理軟件將圖像分割為若干塊獨(dú)立的小圖像，每個(gè)圖像塊用一個(gè)超鏈接將它們單獨(dú)鏈接到不同頁(yè)面，然后再把小圖像按原順序排列起來(lái)。 注意：這些小圖像的超鏈接標(biāo)記雖然比較多但屬于同一行，如果需要換行時(shí)必須在標(biāo)記內(nèi)部換行，標(biāo)記之間不要換行或使用空格，避免圖像排列后有間隙。 533.6.1 圖像映射方式 圖像映射可以采用兩種方式。 1

36、服務(wù)器端圖像映射 在圖像標(biāo)記中用ismap=ismap屬性指定由服務(wù)器處理圖像映射，配合提交給服務(wù)器處理程序，服務(wù)器根據(jù)用戶點(diǎn)擊的坐標(biāo)鏈接到不同頁(yè)面。目前這種方式已不采用。2客戶端圖像映射 用映射標(biāo)記、區(qū)域標(biāo)記劃分出圖像的各個(gè)超鏈接區(qū)域，直接在客戶端頁(yè)面中創(chuàng)建圖像映射鏈接到不同的頁(yè)面，而不需要編寫(xiě)專門(mén)的服務(wù)器程序，目前大多采用這種方式。 543.6.2 創(chuàng)建圖像映射標(biāo)記 在文檔中位置任意，也可單獨(dú)保存.html文件1、圖像映射標(biāo)記 標(biāo)記定義客戶端圖像映射必須包含內(nèi)嵌 name|id 指定唯一映射名稱針對(duì)不同瀏覽器可同時(shí)指定 552、指定圖像區(qū)域及鏈接頁(yè)面標(biāo)記 標(biāo)記指定圖片中一個(gè)可單擊區(qū)域及對(duì)應(yīng)

37、的鏈接頁(yè)面，當(dāng)用戶單擊這個(gè)區(qū)域時(shí)即可自動(dòng)超鏈接到指定的頁(yè)面。 shape 指定區(qū)域形狀：rectangle矩形, circle圓, polygon多邊形 coords 指定區(qū)域坐標(biāo)(像素)：圖像左上角0,0忽略超出邊界矩形：x1,y1,x2,y2 為矩形左上角(x1,y1)右下角(x2,y2)坐標(biāo)圓形：x,y,r 為圓心坐標(biāo)(x,y)和半徑r多邊形：x1,y1,x2,y2,x3,y3,. 分別為按順序的頂點(diǎn)坐標(biāo)，結(jié)尾不需要與開(kāi)始重復(fù) nohref 指定圖像映射排除的區(qū)域，取值為： true|false 注意：HTML可使用title或alt顯示鼠標(biāo)指向?qū)?yīng)區(qū)域時(shí)的提示信息，對(duì)XHTML文檔IE

38、7及以下可使用title或alt，IE8及火狐只能用title顯示鼠標(biāo)指向的提示信息。 如果指定區(qū)域重疊，則先定義的優(yōu)先，可用href= 定義“死區(qū)域”，覆蓋暫時(shí)不需要超鏈接的區(qū)域。 563.6.3 使用圖像映射的圖片 定義圖像映射后即可在需要的位置用插入圖像映射的圖片但必須使用usemap屬性關(guān)聯(lián)的圖像映射： 如果將圖像映射單獨(dú)存放在xxx.html文件中則可使用： 注意：XHTML1.0需要在映射名前加#，XHTML1.1不需要加#，而目前有的瀏覽器尚不支持不加#，因此使用圖像映射時(shí)應(yīng)使用XHTML1.0標(biāo)準(zhǔn)。 57【例h3-21.html 】圖像映射 使用圖像映射制作一個(gè)介紹項(xiàng)目工作流程

39、的頁(yè)面，項(xiàng)目工作流程圖像p3-9.jpg設(shè)置了6個(gè)熱點(diǎn)映射區(qū)域，分別對(duì)應(yīng)h3-21文件夾子目錄中的h3-21-1.html h3-21-6.html共6個(gè)頁(yè)面文檔，通過(guò)超鏈接對(duì)應(yīng)的頁(yè)面可以了解每個(gè)階段的工作任務(wù)。 圖像映射區(qū)域58h3-21.html 主文檔 項(xiàng)目工作流程 項(xiàng)目工作流程 下面是授課過(guò)程中軟件開(kāi)發(fā)的工作流程，在圖片上移動(dòng)鼠標(biāo)可了解每個(gè)過(guò)程的大致需要完成的任務(wù)。 593.7 表格標(biāo)記3.7.1 表格語(yǔ)法結(jié)構(gòu) 表格標(biāo)記在傳統(tǒng)網(wǎng)頁(yè)制作的布局方面舉足輕重，幾乎所有布局都采用表格，而且多重表格層層嵌套，代碼非?；靵y，不易閱讀也不易維護(hù)修改。在目前基于Web2.0標(biāo)準(zhǔn)的網(wǎng)頁(yè)制作中，布局都采用

40、了CSS，表格也恢復(fù)了它原有的功能，僅僅用于顯示數(shù)據(jù)而已。 如果在頁(yè)面中顯示一個(gè)如下表格：60表格示例對(duì)應(yīng)的簡(jiǎn)化代碼 表格標(biāo)記，塊級(jí)元素 表格標(biāo)題 表格前大標(biāo)題 行標(biāo)記，每行必須獨(dú)立使用 行列標(biāo)題 第1列數(shù)據(jù)標(biāo)題 表內(nèi)行列小標(biāo)題標(biāo)記 等價(jià)align=center屬性 第1行數(shù)據(jù)行標(biāo)題 數(shù)據(jù)1.1 列標(biāo)記，每列必須獨(dú)立使用 數(shù)據(jù)1.2 數(shù)據(jù)1.3 第2行數(shù)據(jù)行標(biāo)題 數(shù)據(jù)2.1 613.7.2 創(chuàng)建表格標(biāo)記 表格內(nèi)容行標(biāo)記、列標(biāo)記 標(biāo)記是塊級(jí)元素，標(biāo)記內(nèi)可以放置表格大標(biāo)題、行、行列標(biāo)題和列標(biāo)記等表格內(nèi)容構(gòu)成一個(gè)完整的數(shù)據(jù)表格，也可以在每個(gè)單元格中放置任意的文本塊、圖像或其他表格，起到排版定位的效果

41、，但表格嵌套不宜超過(guò)三層否則會(huì)影響頁(yè)面打開(kāi)的速度。 621、可選屬性2XHTML不贊成使用的屬性 width/height 指定表格的總寬度/總高度 border 指定邊框?qū)挾?，省略或border=0則無(wú)邊框 bordercolor 指定邊框顏色 bordercolorlight亮邊框顏色、bordercolordark暗邊框顏色 frame 指定表格外圍哪一側(cè)邊框可見(jiàn)與border配合使用 border|box四周(默認(rèn))、 void全無(wú)、above上、below下 hsides上下、lhs左、rhs右、vsides左右 rules 指定表格內(nèi)部分界線邊框，必須與border配合使用 all

42、全部(默認(rèn))、none|groups全無(wú)、rows行框、cols列框 cellspacing 指定單元格與單元格邊框之間的空白間距 cellpadding 指定單元格內(nèi)容與邊框的空白間距 CSS有等價(jià)屬性，考慮瀏覽器支持仍建議使用 bgcolor 指定背景顏色 background 指定背景圖片 align 指定表格在瀏覽器中的水平對(duì)齊方式注意：不接受或者說(shuō)不繼承外部父標(biāo)記設(shè)置的樣式屬性，必須獨(dú)立設(shè)置。 633.7.3 標(biāo)題標(biāo)記3.7.4 行標(biāo)記 表格標(biāo)題 定義表格前的大標(biāo)題，必須在內(nèi)第一個(gè)行標(biāo)記之前且只能有一個(gè)，默認(rèn)在表格之前居中顯示。 一行內(nèi)容 標(biāo)記定義表格中的一行，可繼承使用設(shè)置的屬性，

43、也可自己?jiǎn)为?dú)設(shè)置覆蓋屬性。align 指定本行內(nèi)所有單元格文本的水平對(duì)齊方式 left(默認(rèn))、right、center、justify兩端、char按字符對(duì)齊valign 指定本行所有單元格中文本的垂直對(duì)齊方式 top、middle(默認(rèn))、bottom、baseline按基線對(duì)齊bgcolor 指定本行的背景顏色char=字符 當(dāng)align=char時(shí)指定對(duì)齊的字符charoff 當(dāng)align=char時(shí)指定第一個(gè)對(duì)齊字符的偏移量注意：屬性對(duì)本行內(nèi)的所有單元格有效，XHTML不贊成使用align、bgcolor屬性。 643.7.5 單元格標(biāo)記 1、列標(biāo)記 單元格內(nèi)容 標(biāo)記定義行的數(shù)據(jù)單元

44、格，繼承屬性可覆蓋。 colspan 指定該單元格可橫跨的列數(shù) rowspan指定該單元格可豎跨的行數(shù) align 水平對(duì)齊(char=字符、charoff)覆蓋父屬性 valign 垂直對(duì)齊 abbr 指定單元格中內(nèi)容的縮寫(xiě)版本 axis 為單元格定義一個(gè)(類型)名字category_names headers=header_cells_id空格分隔的表頭單元格ID列表 用于將表頭和單元格聯(lián)系起來(lái) scope 規(guī)定此單元格是否為可以將單元格與表頭聯(lián)系 xhtml不贊成bgcolor、height、width及nowrap(環(huán)繞)屬性 如果某個(gè)單元格內(nèi)沒(méi)有文本數(shù)據(jù)內(nèi)容，通常該單元格也不會(huì)顯示，

45、為保證表格視覺(jué)上的完整性，最好使用空格實(shí)體字符：。652行列標(biāo)題標(biāo)記 行或列標(biāo)題 標(biāo)記一般用于第一行定義每列的列標(biāo)題，或用于每行的第一列定義該行的行標(biāo)題。 標(biāo)記與標(biāo)記的屬性、用法完全相同，區(qū)別是標(biāo)記默認(rèn)普通文本左對(duì)齊顯示，而標(biāo)記默認(rèn)以粗體居中顯示。66【例h3-22.html】使用行、列標(biāo)題 使用行、列標(biāo)題 使用行、列標(biāo)題 網(wǎng)頁(yè)設(shè)計(jì) 數(shù)據(jù)庫(kù)開(kāi)發(fā) 程序設(shè)計(jì) 清華出版社 Dreamweaver Access C+ 北大出版社 FrontPage SQL SERVER C# 中內(nèi)聯(lián)CSS屬性style=text-align:center對(duì)表格內(nèi)所有單元格都有效，但對(duì)表格本身無(wú)效，可使用CSS布局設(shè)置

46、。這里用傳統(tǒng)align=center設(shè)置表格在瀏覽器中的對(duì)齊方式。 去掉width=500則采用默認(rèn)寬度。 67【例h3-23.html】表格邊框及背景 設(shè)置表格邊框與背景 Dreamweaver Access C+ FrontPage SQL SERVER C# 改為：rules=cols68【例h3-24.html】單元格間距及內(nèi)容邊距 設(shè)置單元格間距與邊距 Dreamweaver Access C+ FrontPage SQL SERVER C# Dreamweaver Access C+ FrontPage SQL SERVER C# cellpaddingcellspacing69【

47、例h3-25.html】合并單元格跨行、跨列 合并單元格 第一學(xué)期 第二學(xué)期 數(shù)學(xué) 科學(xué) 英語(yǔ) 數(shù)學(xué) 科學(xué) 英語(yǔ) 98 95 80 95 87 88 螺母 螺栓 錘子 第一季度 一月 2500 1000 1240 二月 3000 2500 4000 三月 3200 1000 2400 703.7.6 表格結(jié)構(gòu)劃分標(biāo)記、 可對(duì)表格結(jié)構(gòu)進(jìn)行劃分，對(duì)內(nèi)容較多的表格實(shí)現(xiàn)表格頭和頁(yè)腳的固定，只對(duì)表格正文滾動(dòng)、或在分頁(yè)打印時(shí)能將表表頭和頁(yè)腳分別打印在每張頁(yè)面上。 定義表格頭，必須包含標(biāo)簽，一般包含表格大標(biāo)題和第一行列標(biāo)題。 定義表格頁(yè)腳可不包含，一般是合計(jì)行或腳注 定義一段表格主體只包含標(biāo)簽，可將多行數(shù)據(jù)

48、劃分為一組。 、標(biāo)記還很少被瀏覽器支持，目前僅IE5.0或更高版本可用。 注意：表格結(jié)構(gòu)劃分標(biāo)記必須在內(nèi)使用，一個(gè)表格只能有一個(gè)、一個(gè)、可以有多個(gè)。三種標(biāo)記不能相互交叉，且必須按、順序全部使用三種標(biāo)記。之所以在之前是為了瀏覽器能在收到全部數(shù)據(jù)之前即可顯示頁(yè)腳。 71【例h3-26.html】使用結(jié)構(gòu)劃分 設(shè)置表格結(jié)構(gòu) 表格結(jié)構(gòu)劃分 網(wǎng)頁(yè)設(shè)計(jì) 數(shù)據(jù)庫(kù)開(kāi)發(fā) 程序設(shè)計(jì) 頁(yè)腳合計(jì)： 合計(jì)1 合計(jì)2 合計(jì)3 72【例h3-26.html】使用結(jié)構(gòu)劃分 清華出版社 DreamweaverAccessC+ 北大出版社 FrontPage SQL SERVER C# 733.8 表格與DIV頁(yè)面布局3.8.1 布局示例一 傳統(tǒng)網(wǎng)頁(yè)布局大都采用表格進(jìn)行布局，假設(shè)某網(wǎng)站采用