標記語言——清單
互聯(lián)網(wǎng) 發(fā)布時間：2008-10-17 18:57:09 作者：佚名 
我要評論
我要評論標準化設計解決方案 - 標記語言和樣式手冊
Web Standards Solutions The Markup and Style Handbook
Part 1: Get Down With Markup 從標記語法談起
Chapter 1 清單
在網(wǎng)絡上幾乎每個頁面都能找到清單. 超鏈接清單;購物車物品清單;你中意的電影清單...甚至是整個網(wǎng)
標準化設計解決方案 - 標記語言和樣式手冊
Web Standards Solutions The Markup and Style Handbook
Part 1: Get Down With Markup 從標記語法談起
Chapter 1 清單
在網(wǎng)絡上幾乎每個頁面都能找到清單. 超鏈接清單;購物車物品清單;你中意的電影清單...甚至是整個網(wǎng)站的導航清單.可能在某些人看來,清單的建立是隨心所欲的,但是我們要去探索發(fā)現(xiàn)的正是如何建立清單以及集中幾種常用方法的優(yōu)缺點.稍后,我們會列出幾個如何美化普通清單一集他們的優(yōu)缺點的示例來.
咱們?nèi)ベ徫锇?/strong>
最初,我打算用一個細目清單(洗衣清單)來作為本章的示例,但是很快的,我就意識到,我根本不知道這種清單中應該包括那些細目,所以...看在示例的份上,就用食物來舉例吧!
讓我們設想,你需要把一個食品清單放到你自己的網(wǎng)站上去,你可能會為為什么要把食物清單放到網(wǎng)站上去而感到不解,厄,這個可能就離題了,我們只是需要一個可以開始為清單思考的理由罷了...
在頁面上,假設我們想讓清單看起來像......好吧,看起來就像一個清單 — 也就是一長串垂直的列表,里面的每項內(nèi)容獨占一行:
Apples
Spaghetti
Green Beans
Milk
看起來非常簡單,不是嗎?和頁面設計開發(fā)的許多方面類似,我們能夠通過很多不同的方法達成相同(或者類似)的效果.與這本書后面所有的示例相同的,我將以eXtensilble HyperText Markup Language(XHTML)的觀點來展現(xiàn)所有示例 — 并且確認選用的方法都使用正確的標記語法,遵照World Wild Web Consortium (W3C)所制定的各種標準.
我們可以輕松的在每個項目后面加上個<br />標簽就搞定了,或者也能使用各種清單項目標簽來完成這個工作,現(xiàn)在我們就來看3種完全不同的方法,以及每種方法的特點.
#p#
提問時間
下面哪種方法最適合建立食品清單?
方法 A: 用 <br /> 換行
Apples<br />
Spaghetti<br />
Green Beans<br />
Milk<br />
方法A的確是一種被廣為傳用的方法,可能有數(shù)百萬個頁面使用過,事實上,我相信我們中的每個人都會偶爾因為使用了這種方法而感到內(nèi)疚,對吧?我們希望在清單中的每一項都獨占一行,而加入了換行標簽(在這里使用的是符合xhtml標準的自關閉標簽<br />)就會在每個項目后面生成斷行,這就是他所有的效果了,看起來,挺管用的.
但是,如果我們想要給這個食品清單加上與其他頁面元素不同的樣式的時候該怎么辦呢?比方說:如果想讓清單的所有鏈接的顏色變成紅色而不同于默認的藍色,或者想要改變字體的大小時該怎么辦呢?真的我們什么都做不了,我們被為整份html文檔設定的字體風格(如果有設定的話)限制住了.同時,如果在清單外面沒有任何標簽圍繞,我們就沒辦法為清單制定一個獨特的css規(guī)則.
折行
如果我們在清單中加入一個類似"Five Foot Loaf of Anthony's Italian Bread".根據(jù)這個清單在頁面里擺放的位置,在水平空間不足或者瀏覽者的瀏覽器視窗比較窄的情況下,過長的項目就會冒著折到下一行的風險.
同時我們也要考慮到視力不佳的用戶可能會把預設的字體大小改大以便增加可讀性,我們認為能夠像 圖1 - 1 一樣把項目輕松的布置在窄欄里,但是很有可能會像 圖 1 - 2 這樣在意料之外的地方發(fā)生斷行,讀者調(diào)大字體時,設計的樣式就完全變樣了.
圖 1 - 1 預設文字大小的范圍
圖 1 - 2 調(diào)大文字大小后的相同內(nèi)容
唔......現(xiàn)在,我想我應該要買面包是沒錯,但是在 圖 1 - 2 里,面包上面的兩行字實在感到疑惑.
在使用小屏幕裝置像是移動電話或者PDA閱讀長行時,類似的換行問題就會展露它丑惡的嘴臉,骨灰級的科技愛好者可能會隨手帶著記錄購物清單的Palm Pilot(而不是傳統(tǒng)意義上的紙和筆)當他在超級市場里面閑逛的時候,最后卻在貨架中尋找一種叫"Anthony's Italian"的東西.
在這里我要在本質(zhì)上闡明一個觀點 - 使用方法A ,并沒有把閱讀網(wǎng)頁時的這些設計師們所無法控制的變數(shù)考慮在內(nèi).
#p#
方法 B: 會咬人的小圓點
<li>Apples<br />
<li>Spaghetti<br />
<li>Green Beans<br />
<li>Milk<br />
大多數(shù)成熟的瀏覽器在解析<li>標簽時都會在清單項目的左側(cè)加上圓點符號,你能通過方法B來達到這個效果,在需要圓點符號時加入<li>標簽.但是如果<li>標簽沒有被包含在適當?shù)母笜撕炛袝r,那有些瀏覽器不會顯示出圓點符號,適當?shù)母笜撕灠◤姶蟮?lt;ul>以及<li>的另一個父標簽<ol>(有序清單),這個會在稍后有更多的討論.
圓點符號的出現(xiàn)在某種程度上的確能夠幫助解決換行問題,每個食品項目在左邊會有小圓點符號,如果某個項目過長折行的話,旁邊沒有小圓點符號應該就可以很明顯的看出這并不是全新的項目,但是方法B仍然有顯示結果意外的問題:它并不符合標準.
麻煩檢查一下
根據(jù)W3C的XHTML 1.0規(guī)范,所有的標簽最后都必須要閉合起來 — 如果我們還是繼續(xù)使用上面示例中的寫法,讓所有的<li>保持開放狀態(tài)的話,那就太丟臉了!
在行末使用<br />標簽來模擬正確的無序清單自動換行的顯示效果,但其實我們有更好的方法.
一向以來,養(yǎng)成編寫正確的標簽語法的習慣非常重要,正確的編寫標簽語法,我們可以不必在未來擔心由于沒有閉合標簽或者不正確的嵌套元素所帶來的問題.如果有人閱讀這些源代碼的話,也可以使他們更加深入的理解源代碼想要達成的效果.
記得善用W3C的在線檢測工具(http://validator.w3.org/)來檢查你提交的URI或者上傳的文檔,最終你會覺得這樣做非常值得.
#p#
方法 C: 接近了
<li>Apples</li>
<li>Spaghetti</li>
<li>Green Beans</li>
<li>Milk</li>
方法C更加的接近完美的解決方案了,但是還是悲慘的失敗了,原因還是非常明顯:這仍然不符合標準的標記語法.
我們已經(jīng)把<li>標簽關閉了,因為<li>是塊級元素(block-level),因此在使用上可以去掉<br />標簽,這樣每個項目都獨占一行,但是,我們卻漏了它的外層結構,缺少了一個表示"這群項目是一個清單!"的元素.
從語義化的角度看這個問題也非常重要 — 清單是一組項目歸屬在一起,因此我們應該為它們加上這樣的標簽,此外,使用正確的清單標簽能清楚告訴瀏覽器,軟件或者顯示設備"這組項目是個清單!",語義化標簽的意義就在于將內(nèi)容根據(jù)他們所屬的類別進行結構性的搭建.
塊級(block-level)與行內(nèi)(inline): HTML元素可以分為塊級與行內(nèi)兩大類型,塊級元素會從新行開始,最后接著一個斷行,而行內(nèi)元素則會與其他的行內(nèi)元素顯示在同一行內(nèi),塊級元素可以包括其他塊級元素和行內(nèi)元素,而行內(nèi)元素里面不能包含塊級元素.
塊級元素包括:<div>,<h1>-<h6>,<form>等等,行內(nèi)元素包括:<span>,<strong>,<em>,<q>等等.
如果以純XML的角度來看我們的食品清單,或許我們會使用這樣的方式進行標注:
<grocerylist>
<item>Apples</item>
<item>Spaghetti</item>
<item>Green Beans</item>
<item>Milk</item>
</grocerylist>
整個清單有一個容器元素<grocerylist>,所有的食品項目都包含在里面,以這種方式歸類項目,可以基于XML的應用輕松的從清單里面抽取出所有的項目.
舉例來說,一個開發(fā)者需要編寫一份XSLT樣式表,將這個清單轉(zhuǎn)成xhtml,純文字,甚至是pdf文件,因為列表項目的結構表現(xiàn)的非常清晰,所以程序可以輕松的獲取信息并作出一些有用的處理.
雖然在這本書里我并不直接處理XML,但是這些原則也適用于XHTML世界,如果文檔使用非常語義化的標簽結構,將可以提升文檔今后的靈活度,不管是為結構清晰的文檔加上css樣式表還是修改容易理解的文檔 — 只要提供正確的結構,就能節(jié)省許多今后在維護時可能浪費掉的時間.
接著,我們仔細的看看方法D,看看這些怎么樣結合在一起 — 一個能被大多數(shù)瀏覽器和屏幕閱讀器識別并顯示的文檔,同時又允許我們使用各種不同的方法為文檔加上樣式.
#p#
方法 D: 愉快的包裝者
<ul>
<li>Apples</li>
<li>Spaghetti</li>
<li>Green Beans</li>
<li>Milk</li>
</ul>
是什么讓方法D變得如此特別?首先,它的語法完全正確,正確的無序清單具備了<ul>容器元素,同時每個項目都已<li>元素閉合起來.到這里你會想問,我們花費了那么多力氣只來示范為了正確而正確?我們來看看這樣做能帶來的好處:
由于我們正確的標記了我們的食品清單,每個項目都會獨占一行(因為塊級元素<li>的關系),而且大多數(shù)瀏覽器會給每個項目的左邊增加一個小圓點符號,并且進行正確的行內(nèi)縮進換行.(見圖 1 - 3)
圖1 - 3
PDA,移動電話,或者其他的小屏幕設備的用戶也可以看到清楚的,關系明確的組織方式,由于我們告訴了這些設備這些資料的類型(在這個示例里是清單),因此這些設備能夠根據(jù)自己的能力決定怎樣顯示才能達到最好的效果.
如果因為放大字號或者縮小瀏覽器視窗寬度等原因造成換行,那么被換行的文字會行內(nèi)縮進到與第一行文字對齊的位置,所以不管瀏覽器環(huán)境如何,都可以輕松的識別每個清單項目.
#p#
概要
我們已經(jīng)針對每種可能的方法進行討論了,現(xiàn)在讓我們快速的回顧一下剛才討論過的東西: 方法A:
無法為清單加上獨特的樣式
在狹窄的列里或者小屏幕設備上,較長的內(nèi)容可能會因為換行而造成誤解
缺乏語義性 方法B:
增加小圓點符號來幫助識別每個項目,但是一些瀏覽器會在缺失父級標簽<ul>時可能不顯示小圓點符號
沒有放在<ul>中,缺少閉合標簽</li>意味著難于加上樣式
不標準 方法C:
加上了閉合標簽</li>后就不需要<br />標簽了
省略了<ul>元素使得我們難于為這個清單添加特定的樣式
不標準 方法D:
符合標準!
使文檔語義化,結構性
大多數(shù)瀏覽器都會在每個項目左邊顯示小圓點符號
在大多數(shù)瀏覽器上都會在換行后行內(nèi)縮進
很容易就可以定義特定的css樣式
正如你所見,你可以從一個看起來很簡單的問題上獲得不少知識.就算是你已經(jīng)在你所有的頁面上都是用了方法D,還是可以你為什么這樣做比較好,我們會在這本書里一直探索"為什么"的問題,讓你在各種情況下選用最恰當?shù)姆椒?
#p#
技巧延伸
讓我們利用我們構造出來的食品清單來試看看幾種用定義css樣式的方法,我們將拋開預設樣式,加入自定義的圓點符號,接著把它轉(zhuǎn)成橫向,把它變作一個導航條.
扔掉圓點
"我真的不喜歡食品清單里的那些個小圓點,我想我還是用回<br />吧."
不需要回到老習慣 — 我們?nèi)匀豢梢允褂梦覀兘Y構化的無序清單,然后使用css關閉掉小圓點符號和行內(nèi)縮進,關鍵在于我們保留了清單的結構,然后以css具體的呈現(xiàn)出來.
首先,加上一段去掉圓點符號的css規(guī)則:
ul{
list-style:none;
}
顯示的結果見圖1 - 4
圖 1 - 4 去掉小圓點符號
接著我們來去掉行內(nèi)縮進,根據(jù)預設值,所有無序清單左邊都會留有一些內(nèi)補丁(padding),但是不用擔心,我們可以隨心所欲的裁掉:
ul{
list-style:none;
padding-left:0;
}
顯示結果可見圖1 - 5
圖 1 - 5
雖然圖 1 - 5 看起來和使用了幾個<br />標簽的效果幾乎一樣,但是它還是符合標準的,結構化的無序列表 — 不管什么瀏覽器,設備都能正常顯示,如果必要的話只需要更新幾條css規(guī)則就能換上不同的樣式了.
#p#
使用自定義圓點符號來完成自己的想象
或許你想要在清單里保留小圓點符號,但是不想用瀏覽器無趣的默認設置,更像用自己的小圓點圖案.有兩種方法可以達成你想要的 — 而我更推崇第二種方法,因為它可以在各種瀏覽器之間更好的兼容.
第一種方法是用 list-style-image 屬性來指定用來替代默認小圓點的圖片名稱.
ul{
list-style-image:url(i_hot.gif)
}
這是最簡單的方法,但是它會在不同瀏覽器之間的圖片垂直對齊位置上有所不同,有些瀏覽器會把圖片和項目文字中線對齊,也有的會把圖片放得稍微高一點,它們之間有一點不一致.
為了避免 list-style-image 造成的幾個流行瀏覽器之間的對齊問題,我比較喜歡用一種替代方法:把圖片作為每個<li>元素的背景.
首先,我們要去掉默認的圓點,然后再加上我們自己的背景圖片:
ul{
list-style:none;
}
li{
background-image:url(i_hot.gif) no-repeat 0 50%;
padding-left:25px;
}
no-repeat 會告訴瀏覽器不把背景圖片進行平鋪操作(默認會平鋪),而0 50%會告訴瀏覽器把背景圖片放置在距離左邊 0 像素,距離上面 50% 的地方,讓背景圖片 i_hot.gif 根據(jù)中線對齊.我們也可以用精確的像素來指定位置,比如說 0 6px 會讓圖片放置在距離左邊0像素,距離上面 6 像素的位置上.
我們還要在清單項目的左邊加上17像素的內(nèi)補丁(padding),以便我們把寬20像素高11像素的圖片能夠完整顯示出來,同時又留有一點空白,而不會和文字有重疊.這些數(shù)據(jù)應該根據(jù)你所使用的圖片尺寸進行調(diào)整( 圖 1 - 6 )
圖 1 - 6 自定義圓點圖片的清單
#p#
導航清單
在我的個人網(wǎng)站(www.simplebits.com)里我分享了幾種將無序清單轉(zhuǎn)化為水平導航條的方法,用普通的,結構化的XHTML就像我們的食品清單示例那樣創(chuàng)造一個類似分頁標簽(Tab)的效果.
我們把那個食品清單轉(zhuǎn)換成一個網(wǎng)上超市的導航條(這個超市只賣幾種東西就是了...).
我們想要這個導航條以水平的方式呈現(xiàn),并且能夠在鼠標劃過,選中時有某種強調(diào)顯示,以便我們模擬分頁標簽的效果.
首先,我們?yōu)榍鍐渭由弦粋€id,這樣我們就可以為它單獨定義css樣式了,同時我們也將把每個食品項目轉(zhuǎn)成鏈接.
<ul id="minitabs">
<li><a href="/apples/">Apples</a></li>
<li><a href="/spaghetti/">Spaghetti</a></li>
<li><a href="/greenbeans/">Green Beans</a></li>
<li><a href="/milk/">Milk</a></li>
</ul>
現(xiàn)在,開始加上一些輔助的css:
#minitabs{
margin:0;
padding:0 0 20px 10px;
border-bottom:1px solid #696;
}
#minitabs li{
margin:0;
padding:0;
display:inline;
list-style:none;
}
在這里我們已經(jīng)完成了去掉默認圓點符號和行內(nèi)縮進的工作,我們也把 display設置成inline,往垂直清單轉(zhuǎn)化成水平清單邁出了第一步,同時我們也加上了底部邊框以便區(qū)分出整個鏈接組.
把清單轉(zhuǎn)化成水平導航條的第二步,是將我們的鏈接全部浮動到左邊顯示,我們同樣為所有的超鏈接加上簡單的樣式:定義外邊距和內(nèi)補丁的大小:
#minitabs {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #696;
}
#minitabs li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#minitabs a {
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #9c9;
}
在這里我們將清單中所有的元素都定義float:left,是為了讓他們能水平顯示排列于一行之內(nèi),同時我們也加上了了一些色彩,把鏈接改成粗體,拿掉了鏈接底部的下劃線.
然后,為鼠標滑過或選中的鏈接創(chuàng)建一個模擬分頁標簽的邊線:
#minitabs {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #696;
}
#minitabs li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#minitabs a {
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #9c9;
}
#minitabs a.active, #minitabs a:hover {
border-bottom: 4px solid #696;
padding-bottom: 2px;
color: #363;
}
#minitabs a:hover {
color: #696;
}
為了強調(diào)鏈接,我們在鼠標劃過或選中時增加一個4像素高的底邊,我們也可以使選中的<a>標簽保持強調(diào)效果,只要加上class="active":
<li><a href="/spaghetti/" class="active">spaghetti</a></li>
這個 active類別與 a:hover的共用相同的css樣式.(圖 1 - 7)
圖1 - 7
我在自己的網(wǎng)站(www.simlpebits.com)以及2003年7月重構Inc.com(www.inc.com)里面都用到了這個技巧.如果你需要更多的示例代碼,可以自由訪問這兩個網(wǎng)站并查看他們的源代碼.
只需要加上一些內(nèi)補丁和邊框,就可以達到各種類似分頁標簽的效果了,到目前為止,我們甚至連一張圖,一句javascript都沒有使用,而僅僅只用到了基本的xhtml結構就構成了我們的食品清單,這實在是太棒了!
迷你分頁標簽的外觀
如果你想要和平常的,方方正正的css邊框不太一樣的效果的話,只需要作出一點點小修改,我們就可以使用圖片來創(chuàng)建有趣的導航條了.
我們使用和之前完全一樣的無序清單,以及十分類似的css:
#minitabs {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #9FB1BC;
}
#minitabs li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#minitabs a {
float: left;
line-height: 14px;
font-weight: bold;
padding: 0 12px 6px 12px;
text-decoration: none;
color: #708491;
}
#minitabs a.active, #minitabs a:hover {
color: #000;
background: url(tab_pyra.gif) no-repeat bottom center;
}
這段css大概看起來和上一個示例中的幾乎一樣,最主要的區(qū)別在我們用 background-image 定義了在鼠標劃過或選中的時候顯示在鏈接底部中間的圖片來代替了原本的4個像素高的底部邊框.(圖 1 - 8)
圖 1 - 8: 使用背景圖的迷你分頁標簽導航
這里的技巧在于選擇一個足夠窄的圖片,必須能夠塞進最短的導航條項目下,這樣一來我們只需要一張圖片來強調(diào)導航鏈接而不必為各種不同寬度準備不同的圖片,當然,在你自己的項目中,你可以選擇各種圖片使用(圖 1 - 9):
圖 1 - 9: 使用其他圖片的例子
這些迷你分頁標簽的源碼和示例都可以在www.simplebits.com/tips/ 找到,更多的為清單添加樣式的方法可以參考 Mark Newhouse在A List Apart雜志上發(fā)表的"Taming Lists"的文章(www.alistpart.com/stories/taminglists/)
相關文章
- HTML表格用于在網(wǎng)頁上展示數(shù)據(jù),通過標簽及其相關標簽來創(chuàng)建,表格由行和列組成,每一行包含一個或多個單元格,單元格可以包含文本、圖像、鏈接等元素,本文將詳細介紹HTML表格2025-03-12
- 本文介紹了三種禁止HTML頁面滾動的方法：通過CSS的overflow屬性、使用JavaScript的滾動事件監(jiān)聽器以及使用CSS的position:fixed屬性,每種方法都有其適用場景和優(yōu)缺點，感興2025-02-24
在 Web 開發(fā)中，文本的視覺效果是提升用戶體驗的重要因素之一,通過 CSS 技巧，我們可以創(chuàng)造出許多獨特的效果，例如文字鏤空效果,本文將帶你一步一步實現(xiàn)一個簡單的文字鏤空2024-11-17
在Html中,a標簽默認的超鏈接樣式是藍色字體配下劃線,這可能不滿足所有設計需求,如需去除這些默認樣式,可以通過CSS來實現(xiàn),本文給大家介紹Html去除a標簽的默認樣式的操作代碼2024-09-25- 在HTML中,可以通過設置CSS的resize屬性為none,來禁止用戶手動拖動文本域（textarea）的大小,這種方法簡單有效,適用于大多數(shù)現(xiàn)代瀏覽器,但需要在老舊瀏覽器中進行測試以確保2024-09-25
本文詳細介紹了如何利用HTML和CSS實現(xiàn)多種風格的進度條,包括基礎的水平進度條、環(huán)形進度條以及球形進度條等,還探討了如何通過動畫增強視覺效果,內(nèi)容涵蓋了使用HTML原生標簽2024-09-19- Canvas 提供了一套強大的 2D 繪圖 API，適用于各種圖形繪制、圖像處理和動畫制作,可以幫助你創(chuàng)建復雜且高效的網(wǎng)頁圖形應用，這篇文章主要介紹了HTML中Canvas關鍵知識點總結2024-06-03
html table+css實現(xiàn)可編輯表格的示例代碼
本文主要介紹了html table+css實現(xiàn)可編輯表格的示例代碼，主要使用HTML5的contenteditable屬性，文中通過示例代碼介紹的非常詳細，需要的朋友們下面隨著小編來一起學習學習2024-03-06
本文主要介紹了HTML中使用Flex布局實現(xiàn)雙行夾批效果，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習2024-02-22
在網(wǎng)站開發(fā)中，登錄頁面是必不可少的一部分，本文就來介紹一下HTML+CSS實現(xiàn)登錄切換，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需2024-02-02
