標題標題  顯示論壇會員列表名單  搜索論壇搜索  HelpHelp
  注冊注冊  登入登入
ASP教學區
 DoReMe : ASP教學區
主題 話題: 第五章 初級HTML 回復發表新主題
作者
貼子內容 << Prev Topic下一個主題 >>
koioggo
Groupie
Groupie


加入: 2004/5月/22
Online Status: Offline
回復: 58
Posted: 2004/11月/16 12:12下午 | IP記錄 引用 koioggo

閱讀本章以後,你將對應用於環球網上的超級文本標記語言(HTML)有一個基本的瞭解。你將學習怎樣在你自己的網頁上使用顏色, 格式文本,超連接和圖像。

如果你已經熟悉HTML,你只需要粗略瀏覽本章,或乾脆跳過本章直接進入本書的下一部分。如果你對HTML掌握不牢靠,你就要仔 細閱讀本部分。牢固地掌握本章及下一章所講述的內容對於學習Active Server Pages編程是非常重要的。

在本章中,你將會學到創建一個簡單的網頁所需的全部內容。在閱讀的過程中,應該經常實驗本章所講述的技術。時時刻刻去使用一種新 的計算機語言是學習它的最有效的方法。

什麼是HTML文件?

HTML文件是被網絡瀏覽器讀取,產生網頁的文件。從本質上來說,環球網只是一個由HTML文件及一系列傳輸協議所組成的集合。 這些HTML文件存儲在分佈於世界各地的計算機的硬盤上,而傳輸協議能把這些文件從一台計算機傳輸到另一台計算機。

網絡瀏覽器,例如Netscape Navigator或Microsoft Internet explorer,能夠解釋HTML文件來顯示網頁,這是網絡瀏覽器的主要作用。當你使用瀏覽器在環球網上瀏覽網頁時,瀏覽器軟 件就自動完成HTML文件到網頁的轉換。

來查看一個HTML文件的例子。打開你喜愛的網絡瀏覽器,在瀏覽器的地址輸入框內敲入:http://www.aspsite.com/hello.cfm來進入Active Server Pages的網點(你的計算機應該已連上了Internet)。當在屏幕上顯示了此網頁後,從網絡瀏覽器的菜單條上選擇View Source命令。此時屏幕上就會彈出一個新的窗口並顯示一些古怪的文字。你所看到的這些文字就是HTML文件。

 

Back to Top 查看 koioggo's 資料 搜索其他貼子 koioggo 訪問 koioggo's
 
koioggo
Groupie
Groupie


加入: 2004/5月/22
Online Status: Offline
回復: 58
Posted: 2004/11月/16 12:12下午 | IP記錄 引用 koioggo

介紹HTML標識符

HTML文件與其他文本文件不同,因為HTML文件中包含了一種稱為HTML標識符的特殊符號。如果你仔細查看你剛剛用View Source命令獲得的HTML文件,你不難發現一些用一對尖角形括弧括起來的文字(<and>)。這就是HTML 標識符通常的特徵。下面是一個HTML標識符以及由它所修飾的文本的例子:

<B> This is bold</B>

在此例中,<B>是用來建立粗體文本的標識符。如果你在<B>和</B>標識符中敲入一些 文本,這些文本在瀏覽器上顯示出來就是粗體的。這也說明了HTML標識符的另一個基本特徵:大部分HTML標識符是成對出現的, 並且像一個容器的作用一樣。在本例中,標識符〈B>告訴網絡瀏覽器何時用粗體來顯示文本,標識符</B>告訴 瀏覽器何時停止用粗體來顯示文本。由於它們是這樣起作用的,所以<B>被稱為容器標識符。

注意

不同的瀏覽器可能對某些特殊的HTML標識符用不同的方法來解釋,而有時就無法解釋。例如有些瀏覽器就不能解釋<FONT >標識符。詳細信息可查看下面的章節「HTML標準」。

 

 

下面是一個稍微複雜點的HTML標識符例子:

<FONT COLOR=」RED」> I am red </FONT>

此句被網絡瀏覽器解釋時,I am red將以紅色顯示出來。〈FONT>標識符的COLOR屬性告訴瀏覽器用何種顏色來顯示文本。此標識符又說明了HTML 標識符另一個通常的特徵:大部分HTML標識符都有一個或多個屬性,來決定標識符的行為。COLOR屬性只是<FONT& gt;標識符的許多屬性之一,下面的例子使用了另一個屬性:

<FONT COLOR="GREEN" FACE="ARIAL"> My name is Arial and I am green. </FONT>

在此例中,這個句子將以Arial字體,用綠色顯示出來。COLOR和FACE都是<FONT>標識符的屬性,「G REEN」和「ARIAL」是這兩個屬性的值。COLOR屬性決定了文本以何種顏色顯示出來,而FACE屬性決定了文本顯示的字 體。

屬性在HTML標識符中出現的順序是不重要的。通常你可以將屬性值用引號擴起來也可以不擴起來。因此在網絡瀏覽器上下面的兩個句 子顯示出來的效果是一樣:

<FONT COLOR="GREEN" FACE="ARIAL"> My name is Arial and I am green. </FONT>

<FONT COLOR=GREEN FACE=ARIAL> My name is Arial and I am green. </FONT>

當然,你最好養成將屬性值用引號擴起來的習慣,因為在某些個別情況下,擴與不擴是有區別的。

注意

什麼時候給屬性值加與不加引號會有區別,有下面兩種情況:

1.當您想在屬性值中包含空格時候,你必須用引號括起來,如下面的例子:

<INPUT TYPE =SUBMIT VALUE=Submit Me!>

如果你想在這個按鈕上顯示出Submit Me!的字樣而不是Submit,那麼你就需要用引號將此屬性值括起來:

<INPUT TYPE =SUBMIT VALUE=」Submit Me!」>

2.這種情況涉及到ASP腳本標識符可能產生的歧義。例如,下面看似正確的語句就可能被ASP誤解:

<HR WIDTH=100%>

問題在於符號%>在ASP中有特殊的含義,符號%>在ASP中是一個用於結束服務器端腳本的標識符。只要用引號將屬 性值擴起來,問題就解決了:

<HR WIDTH=」100%」>

 

HTML標識符是不區別大小寫的,這意味著你在輸入HTML標識符時不用管插入的字符是大寫的還是小寫的,下面的例子與上面的語 句在瀏覽器上顯示的效果是完全一樣的:

<FoNt FaCe=」Arial」 cOLor=」GREeN」> My name is Arial and I am green </fOnT>

當然,處於HTML標識符之間的文字大小寫是有區別的,如果你全敲入大寫MY NAME IS ARIAL AND I AM GREEN. 瀏覽器將會以大寫顯示這些文字。

在HTML中,一個空格與兩個或多個空格的效果是一樣的,網絡瀏覽器忽略HTML文件中的多餘空格,這對HTML初學者來說是一 個較難掌握的規則。請看下面的HTML語句:

I am compact </B>

<B> I am spread all the way across the page </B>

第二個句子包括很多空格,但在網絡瀏覽器上顯示時,兩個句子中多餘的空格都會被忽略掉,變為:

I am compact I am spread all the way across the page

圖5.1說明了在瀏覽器上顯示的結果。

當然,一個空格與兩個或多個空格具有相同的效果並不意味著空格是不重要的。你可以在前面那個句子中再敲入幾個空格,使它變為如下 HTML的語句:

<B> I a m com pact </B>

當它在瀏覽器上顯示時,你會看到圖5.2所示。

注意我們新加入的這幾個空格,他們將會在你所希望的地方顯示出來,如果你在這些空格後再加入更多的空格,那麼,這些多餘的空格將 會被忽略掉。

網絡瀏覽器也會忽略HTML文件中的回車鍵及製表鍵,因此你可以在HTML文件中加入任意多的空行及製表符,瀏覽器將不會顯示它 們。但是,你還是應當避免使用製表符,因為在高版本的HTML中,製表符可能被賦予特殊的含義。

 

 

圖5.1 網絡瀏覽器忽略HTML文件中的多餘空格

 

 

圖5.2 網絡瀏覽器並不忽略HTML文件中的所有空格

網絡瀏覽器忽略多餘的空格鍵及回車鍵的特性對於建立可讀性強的HTML文件是很有用的。您可以自由的在你的文件中使用空格和空行 來使得你的文檔簡明易讀。

Back to Top 查看 koioggo's 資料 搜索其他貼子 koioggo 訪問 koioggo's
 
koioggo
Groupie
Groupie


加入: 2004/5月/22
Online Status: Offline
回復: 58
Posted: 2004/11月/16 12:13下午 | IP記錄 引用 koioggo

HTML標準

在世界的任何一個角落,每個網絡瀏覽器都以同一種方式顯示HTML文件。理想情況下,任何一台電腦上的任何一個瀏覽器軟件對每個 HTML標識符應當以相同的方式解釋,並有相同的效果。然而,我們的現實世界卻存在三個缺陷。

首先,HTML是一個不斷發展的標準。隨著時間的推移,越來越多的標識符被加入到了HTML規範中。例如<FONT> ;標識符就是一個新的標識符。舊版的瀏覽器不能識別新的標識符,因而忽略它們。

當你創建你自己的主頁時,你不能希望世界上的每個人都在使用與最新的規範兼容的網絡瀏覽器。例如,Microsoft在他們最初 版本的Windows 95中附帶的瀏覽器軟件(Microsoft Internet Explorer 2.0)就不能正確識別所有包含在最新規範中的標識符。使用這種瀏覽器的人(這樣的人有不少)就不能從網絡上獲得更多的樂趣。當 你設計你自己的主頁時,你應當時時為這些使用舊版本瀏覽器的不幸的人們著想。

注意

World Wide Web Consortium (W3C) 是保存HTML標準的機構。在寫這本書時,發佈的HTML最新標準是3.2。HTML發展非常快,因此很快一個新版本的HTML 就要出台了。要查詢最新版本的HTML規範,請瀏覽W3C的主頁: http://www.w3.org

即使每個人都有一個能對最新的HTML規範正確解釋的瀏覽器,問題還是存在的。Microsoft和Netscape一直忽略網 絡標準,他們都在自己新版的網絡瀏覽器中加入了它們各自的HTML標識符。

他們的動機並不是惡毒的,Microsoft和Netscape都想佔有瀏覽器市場,而能控制市場的瀏覽器軟件將會是那些能解釋 更多標識符的軟件。這種控制瀏覽器市場的競爭所造成的後果就是瀏覽器軟件的特殊化及與HTML規範不合拍。某些HTML標識符只 能在Netscape Navigator上才能執行,而另一些只在Internet Explorer才能起作用。這種情況對於設計網頁的人來說是很頭疼的。

最後,既使是世界上的每個人都使用最新版本的Netscape Navigator而不用其他軟件來瀏覽網頁,還是有問題存在的。每台計算機是獨立,它們運行不同的操作系統,具有不同的屏幕顯 示特性。如果你使用同一個版本的軟件來瀏覽同一個主頁,但一次是在UNIX機器上,而另一次是在Windows機器上,你就會發 現一些顯示上的細微差別。比如,文本的背景顏色在兩台機器上顯示出來是不同的,這種差別是由兩種操作系統用不同的方法畫屏幕象素 所引起的,是不可避免的。

更重大的差別是不同機器上的顯示模式。理論上來說,網頁在任何尺寸的屏幕上顯示出來都應該是一樣,但在實際中,如果你的計算機顯 示器比我的分辨率高,你和我就會看到主頁不同的顯示效果。讓我們來看看世界上各種不同形式的顯示器,一些人使用大尺寸的三十英吋 顯示器來瀏覽主頁,而另一些人用手持式計算機的LCD屏幕來瀏覽同一主頁,適合這種屏幕的主頁肯定不會適合那種屏幕。

更進一步說,計算機顯示器常常以不同的方式來顯示色彩,一些顯示器只能顯示256種色彩,而另一些則能顯示三百萬種之多。而且人 們也常常調整它們的顯示器來顯示同一顏色的濃淡程度。既使你有一台和我一樣的顯示器,我們對他們的調整也會不同。另外,蘋果電腦 顯示色彩的方式與運行Windows的電腦很不一樣。

因此,以下三種因素導致了在所有計算機上使用各種瀏覽器軟件會對網頁有不同的顯示效果:

■ 低版本的瀏覽器軟件不能解釋所有的最新HTML規範中的標識符。

■ Netscape和Microsoft在他們各自的瀏覽器軟件中引入了專門的標識符。

■ 使用不同操作系統及顯示器的計算機以不同的方式來顯示網頁。

面對這些問題,一個優秀的網頁設計者應該如何去做?我們可以設想,如果你花費了大量的時間和精力來設計你的網頁,一定希望世界上 每個人都以你所預料的方式來瀏覽它們。但是對於上訴的種種問題,你將怎樣保證這一點呢?答案是簡單的,那就是你無法做到。

許多狂熱的正統主義者拒絕使用那些不能被任何一個早版本的網絡瀏覽器所識別的HTML標識符,他們拒絕使用任何一個非HTML規 範的標識符,包括所有Netscape和Microsoft自己的獨家標識符。雖然這種設計網頁的方法能給你一種控制大局的心理 感受,但這種方法使網頁變得枯燥乏味。

對於使用何種HTML標識符並沒有一個簡單的答案。你應當考慮你的網頁會被哪些人遊覽以及他們最可能會使用那種瀏覽器,你也應當 確定那些HTML標識符是你必須使用的。在閱讀隨後的幾章之後你會對如何使用各種不同的HTML標識符有一個更深的瞭解。

通常情況下,設計一個能被盡可能多的瀏覽器識別的網頁是設計的基本原則。現在最流行的瀏覽器軟件是Netscape Navigator,Internet Explorer及America Online browser。如果你設計的網頁在這些瀏覽器的當前版本上能正確顯示,那麼你的網頁是較好的。

大部分顯示器在一行上至少有640個像素,一些網頁為這些種分辨率做了優化。而另一些網頁非要在一行至少有800個像素的分辨率 的屏幕上才能正確顯示。因此你必須再一次考慮你的觀眾,估計他們最可能使用何種類型的顯示器。

Back to Top 查看 koioggo's 資料 搜索其他貼子 koioggo 訪問 koioggo's
 
koioggo
Groupie
Groupie


加入: 2004/5月/22
Online Status: Offline
回復: 58
Posted: 2004/11月/16 12:15下午 | IP記錄 引用 koioggo

創建基本的網頁

學習怎樣用HTML創建網頁的最好方法就是從一個非常簡單的例子開始。下面所示的上一個最簡單的網頁所需的最少代碼:

<TITLE> Minimal Web Page </TITLE>

Hello World!

要創建這個HTML文件,運行Windows的Notepad程序,並輸入上述的兩行文本。輸入完畢後,以文件名Mypage. cfm將你輸入的內容保存到硬盤上。下一步,運行你喜愛的瀏覽器軟件(如Netscape Navigator或Internet Explorer)並在地址輸入框中輸入此文件的全路徑。例如,如果你將上述HTML文件保存在c:\mypage.cfm,你 應該在地址輸入框中輸入c:\mypage.cfm來將你的網頁調入瀏覽器。你將在屏幕上看到如圖5.3那樣。

 

圖5.3 你的第一個HTML文件

沒有人會懷疑這是一個枯燥乏味的網頁,它只顯示了一行文本:Hello World! 然而,創建它的過程卻說明了一些重要的方面。

首先,你應該注意到創建這個網頁和使用瀏覽器瀏覽這一頁時,你並不需要將你的計算機與Internet相連。網絡瀏覽器從你本機 的硬盤上讀取文件與從Internet上獲取文件是一樣的。瀏覽器對於你給它的任何文件都認真地進行解釋,而不管這些文件是從哪 裡來的。

注意

從技術上說,我們這個超小型的網頁還未完成,根據HTML規範參考,每個HTML文件都應當以<!DOCTYPE> 申明標識符開始,它表明了使用的HTML的版本。然而,這個HTML標識符對網頁並不起任何作用,大部分網頁製作者都將它忽略了 (因為懶惰)。關於使用這個標識符的更進一步的信息可參閱附錄D「快速HTML參考」。

第二,注意你為文件起的文件名:mypage.cfm,所有的HTML文件都具有相同的擴展名:.cfm或.cfml。本書對所 有的HTML文件使用.cfm的擴展名。你可以為你的HTML文件起任何你喜歡的名字。

第三,注意在HTML文件第一行出現的<TITLE>及</TITLE>。現在,查看你的網絡瀏覽器的 標題欄,你應當看見這樣的文字:Minimal Web Page。這就是你在標識符<TITLE>及</TITLE>中輸入的文本。<TITLE> ;標識符為你的網頁提供了一個標題,當人們為你的網頁放置書籤或是搜索引擎檢索你的網點(這兩個情況是常常發生的)時,就會用到 這個標題。

大部分HTML文件都比我們剛才討論的這個文件要複雜。請看下面這段語句:

<HTML>

<HEAD>

<TITLE> Less Minimal </TITLE>

</HEAD>

<BODY>

Hello World!

</BODY>

</HTML>

這個例子中有三個新的標識符:<HTML>,<HEAD>及<BODY>。如果你在瀏覽器 中顯示這個網頁,你將會觀察到和上例一樣的結果。那麼這三個新的標識符有什麼用呢?這些標識符的唯一用途就是對其他標識符起一個 容器的作用。

〈HTML>標識符說明了這個文件是一個HTML文件。這個標識符並不是必須的,但對於舊版的瀏覽器,你應當在文件頭部包 含<HTML>標識符,並在文件尾包含〈/HTML〉標識符來確保兼容性。

〈HEAD〉標識符包含了所有出現在你的HTML文件頭部的標識符。這些由〈HEAD〉包含的標識符並不由你的網絡瀏覽器顯示出 來。例如,由<TITLE>及</TITLE>標識符包含的文本只出現在網絡瀏覽器的標題欄上,而不在 網頁上出現。

〈BODY〉標識符表明了你的HTML文件的主體部分,所有需要在你的瀏覽器上顯示的文本及標識符都應該被放置在這裡。例如,H ello World! 被放置在此。因為你想讓這句話在網頁上顯示出來,你網頁的所有內容幾乎都由〈BODY〉及〈/BODY〉標識符包含。

在結束這一節之前,我們再討論一個標識符,它經常被用來在你的文件中加入註釋,這些註釋並不在主頁上顯示出來。例如,你可能想在 HTML文件的頭部加一行註釋來說明這個文件的作用,以便以後你能知道創建這個文件的理由。下面就是一個帶有註釋的文件的例子:

<!-- I am ignored by everybody -->

<HTML>

<HEAD>

<TITLE> Commented </TITLE>

</HEAD>

<BODY>

<!-- I am a three line comment which

explains that this document displays

the text 『Hello World!』 -->

Hello World!

</BODY>

</HTML>

句子I am ignored by everybody. 並不會在游器上顯示出來,因為它由註釋標識符〈!--and--〉包含著。

警告

不要把你私人的信息明明白白地寫在註釋中,因為人們可以通過瀏覽器的View Source命令看到它們。

你可以在HTML文件的任何部位加入註釋,一個註釋也可以分成許多行。當你的文件很大時,添加大量的註釋是一標明文件各部分功能 的好辦法,以便以後能記住你的文件究竟是幹什麼的。(通常過了一些天後你會忘記你的文件是幹什麼的了。)

Back to Top 查看 koioggo's 資料 搜索其他貼子 koioggo 訪問 koioggo's
 
koioggo
Groupie
Groupie


加入: 2004/5月/22
Online Status: Offline
回復: 58
Posted: 2004/11月/16 12:16下午 | IP記錄 引用 koioggo

在網頁中使用顏色

本章講述的許多HTML標識符都具有色彩的屬性,可用來設置不同的顏色。例如,缺損情況下你的網頁的背景顏色是灰色(Inter net Explorer)或是白色(Netscape Navigator),你可能要將背景顏色變成你所選擇的另外一種,下面的例子表明了你應該如何去做:

<HTML>

<HEAD>

<TITLE> Background Color </TITLE>

</HEAD>

<BODY BGCOLOR =」Lime」>

Hello World!

</BODY>

</HTML>

當這個HTML文件在瀏覽器上顯示出來時,網頁的背景顏色變成草綠色。不難發現你是通過對<BODY>標識符加入B GCOLOR屬性來改變一個網頁的背景顏色的。

根據HTML規範,你可以使用表5.1中列出的任意顏色來設定某個HTML標識符的顏色屬性。

表5.1 色彩名和它們的RGB值

Color RGB Value

藍綠色

黑色

藍色

紫紅色

灰色

深綠色

綠色

褐色

深藍色

橄欖色

#00FFFF

#000000

#0000FF

#FF00FF

#808080

#008000

#00FF00

#800000

#000080

#808000

深紫色

紅色

銀色

草綠色

白色

黃色

 

#800080

#FF0000

#C0C0C0

#008080

#FFFFFF

#FFFF00

對此表有兩點值得注意。首先,這些顏色的選擇是很奇怪的,這是歷史原因造成的——它們是被帶有VGA顯示卡的早期Windows 機器所支持的色彩。實際上,如果你不想局限於HTML規範、你完全可以不理會這些色彩的限制。當前版本的Netscape Navigator及Internet Explorer提供了更多的色彩(詳細信息可參閱附錄D)。

第二點是表中每個顏色名都對應著一個奇特的數字。顏色既可用名稱來表示,也可用RGB值來指定。如果你想保證你所選擇的顏色在所 有瀏覽器上都能正確顯示,那麼你應當使用色彩的RGB值而不是它們的名字。

注意

計算機以三個數字來標識各種顏色——顏色的紅、綠、藍(RGB值),其中每個數字可取0~255中的任意值。例如,黑色就是三個 0,因為黑色中沒有任何顏色。如果你想讓你的網頁的背景顏色變為黑色,你可以象下面這樣設定BGCOLOR的值:

<BODY BGCOLOR=」#000000」>

在這個例子中,前兩個0是顏色的紅色值,中間兩個0是顏色的綠色值,最後兩個0是藍色值。符號#告訴瀏覽器你通過RGB值來指定 一個色彩,而不是用它們的名字。

這其中稍微複雜一點是,計算機中使用十六進制數而不是十進制數,因此即使是計算機和人表示同樣大小的數,計算機也要多用六個符號 。例如對計算機來說,數字十六被表成F,255表示成FF。要建立一個白色背景,你應該輸入:

<BODY BGCOLOR=」#FFFFFF」>

使用RGB值,你可以指定16,777,216種顏色(超過一千六百萬種)。當然,這裡所說你可以指定它們中的任何一種顏色並不 意味著每台計算機的顯示器都能顯示它們中的任何一種色彩。某些顯示系由於硬件的性能,只能顯示二百五十六種顏色(或者更少)。

Back to Top 查看 koioggo's 資料 搜索其他貼子 koioggo 訪問 koioggo's
 
koioggo
Groupie
Groupie


加入: 2004/5月/22
Online Status: Offline
回復: 58
Posted: 2004/11月/16 12:21下午 | IP記錄 引用 koioggo

基本的HTML網頁格式

本節講述怎樣控制文本在網頁上顯示時的位置。你將學會怎樣把一行文本分為多行來顯示,怎樣在瀏覽器窗口中對齊文本,最後,你將學 會怎樣用水平分隔線來安排文本。

 

 

創建一行新文本

前面我們已講過瀏覽器忽略HTML文件中的多餘空格和回車,對瀏覽器而言,一個空格與 兩個或多個空格的作用是一樣的,看下面這段代碼:

<HTML>

<HEAD>

<TITLE> Two Lines of Text </TITLE>

</HEAD>

<BODY>

I am the first line of text.

I am the second line of text.

</BODY>

</HTML>

如果你在瀏覽器上顯示這段代碼,你會發現它不如你預料的那樣,瀏覽器忽略了兩行文本間的回車換行符,你看到的是下面的:

I am the first line of text. I am the second line of text.

因此怎樣在網頁中插入行分隔符呢?要達到此目的就要使用一個HTML標識符,<BR>標識符能顯示多行文本,如下面 的那樣:

<HTML>

<HEAD>

<TITLE> Two Lines of Text </TITLE>

</HEAD>

<BODY>

I am the first line of text. <BR>

I am the second line of text.

</BODY>

</HTML>

網絡瀏覽器會將這段代碼理解為我們所期望的那樣——文本以兩行來顯示。注意標識符<BR>不是一個容器標識符,就是 說,並不需要類似</BR>的符號。

Back to Top 查看 koioggo's 資料 搜索其他貼子 koioggo 訪問 koioggo's
 
koioggo
Groupie
Groupie


加入: 2004/5月/22
Online Status: Offline
回復: 58
Posted: 2004/11月/16 12:22下午 | IP記錄 引用 koioggo

建立新的一段

文本分行的辦法不止一個,你也可以使用標識符<P>來達到這一目的。<P>標識符被稱為段落標識符,因 為用它來創建段落,如下面所示:

<HTML>

<HEAD>

<TITLE> Two Lines of Text </TITLE>

</HEAD>

<BODY>

I am the first line of text. <P>

I am the second line of text.

<P> I am the first line of text. </P>

<P> I am the second line of text. </P>

</BODY>

</HTML>

代碼中第一個<P>的作用與上例中<BR>的作用相似,它將兩行文本分開,但是與<BR> 相比,兩行之間會有較多的空格。<P>標識符建立了一個新段,此段能包含盡可能少的文字。

緊接著的下面兩個句子在瀏覽器上顯示時也分為兩行。注意,在這裡<P>標識符是以容器標識符來使用的。它既可以用來 作為容器標識符也可以作為非容器標識符(就像<BR>)來使用。當使用〈P〉來將文本分行成為不同的段時,大部分網 頁設計者都在末尾加上</P>。

注意

在某些情況下,結尾標識符</P>是必須的。例如,如果你在表格中使用ALIGN屬性或是<P>標識符 ,你應當標明段落的起始和結尾,可參閱下一節來獲得更多的使用<P>標識符對齊文本的信息。對表格可參閱第七章「高 級HTML」。

對齊文本

<P>標識符有一個很有用的屬性,你可以使用<P>來使文本在屏幕上左對齊,中間對齊及右對齊。下面的 HTML代碼表明了如何使用對齊屬性:

<HTML>

<HEAD>

<TITLE> Three Lines of Text </TITLE>

</HEAD>

<BODY>

<PRE>

I am the first line. <P>

I am the second line.

I am the third line .

</PRE>

</BODY>

</HTML>

缺省情況下,<P>使文本在屏幕上左對齊,因此你不需要在你的HTML文件中使用<P ALIGN="LEFT">。

需要注意的是並非所有的瀏覽器都能識別<P>標識符的ALIGN屬性。Netscape Navigator 3.0以前的版本就忽略這一屬性並把所有文本左對齊。如果你想在這些瀏覽器的早期版本上中心對齊文字,你就得使用<CEN TER>標識符。除了<P>標識符外,沒有別的簡單辦法來右對齊文字。

Back to Top 查看 koioggo's 資料 搜索其他貼子 koioggo 訪問 koioggo's
 
koioggo
Groupie
Groupie


加入: 2004/5月/22
Online Status: Offline
回復: 58
Posted: 2004/11月/16 12:22下午 | IP記錄 引用 koioggo

建立有格式文本

另一個你可用來安置文本的標識符是<PRE>。假如你有一些文本讓它們在屏幕上精確的顯示出來,或是你想讓每個輸入 的空格正如您所料的那樣顯示。HTML不能進行精確定位,然而瀏覽器可以識別你加入的空格,實現這一功能有一較好和較差的辦法, 下面是一個較差的辦法:

<HTML>

<HEAD>

<TITLE> Two Lines of Text </TITLE>

</HEAD>

<BODY>

<PRE>

I am the first line .

I am the second line .

I am the first line .

</PRE>

</BODY>

</HTML>

<PRE>標識符用來包含格式文本,在這對標識符中出現的文本將會在瀏覽器上精確的顯示出來。看起來這對標識符非常 有用,在某些情況下確實是的,然而大部分情況下網頁設計者並不使用它,因為這對標識符有一些限制。

首先,當在瀏覽顯示處於<PRE>標識符中的文本時,這些文本顯示出來非常難看,不易閱讀。而且與HTML文件中的 其他文本不同,用<PRE>標識符包含的文本不能分行,一行很長的格式文本會一直抵達到瀏覽器屏幕的右端。

<PRE>標識符違反了HTML的基本原則,HTML設計出來是為了能讓人們在任何大小的屏幕上遊覽網頁,但在實際 應用中,這個目標常常很難達到——因為網頁通常被優化在特定分辨率的屏幕上顯示——<PRE>標識符破壞了這種目標 。因此,盡可能不要使用它。這樣使用低分辨率屏幕的用戶將會減少麻煩。

Back to Top 查看 koioggo's 資料 搜索其他貼子 koioggo 訪問 koioggo's
 
koioggo
Groupie
Groupie


加入: 2004/5月/22
Online Status: Offline
回復: 58
Posted: 2004/11月/16 12:24下午 | IP記錄 引用 koioggo

建立水平分隔線

本節講述的最後一個標識符是<HR>,它用來建立水平分隔線——用來在屏幕上分割文本的水平線。下面是使用這個標識 符的例子:

<HTML>

<HEAD>

<TITLE> Horizontal Rule </TITLE>

</HEAD>

<BODY>

I am the first line of text.

<HR>

I am the second line of text.

</BODY>

</HTML>

當這段代碼在瀏覽器上顯示時,就會出現一條水平線分割兩行文本(如圖5.4所示)

<HR>標識符有一些有用的屬性,(附錄D有所有屬性的列表)。與<P>標識符一樣,你可使

用ALIGN屬性來實現水平線的左對齊,中間對齊及右對齊,你也可以通過設定WIDTH屬性來指定水平線的長度。

 

圖5.4 由水平線分割的文本

當你指定WIDTH屬性的值時,你既可以用象素來表示,或用屏幕長度的百分比來表示。如下面的HTML代碼所示:

<HTML>

<HEAD>

<TITLE> Horizontal Rules </TITLE>

</HEAD>

<BODY>

<HR WIDTH=」640」>

<HR WIDTH=」100%」>

</BODY>

</HTML>

如果你在屏幕水平分辨率為640個像素的計算機上顯示這個HTML文件(這是Windows機器上的典型屏幕分辨率),顯示出來 的兩條水平線的長度是幾乎一樣。但是如果你在屏幕水平分別率為1024的機器上顯示同樣這一頁,第一條水平線顯然要比第二條短。 大部分情況下,使用百分數要比使用象素值更好些。

Back to Top 查看 koioggo's 資料 搜索其他貼子 koioggo 訪問 koioggo's
 
koioggo
Groupie
Groupie


加入: 2004/5月/22
Online Status: Offline
回復: 58
Posted: 2004/11月/16 12:25下午 | IP記錄 引用 koioggo

HTML中基本的文本格式

只包含單一文本的網頁是很單調的,要建立一個具有吸引力的網頁,你需要控制文本的大小、顏色、字體等一系列屬性。在本節中,你將 學習如何控制這些屬性。

使用字體

<FONT>標識符在本章前部分已簡單提起過,它具有三個屬性:SIZE、COLOR和FACE。下面是個使用SI ZE屬性的例子:

<HTML>

<HEAD>

<TITLE> Font Sizes </TITLE>

</HEAD>

<BODY>

<FONT SIZE=1> I am small. </FONT>

<P>

<FONT SIZE=7> I am big! </FONT>

<P>

<FONT SIZE= +1> I am a little bigger than the base font. </FONT>

<P>

<FONT SIZE= -1> I am a little smaller than the base font. </FONT>

<P>

</BODY>

</HTML>

你可以通過在1~7間選個數來設定SIZE屬性的值來指定文本的大小,1是最小的字體,而7是最大的。這是一個指定文本絕對大小 的方法。另外你也可指定文本的相對大小,如果你仔細察看下面的代碼,你能發現SIZE屬性的值被設為+1,就告訴瀏覽器以比基本 字體大一號的字體來顯示文本。

基本字體的大小由<BASEFONT>標識符來指定,你也可以不使用這個標識符,如上例所示,這種情況下基本字體就 由瀏覽器來設定。

<BASEFONT>標識符與<FONT>的用法相似,只不過<BASEFONT>對整個 文件都起作用,<BASEFONT>標識符只能在文件中使用一次,並應該放置於所有<FONT>標識符 之前,下面是一個使用這個標識符的例子:

<HTML>

<HEAD>

<TITLE> Base Font </TITLE>

</HEAD>

<BODY>

<BASEFONT SIZE=6>

I am big.

<P>

<FONT SIZE= +1> I am bigger! </FONT>

</BODY>

</HTML>

I am big. 將以<BASEFONT>設置的文本大小來顯示。大小是6。而I am bigger! 顯示出來字體要大一號,是7。

你不能保證你網頁上的文本將會以你設定的絕對大小來顯示,最終在瀏覽器上顯示的文字的大小可以由用戶來設定,用戶有最終決定權。 因此當你的網頁在瀏覽器上顯示時,所有的文本可能比你所期望的要大或小。

你可以控制你網頁上的文本的顏色,這可通過設置<FONT>標識符的COLOR屬性的值來完成,如下所示:

<HTML>

<HEAD>

<TITLE> Color Fonts </TITLE>

</HEAD>

<BODY>

<FONT COLOR=」GREEN」> I am green. </FONT>

<P>

<FONT COLOR=」RED」> I am red. </FONT>

</BODY>

</HTML>

在此例中,第一個句子的顏色是綠色,而第二個句子是紅色。使用顏色的名字是指定文本顏色的簡單方法。但是,為了保障網頁在所有瀏 覽器上的兼容性,你應當使用使用RGB值(附錄D列出了所有顏色及其RGB值)

<FONT>標識符還有一個比較有用的屬性FACE,使用它可以指定文本的字體,下面是一個例子:

<HTML>

<HEAD>

<TITLE> Font Face </TITLE>

</HEAD>

<BODY>

<FONT FACE=」Courier」> I am Courier. </FONT>

<P>

<FONT FACE=」Courier」> I am Arial, but if that does not work,

I am Courier. </FONT>

</BODY>

</HTML>

當在網頁上顯示這個HTML文件時,第一個句子的字體是Courier,而第二個句子是Arial。當然,可能會是這樣的。瀏覽 器軟件在它運行的機器上盡可能的做的更好。不是所有的計算機都有某一種字體。例如,如果這台計算機上沒有Arial字體,那麼瀏 覽器就會使用FACE屬性指定的下一個字體,再上例中就會使用Courier字體。你可以盡可能的列出你所需要的替換字體。

對我個人而言,我經常使用<FONT>標識符,但是你應當認識到它有某些限制。當使用它時,你應當注意背景和前景的 兼容性問題。

相對來說,<FONT>標識符是比較新的,在舊版的瀏覽器上它不會起作用。例如在Netscape Navigator 3.0上可以識別<FONT>的SIZE和COLOR屬性,但卻不能識別FACE屬性。其他的瀏覽器乾脆就不識別& lt;FONT>標識符。

<FONT>標識符是當前HTML規範中的一部分,但FACE屬性卻不是。進一步說,在不遠的將來,<FON T>標識符可能會從HTML規範中去掉,<FONT>標識符的所有功能可能會被cascading style sheets(見第七章)代替。當你使用這個有用的標識符時應該牢記這些兼容性問題。

Back to Top 查看 koioggo's 資料 搜索其他貼子 koioggo 訪問 koioggo's
 

of 3 下一頁 >>
  回復發表新主題
顯示可打印的頁面 顯示可打印的頁面

論壇跳轉
不能 張貼新論題在這個討論版
不能 回應論題在這個討論版
不能 刪除你的發言在這個討論版
不能 編輯你的發言在這個討論版
不能 新增投票標題在這個討論版
不能 在這個討論版投票

Edit by doreme Forums version 2004
Welcome ©2001-2004 doreme Guide

This page was generated in 0.8438 seconds.

 
保養品
保養品, Skin Care
www.elady.tw
Makeups Wholesale
Wholesale Cosmetics SkinCares
lungjyi.com
保養品批發
名牌保養品、保養品批發
www.perfume.com.tw/skincare
Wholesale Perfumes
Fragrances Perfumes Wholesale
lungjyi.net