WEB前端涉及的布局、結構化和標準化

互聯(lián)網 發(fā)布時間：2008-10-17 19:23:59 作者：佚名

很久沒有寫文章，最近一直在忙于找工作和找房子。哎，現(xiàn)在終于安定下來了，哎，又嘆息一下，是因為我把去淘寶面試的機會也推掉了，本來以為要卷鋪蓋回武漢了，哎，不提了，很對不起小馬哥，也很對不起自己啊！現(xiàn)在還是在上海，不扯了，開始正題吧。做前端開發(fā)快有3年時

上面，我們講到了要充分的語意化，其中我們提到了嵌套的問題，這個也是我們做到結構化的一個重要部分。個人認為一個最基本的原則就是盡量減少嵌套。至于為什么這么做，我剛才也給大家做了一個簡單的介紹，結構清晰，瀏覽器解析快。其實結構清晰（夠簡單，嵌套少），對我們的搜索引擎同樣是做起到了SEO的效果。怎么講？大家想想，嵌套N多層，跟我們以前使用table設計時，table套table的區(qū)別就不大了，而那種含有大量冗余信息的頁面，搜索引擎解析的時候也很費力啊。所以我們現(xiàn)在有了WEB標準，就不要再去犯以前的錯誤了。
說到SEO優(yōu)化，讓我們來看看我的例子中對LOGO的處理，XHTML代碼如下：
<div id="topbar">
<h1><a href="http://www.yaohaixiao.com/" target="_blank" title="海嘯的地盤--享受生活，享受每一天！">海嘯的地盤--享受生活，享受每一天！</a></h1>
<div id="search-bar">
<form name="frmsearch" id="frmsearch" action="" method="post">
<label for="keyword">站內搜索：</label>
<select id="topics">
<option value="0">全部主題</option>
<option value="1">(X)HTML</option>
<option value="2">CSS</option>
<option value="3">Javascript</option>
<option value="4">XML</option>
<option value="5">ASP/ASP.NET</option>
</select>
<input type="text" name="keyword" id="keyword" value="請輸入搜索關鍵字" maxlength="60" />
<input type="reset" name="btnsearch" id="btnsearch" value="開始搜索" />
</form>
</div>
呵呵，當大家用瀏覽器瀏覽時，可能會以為這里是一個<img />標簽吧？其實我這里做了一個簡單的SEO優(yōu)化（當然只是我個人比較喜歡這個方法，可能有朋友跟我有不同觀點。），做了關鍵字的優(yōu)化。
對SEO有些了解的朋友都知道，搜索引擎搜索關鍵字的時候，是先對XHTML標簽里的<meta>標簽的keyword部分的文字，然后就是標題里的文字，接著就是正文中的h1~h6標簽，然后是strong標簽中的文字。而我們網站的名稱，毫無疑問的會作為關鍵字的。
所以我這里用h1標簽模擬了<img />標簽的效果，將網站名稱這個關鍵字在頁面里出現(xiàn)了一次，而且是以正文中搜索引擎分析的優(yōu)先級最好的h1標簽，以說明該內容在頁面中的關鍵性。具體的實現(xiàn)代碼這里就直接寫出來：
#topbar h1{
float:left;
width:220px;
height:58px;
line-height:58px;
overflow:hidden;
font-size:18px;
color:#060;
text-indent:-999px;
background-image:url(../img/logo.png);
}
#topbar h1 a:link,
#topbar h1 a:visited,
#topbar h1 a:hover{
display:block;
width:220px;
height:58px;
line-height:58px;
overflow:hidden;
background-color:transparent;
}
<h1><a href="http://www.yaohaixiao.com/" target="_blank" title="海嘯的地盤--享受生活，享受每一天！">海嘯的地盤--享受生活，享受每一天！</a></h1>
看了代碼，我想大家也很明白了，我們這里利用了text-indent、overflow:hidden;屬性以及display:block。我們把LOGO圖片作為h1標簽的背景，然后用text-indent設置一個超大的負值，然后結合overflow:hidden;屬性，讓h1標簽里面的字都超出到它的布局范圍內，overflow:hidden后就在h1標簽里看不到文字了，而LOGO圖片背景顯示出來了。
接著一個關鍵就是將a標簽模擬成圖片鏈接的效果。我們首先將a標簽display屬性設置為block,強制將a標簽顯示成塊級元素（塊級元素和行內元素的知識我們下面馬上給大家介紹），給它設置布局大小，這樣我們a標簽里就是一個塊了，而這個塊剛好是我們背景l(fā)ogo圖片的大小，讓你點擊的時候感覺是點的一個圖片鏈接，而我們的a標簽是嵌套在h1標簽里的，繼承了H1的text-indent屬性，里面的文字超出了a標簽的布局范圍，沒有顯示出來，而顯示了圖片（其實是背景圖）。呵呵，圖片鏈接就這樣被我們模擬出來了，不過為了更像圖片鏈接，我們又給a標簽添加了title屬性，來模仿img標簽的alt屬性，呵呵，模擬得夠像吧。
上面介紹了，一個技巧，其實主要是利用我們的CSS控制來實現(xiàn)的，不過我這里還不打算介紹CSS的技巧，接著我們的結構化的話題說下去?？纯?，其實在制作一個結構化充分的頁面的時候，我們同時也在做SEO的優(yōu)化。