網(wǎng)站建設中定義標題的最好方法發(fā)布者：本站     時(shí)間：2022-05-04 10:05:05

一個(gè)文檔標題，最好的定義方法是什么？要回答這個(gè)問(wèn)題，先設想我們要在一個(gè)頁(yè)面上定義文章的標題，通常我們有三個(gè)方法來(lái)實(shí)現這個(gè)簡(jiǎn)單目的：

方法一： 有意義嗎？
<span class="heading">文章標題</span>
雖然在某些情況下<span>會(huì )是一個(gè)方便的標簽，但它并不能表達出標題的完整含義。采用這個(gè)方法的一個(gè)好處是，我們可以對它附加一個(gè)CSS規則，分配其一個(gè)heading class，使其文字象標題一樣顯示。

.heading {
font-size: 24px;
font-weight: bold;
color: blue;
}
ok，現在所有的標題都用heading class標記成了大號的粗體字體，并且為藍色。太棒了！但是這樣做對嗎？如果有人用一個(gè)不支持CSS的瀏覽器來(lái)觀(guān)看，會(huì )怎樣呢？

舉個(gè)例子，如果我們設置的這個(gè)外部樣式表的規則不被老版本的瀏覽器支持，會(huì )怎樣？又或者有視覺(jué)障礙的人用屏幕閱讀器來(lái)閱讀這個(gè)頁(yè)面，又會(huì )怎樣？一個(gè)訪(fǎng)問(wèn)者通過(guò)這些途徑所看到（或聽(tīng)到）的應該和這個(gè)頁(yè)面上正常的文本沒(méi)有任何區別。

盡管class="heading"為這個(gè)標簽增加了一點(diǎn)意義，但<span>仍然只是一個(gè)普通的標簽，可以被大多數瀏覽器的缺省樣式所修改掉。

搜索引擎檢索這個(gè)頁(yè)面時(shí)會(huì )略過(guò)<span>標簽，就好象它不存在一樣，不會(huì )對其可能包含的關(guān)鍵字給于一點(diǎn)額外的重視。在后面我們會(huì )更多的談到搜索引擎和標題的關(guān)系。

最后，由于<span>標簽是一個(gè)內嵌元素，我們可能需要把它嵌套在一個(gè)額外的塊級元素中，比如<p>標簽或<P>標簽，為的是使它能夠形成單獨的行，這會(huì )進(jìn)一步被非必要的代碼弄亂你的標簽。而這些額外增加的標簽卻是必須的，這樣才能使不支持CSS的瀏覽器顯示出沒(méi)有差別的文本。

方法二:<p>和<b>組合
<p><b>文章標題</b></p>
使用一個(gè)段落標簽，將會(huì )給我們帶來(lái)塊級的顯示，<b>會(huì )把文本變成粗體。但是用這個(gè)方法標記一個(gè)重要的標題時(shí)，我們面對的是同樣無(wú)意義的結果。

不象方法A，<b>標簽能在可視化的瀏覽器中把文字顯示成粗體――甚至在不支持CSS的瀏覽器中。但是和<span>標簽一樣，搜索引擎也不會(huì )因為有一些東西在段落中被加粗了而給予更高的優(yōu)先。

難以設計樣式

用普通的<p>和<b>的組合，也帶來(lái)了另一個(gè)缺憾――無(wú)法把這個(gè)標題設計成不同于其他段落的樣式。我們可能想用一個(gè)特別的樣式來(lái)突出標題，來(lái)使頁(yè)面內容更清晰更具結構，但是用這個(gè)方法只能使其顯示成粗體。

方法三:樣式加實(shí)質(zhì)
<h1>文章標題</h1>
恩，多么好的標題定義。大多數的網(wǎng)頁(yè)設計者對它都很熟悉。其實(shí)適當的使用它們，<Hn> 就能為頁(yè)面內容提供靈活的、可索引的、以及可樣式化的結構。

這也是聰明的定義方法，你會(huì )發(fā)現它很簡(jiǎn)單。不再需要額外的標簽，你可以說(shuō)，這僅僅比另外兩個(gè)方法節省了一點(diǎn)點(diǎn)的字節，可以忽略不計，但節省一點(diǎn)是一點(diǎn)。

<h1>一直到<h6>，代表了標題的六個(gè)級別，從最重要的（<h1>）到最次要的（<h6>）。他們本身就是塊級的，不需要增加其它元素來(lái)使其單獨成行。簡(jiǎn)單，有效――就是好工具。

輕松定制樣式

因為我們使用<h1>標簽是唯一的，而<b>或<p>標簽更適合使用在整個(gè)頁(yè)面，所以我們可以用各種各樣的CSS方法來(lái)樣式化。

更重要的是，盡管完全不用樣式，一個(gè)標題標簽也能明顯的表示出一個(gè)標題！可視化的瀏覽器把 <h1>顯示成更大的粗體。一個(gè)非樣式化的頁(yè)面將以被期望的那樣顯示文檔結構，用適當的標題標簽來(lái)傳達意思。

屏幕閱讀器、PDA、手機、以及可視化的和非可視化的瀏覽器都會(huì )明白，碰到一個(gè)標題標簽時(shí)該做的事情，正確的處理，比頁(yè)面上的普通文本更重視的來(lái)對待。而使用<span>標簽，那些不支持CSS的瀏覽器就不會(huì )特別的對待它。

討厭的默認樣式

以往，由于瀏覽器默認的缺省值非常的丑陋，設計者們也許會(huì )避免完全的使用標題標簽?；蛘?，因為缺省值的巨大尺寸而避免使用<h1>或<h2>，取而代之的是用更高數值的標題標簽來(lái)實(shí)現更小的尺寸。

然而，需要重點(diǎn)強調的是，我們可以很簡(jiǎn)單的用CSS來(lái)改變這些標題標簽――舉個(gè)例子，一個(gè)< ;h1>并非一定是占滿(mǎn)大半屏幕的巨大標版。在后面，我將證明用CSS來(lái)樣式化標題標簽是多么的簡(jiǎn)單，希望可以幫助你減輕巨大的恐懼。

對搜索引擎友好的

這是一個(gè)巨大的好處。搜索引擎喜歡標題標簽。另一方面，一個(gè)<span>標簽或者普通的加粗的段落標簽卻在意味著(zhù)次要一點(diǎn)。適當的用<h1>到<h6>標記你的標題，只需要你的一點(diǎn)點(diǎn)努力，然而卻讓搜索引擎更容易的檢索到你的頁(yè)面，讓人們最終能找到它們。

搜索引擎機器人會(huì )給予標題標簽特別的關(guān)注――這是你可能放置一些關(guān)鍵詞的地方。就象檢索到 <title>和<meta>，它們會(huì )順著(zhù)標題標簽往頁(yè)面下面查找。如果你不使用這些標簽，那么包含在里面的關(guān)鍵詞將不會(huì )被認為是有價(jià)值的，從而被忽略掉。

所以只要付出一點(diǎn)點(diǎn)的努力，你就能增加人們基于頁(yè)面的內容找到你的站點(diǎn)的可能性。聽(tīng)上去不錯，不是嗎？

關(guān)于標題的次序
在范例中，這個(gè)特別的標題是頁(yè)面中最重要的，因為它是文檔的標題。因此，我們使用最重要的標題標簽，<h1>。順應W3C的規范，一些人認為跳過(guò)數個(gè)標題級是個(gè)不好的使用。舉個(gè)例子，想象我們在下面的頁(yè)面：

<h1>文章標題</h1>
我們接下去的標題（如果不是用另一個(gè)<h1>重復的話(huà)）應該是<h2>，然后是<h3 >，等等。你也許不應該在<h1>后面跳過(guò)一級，直接跟上<h3>。我傾向于同意以上的觀(guān)點(diǎn)，順著(zhù)行文保持級別的連續性，來(lái)構造一個(gè)排版結構。這樣的話(huà)，給一個(gè)已經(jīng)存在的頁(yè)面添加標題和樣式就更容易了，你會(huì )減少因使用超出的數字而導致的錯誤。

前面提到的，設計者也許會(huì )用<h4>來(lái)標簽一個(gè)頁(yè)面上最重要的標題，僅僅是因為它的缺省的字體尺寸不象<h1>那樣令人生厭的巨大。但是記住，先結構，后設計。我們總是能用CSS來(lái)把標題樣式化成任何我們喜歡的文字尺寸。