最佳網頁程式碼習慣例項行解

aulara發表於2013-03-12
網頁

此時此刻，世界上眾多的網頁設計師正在從不規範的範例網頁中複製程式碼，冗長的文件型別定義被一代代地傳下去。從大型門戶、12306到網上銀行，我們都能在他們的網頁檔案中找到堆積如山的行內樣式和指令碼。難道我們的網路頻寬已經達到無需優化頁面的水平了嗎？事實絕非如此。前端設計優化不僅能提高伺服器響應速度，改善使用者體驗，也降低了搜尋引擎的抓取難度。本文以一間記賬網站為例，為您逐行詳細講述最標準、最符合搜尋引擎要求的網頁程式碼習慣。也希望各位初學者以此為模板，書寫簡潔、易讀的規範頁面。

<!DOCTYPE html>

網頁第一行是文件型別定義。HTML文件有若干版本，新版本都能完全相容舊版，所以瀏覽器只需要知道這是HTML文件就夠了，遇到不認識的新元素儘管報錯。IE6和之後面世的瀏覽器全部支援此定義。

<html lang='zh'>

這是HTML根元素，所有網頁元素都是它的子類。此處的lang語言定義主要是為搜尋引擎設定的，如此谷歌就知道您的網站主要是面向中文使用者的，您的網站在谷歌中文搜尋中將得到較高排名。把lang設為zh-cn會將您的搜尋使用者群限制在中國大陸，請視實際情況而定。

<head>

網頁頭是配置網頁、設定瀏覽器標題和載入樣式、指令碼程式的地方。有的設計師喜歡在網頁末端載入指令碼程式，指令碼將在網頁載入末期執行。我推薦大家在網頁頭載入jQuery後載入自定義指令碼，以

$(function() {
    //指令碼程式碼
});

確保程式碼在網頁完全載入後執行。

<title>記賬_極光賬本...</title>

在搜尋引擎優化環節，網頁的瀏覽器標題至關重要。通常只有前三個關鍵詞會被搜尋引擎賦予高權重，將它們以重要順序排列，以下劃線隔開。再則，整個瀏覽器標題都會作為錨連結出現在搜尋結果中，所以您的語言必須能吸引搜尋使用者，不能是一串胡亂的關鍵詞。

<meta name='viewport' content='width=device-width, initial-scale=1'>

這是在極光掌上賬本出現的一段程式碼，目的是讓移動瀏覽器(Chrome for Android、Mobile Safari等)將頁面寬度設為裝置的螢幕寬度。

<meta charset='utf-8'>

定義本頁面的編碼為萬國碼，在靜態伺服器上是必須的。httpd、nginx等網頁服務程式都會在網頁響應標頭(http header)中加入檔案編碼，無需多次宣告，所以您在極光賬本的生產伺服器頁面上不會看見此行。

<meta name='keywords' content='線上記賬,記賬網站,賬本'>

關鍵詞設定是引導搜尋引擎為網頁分類、索引用的，優化效果已經減弱了。

<meta name='description' content='專業易用的線上記賬本...'>

每個搜尋連結下方都有一段文字描述，其內容通常摘錄自這段描述元素，所以它與搜尋引擎點選率息息相關。

<link rel='stylesheet' href='/static/css/basic.css?3'/>

這是網頁的樣式檔案匯入，您所有的網頁樣式都應定義在此檔案中。使用者瀏覽器僅需讀取您伺服器一次，之後所有頁面載入都能使用快取檔案，大大緩解了靜態檔案伺服器的壓力。YUI Compressor能幫您壓縮樣式，進一步減少新使用者的載入時間。連結地址末尾的?3代表了樣式檔案的版本號，若您更新了網頁樣式，只需將版本號更新一級，比如?4，使用者的瀏覽器就會重新載入樣式。樣式型別定義type='text/css'已經不再起作用，因為現今所有的樣式表都是cascading style sheet。何必畫蛇添足呢？

<link rel='stylesheet' href='http://code.jquery.com/ui/1.10.1/themes/flick/jquery-ui.min.css'/>

同樣是樣式檔案匯入，但這是通過全球靜態檔案投遞系統(CDN)提供的檔案。以這份jQuery UI的樣式檔案為例，全球有數以萬記的jQuery網站正在使用與極光同樣的樣式，您的使用者如果已經在其他網站載入過一份同樣的檔案，她就不需要重複載入此樣式了。再則，您的靜態伺服器不用承載這些常見程式碼，能夠減輕機器負載。

<script src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<script src='http://code.jquery.com/ui/1.10.1/jquery-ui.min.js'></script>

這是兩條jQuery指令碼檔案的的匯入語句，全部引自全球靜態檔案投遞系統。注意檔案路徑末尾的.min.js，這與上行的.min.css有著類似的含義。帶有.min的檔案都是已壓縮的檔案，體積很小。其次，javascript早已成為網頁的預設指令碼語言，我們無需多此一舉地告訴瀏覽器說type='text/javascript'。

<script src='/static/js/basic.js?2'></script>
<script src='/static/js/index.js?3'></script>
<script src='/static/js/render.js'></script>

極光的自定義指令碼程式也是經過壓縮的，常見的指令碼程式壓縮器有uglifyjs和YUI Compressor。更新指令碼後，您同樣可以用?3的方式迫使使用者瀏覽器重新載入。

...省略三行...
<span class='tm'></span>

極光的商標是通過元素樣式背景圖片實現的，頁面檔案極為簡潔。我還將所有常用的圖片元素拼成了一幅大圖。一張大幅png圖片不僅體積比若干小圖的總體積小，而且網路傳輸效率比小圖高得多。這一做法唯一的缺點是，網頁背景圖片一旦被瀏覽器快取，您必須同時在樣式表和網頁檔案中加入?3以重新整理頁面。

<h1 class='cap'>智慧記賬網站</h1>

每個頁面只能存在一個h1元素，代表頁內標題。頁內標題和瀏覽器標題的唯一不同點是您必須將h1元素溶入頁面中，且每一頁面的頁內標題都必須是全站唯一的。搜尋引擎很看中頁內標題，所以在編寫網頁程式時請認真考慮。

...直至頁末...
&copy; <a href='/consulting/'>深圳市榆花莢科技開發有限公司</a>

版權宣告本身就是個笑話，所以越簡單越好。現所有的網站備案都可以在工信部查到，備案號可有可無。要是您覺得綠色網站啥的能哄人就上吧，我沒有這許多閒工夫。這段程式碼中的©是非常好的習慣，能用ASCII字元的符號儘量用ASCII。既避免了離奇的網頁編碼錯誤，也能使活在英文世界中的搜尋蜘蛛看得舒服。

相關文章