標記語言－片語元素_HTML/Xhtml_網頁製作

在引言和前面的章節中,已經稍微提到過語義標籤的概念,使用標籤為文件標識意義,而不是單純的以標籤設定顯示效果.設計完全使用語義標籤的網頁是個不錯的點子.然而我覺得這個目標太理想化了.當然,沒有完全達到目標並不代表努力過程毫無價值.至少朝著這個目標努力很有價值.
在現實情況下,經常有必要加上非語義標籤,以便實現特定的設計目標,主要是因為現在著名的瀏覽器都無法百分之百支持標準的緣故.有些CSS規則在部分瀏覽器中無法顯示正確的效果,而這不幸的讓我們在達成某些設計目標的過程中必須使用額外的標籤.
有個重要的概念必須放在心上:那就是盡量嘗試撰寫語義化結構將能帶來實際的好處.同時,對標準的支持雖然沒有達到百分之百,但也已經越過臨界點讓我們現在就能使用符合網路標準的方法撰寫網頁.有些時候必須做點犧牲,但是堅持撰寫越多的符合標準的標籤,未來的工作就會越輕鬆. 顯示效果 VS 結構標籤
本章節將會討論顯示效果與結構標籤的不同，更確切的說，是討論使用替換,以及使用替換的差異.在本章稍後,我們也會討論幾個其他短語元素以及它們在符合標準,結構化標籤語法內的重要性.
你或許聽說過某些人建議在需要粗體文字時要用替換,但是他卻沒有進一步告訴你為什麼需要這樣的替換.在不知道"為什麼"的情況下,實在很難期待其他網頁設計者只因為聽過需要這樣做就改變他們對標籤的使用習慣. 為什麼和比和好?
去掉和標籤,替換成和到底是有什麼好處呢?其實這一切都是為了表達語義和結構,而不是為了只是顯示效果,本書的所有範例也都努力遵循這個概念. 看看專家怎麼說
首先,來看看W3C在HTML4.01的短語元素規範裡是怎麼敘述和
短語元素能在文字片段之內加上結構信息,常見的短語元素意義如下:
代表強調
代表更強烈的強調
所以在此討論的是兩種不同程度的強調.舉例來說,就是一個單字或者短語,念的時候應該比較大聲,音調較高,念的快些,或者是...嗯,就是比一般文字內容更強調.
W3C接著還敘述了下面這段內容:
短語元素的展示效果隨著瀏覽器的不同,一般來說可視化瀏覽器應該以斜體顯示的文字內容,以粗體顯示的文字內容.語音合成軟體則能配合內容改變合成參數,像是音量,音調與速度等等.
啊哈!最後一句特別有趣,語音合成軟體(之前我們稱之為屏幕閱讀器)將會正確處理必須強調的文字,這的確是件好事.
相對之下,或是只是單純的顯示效果標籤.如果我們的目標是將結構與顯示效果分離的話,使用和就是正確的選擇,單純想要顯示粗體,斜體文字的時候用css就好了.本章稍後會討論更多例子.
接著看兩個標識範例,幫助我們了解它們的差異. 方法A
your order number for future reference is: 6474-82071. 方法B
your order number for future reference is: 6474-82071. 又粗又美麗
這個情況是使用比更適合的完美例子,我們打算讓句子內的特定文字顯示的更加重要.除了粗體顯示訂單編號以外,我們也希望屏幕閱讀器也改變它們表達這段內容的方式:提升音量,改變音調或速度.方法B能夠同時達到這兩個目的. 又如何?
同樣的,以取代,能夠同時表達重要性,而不只單純的以斜體顯示文字內容.來看看這兩個例子: 方法A
It took me notone,butthree hours to shovel my driveway this morning. 方法B
It took me notone,butthree hours to shovel my driveway this morning. 強調語氣
在前面的例子裡(本書撰寫時的真實情況),我的目的是使"three"這個字以強調語氣表現,如同我大聲念出這個字,視覺上,方法B在大多數瀏覽器裡都會以斜體顯示,而螢幕閱讀器也會適當的調整音色,速度或音量. 只要粗體或斜體就好
必須注意的是,很多情況下只需要視覺上展示粗體,斜體的文字效果,換句話說,假設你的側邊欄裡有一串鏈接列表,而你喜歡讓所有鏈接用相同的效果顯示:也就是粗體(圖6-1)  

除了視覺特色外,我們並不打算特別強調連結內容,這裡就是以CSS改變連結外觀顯示效果的好地方,讓他們不會被螢幕閱讀器以及其他非視覺化瀏覽器特別強調.
舉例來說,你真的想讓粗體連結被念得更快,更大聲,音調更高嗎?大概不會,這邊的粗體完全只是顯示效果. font-weight相當於粗體
為了達到圖6-1的顯示效果,讓我們假設連結欄放在id設為sidebar的

中,這樣我們就能用CSS指定#sidebar之內的連結要以粗體顯示:
#sidebar a{
font-weight:bold;
}
極度簡單,讓我覺得一提起就有些可笑,但是這的確是個幫助分離結構與顯示效果的好方法. 那是粗體!
同樣的,在思考斜體文字的時候也能應用類似的想法,在你不想強調的內容,只單純想以斜體顯示文字時,你能再度使用font-style屬性通過CSS處理這些狀況
讓我們使用相同的#sidebar作為範例,舉例來說如果你想讓#sidebar裡的所有連結顯示成斜體,那麼可以這樣寫:
#sidebar a{
font-style:italic;
}
又是個簡單至極的概念,但是在結構化標記語法的領域裡,我覺得討論這些情況十分重要--使用CSS處理央視,代替顯示效果標籤的狀況.有些時候最簡單的解決方法也最容易被忽略. 共用粗體與斜體
在打算同時用粗體和斜體顯示文字內容的時候,我覺得必須先思考一個問題,你打算傳達什麼程度的強調?根據這個問題的答案,我會選擇適當的標籤:(強調)或(更強烈的強調),然後以選擇的標籤標記文字.
舉例來說,以下面的例子來說,我原本打算讓"fun"同時以粗體,斜體顯示,最後我選擇用來強調這個字.
Building sites with web standards can be fun!
大多數瀏覽器只會以斜體來顯示這個字,要同時使用粗體和斜體,我們有幾種選擇.哦,我真的希望你同意上面這句話. 普通的
方法之一,是以普通的包在"fun"之外,並且指定CSS規則將所有之內的以粗體顯示.標記語法看起來像這樣:
Building sites with web standards can be fun!
而CSS看起來則像這樣:
em span{
font-weight:bold;
}
明顯的語意部分並不好,因為我們加上了額外的標籤,但是這個方法人人仍然有用. 以class強調
另一個方法則是為標籤指定一個class,並且以CSS加上粗體效果,標記語法看起來像這樣:
Building sites with web standards can be fun!
而CSS看起來則是這樣:
em.bold{
font-weight:bold;
}
使用就能達成斜體效果(同時在語意上強調了文字內容),而為它加上bold class則會使之內的文字以粗體顯示.
類似的方法也能用來修飾.這時我們能在加重強調某段文字的時候,設計italic class加上斜體效果,再配上原來就有的粗體效果.
標記語言看起來像這樣:
Building sites with web standards can be fun!
而CSS則是這樣:
strong.italic{
font-style:italic;
}
#p# 概述
我想討論這個主題十分必要,因此這是本書核心主題之一的良好範例:將內容與展示效果分開十分重要,很有好處:而將與標籤換成結構上對等的標籤(強調內容的時候)是個輔助達成這類分離目標的簡單方法.
因此,下次當你聽到某人提到"沒錯,你永遠應該使用替換"的時候,你就有足夠的理由去支持這個論點了.
大多數情況下,很適合以或傳達強調語氣,而當你只是要追求視覺上的粗體,斜體效果時,就用CSS吧. 技巧延伸
本章到目前為止,都把焦點集中在和上,這兩者只是W3C所謂的"短語元素"的一部分,在這本分我們來多看一些短語元素以及他們和標準之間的關係. 短語元素
除了和之外,W3C HTML 4.01規範裡完整的短語元素列表還包括: : 包含其他引用,參考來源的資訊 : 代表這是名詞的定義範例 : 代表一段程式碼 <samp>: 代表一段程式,script的輸出示範 <kbd>: 代表要使用者輸入的文字 <var>: 代表程式的變數 <abbr>: 代表縮寫名詞(像WWW,HTML,URL,Mass.等) <acronym>: 代表略(像WAC,radar等) <br>讓我們深入地看幾個標籤,首先從<cite>開始 <br>#p# <cite>的設計 <br><cite>是個值得討論的有趣元素,在替換掉單純指定顯示效果的<i>標籤時尤為重要.<cite>的用途是參照引用來源:標識作者或出版物.歷史上來說,設計者或許會用<i>把書籍標題顯示成斜體,但是在本章稍早的地方我們學到了CSS是指定顯示效果的最佳工具. <br>你或許會建議用<em>表示出版物的標題,但是在引用書籍或其他出版物的時候,我們並不打算去強調,也就是將書籍標題顯示成斜體(在印刷界也常使用底線,但是這明顯會和連結混淆). <br>於是就出現了為這個工作量身打造的<cite>標籤,大多數瀏覽器甚至預設會以斜體顯示<cite>標籤中的內容.而我們也能加上CSS規則達成相同的目的. 規範 <br>W3C的<cite>標籤規範有點簡略,在HTML 4.01規範中只簡單提了<br><cite>: 包含其他引用,參考來源的資訊 <br>這差不多是我們能掌握的說法了,但是我們也不清楚到底哪類資料可以放在<cite>中,但是從"來源"來看,我們至少可以把作者,出版物放進去. <br>讓我們來看看<cite>的用法: <br>The novel, <cite>The Scarlet Letter</cite> is set in Puritan Boston and like this book, was written in Salem, Massachusetts. <br>使用了<cite>標籤之後,標題The Scarlet Letter 在大多數瀏覽器中都顯示成斜體,我們將加上下面這段十分簡單的CSS規則,以便瀏覽器在沒有預設的時候也顯示出正確的效果. <br>cite {<br>font-style: italic;<br>} <br>回顧一下,我們把標題書籍,其他出版物標題的<i>標籤替換成<cite>,在大多數瀏覽器中,仍然能得到斜體顯示效果,也再度使頁面內容變得結構化語義化.當然這個結構一樣能發揮CSS,讓我們一起來瞧一瞧. 改變<cite>的樣式 <br>在我們討論以結構,語意建構頁面內容的過程中,我們也同樣讓頁面變得更容易用CSS指定樣式(以及修改樣式).以<cite>標籤為例,如果我們固定使用這個標籤標記出版物的話,我們就能完全掌握現實的樣式,在任何需要的時候都能輕易的修改. <br>假設所製作的整個網站,過程中使用了<cite>標籤標記書籍參考資料以及出版物標題,我們加上全局CSS規則用斜體顯示所有的<cite>元素,但是在幾個月之後,我們希望不僅以斜體顯示書籍出版無標題,還要用粗體,紅色文字灰色背景. <br>當然,可以用幾個CSS規則快速完成這項任務,立刻改變先前以<cite>標記的所有參考資料標題,如果使用<i>或者<em>的話就沒辦法明確指明對象了. <br>cite {<br>font-style: italic;<br>font-weight: bold;<br>color: red;<br>background-color: #ddd;<br>} <br>圖6-2使大多數瀏覽器的顯示效果,而這是另一個先寫結構化標記的好例子,讓你稍後能輕易修改全站的設計風格. <br> <br>圖6-2. 以<cite>標記,使用CSS樣式的效果發揮結構的潛力 <br>除了容易使用樣式之外,結構化標記也便於伺服器端軟體進行處理,帶來有趣的應用. <br>舉例來說,易用性提倡者Mark pilgrim在他個人網站"Dive into mark"裡使用了不少<cite>標籤,由於在網誌內使用<cite>標籤標記引用的任何出版物,因此Mark能夠撰寫程序,解析所有文章建立資料庫嗎然後根據參考到的引用來源進行分類(http://www.peintomark.com/archives/citations/) <br>下圖6-3是搜尋我自己的結果,在Mark的網誌中能找到兩篇相關的文章,這全是靠<cite>標註"Dan Cederholm"完成的.  </cite></cite></cite></cite></em></i></cite></cite></cite></cite></cite></cite></i></cite></cite></cite></cite></cite></cite></cite></em></i></cite></i></cite></cite></cite></acronym></abbr></var></kbd></samp>

圖6-3 Mark Pilgrim在"Dive into mark"製作的"posts by citation"結果(http://www.peintomark.org/archives/citations/dan_cederholm/)
#p# 和
我還想提出兩個短語元素,就是(縮寫名詞)和(略稱).使用這些標籤能夠為縮寫名詞提供定義,讓所有用戶看懂內容,提升網頁的易用性.
讓我們從新看看W3C在HTML4.01規範內定義的和用途: 代表縮寫名詞(像WWW,HTTP,URL,Mass.等) 代表略(像WAC,radar等)
配合適當的title屬性是這些元素能幫助不了解特定名詞的使用者,舉例來說,在標識"XHTML"縮寫的時候,我們能這樣使用標籤:
XHTML
在這裡使用會使螢幕閱讀器拼出縮寫內容(X-H-T-M-L),而不是念出完整內容,相對的,使用的話則會讓他念出完整內容,而不是縮寫.
使用標籤的範例如下:
NATO
我們也能使用兩個聽覺CSS規則,再次強調這些差異:
abbr {
speak:spell-out;
}

acronym {
speak:normal;
}
聽覺樣式讓作者能特別為螢幕閱讀器指定朗讀方式,這能修改頁面的聽覺表達方式,引導標記結構,改變音調,音色等,讓頁面朗讀的效果與視覺效果更一致. 定義一次
許多人都建議只定義一次在頁面內反覆出現的縮寫,略稱,他們認為每次名詞出現時重複定義太浪費空間了,而最好只在首次出現的時候加上title屬性,我認為這麼做有些道理,雖然當使用者被導引到頁面特定段落時,可能因為看不到頁首展開縮寫,略稱,從而無法從定義中獲利.
利用你的判斷力,決定何時(以及要多頻繁)定義放在和內的名詞吧. 顯示效果
要在視覺上吸引讀者,有些瀏覽器預設會在和下面加上1像素的點狀底部邊線,引誘使用者將滑鼠移到縮寫名詞,略稱上面,當滑鼠移到上面後,瀏覽器就會以"工具提示"的方式顯示title屬性提供的定義內容.
對那些不預設顯示點狀底部邊線的瀏覽器來說,可以透過定義CSS達到相同的效果.
abbr, acronym {
border-bottom: 1px dotted;
cursor: help;
}
我們也加上額外的規則,把遊標轉成"求助"(大多數瀏覽器都會支持),幫助用戶看出這不是可以點選的鏈接,而是以"工具提示"顯示的定義內容(Mark Newhouse,"Real World Style:CSS Help").
圖6-4就是瀏覽器的顯示效果,將"XHTML"擴展成定義文字,以及點狀底部邊線,求助遊標:

圖6-4.一般瀏覽器顯示的範例相容性問題
值得一提的是,在本書撰寫的時候,windows版的Internet Explorer也不支援為標籤指定樣式,顯示工具提示. IE/Win支援標籤,這是為了鼓勵某些設計者只使用處理縮寫名詞與略稱.
這麼做或許很有吸引力,但是為了解決現實問題而使用錯誤的元素並不是件好事,對這個特定問題來說,我偏好根據規範表示名詞,讓正確支持的瀏覽器處理標籤的樣式.讓我們很快地看看幾個還沒提到的短語元素.
#p# <br><code>元素的設計目的是在XHTML頁面內展示程式碼範例,舉例來說,當你想分享某段CSS時,你可以這樣寫: <br><code><br>#content {<br>width: 80%;<br>padding: 20px;<br>background: blue;<br>}<br>
一般來說,可視化瀏覽器會以定寬serif字體顯示標籤中的內容.當然,我們也能加上CSS規則,指定我們喜歡的顯示方式. <br>code {<br>font-family: Courier, serif;<br>color: red;<br>} <br>如此一來,<code>的內容就會變成紅色的Courier字體了. <samp> <br><samp>元素是用來標識程式與script的範例輸出的,舉例來說,如果我想討論正在編寫的Perl script輸出結果,我可能會標集成這樣: <br><p>When the script has executed, at the command line you will see the message <samp>script was successful!</samp>.</p> <br>這邊我以<samp>把script的輸出範例圍起來,同時我們也能以CSS規則為程式輸出範例設定獨特的樣式,就像剛才為<code>做的一樣. <var> <br>與<samp>相關的,<var>是用來標記程式的變數和引用用的,舉例來說,如果我們正在討論XSLT樣式表,那麼我能寫下: <br><p>I'm going to pass the parameter <var>lastUpdated</var> to my main.xsl file.</p> <br>許多瀏覽器會以斜體顯示<var>標籤的內容,但是你可以寫一條簡單的規則去掉預設值,如果你不喜歡斜體的話.我們能用CSS的font-style屬性改變顯示效果: <br>var {<br>font-style: normal;<br>font-family: Courier, serif;<br>color: purple;<br>} <br>最後讓我們看看<kbd>元素,完成短語元素的部分. <kbd> <br><kbd>元素可以用來標記使用者要輸入的文字,舉例來說,如果我正在解釋如何使用剛才指定的accesskey把遊標切換到搜尋框內,我可能會這樣寫: <br><p>To quickly change focus to the search input field, Mac users type <kbd>Command 9</kbd>.</p> <br>你大概猜得到我接下去要說什麼了,沒錯,只要使用簡單的CSS規則,你就能調整所有的<kbd>元素的樣式,與其他短語元素一樣. 結論 <br>回顧一下在這章中看過的內容,首先探討<strong>和<em>優於同等顯示效果的<b>和<i>的原因,同時也研究瞭如何單純設定粗體或斜體顯示效果,CSS是正確的方法. <br>也討論了其他的短語元素,以<cite>標記人物,出版物開始,並證明了結構化標記語法對顯示效果,資料解析的好處. <br>並示範如何以適當的元件標記縮寫名詞,略稱,提升網頁的易用性,同時以額外的CSS展示,語音規則強化定義內容.最後則看到剩下的短語元素,每個元素都具備一般文字不同的預設樣式,但是我們也能快速地為單一頁面或者整個網站輕易的設計簡單的CSS規則,為這些元素指定想要的顯示樣式. <br>這章裡出現了一些對很多人來說相當陌生的標籤,標準化在中國展開後很可悲的被曲解成p css,真不知道該怎麼說,希望能看到的人能正確認識到標準化之路的路標--語義化文檔</cite></i></b></em></strong></kbd></kbd></kbd></kbd></var></var></samp></var>