長期以來,格式化網站頁面時基本HTML元素的選擇都取決于它們的顯示的樣式。若需要一個帶有縮進的段落,你可能會選擇用<blockquote>標簽將這段文字包圍起來,讓段落兩端顯示出一些空白。但顧名思義,blockquote元素表示其中包含的內容是一段引用自其他來源的文字。如果我們僅僅是為了讓某一段文字以縮進形式顯示而使用blockquote元素,而這段文字卻并非引用自其他來源的話,那么就意味著我們錯誤地使用了HTML標簽——HTML標簽是用來表示文檔結構的。對于文檔的顯示樣式(例如某一元素的縮進),應該使用CSS來實現。
結構化HTML文檔主要體現在對HTML標簽正確、合理地使用中。選擇HTML標簽時要根據其語義,而不是其樣式進行。
既然現在CSS設計已經是可用的了,那么就應該把所有的格式化和設計相關的實現放在CSS文件中,讓HTML只用來表示文檔結構。作為一門用來設計表現樣式的語言,CSS建立于HTML的文檔結構之上并為其應用可視化樣式,而HTML則只用來表示文檔的結構,不再用于頁面樣式的設計中。
那么正確、合理的文檔結構能夠帶來什么好處呢?我們所提到的“結構”到底又是什么東西呢?
帶有語義的標記
為表現樣式編碼和為實現正確的語義編碼,二者在基本原理上的差別比較微妙。這里給出了一段示例代碼來幫助我們更好地區別。下面這一段HTML就是為了實現某種表現樣式而編寫的:
<br><br>
<b><font size="2">Our Family</font></b>
<br><br>
<font size="1">Pictured are Matt and Jeremy.As
usual,Matt is msking a funny face. We don't have many hotos
where he isn't.</font>
下面這一段HTML是為了達到正確的語義而編寫的:
<div id="family">
<h3>Our Family</h3>
<p>Pictured are Matt and Jeremy. As usual, Matt is
making a funny face. We don?t have many photos where he
isn?t.</p>
</div>
在第一個代碼片斷中,所有的HTML標簽都是用來表現樣式的。 <br>標簽用來換行,<b>標簽用來給文本加粗,<font>標簽則指定了文本顯示的大小。
而在第二個代碼片斷中,卻一點都沒有對頁面顯示樣式的說明——h3和p元素僅僅用來描述頁面中某一段內容的功能。p元素中包含了一個自然段的文字,而h3元素則表示其內容是頁面中的第三級標題。
關鍵之處就在于,第二個代碼片段并沒有考慮這些元素將要以何種樣式呈現出來,因為元素的呈現樣式將由CSS控制。之所以選擇這些標簽,是因為它們恰如其分地描述了其中的內容。這也正是HTML中語義的概念:選擇何種HTML標簽取決于標簽本身的語義,而不是其默認顯示出的樣式。
針對語義編寫HTML所帶來的巨大優勢將在本章稍后部分介紹?,F在我們只要記住,使用CSS進行設計時的主要任務之一,就是從編寫合法的、帶有良好結構并擁有語義的HTML文檔開始。完成了這一步之后,我們才能在這個堅實牢固的基礎之上應用各種CSS樣式。
創建良好的標記
每個頁面都在結構上有自己不同的需求,所以對于創建HTML來說,很難找到一個完美的一攬子解決方案。但我們卻能夠總結出一些通用的指導方針,將這些要點爛熟于胸,一定會對編寫HTML大有裨益。
?選擇DOCTYPE
在HTML的最開始部分聲明DOCTYPE(Document Type的簡寫)可以讓瀏覽器或其他用戶代理知道你要使用的HTML語言的類型。無論你打算選擇何種類型的HTML語言,DOCTYPE都是一個健壯的文檔所必需的,也是你在編寫HTML時要做的第一件事情。
“<p>標簽”和“p元素”之間到底有什么區別?大多數時候它們表示的是同一個東西,但仍有一些細微的區別?!皹撕灐敝负唵蔚腍TML分隔符,例如<p>、<div>和</body>等。而“元素”則是由一對開始結束“標簽”構成的,用來包含某一些內容——這里有一個值得注意的例外,即<br/>本身既是開始標簽又是結束標簽,其中不包含任何內容。
一般地,“元素”用來表示某一段明確的結構,而“標簽”則僅僅是用來創建文檔結構的語法而已。
示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
?指定語言和字符集
與聲明DOCTYPE同樣重要的是將HTML文檔指定為某一種人類的語言。如果你曾偶然闖入某個看似亂碼的網頁,而實際上其文字卻是日語、希臘語、斯瓦希里語或者其他什么語言,你就會知道頁面編寫者忘記設置頁面編碼所造成的后果了。因為Google和其他搜索引擎會根據搜索請求的語言來過濾搜索結果,所以如果你不想放棄搜索引擎帶來的流量的話,那么正確地設置頁面的編碼將顯得極為重要。本章稍后將詳細介紹字符編碼的相關內容。
示例:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
設置文檔的XML語言。這里設置為英語的ISO代碼en。
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
設置文檔的字符集。這里為UTF-8。
?指定標題
每個HTML頁面都需要一個用來描述頁面內容的<title>元素。在訪客將頁面保存至收藏夾時,<title>元素中的內容將作為鏈接的描述同樣被保存在訪客的瀏覽器中。搜索引擎也對<title>元素中包含的關鍵字格外感興趣,因此好的<title>可以明顯地提高頁面在搜索引擎中的排名。網站中的每個頁面都應該盡可能地有一個唯一的標題,標題應該極具描述性地概括該頁面的內容,而不是泛泛地介紹整個站點。
?選用恰當的元素
我們在前面已經分析了這個問題,但還是有必要在這里重復一遍:根據文檔內容的結構而選擇HTML元素,而不是根據HTML元素的樣式。例如,用p元素包含文字段落,而不是為了換行;用blockquote包含被引用的文字,而不是為了得到縮進等。
當然,并不是所有的HTML元素都可以在XHTML 1.0 Strict標準中使用的。事實上,雖然XHTML 1.0 Strict標準(以及XHTML 1.1標準)中可使用的HTML元素較少,但這些元素卻有著更加明確的意義。若你在創建文檔時找不到合適的、可以恰當描述其結構的標簽,那么可以考慮使用通用的div或span元素。當然,這也是一個警告……接下來將會介紹。
示例:
<h3>The Road to Enlightenment</h3>
而不要使用這樣的HTML:
<code style="font-size: 1.5em;">The Road to Enlightenment</code>
?避免過度使用div和span
設計HTML時一個常見的錯誤就是過度使用div和span。少量、必要地合理使用可以明顯增強文檔的結構性。但若是文檔中使用了太多的div和span,那么你就應該考慮一下是不是還有更加合適的HTML元素供選擇了。例如,若是h3更能表示內容的含義,那么就不應該使用div,span也不應該替代label的作用。
但這并不意味著應避免使用div和span。文檔中合適位置的少量div元素可以使文檔更易于應用樣式,且在邏輯段落上也顯得更加清晰。我們可以將div看作一個可以被重用的容器:將內容深深隱藏于太多的容器中并不是一個好主意,但是幾個合理位置中的div卻可以讓文檔顯得井井有條。
示例:
<div id="pageHeader">
<h1>css Zen Garden</h1>
<h2>The Beauty of <acronym title="Cascading Style
Sheets"> CSS</acronym> Design</h2>
</div>
?盡可能少使用標簽
前面兩個提示所隱藏的含義就是,HTML標簽使用得越少越好——事實上也確實如此。若想創建出良好的文檔結構,那么盡可能少使用標簽應該是一個自始至終都要考慮的問題。僅僅使用必要的標簽,將其他不必要的都刪掉。這樣做的好處不僅在于能夠讓文件保持小巧(也就意味著用戶下載速度的提高),也可以讓瀏覽器能夠很快完成文檔的解析,即得到更快的呈現速度。
示例:
<p>The Zen Garden aims to excite, inspire, and encourage participation.</p>
而不要這樣:
<div>
<p><span class="text">The Zen Garden aims to excite,
inspire, and encourage participation.</span></p>
</div>
?適當地使用class和id
為元素添加起標示作用的屬性可以讓你在稍后很容易將該元素與CSS或JavaScript關聯起來。class是一類可重用的屬性,能夠被重復應用到頁面中的任何元素上;而id則是獨一無二的,同一個id在每個頁面上只能出現一次。
一個元素可以應用多個class,一個class也可以應用在多個頁面元素上。我們也可以為同一個元素同時應用class和id,但要記?。涸谕粋€頁面上不能為多個元素指定相同的id。class和id可以選用字母或數字(a~z、A~Z、0~9)命名1,但必須以字母開頭。雖然有些瀏覽器對class和id名稱的大小寫不敏感,但為了今后便于調試,還是小心為妙。
注釋:1 下劃線“_”也可以使用?!g者注
三個合法的標識符:
<body class="homepage">
<p id="introduction">
<div id="section5" class="top corner solid">
兩個不合法的標識符:
<span class="15pxhigh">
<div id="footer"><div id="footer">
3.時間的檢驗
若曾編寫過在未來相當長的一段時間內都要保持不變的文檔,你就會發現在編寫的過程中必須處處小心,讓文檔盡可能完美。
以出版行業為例,為了保證語言流暢簡潔和內容的正確性,這本書曾被很多人修改編輯過。原因很明顯:與網頁在瀏覽器緩存中存在的時間相比,書籍在書架中停留的時間要長得多。所有這些預先的檢查工作都是為了確保書籍在出版時的正確性(但愿出版后好運相伴)。
但是在同樣的問題上,網站卻沒有此類的限制。每次用戶來訪,Web站點都從服務器將內容發送給訪客。這樣就意味著,即使在網站發布之后,你仍舊可以修改頁面的內容或重新設計頁面的樣式,每個再次訪問的用戶都能夠立即看到這些變化,而并不需要像圖書這樣,只有重印或再版的時候才有機會修改。自然,網站的不斷改進會讓人非常高興,但這也會讓那些簽了固定合同的設計師感到些許郁悶。
雖然禪意花園也是一個網站,但在編寫HTML的過程中卻遇到了一些獨特的挑戰,讓這個過程更像是寫書而不是網站。若是在用戶已經提交了設計之后再修改頁面的HTML,那么就有可能破壞掉從前的設計,這也與禪意花園的最初目標相悖。即使修改的僅僅是頁面中的文本,也會對文檔以及文檔中某塊內容的大小造成影響,并有可能無法預知地改變某些作品的布局。這樣看來,一旦發布之后再對禪意花園的HTML進行任何結構或內容的修改都可能是有害且不可接受的,所以在編寫HTML時就需要盡可能小心準確。
當前文章標題:在網站設計中正確運用HTML標簽
當前URL:http://www.gwxcn.cn/news/wzzz/correct-use-html-tag.html
上一篇:W3C標準初長成
下一篇:什么是在線字體