第2章格式化和樣式

1、第二章 格式化和樣式1.格式化例子 HTML 可定義很多供格式化輸出的元素，比如粗體和斜體字。 文本格式化 此例演示如何在一個 HTML 文件中對文本進(jìn)行格式化 預(yù)格式文本 此例演示如何使用 pre 標(biāo)簽對空行和空格進(jìn)行控制。 “計算機(jī)輸出”標(biāo)簽 此例演示不同的“計算機(jī)輸出”標(biāo)簽的顯示效果。 地址 此例演示如何在 HTML 文件中寫地址。1.格式化例子（續(xù)） 縮寫和首字母縮寫 此例演示如何實(shí)現(xiàn)縮寫或首字母縮寫。 文字方向 此例演示如何改變文字的方向。 塊引用 此例演示如何實(shí)現(xiàn)長短不一的引用語。 刪除字效果和插入字效果 此例演示如何標(biāo)記刪除文本和插入文本。2. 2.改變文本的外觀和含義改變文本的

2、外觀和含義 很多標(biāo)簽都可以用來改變文本的外觀，并為文本關(guān)聯(lián)其隱藏的含義。總地來說，這些標(biāo)簽可以分成兩類：基于內(nèi)容的樣式（content-based style）和物理樣式（physical style）。 同時，W3C 為級聯(lián)樣式表（CSS）指定的標(biāo)準(zhǔn)現(xiàn)在已被絕大多數(shù)瀏覽器所支持，它提供了一種允許作者控制文檔文本外觀和布局的更為全面的方法。3. 3.基于內(nèi)容的樣式基于內(nèi)容的樣式 基于內(nèi)容的樣式標(biāo)簽會告訴瀏覽器它所包含的文本具有特定的含義、上下文或者用法。然后瀏覽器就會把與該含義、上下文或者用法一致的格式應(yīng)用在文本上。請注意這里面的區(qū)別?；趦?nèi)容的標(biāo)簽賦予含義，而不是格式化。因此，它們對于自動處

3、理來說非常重要；計算機(jī)并不關(guān)心文檔的外觀如何。 因?yàn)樽煮w樣式是通過語義線索來指定的，因此瀏覽器可以為用戶選擇一種合適的顯示樣式。由于不同地點(diǎn)的樣式各種各樣，所以使用基于內(nèi)容的樣式可以幫助你確保自己的文檔對廣大范圍的讀者來說都是有意義的。 這一點(diǎn)在專門供那些盲人和殘疾人所使用的瀏覽器上顯得尤其重要，因?yàn)樗麄兊娘@示選項(xiàng)可能和我們傳統(tǒng)的文本根本不同，或者在某方面具有非常大的局限性。3. 3.基于內(nèi)容的樣式（續(xù)）基于內(nèi)容的樣式（續(xù)） 當(dāng)前的 HTML 和 XHTML 標(biāo)準(zhǔn)并沒有為每一個基于內(nèi)容的標(biāo)簽都定義一種格式；它們僅僅規(guī)定必須用與文檔中普通文本不同的方式來顯示基于內(nèi)容的樣式。 標(biāo)準(zhǔn)甚至沒有要求這些

4、基于內(nèi)容的樣式彼此之間都要用不同的方式顯示。在實(shí)際應(yīng)用中，你可能會發(fā)現(xiàn)很多這樣的標(biāo)簽和傳統(tǒng)的印刷有著非常明顯的關(guān)系，它們有著相似的含義和顯示樣式，而且在多數(shù)瀏覽器中都以相同的樣式和字體來顯示。 使用 HTML/XHTML 基于內(nèi)容的樣式標(biāo)簽時要遵從一些規(guī)則，因?yàn)閮H僅是簡單地想想文本該如何顯示，而不必知道這些文本的含義是什么，是十分容易的。 一旦開始使用基于內(nèi)容的樣式之后，文檔將會更加一致，而且可以更好地幫助執(zhí)行自動搜索和內(nèi)容編輯。這些標(biāo)簽是：基于內(nèi)容的樣式標(biāo)簽基于內(nèi)容的樣式標(biāo)簽 HTML HTML 標(biāo)簽標(biāo)簽 定義和用法定義和用法 表示一個縮寫形式，比如 Inc.、etc.。通過對縮寫詞語進(jìn)行標(biāo)

5、記，您就能夠?yàn)闉g覽器、拼寫檢查程序、翻譯系統(tǒng)以及搜索引擎分度器提供有用的信息。 標(biāo)簽最初是在 HTML 4.0 中引入的，表示它所包含的文本是一個更長的單詞或短語的縮寫形式。 瀏覽器可能會根據(jù)這個信息改變對這些文本的顯示方式，或者用其他文本代替。也許當(dāng)前流行的瀏覽器對 標(biāo)簽中包含的文本還沒有任何處理方式，但是我們無法預(yù)測將來的版本將會如何實(shí)現(xiàn)該標(biāo)簽。HTML HTML 標(biāo)簽標(biāo)簽 實(shí)例 標(biāo)記一個縮寫：etc. 提示： 在某些瀏覽器中，當(dāng)您把鼠標(biāo)移至縮略詞語上時，title 可被用來展示表達(dá)的完整版本。HTML HTML 標(biāo)簽標(biāo)簽 元素可定義只取首字母縮寫，比如 NATO。通過對只取首字母縮寫進(jìn)行

6、標(biāo)記，您就能夠?yàn)闉g覽器、拼寫檢查程序、翻譯系統(tǒng)以及搜索引擎分度器提供有用的信息。HTML HTML 標(biāo)簽標(biāo)簽 標(biāo)記一個首字母縮寫：WWW 提示：提示： 在某些瀏覽器中，當(dāng)您把鼠標(biāo)移至縮略詞語上時，title 可被用來展示表達(dá)的完整版本。HTML HTML 標(biāo)簽標(biāo)簽 定義和用法定義和用法 標(biāo)簽通常表示它所包含的文本對某個參考文獻(xiàn)的引用，比如書籍或者雜志的標(biāo)題。按照慣例，引用的文本將以斜體顯示。 用 標(biāo)簽把指向其他文檔的引用分離出來，尤其是分離那些傳統(tǒng)媒體中的文檔，如書籍、雜志、期刊，等等。如果引用的這些文檔有聯(lián)機(jī)版本，還應(yīng)該把引用包括在一個 標(biāo)簽中，從而把一個超鏈接指向該聯(lián)機(jī)版本。 標(biāo)簽還有一個

7、隱藏的功能：它可以使你或者其他人從文檔中自動摘錄參考書目。我們可以很容易地想象一個瀏覽器，它能夠自動整理引用表格，并把它們作為腳注或者獨(dú)立的文檔來顯示。 標(biāo)簽的語義已經(jīng)遠(yuǎn)遠(yuǎn)超過了改變它所包含的文本外觀的作用；它使瀏覽器能夠以各種實(shí)用的方式來向用戶表達(dá)文檔的內(nèi)容。HTML HTML 標(biāo)簽標(biāo)簽 定義和用法定義和用法 標(biāo)簽用于表示計算機(jī)源代碼或者其他機(jī)器可以閱讀的文本內(nèi)容。 軟件代碼的編寫者已經(jīng)習(xí)慣了編寫源代碼時文本表示的特殊樣式。 標(biāo)簽就是為他們設(shè)計的。包含在該標(biāo)簽內(nèi)的文本將用等寬、類似電傳打字機(jī)樣式的字體（Courier）顯示出來，對于大多數(shù)程序來說，這應(yīng)該是十分熟悉的。 只應(yīng)該在表示計算機(jī)程序

8、源代碼或者其他機(jī)器可以閱讀的文本內(nèi)容上使用 標(biāo)簽。雖然 標(biāo)簽通常只是把文本變成等寬字體，但它暗示著這段文本是源程序代碼。將來的瀏覽器有可能會加入其他顯示效果。例如，程序員的瀏覽器可能會尋找 片段，并執(zhí)行某些額外的文本格式化處理，如循環(huán)和條件判斷語句的特殊縮進(jìn)等。HTML HTML 標(biāo)簽標(biāo)簽 定義和用法定義和用法 標(biāo)簽可標(biāo)記那些對特殊術(shù)語或短語的定義。 現(xiàn)在流行的瀏覽器通常用斜體來顯示 中的文本。將來， 還可能有助于創(chuàng)建文檔的索引或術(shù)語表。 與其他許多基于內(nèi)容的樣式和物理樣式標(biāo)簽一樣， 標(biāo)簽盡量少用為妙。作為一種通用樣式，尤其在技術(shù)文檔中，當(dāng)?shù)谝淮涡碌男g(shù)語時，應(yīng)該將它們與普通文本分開，這樣讀者可

9、以更好地理解文章當(dāng)前的主題，而從那以后就不要再對這個術(shù)語進(jìn)行任何標(biāo)記了。HTML HTML 標(biāo)簽標(biāo)簽 定義和用法定義和用法 標(biāo)簽告訴瀏覽器把其中的文本表示為強(qiáng)調(diào)的內(nèi)容。對于所有瀏覽器來說，這意味著要把這段文字用斜體來顯示。 在文本中加入強(qiáng)調(diào)也需要有技巧。如果強(qiáng)調(diào)太多，有些重要的短語就會被漏掉；如果強(qiáng)調(diào)太少，就無法真正突出重要的部分。這與調(diào)味品一樣，最好還是不要濫用強(qiáng)調(diào)。 盡管現(xiàn)在 標(biāo)簽修飾的內(nèi)容都是用斜體字來顯示，但這些內(nèi)容也具有更廣泛的含義，將來的某一天，瀏覽器也可能會使用其他的特殊效果來顯示強(qiáng)調(diào)的文本。如果你只想使用斜體字來顯示文本的話，請使用 標(biāo)簽。除此之外，文檔中還可以包括用來改變文本

10、顯示的級聯(lián)樣式定義。HTML HTML 標(biāo)簽標(biāo)簽 定義和用法定義和用法 標(biāo)簽定義鍵盤文本。 說到技術(shù)概念上的特殊樣式時，就要提到 標(biāo)簽，它用來表示文本是從鍵盤上鍵入的。 瀏覽器通常用等寬字體來顯示該標(biāo)簽中包含的文本。 標(biāo)簽經(jīng)常用在于計算機(jī)相關(guān)的文檔和手冊中。 例如： 鍵入 quit 來退出程序，或者鍵入 menu 來返回主菜單。HTML HTML 標(biāo)簽標(biāo)簽 定義和用法定義和用法 標(biāo)簽表示一段用戶應(yīng)該對其沒有什么其他解釋的文本字符。要從正常的上下文抽取這些字符時，通常要用到這個標(biāo)簽。 請看下面的例子： 字符序列 ae 可能會被轉(zhuǎn)換為 æ 連字字符。 上面的 HTML 代碼會顯示為：

11、字符序列 ae 可能會被轉(zhuǎn)換為 連字字符。 注釋：注釋：在 HTML 中，用于 ae 連字的特殊實(shí)體是 æ，大多數(shù)瀏覽器都會將它轉(zhuǎn)換成相應(yīng)的 連字字符。 標(biāo)簽并不經(jīng)常使用。只有在要從正常的上下文中將某些短字符序列提取出來，對它們加以強(qiáng)調(diào)的極少情況下，才使用這個標(biāo)簽。HTML HTML 標(biāo)簽標(biāo)簽 定義和用法定義和用法 標(biāo)簽和 標(biāo)簽一樣，用于強(qiáng)調(diào)文本，但它強(qiáng)調(diào)的程度更強(qiáng)一些。 瀏覽器通常會以不同于 標(biāo)簽的方式來顯示 標(biāo)簽中的內(nèi)容，通常是用加通常是用加粗的字體（相對于斜體）來顯示其中的內(nèi)容，粗的字體（相對于斜體）來顯示其中的內(nèi)容，這樣用戶就可以把這兩個標(biāo)簽區(qū)分開來了。 如果常識告訴我們應(yīng)

12、該較少使用 標(biāo)簽的話，那么 標(biāo)簽出現(xiàn)的次數(shù)應(yīng)該更少。如果說用 標(biāo)簽修飾的文本好像是在大聲呼喊，那么用 標(biāo)簽修飾的文本就無異于尖叫了。沉默寡言的人說出的話總是一諾千金，與此相同，限制 的使用可以令應(yīng)該更加引人注意，而且更加有效。HTML HTML 標(biāo)簽標(biāo)簽 定義和用法定義和用法 標(biāo)簽表示變量的名稱，或者由用戶提供的值。 標(biāo)簽是計算機(jī)文檔中應(yīng)用的另一個小竅門，這個標(biāo)簽經(jīng)常與 和 標(biāo)簽一起使用，用來顯示計算機(jī)編程代碼范例及類似方面的特定元素。 用 標(biāo)簽標(biāo)記的文本通常顯示為斜體。4.物理樣式物理樣式 在討論基于內(nèi)容的樣式標(biāo)簽時，經(jīng)常用到“意圖”這個詞。這是因?yàn)橛蓸?biāo)簽傳達(dá)的含義比瀏覽器顯示文本的方式更為

13、重要。 然而，在某些情況下，可能是出于合法性或者版權(quán)等方面的原因的考慮，你希望文本以某種特殊的方式來顯示（例如斜體或加粗）。在這種情況下，就可以對文本使用物理樣式。 雖然其他文字處理系統(tǒng)的趨勢是精確地控制樣式和外觀，但是在使用 HTML 或 XHTML 時，除非極少情況下，都應(yīng)該避免使用物理標(biāo)簽。應(yīng)當(dāng)盡可能地向?yàn)g覽器提供上下文信息，并使用基于內(nèi)容的樣式。盡管現(xiàn)在瀏覽器不過是以斜體或者粗體字來顯示這些文本，但是將來的瀏覽器和各種文檔生成工具可能會以非常有創(chuàng)建的方式來利用這些基于內(nèi)容的樣式。4.物理樣式（續(xù)）物理樣式（續(xù)） 當(dāng)前的 HTML/XHTML 標(biāo)準(zhǔn)一共提供了 9 種物理樣式，包括粗體（b

14、old）、斜體（italic）、等寬（monospaced）、下劃線（underlined）、刪除線（strikethrough）、放大（larger）、縮小（smaller）、上標(biāo)（superscripted）和下標(biāo)（subscripted）文本。 提示：提示：請記住這些物理樣式標(biāo)簽對緊接的文本產(chǎn)生的強(qiáng)烈效果。要實(shí)現(xiàn)在整個文檔范圍內(nèi)對文本顯示的全面控制，請使用樣式表。物理樣式標(biāo)簽物理樣式標(biāo)簽 HTML HTML 標(biāo)簽標(biāo)簽 定義和用法定義和用法 標(biāo)簽呈現(xiàn)粗體文本效果。 標(biāo)簽是基于內(nèi)容的樣式標(biāo)簽 的物理版本，但它沒有后者的擴(kuò)展意義。 標(biāo)簽明確地將包括在它和其結(jié)束標(biāo)簽之間的字符或者文本變成粗體。如

15、果某種加粗的字體不可用，瀏覽器將使用一些其他的表現(xiàn)方法，例如反相顯示或者加下劃線等。HTML HTML 標(biāo)簽標(biāo)簽 定義和用法定義和用法 標(biāo)簽呈現(xiàn)大號字體效果。 使用 標(biāo)簽可以很容易地放大字體。這簡直不能再簡單了：瀏覽器顯示包含在 標(biāo)簽和其相應(yīng)的 標(biāo)簽之間的文字時，其字體比周圍的文字要大一號。但是，如果文字已經(jīng)是最大號字體，這個 標(biāo)簽將不起任何作用。 嵌套 標(biāo)簽來放大文本。每一個 標(biāo)簽都可以使字體大一號，直到上限 7 號文本，正如字體模型所定義的那樣。 但是使用 標(biāo)簽的時候還是要小心，因?yàn)闉g覽器總是很寬大地試圖去理解各種標(biāo)簽，對于那些不支持 標(biāo)簽的瀏覽器來說，它經(jīng)常將其認(rèn)為是粗體字標(biāo)簽。HTML

16、 HTML 標(biāo)簽標(biāo)簽 定義和用法定義和用法 標(biāo)簽顯示斜體文本效果。 標(biāo)簽和基于內(nèi)容的樣式標(biāo)簽 類似。它告訴瀏覽器將包含其中的文本以斜體字（italic）或者傾斜（oblique）字體顯示。如果這種斜體字對該瀏覽器不可用的話，可以使用高亮、反白或加下劃線等樣式。 提示：提示： 標(biāo)簽一定要和結(jié)束標(biāo)簽 結(jié)合起來使用。HTML HTML 標(biāo)簽標(biāo)簽 定義和用法定義和用法 標(biāo)簽呈現(xiàn)小號字體效果。 標(biāo)簽和它所對應(yīng)的 標(biāo)簽一樣，但它是縮小字體而不是放大。如果被包圍的字體已經(jīng)是字體模型所支持的最小字號，那么 標(biāo)簽將不起任何作用。 與 標(biāo)簽類似， 標(biāo)簽也可以嵌套，從而連續(xù)地把文字縮小。每個 標(biāo)簽都把文本的字體變小

17、一號，直到達(dá)到下限的一號字。HTML HTML 標(biāo)簽標(biāo)簽 定義和用法定義和用法 標(biāo)簽可定義下標(biāo)文本。 包含在 標(biāo)簽和其結(jié)束標(biāo)簽 中的內(nèi)容將會以當(dāng)前文本流中字符高度的一半來顯示，但是與當(dāng)前文本流中文字的字體和字號都是一樣的。 提示：提示：無論是 標(biāo)簽還是和它對應(yīng)的 標(biāo)簽，在數(shù)學(xué)等式、科學(xué)符號和化學(xué)公式中都非常有用。HTML HTML 標(biāo)簽標(biāo)簽 定義和用法定義和用法 標(biāo)簽可定義上標(biāo)文本。 包含在 標(biāo)簽和其結(jié)束標(biāo)簽 中的內(nèi)容將會以當(dāng)前文本流中字符高度的一半來顯示，但是與當(dāng)前文本流中文字的字體和字號都是一樣的。 提示：提示：這個標(biāo)簽在向文檔添加腳注以及表示方程式中的指數(shù)值時非常有用。如果和 標(biāo)簽結(jié)合起

18、來使用，就可以創(chuàng)建出很好的超鏈接腳注。HTML HTML 標(biāo)簽標(biāo)簽 定義和用法定義和用法 標(biāo)簽呈現(xiàn)類似打字機(jī)或者等寬的文本效果。 標(biāo)簽與 和 標(biāo)簽一樣， 標(biāo)簽和必需的 結(jié)束標(biāo)簽告訴瀏覽器，要把其中包含的文本顯示為等寬字體。對于那些已經(jīng)使用了等寬字體的瀏覽器來說，這個標(biāo)簽在文本的顯示上就沒有什么特殊效果了。樣式：HTML CSSHTML CSS HTML中的樣式 本例演示如何使用添加到 部分的樣式信息對 HTML 進(jìn)行格式化。 沒有下劃線的鏈接 本例演示如何使用樣式屬性做一個沒有下劃線的鏈接。 鏈接到一個外部樣式表 本例演示如何 標(biāo)簽鏈接到一個外部樣式表。如何使用樣式如何使用樣式 當(dāng)瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進(jìn)行格式化。有以下三種方式來插入樣式表：l外部樣式表外部樣式表l內(nèi)部樣式表內(nèi)部樣式表l內(nèi)聯(lián)樣式內(nèi)聯(lián)樣式外部樣式表外部樣式表 當(dāng)樣式