本文介紹了在網頁制作學習中應該注意的使用的一些HTML標簽的問題。
HTML已經嘗試去除表現和朝向內容發展,導致這樣一個基本原理:從
表現(CSS)中分離出
內容意義(HTML)。這將會給網頁減肥,因為一個表現指令集合(以外部CSS文檔的形式)可以應用到多個頁面。這也會使網站更易於管理因為全局變動可以從修改一個單獨的文件得到。
部分不良標簽基本上是表現標簽(比如
small
),它們可以用更有意義和更簡單的CSS規則取代。其他的不僅用於表現,而且還是不必要的龐大(比如
font
標簽)或者對可用性有害的可惡的(比如
blink
)。
標簽
下面這些是你可能會經常碰到的可以有更好選擇的標簽:
b
可以用來產生粗體元素。使用
strong
(意味著強烈強調)代替更有意義,或者用CSS來完成這項工作,增加
font-weight: bold
的規則,用來表明粗體元素。
i
可以用來產生斜體元素。使用
em
(表示強調),這也更有意義。或者可以用CSS來表現斜體:
font-style: italic
big
可以產生更大字體。使用標題(如
h1
,
h2
等,當文本本來就是一個標題時)代替,增加了意義,或簡單地在CSS中使用
font-size
屬性,獲取更多的控制權。
small
可以產生小字體。CSS(
font-size
)再一次取得更多的控制權。
hr
可用用來展現一條水平線。在CSS中用
hr
設計很少見,CSS的
border-top
,
border-bottom
屬性或者樸素的圖像做這個效果會更好。
上述的標簽與最新的HTML標准盡管都兼容,但對內容卻沒有任何好標簽應有的意義。They could be more useful but they aren't particularly harmful, and might easily be mistaken for innocent butter-wouldn't-melt-in-their-mouth nuggets of pure goodness when standing next to the following filthy tags.
u
可以為元素產生下劃線。它提醒著下劃線文本還很多連接關聯。這就是這個標簽死了很久的原因——你不必給非連接文本下劃線。
center
可以用來居中在元素內部的元素。CSS屬性
text-align
允許不僅僅是
center
,還有
left
、
right
和
justify
。
menu
用來創建菜單列表。它並沒有
ul
做的完美,在因為無序列表更通用,
ul
高高地站在menu的屍體上。
layer
和
div
元素相似,都由CSS絕頂位置。這僅僅能在老版本的Netscape中工作,所以再也沒有什麼用。
blink
或者
marquee
。大聲說不!它們應該像本身意義一樣被期待,但有著十分有限的支持,和,只會產生非常,非常惡心的笑話。
font
,可以用來定義元素的字體名稱,尺寸和顏色,在標簽世界中理所當然地獲得了臭名昭著標簽之王榮譽稱號。舊的網站(甚至新的也有)像滿世界的瘟疫之蟻一樣布滿整個頁面。大部分的
font
標簽激增是從網頁制作軟件帶來的,把
font
標簽包括顏色和尺寸用在每一個元素。
font
標簽被濫用到出現在當前的每一個重復元素的(如,每次你使用
p
元素),而CSS,則可以用一條簡短的代碼來應用重復元素,甚至控制整個網站。使用CSS方法,不僅可以使頁面比被大量
font
標簽寄生的
更苗條,而且更容易維護因為你所需要做得只是改變CSS文件中的
一行,而不是逐一修改每一個
font
標簽。這也增加了維護一個一直保持設計風格一致的網站的可能性。
font
標簽和不恰當的表格使用是兩個產生網頁不必要臃腫的主要原因。
屬性
可能你認為你正在使用良好的標簽,但還是有一些麻煩的寄生蟲屬性潛伏,它們隨時會冒出來。
name
用來為一個元素指定一個名字,它在如
input
的表單元素中完全被接受,但在其它地方,
name
的工作已經被
id
屬性取代。
text
和
bgcolor
可以在
body
起始標簽中定義頁面的基本文本顏色和背景顏色。CSS的
color
和
background-color
屬性在應用到
body
選擇符時也可以做到。
background
可以在body標簽中指定一個背景圖畫。CSS會做得更好,用如background-image的屬性來處理背景圖片。
link
、
alink
、
vlink
在
body
標簽中用來指定連接(未訪問,激活和已訪問)。CSS寶貝──
:link
、
:active
和
:visited
會做這項工作。
align
可以用來對齊某個元素的內容(比如
<div align="center">Stuff</div>
),但是,像
center
標簽,CSS的
text-align
屬性是新的老板。
target
可以用不同的方式打開一個連接,最常用的是打開新窗口(比如
<a href="wherever.html" target="_blank">Help me</a>
)。看起來不錯,但你不要對你的網站這樣做。用戶並不預期不可思議的東西(比如新窗口)出現,而且最常用的浏覽工具是浏覽器的後退按鈕,如果你打開新窗口,這將不可用。它是非法和不易用的。
注意
保留標簽的表現屬性如圖像的
width
和
height
,表格的
cellpadding
和
cellspacing
,是由於這些元素經常使用不同的值。這不是完美的解決方案,但如果你的網頁有大量的圖像和表格,你沒有其他的明智選擇,只好使用它們。
最讓人難以理解的表現屬性是
textarea
標簽,它僅有
cols
和
rows
兩個合法屬性,在最新的HTML版本中也是必須的。
良好標簽,不良使用
要進入你的臥室你可以彎腰通過一個狗洞,但等等,還有一扇有把手的為人類准備的門!哇,看——剛好適合一個進入。
使用HTML標簽(好標簽),無論相信與否(相信它!),有一個很好的的理由:你使用它們有一個好前提,你就會有一個更好的結果。
網頁本身對用戶來說,比起HTML標簽語法語義更易用,屏幕閱讀器常會在遇到一個
ul
標簽或者有著
h1
或
h2
的標題標簽時強調突出它們。
在HTML標簽世界中最被濫用的就是表格了。表格常常用來布局,但表格應該僅僅只用來展示表格式數據,就如它們本身的設計意圖。不用表格的布局方法不是追求開悟的某種禅,它不僅可以顯著地為網頁減肥,而且更易於維護和重新設計。
注意
有時侯設計者還會用在這裡提到的這些標簽和屬性(特別是用表格來布局)來做
過渡型的設計──既可以工作在老版本的浏覽器上(尤其是Netscape4),也可以工作在現代浏覽器上。表格確實可以在CSS不稱職的Netscape4上有更強的表現控制。很不幸,這些用戶很少而且越來越少了,而展現表格布局的缺點一覽無遺的移動設備用戶越來越多。上述的無表格設計可以預防這些缺點,盡管對一小部分的用戶有些許的表現改變,但還能在
所有的浏覽其中保持著完全的功能。
框架
Goldilocks認為喝上一杯麥片粥是一個不錯的注意,但三個碩大的肉食哺乳動物突然出現,把她丟出窗戶。框架就是裝麥片粥的杯子。它們看起來似乎不錯,但已經到了瀕危階段而且很快就會消失。
大部分的網站並不是用框架,而一般用戶也會把一個文檔當作一頁。
有些情況,如你要防止用戶不能把特定的網頁添加到書簽,又如你希望用戶用Email或即時聊天軟件推薦特定的網頁,又或你想把整個網站變得十分復雜,讓使用屏幕閱讀器的用戶在框架之間頻繁操作,還或者你想迷惑搜索引擎,夠了夠了,你使用框架吧!
總之,框架只會
增加復雜性和
喪失可用性。
注意
只要你遵循下列規則,你不會在犯錯上有前途:
1)一個標簽或者屬性就算只有一點點的跟
表現搭上,都不要使用。那是CSS的事。並且CSS做得更好。
2)把標簽使用在如它的
名字所暗示的用途上。表格標簽是用在表格式數據上的。標題標簽是用在標題上的。等等等等。
3)特定的內容用
恰當的標簽。列表用
list
,標題用hx(x = 1 - 7)等等等等。
延伸閱讀
HTML高級指南的標准要點:戒掉壞習慣和轉向標准──兼容XHMTL