首先在做網(wǎng)站(zhàn)代(dài)碼(mǎ)優化(huà)，要(yào)已經做(zuò)過域(yù)名(míng)分(fēn)析，空(kōng)間(jiān)分析，搜索(suǒ)引(yǐn)擎(qíng)分析，競(jìng)爭(zhēng)對(duì)手分析(xī)，關鍵詞(cí)分析(xī)，在(zài)全(quán)部(bù)進行數據分析(xī)的的基礎上進行(háng)的(dí)代碼優(yōu)化，一定要做(zuò)到：知(zhī)己(jǐ)知彼(bǐ)百戰(zhàn)不殆(dài)！
1.清除(chú)垃圾代(dài)碼（代(dài)碼優(yōu)化）：
空格(gé)字符是網頁中最(zuì)常(cháng)見(jiàn)的(dí)垃圾代碼，空(kōng)格常(cháng)常(cháng)出現在(zài)每行代碼的開始和(hé)結束(shù)，還有(yǒu)就是空(kōng)行
(1)每行代碼(mǎ)開(kāi)始(shǐ)處(chǔ)出(chū)現(xiàn)的(dí)空格(gé)字(zì)符
(2)每(měi)行代(dài)碼結束處的空格字符
(3)空白行，在(zài)編寫(xiě)代(dài)碼時常利(lì)⺌用空行或(huò)者注釋對(duì)不同的(dí)模(mó)板功(gōng)能進行(háng)分隔這樣就(jiù)產生(shēng)了(liǎo)空白行
清(qīng)楚空白(bái)行可(kě)以有(yǒu)以下的方(fāng)法(fǎ)：
(1)把代碼(mǎ)轉至(zhì)HTML代碼(mǎ)編輯(jí)模(mó)式(shì)
(2)按(àn) ctrl+A全選代碼
(3)使(shǐ)用組(zǔ)合鍵
shift+Tab 刪除
默認屬性
例如網頁中(zhōng)的內(nèi)容常(cháng)以(yǐ)左對齊(qí)顯示，所以此時(shí)再用 左對(duì)齊(qí)屬性有(yǒu)些(xiē)多餘(yú)了(liǎo)
常見的默認(rèn)屬(shǔ)性(xìng)有以(yǐ)下幾個(gè)：
align="left" 橫(héng)向左對齊 valign="middle"豎向居中對齊 size="3" 文字大(dà)小(xiǎo)屬(shǔ)性值(zhí) 默(mò)認情況下(xià)是3號(hào)
bgcolor="#ffffff" 背⺌景(jǐng)默認(rèn)屬(shǔ)性為白色
對(duì)於這些代碼(mǎ)，可(kě)以(yǐ)利⺌用(yòng)Dreamwea⺌ver 的替換功(gōng)能(néng)把他(tā)們替(tì)換(huàn)成 空白(bái)就可以(yǐ)了
注(zhù)釋語(yǔ)句
過多的(dí)注(zhù)釋(shì)語(yǔ)句不僅(jǐn)會占用大量的網(wǎng)頁存儲空(kōng)間，而且還會稀(xī)釋關(guān)鍵字(zì)的密度
長(cháng)標簽替換(huàn)成短標簽(qiān)
比(bǐ)如，<b>和<strong>都(dū)是(shì)對字體加粗(cū)，起(qǐ)到的(dí)作用是一樣的，但是<strong>比(bǐ)<b>多(duō)5個字符
網(wǎng)頁(yè)中(zhōng)多(duō)種不同(tóng)的(dí)標(biāo)簽(qiān)可以(yǐ)實現(xiàn)同(tóng)樣的效(xiào)果(guǒ)但是為(wéi)了(liǎo)網(wǎng)頁的精(jīng)簡(jiǎn)可(kě)以(yǐ)才要(yào)短標簽，網(wǎng)頁中常(cháng)見的有以下(xià)幾(jī)種
加粗(cū) <strong> 對應(yīng)<b>
斜(xié)體 <em> 對(duì)應<i>
刪(shān)除綫 <strike> 對(duì)應(yīng)<s>
縮(suō)進(jìn) <blockquote>對(duì)應 <ul>
2.CSS等腳(jiǎo)本優化(huà)（腳(jiǎo)本優化）：
CSS學起來並不(bù)難，但在大型(xíng)項目(mù)中，一(yī)個團(tuán)隊中(zhōng)不同的人在(zài)書(shū)寫(xiě)CSS風格上(shàng)也有不同(tóng)這(zhè)樣這個(gè)項(xiàng)目(mù)就變得難以(yǐ)管(guǎn)理，團(tuán)隊(duì)上(shàng)就(jiù)更加(jiā)難以溝通(tōng)，為此(cǐ)總結了一(yī)些(xiē)如何(hé)實現(xiàn)高效整潔的CSS代(dài)碼(mǎ)原則(zé)：
步驟(zhòu)/方法(fǎ)
1. 使用Reset但並(bìng)非(fēi)全(quán)局Reset
不同瀏覽器(qì)元素的默認(rèn)屬(shǔ)性有所(suǒ)不(bù)同，使用(yòng)Reset可重置(zhì)瀏覽(lǎn)器(qì)元素的一些默(mò)認(rèn)屬性(xìng)，以達到(dào)瀏(liú)覽器的(dí)兼(jiān)容(róng)。但需要注(zhù)意(yì)的是(shì)，請不要使用全(quán)局(jú)Reset：
*{margin:0;padding:0;}
這不僅僅因(yīn)為它(tā)是緩慢(màn)和低效率(shuài)的方法(fǎ)，而(ér)且還(huán)會導(dǎo)致(zhì)一些不(bù)必(bì)要(yào)的(dí)元(yuán)素也重(zhòng)置了(liǎo)外(wài)邊距和內邊(biān)距(jù)。在(zài)此(cǐ)建(jiàn)議參考(kǎo)YUI Reset和(hé)Eric Meyer的(dí)做(zuò)法(fǎ)。
/** 清除內外(wài)邊距 **/
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote, /* structural elements 結(jié)構元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素(sù) */
pre, /* text formatting elements 文本(běn)格(gé)式(shì)元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表(biǎo)單(dān)元素(sù) */
th, td, /* table elements 表格(gé)元素 */
img/* img elements 圖(tú)片(piàn)元素 */{
border:medium none;
margin: 0;
padding: 0;
}
/** 設置默認(rèn)字體 **/
body,button, input, select, textarea {
font: 12px/1.5 ‘宋體(tǐ)’,tahoma, Srial, helvetica, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
em{font-style:normal;}
/** 重(zhòng)置(zhì)列表元素(sù) **/
ul, ol { list-style: none; }
/** 重(zhòng)置超(chāo)鏈接元(yuán)素(sù) **/
a { text-decoration: none; color:#333;}
a:hover { text-decoration: underline; color:#F40; }
/** 重置圖片元素(sù) **/
img{ border:0px;}
/** 重置表格元素(sù) **/
table { border-collapse: collapse; border-spacing: 0; }
2. 良(liáng)好的命名(míng)習(xí)慣(guàn)
無疑亂(luàn)七(qī)八(bā)糟(zāo)或者(zhě)無(wú)語(yǔ)義命名的(dí)代碼，誰看(kàn)了都(dū)會抓(zhuā)狂(kuáng)。比(bǐ)如下麵(miàn)這樣(yàng)的(dí)代碼(mǎ)：
.aaabb{margin:2px;color:red;}
我想即(jí)使是初學(xué)者(zhě)，也不(bù)至於會在(zài)實(shí)際項目中(zhōng)如此命(mìng)名(míng)一個(gè)class，但有(yǒu)沒(méi)有想過(guò)這(zhè)樣(yàng)的代碼同樣是很(hěn)有問題的：
<h1>My name is <span class=”red blod”>Wiky</span></h1>
問題在(zài)於如果你需要把(bǎ)所有原本紅(hóng)色的字體(tǐ)改成藍色(sè)，那修(xiū)改(gǎi)後就(jiù)樣(yàng)式就會變成(chéng)：
red{color:bule;}
這樣(yàng)的命(mìng)名(míng)就會很讓人費解，同樣的(dí)命名為.leftBar的側邊欄如果需要(yào)修(xiū)改成右側邊欄也(yě)會(huì)很麻煩(fán)。所(suǒ)以(yǐ)，請(qǐng)不(bù)要(yào)使(shǐ)用元(yuán)素的特性（顏色，位置(zhì)，大小(xiǎo)等）來(lái)命名一(yī)個(gè)class或(huò)id，您(nín)可以(yǐ)選(xuǎn)擇(zé)意義(yì)的(dí)命名如：#navigation{…}，.sidebar{…}，.postwrap{…}
這樣(yàng)，無(wú)論(lùn)你如(rú)何修(xiū)改(gǎi)定義這(zhè)些(xiē)class或id的樣(yàng)式，都不影(yǐng)響(xiǎng)它跟(gēn)HTML元(yuán)素間的(dí)聯(lián)係(xì)。
另外(wài)還有一(yī)種(zhǒng)情(qíng)況，一(yī)些固定(dìng)的樣(yàng)式(shì)，定(dìng)義後(hòu)就不(bù)會(huì)修改的了，那(nà)你命名時就不(bù)用(yòng)擔(dān)憂(yōu)剛剛說的(dí)那種情(qíng)況(kuàng)，如:
.alignleft{float:left;margin-right:20px;}
.alignright{float:right;text-align:right;margin-left:20px;}
.clear{clear:both;text-indent:-9999px;}
如(rú)果需要(yào)把這個(gè)段(duàn)落由原先的左(zuǒ)對齊(qí)修(xiū)改(gǎi)為右(yòu)對齊，那麼隻(zhī)需要修改它的className就(jiù)為alignright就可以了。
3.代碼(mǎ)縮寫
CSS代碼(mǎ)縮(suō)寫可以提高(gāo)你(nǐ)寫(xiě)代(dài)碼(mǎ)的(dí)速(sù)度(dù)，精簡(jiǎn)你(nǐ)的代碼(mǎ)量。在(zài)CSS裏(lǐ)麵有不(bù)少可以縮寫(xiě)的(dí)屬(shǔ)性，包括margin，padding，border，font，background和顏色(sè)值等，如果(guǒ)您學會(huì)了(liǎo)代(dài)碼縮寫，原(yuán)本這(zhè)樣(yàng)的(dí)代碼：
li{
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
padding:5px 0 10px 5px;
}
4.利用CSS繼承
如果頁(yè)麵(miàn)中(zhōng)父(fù)元(yuán)素的多(duō)個子元素使(shǐ)用(yòng)相(xiāng)同(tóng)的(dí)樣(yàng)式，那最(zuì)好把他(tā)們相同的(dí)樣式(shì)定義在(zài)其父元素上(shàng)，讓(ràng)它(tā)們(mén)繼承這(zhè)些(xiē)CSS樣式(shì)。這(zhè)樣你(nǐ)可以很(hěn)好的維(wéi)護你(nǐ)的(dí)代(dài)碼(mǎ)，並(bìng)且還(huán)可以(yǐ)減少(shǎo)代(dài)碼量。那麼本來這樣的(dí)代碼：
#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }
可(kě)以寫(xiě)成:
#container{font-family:Georgia,serif; }
5.使(shǐ)用(yòng)多(duō)重選擇器
你可(kě)以合並(bìng)多個CSS選擇器(qì)為一(yī)個，如果他們有共同的(dí)樣式(shì)的話。這樣做不但(dàn)代碼簡(jiǎn)潔(jié)且(qiě)可為你節省時(shí)間和空間。如(rú)：
h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
6. 適(shì)當的(dí)代(dài)碼(mǎ)注(zhù)釋(shì)
代碼(mǎ)注(zhù)釋可(kě)以(yǐ)讓(ràng)別(bié)人(rén)更(gēng)容易讀懂你的(dí)代(dài)碼，且合理的(dí)組(zǔ)織代碼注(zhù)釋，可(kě)使(shǐ)得結構(gòu)更加清(qīng)晰(xī)。
7. 保(bǎo)持CSS的(dí)可(kě)讀(dú)性
書(shū)寫可讀(dú)的CSS將會使(shǐ)得更容(róng)易查找和修改(gǎi)樣(yàng)式。對於以(yǐ)下兩種情況，哪種可讀性更高，我(wǒ)想(xiǎng)不言而明。
8. 使用(yòng)外(wài)部(bù)樣(yàng)式表(biǎo)
這個(gè)原則(zé)始(shǐ)終是一個很好的(dí)設(shè)計實踐。不單可(kě)以(yǐ)更易於維(wéi)護(hù)修(xiū)改，更重要的是(shì)使用(yòng)外(wài)部(bù)文件可(kě)以提高頁麵(miàn)速(sù)度(dù)，因(yīn)為CSS文件都能(néng)在瀏覽器中產(chǎn)生(shēng)緩存(cún)。內置在(zài)HTML文檔(dàng)中的(dí)CSS則(zé)會在(zài)每(měi)次請求中(zhōng)隨HTML文(wén)檔重新(xīn)下(xià)載。
9.避(bì)免(miǎn)使(shǐ)用CSS表達(dá)式（Expression）
表達式的問題就(jiù)在於(yú)它的(dí)計(jì)算頻(pín)率(shuài)要(yào)比我們想象的(dí)多。不(bù)僅僅是在(zài)頁麵(miàn)顯示和(hé)縮放時，就是在頁(yè)麵(miàn)滾動(dòng)，乃至移(yí)動鼠標時都會(huì)要重(zhòng)新計算(suàn)一(yī)次(cì)。給CSS表(biǎo)達(dá)式(shì)增(zēng)加一(yī)個計數器可(kě)以(yǐ)跟(gēn)蹤(zōng)表(biǎo)達式(shì)的計算頻率。在頁麵中隨(suí)便(biàn)移動鼠(shǔ)標都可以(yǐ)輕鬆達到10000次以(yǐ)上的計算量。
代碼壓縮
當(dāng)你(nǐ)決定把網站(zhàn)項(xiàng)目(mù)部署到(dào)網(wǎng)絡上(shàng)，那(nà)你就要(yào)考(kǎo)慮(lǜ)對CSS進(jìn)行壓縮(suō)，出去(qù)注釋(shì)和空(kōng)格，以使得(dé)網頁(yè)加載(zǎi)得(dé)更(gēng)快。壓縮(suō)您(nín)的代碼(mǎ)，可以采用一(yī)些工(gōng)具，如(rú)YUI Compressor，利用(yòng)它(tā)可精簡CSS代碼，減少(shǎo)文件(jiàn)大(dà)小(xiǎo)，以(yǐ)獲(huò)得更高的加載速(sù)度(dù)。
3. SEO站內(nèi)優化（整站(zhàn)優(yōu)化(huà)）：
一，代碼及標(biāo)簽優化
代碼和(hé)標簽(qiān)的優化，主(zhǔ)要從以(yǐ)下幾個(gè)方(fāng)麵進行：
1，網站代碼(mǎ)精(jīng)簡(jiǎn)和CSS&JS
2，網(wǎng)站(zhàn)標題標簽(titile)設置(zhì)合理(lǐ)化
3，網站關(guān)鍵詞(keywords)設置合理(lǐ)化
4，網(wǎng)站描述(shù)(Description)設(shè)置(zhì)合理化(huà)
5，網站H1/H2標簽的(dí)合(hé)理優化(huà)
6，網站METE標(biāo)簽的(dí)合理(lǐ)優(yōu)化
二，網(wǎng)站(zhàn)URL優化
1，網站頁麵(miàn)的(dí)靜(jìng)態化處(chǔ)理(lǐ)(生成(chéng)html)
2，網站扁(biǎn)平化(huà)層(céng)級結構
3，網站SEO定(dìng)製文件名(míng)
4，網站導(dǎo)航的(dí)麵包屑(xiè)處(chǔ)理
三，網站內容(róng)優化(huà)
1，網站(zhàn)內容的原創性(xìng)
2，網站內容(róng)的更新頻(pín)率(shuài)
3，網站數據庫(kù)的總體數(shù)據(jù)量
轉(zhuǎn)載請保留原(yuán)文(wén)地址: https://antelcom.cn/show-556.html