《Web數(shù)據(jù)庫(kù)技術(shù)》-第3章

1、1第第3章章 HTML語(yǔ)言基礎(chǔ)語(yǔ)言基礎(chǔ)本章學(xué)習(xí)要點(diǎn)本章學(xué)習(xí)要點(diǎn) l HTML語(yǔ)言及其基本語(yǔ)法l 構(gòu)成網(wǎng)頁(yè)的基本元素l 超文本鏈接指針l 表格和分框2 超文本標(biāo)記語(yǔ)言HTML（Hyper Text Markup Language）是一種用來(lái)制作超文本文檔的簡(jiǎn)單標(biāo)記語(yǔ)言。用HTML編寫的超文本文檔稱為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)平臺(tái)（如Unix，Windows等）。 HTML語(yǔ)言是通過(guò)利用各種標(biāo)記（tags）來(lái)標(biāo)識(shí)文檔的結(jié)構(gòu)以及標(biāo)識(shí)超鏈接（Hyperlink）信息的。雖然HTML語(yǔ)言描述了文檔的結(jié)構(gòu)格式，但并不能精確地定義文檔信息應(yīng)如何顯示和排列，而只是建議Web瀏覽器（如Mosiac，N

2、etscape等）應(yīng)該如何顯示和排列這些信息，最終在用戶面前的顯示結(jié)果取決于Web瀏覽器本身的顯示風(fēng)格及其對(duì)標(biāo)記的解釋能力。這就是為什么同一文檔在不同的瀏覽器中展示的效果會(huì)不一樣的原因。 33.1 網(wǎng)頁(yè)設(shè)計(jì)基本原則 在設(shè)計(jì)網(wǎng)頁(yè)的過(guò)程中，要了解以下基本設(shè)計(jì)原則：（1）正確分析網(wǎng)頁(yè)用戶的需要。 （2）網(wǎng)頁(yè)下載時(shí)間不宜過(guò)長(zhǎng)。 （3）網(wǎng)頁(yè)的設(shè)計(jì)要做到在不同的環(huán)境下都能瀏覽。 （4）注意網(wǎng)頁(yè)中的圖形設(shè)計(jì)。 （5）定期更新網(wǎng)頁(yè)內(nèi)容。 （6）注意網(wǎng)站內(nèi)容的搭配。 （7）考慮不支持某些功能的瀏覽器。 （8）對(duì)多媒體文件實(shí)施有限的限制。 43.2 HTML語(yǔ)言的結(jié)構(gòu) 從結(jié)構(gòu)上講，HTML文件由元素（elemen

3、t）組成。每一個(gè)元素都有名稱和可選擇的屬性，元素的名稱和屬性都在起始標(biāo)記內(nèi)標(biāo)明。例如體元素（body）： 起始起始標(biāo)記標(biāo)記開(kāi)始開(kāi)始 元素元素名稱名稱 屬性名屬性名 屬性值屬性值 起始起始標(biāo)記標(biāo)記結(jié)束結(jié)束 5一個(gè)HTML文件應(yīng)具有下面的結(jié)構(gòu)： html文件開(kāi)始 文件頭開(kāi)始標(biāo)題 文件頭結(jié)束 文件體開(kāi)始文件體 文件體結(jié)束html文件結(jié)束6一般來(lái)講，HTML的元素有下列3種表示方法：l 文件或超文本。l 文本或超文本。l 。 第三種寫法僅用于一些特殊的元素，例如分段元素P，它僅僅通知WWW瀏覽器在此處分段，因而不需要界定作用范圍， 所以它沒(méi)有結(jié)尾標(biāo)記。73.3 構(gòu)成網(wǎng)頁(yè)的基本元素 題目題目(title

4、) title元素是文件頭中惟一一個(gè)必須出現(xiàn)的元素，它也只能出現(xiàn)在文件頭中。title元素的格式為： 題目 題目標(biāo)明該HTML文件的題目，是對(duì)文件內(nèi)容的概括。 8標(biāo)題（標(biāo)題（hn) 標(biāo)題標(biāo)簽用于顯示HTML文件的各級(jí)標(biāo)題，格式為:標(biāo)題內(nèi)容 其中n為16之間的整數(shù)，其值越大，字越小。 9排版標(biāo)簽分段排版標(biāo)簽分段 HTML的瀏覽器是基于窗口的，用戶可以隨時(shí)改變顯示區(qū)的大小，所以HTML將多個(gè)空格以及回車看成一個(gè)空格，這是和絕大多數(shù)字處理器不同的。HTML的分段依賴于分段元素。 也有多種屬性，比較常用的屬性是： align# # 可以是left、center、right，其含義同上文。 例如： 段落

5、居中10清單清單List清單用于列舉事實(shí)。常用的清單有3種格式，即無(wú)序清單（unordered list），有序清單（ordered list）和定義清單（definition list）。例如：今天明天輸出為：今天明天例如：今天明天輸出為：1. 今天2. 明天3定義清單定義清單 例如：條目1條目1的定義條目2條目2的定義輸出為： 條目1條目1的定義條目2條目2的定義2 2有序清單有序清單 ol1 1無(wú)序清單無(wú)序清單 ul11居中居中 很多元素都有對(duì)齊方式屬性，如hn、p等。也可以直接用居中標(biāo)記。以下代碼的輸出結(jié)果如圖3-2所示。今天的天氣真好！123.4超文本鏈接指針超文本鏈接指針 使用超文

6、本鏈接指針可以使順序存放的文件具有一定程度上隨機(jī)訪問(wèn)的能力，更加符合人的思維方式。人的思維是跳躍的、交叉的，而每一個(gè)鏈接指針正好代表了作者或者讀者的思維跳躍。 一個(gè)超文本鏈接指針由兩部分組成：一是被指向的目標(biāo)，它可以是同一文件的另一部分，也可以是世界另一端的一個(gè)文件，還可以是動(dòng)畫或音樂(lè)；另一部分是指向目標(biāo)的鏈接指針。13統(tǒng)一資源定位器統(tǒng)一資源定位器URLURL 統(tǒng)一資源定位器URL（Uiform Resource Locator）是文件名的擴(kuò)展。在Internet上，各個(gè)網(wǎng)絡(luò)、各個(gè)主機(jī)的操作系統(tǒng)可能不一樣，因此必須指定訪問(wèn)該文件的方法。一個(gè)URL包括了以上所有的信息，它的構(gòu)成為： protoc

7、ol : / :port/directory/filename 其中，protocol是訪問(wèn)該資源所采用的協(xié)議， 一個(gè)典型的URL為：http:/14指向一個(gè)目標(biāo)指向一個(gè)目標(biāo) a 在HTML文件中可用鏈接指針指向一個(gè)目標(biāo)。其基本格式為： 字符串 href屬性中的url是被指向的目標(biāo)，隨后的“字符串”在HTML文件中充當(dāng)指針的角色，它一般顯示為藍(lán)色，也可以定義成其他顏色。當(dāng)用戶用鼠標(biāo)點(diǎn)擊這個(gè)字符串時(shí)，瀏覽器就會(huì)將url處的資源顯示在屏幕上。例如：中國(guó)教育和科研計(jì)算機(jī)網(wǎng)15標(biāo)記一個(gè)目標(biāo)標(biāo)記一個(gè)目標(biāo) 對(duì)于同一文件的不同部分，標(biāo)識(shí)目標(biāo)的方法實(shí)現(xiàn): textname屬性將放置該標(biāo)

8、記的地方標(biāo)記為“name”，name是一個(gè)全文惟一的標(biāo)記串，text部分可有可無(wú)。做好標(biāo)記后，可以用下列方法來(lái)指向它： text 其中，url是放置標(biāo)記的HTML文件，#name是標(biāo)記名。對(duì)于同一個(gè)文件，可以寫為： text 這時(shí)就可以點(diǎn)擊“text”跳轉(zhuǎn)到標(biāo)記名為name的部分了。16目標(biāo)窗口目標(biāo)窗口 如果希望被指向的目標(biāo)在一個(gè)新的窗口中顯示，可以使用target屬性來(lái)修飾鏈接指針元素。如： text 可將url代表的資源顯示在一個(gè)新的窗口中，該窗口的名字叫window-name，它可以是本窗口（_self）、父窗口（_parent）、新窗口（_blank）及整個(gè)瀏覽器窗口（_top）。 1

9、7圖像鏈接指針圖像鏈接指針 圖像也可以做為鏈接指針。格式為： 可以看出，上例中用取代了鏈接指針中“text”的位置。是圖像元素，它表明顯示url代表的圖像文件。 下面是一個(gè)簡(jiǎn)單的圖像鏈接指針：中國(guó)教育和科研計(jì)算機(jī)網(wǎng) 18圖像地圖（圖像地圖（image map） 圖像地圖不僅需要在HTML文件中說(shuō)明，它還需要一個(gè)后綴為.map的文件，用來(lái)說(shuō)明圖像分區(qū)及其指向的URL的信息。在.map文件中說(shuō)明分區(qū)信息的格式如下：recturl 左上角坐標(biāo) 右下角坐標(biāo)polyurl 各頂點(diǎn)坐標(biāo)circle url 直徑兩端點(diǎn)坐標(biāo)default url19下面是一個(gè)完整的說(shuō)明文件：default：http:/rec

10、t：http:/ 140,20 280,60poly：http:/ 180,80 200,140circle：http:/ 80,140 80,100 圖像地圖需要一個(gè)特殊的處理程序imagemap，imagemap放在/cgi-bin 中。在HTML 文件中引用圖像地圖的格式為：203.5 版面風(fēng)格控制版面風(fēng)格控制 字號(hào)字號(hào) HTML有七種字號(hào)，1號(hào)最小，7號(hào)最大。默認(rèn)字號(hào)為3，可以用來(lái)設(shè)置新的字號(hào)。 21字體風(fēng)格字體風(fēng)格 字體風(fēng)格分為物理風(fēng)格和邏輯風(fēng)格。物理風(fēng)格直接指定字體，如字體有黑體，斜體。邏輯風(fēng)格用于指定文本的作用，如強(qiáng)調(diào)等。 格式為：標(biāo)標(biāo) 簽簽語(yǔ)法說(shuō)明語(yǔ)法說(shuō)明 /b/將字體格式設(shè)置

11、成黑體將字體格式設(shè)置成黑體/ /斜體斜體/ /下劃線下劃線 /tt/將字體格式設(shè)置成打字機(jī)體將字體格式設(shè)置成打字機(jī)體/ /文字中間畫刪除線文字中間畫刪除線 /sup/將字體格式設(shè)置成上標(biāo)將字體格式設(shè)置成上標(biāo)/ /下標(biāo)下標(biāo) blink文字閃爍效果文字閃爍效果, , 閃爍頻率為閃爍頻率為1 1秒鐘一次秒鐘一次 /small/將文字相對(duì)縮小將文字相對(duì)縮小/ /放大顯示放大顯示 /em/設(shè)置字體為強(qiáng)調(diào)設(shè)置字體為強(qiáng)調(diào)/ /加重文本顯示加重文本顯示 /code/一個(gè)一個(gè)HTMLHTML元素的示例文字元素的示例文字/ /輸出示例中文字輸出示例中文字 /kbd/一個(gè)鍵盤按鍵的文字一個(gè)鍵盤按鍵的文字/ /輸出引

12、用方式的字體輸出引用方式的字體 /var/定義變量或值的文字定義變量或值的文字/ /定義字體定義字體22橫線（橫線（hr） 橫線，一般用于分隔同一文本的不同部分。在窗口中劃一條橫線非常簡(jiǎn)單，只要寫一個(gè)即可。橫線的寬度用指定，n是線寬，單位是像素。例：。指定橫線長(zhǎng)度，既可以指定絕對(duì)線長(zhǎng)，也可以指定橫線長(zhǎng)度占窗口寬度的百分比。例、。 橫線的位置用指定，其中的#是left或right之一。left表示左端與左邊界對(duì)齊，right是右端與右邊界對(duì)齊。默認(rèn)時(shí)，橫線出現(xiàn)在窗口中央。 23行間圖像行間圖像 行間圖像可使網(wǎng)頁(yè)更加漂亮，但是過(guò)大的圖像會(huì)導(dǎo)致網(wǎng)絡(luò)通信量急劇增大，延長(zhǎng)訪問(wèn)時(shí)間。所以在主頁(yè)上不宜采用很

13、大的圖像。如果確實(shí)需要一些大圖像，最好在主頁(yè)中用一個(gè)縮小的圖像指向原圖，并標(biāo)明該圖的大小，這樣主頁(yè)可快速地被訪問(wèn)，訪問(wèn)者可選擇看還是不看那些圖像。 圖像的基本格式為： 或24分行分行和禁止分行和禁止分行表示在此處分行，將通知瀏覽器，其中的內(nèi)容在一行內(nèi)顯示，若一行內(nèi)顯示不了，則超出部分將被裁剪掉。 中的clear屬性標(biāo)明下一行的情況，如 clear=left，表示下一行從左邊界處開(kāi)始。#可以是left、right、all之一。 25背影和文本顏色背影和文本顏色 窗口背景可以用下列方法指定： bgcolor：背景顏色。 text：文本顏色。 link：鏈接指針顏色。 alink：活動(dòng)的鏈接指針顏色

14、。 vlink：已訪問(wèn)過(guò)的鏈接指針顏色。例如： 大紅背景色。注意，此時(shí)體元素必須寫完整，并用結(jié)束。26轉(zhuǎn)義字符與特殊字符轉(zhuǎn)義字符與特殊字符 HTML中及&字符有特殊含義（前兩個(gè)字符用于鏈接簽，&用于轉(zhuǎn)義），不能直接使用。要使用這3個(gè)字符，必須用它們的轉(zhuǎn)義序列。l & 的轉(zhuǎn)義序列為 &s 或 &。l 的轉(zhuǎn)義序列為 >或 >。 前者為字符轉(zhuǎn)義序列，后者為數(shù)字轉(zhuǎn)義序列。 例如： <font>顯示為。若直接寫成則會(huì)被認(rèn)為是一個(gè)鏈接簽。273.6 表格（表格（table） 表格的基本結(jié)構(gòu)如下：表格的基本結(jié)構(gòu)如下： 一個(gè)表由開(kāi)始，結(jié)束，表的內(nèi)容由、和定義。說(shuō)明表的一個(gè)行，表

15、有多少行就有多少個(gè)；說(shuō)明表的列數(shù)和相應(yīng)欄目的名稱，有多少個(gè)欄就有多少個(gè)；則填充由和組成的表格。border屬性用來(lái)說(shuō)明是否用表格線分開(kāi)。 28有通欄的表有通欄的表 有橫向通欄的表用屬性說(shuō)明。其中，colspan表示橫向欄距，#代表通欄占據(jù)的網(wǎng)格數(shù)，它是一個(gè)小于表的橫向網(wǎng)格數(shù)的整數(shù)。 有縱向通欄的表用屬性說(shuō)明。其中，rowspan表示縱向欄距，#表示通欄占據(jù)的網(wǎng)格數(shù)，應(yīng)小于縱向網(wǎng)絡(luò)數(shù)。需要說(shuō)明的是有縱向通欄的表，每一行必須用明確表示一橫向欄目結(jié)束,這是和表的基本形式不同的。 29表中文本的輸出表中文本的輸出 文本與表框的距離用cellpadding=#說(shuō)明。 表格的寬度大于其中的文本寬度時(shí)，文本

16、在其中的輸出位置用align=#說(shuō)明。#是left、center和right三者之一，分別表示左對(duì)齊、居中和右對(duì)齊。align屬性可修飾、和鏈接簽。 表格的高度大于其中文本的高度時(shí)，可以用valign=#說(shuō)明文本在其中的位置。#是top、middle、bottom、baseline四者之一。分別表示上對(duì)齊、文本中線與表格中線對(duì)齊、下對(duì)齊、文本基線與表格中線對(duì)齊。特別注意的是基線（baseine）對(duì)齊方式，它使得文本出現(xiàn)在網(wǎng)格的上方而不是想像中的下半部。同樣，valign可以修飾、和中的任何一個(gè)。 30浮動(dòng)表格浮動(dòng)表格 所謂浮動(dòng)表格是指表與文件中內(nèi)容對(duì)齊時(shí)，若在現(xiàn)在位置上不能滿足其對(duì)齊方式，表格會(huì)上下移動(dòng)，即“擠開(kāi)”一些內(nèi)容，直到滿足其對(duì)齊要求。 浮動(dòng)屬性一般由align=left或right指定。 313.7 分框（分框（frame） 分框?qū)⑼粸g覽器的窗口（主框架：frameset定義）分成多個(gè)區(qū)域（子框：frame定義），每個(gè)區(qū)域可以單獨(dú)顯示一個(gè)HTML文件，各個(gè)區(qū)域也可相關(guān)連地顯示某一個(gè)內(nèi)容。分框的基本結(jié)構(gòu)如下： 323.8 其他標(biāo)簽其他標(biāo)簽其他標(biāo)簽說(shuō)明如下表所示。語(yǔ)法格式： 33標(biāo) 簽語(yǔ)法說(shuō)明注釋功能，不顯示在網(wǎng)頁(yè)上bgsoundsrc=# 增加背景音樂(lè) #=wav 文件所在的URLloop=# 設(shè)定循環(huán)次數(shù) #=循環(huán)次數(shù)marque