第2章格式化和樣式

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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