## **頁(yè)面優(yōu)化**

　　1)頁(yè)面主題優(yōu)化

　　實(shí)事求是的寫下自己網(wǎng)站的名字，網(wǎng)站的名字要合理，最好包含網(wǎng)站的主要內(nèi)容。

　　2)頁(yè)面頭部?jī)?yōu)化

　　```html

　　向搜索引擎說明你的網(wǎng)頁(yè)的關(guān)鍵詞;

　　告訴搜索引擎你的站點(diǎn)的主要內(nèi)容;

　　```

　　說明：

　　1、“描述”部分應(yīng)該用近乎描述的語(yǔ)言寫下一段介紹你網(wǎng)站的文字，在這其中，你應(yīng)該適當(dāng)?shù)膶?duì)你網(wǎng)站的特色內(nèi)容加以重復(fù)以求突出;

　　2、“關(guān)鍵字”部分應(yīng)該列出你認(rèn)為合適的，能突出網(wǎng)站內(nèi)容的關(guān)鍵字就可以了，關(guān)鍵字不要設(shè)置太多，可設(shè)置10---8個(gè)，搜索引擎只會(huì)瀏覽靠前的幾個(gè)關(guān)鍵字。

　　3)超鏈接優(yōu)化

　　1、采用純文本鏈接，少用，最好是別用Flash動(dòng)畫設(shè)置鏈接，因?yàn)樗阉饕鏌o法識(shí)別Flash上的文字.

　　2、按規(guī)范書寫超鏈接，這個(gè)title屬性，它既可以起到提示訪客的作用，也可以讓搜索引擎知道它要去哪里.

　　3、最好別使用圖片熱點(diǎn)鏈接，理由和第一點(diǎn)差不多

　　4)圖片優(yōu)化

　　圖片優(yōu)化并不是修改圖片的大小、顏色，而是你應(yīng)該為每個(gè)標(biāo)簽加上alt屬性，alt屬性的作用是當(dāng)圖片無法顯示時(shí)以文字作為替代顯示出來，而對(duì)于SEO來說，它可以令搜索引擎有機(jī)會(huì)索引你網(wǎng)站上的圖片，對(duì)于一些確實(shí)沒什么意義的圖片，最好也不要省略alt，而應(yīng)該留空，即 alt=""。

　　5)PageRank(pr值,友情鏈接)

　　PR值是Google提出的一個(gè)重要參數(shù)，它標(biāo)明了某個(gè)網(wǎng)站的重要程度，那么pr值是如何確定的呢?

　　目前普通的解釋為：假如有ABC三個(gè)網(wǎng)站，彼此互作友情鏈接，那么當(dāng)一個(gè)訪客通過A上的友情鏈接來到B時(shí)，Google就認(rèn)為A為B投了“一票”，同理，如果有人從C訪問B，那么B又得一票，如果全世界的網(wǎng)站上都有B的友情鏈接，B就是世界上最重要的網(wǎng)站了!

　　## **可以擴(kuò)展：回流(resflow)&重繪(repaint)**

　　頁(yè)面的渲染流程

　　

　　> 什么是DOM樹

　　> 什么是樣式結(jié)構(gòu)體

　　> 什么是呈現(xiàn)樹

　　> 呈現(xiàn)樹的特點(diǎn)

　　## **圖片整合(精靈圖、css sprites、css精靈、雪碧圖**

　　把網(wǎng)站里面的小圖標(biāo)有規(guī)則的整合在一起，利用 background-position 改變背景圖的位置，每個(gè)圖標(biāo)應(yīng)用。

　　**優(yōu)點(diǎn):**

　　> (1)CSS Sprites能很好地減少網(wǎng)頁(yè)的http請(qǐng)求，從而大大的提高頁(yè)面的性能，這是CSS Sprites最大的優(yōu)點(diǎn)，也是其被廣泛傳播和應(yīng)用的主要原因;

　　> (2)CSS Sprites能減少圖片的字節(jié);

　　> (3)CSS Sprites解決了網(wǎng)頁(yè)設(shè)計(jì)師在圖片命名上的困擾，只需對(duì)一張集合的圖片命名，不需要對(duì)每一個(gè)小圖片進(jìn)行命名，從而提高了網(wǎng)頁(yè)制作效率。

　　> (4)CSS Sprites只需要修改一張或少?gòu)垐D片的顏色或樣式來改變整個(gè)網(wǎng)頁(yè)的風(fēng)格。

　　**缺點(diǎn):**

　　> (1)圖片合并麻煩：圖片合并時(shí)，需要把多張圖片有序的合理的合并成一張圖片，并留好足夠的空間防止版塊出現(xiàn)不必要的背景。

　　> (2)圖片適應(yīng)性差：在高分辨的屏幕下自適應(yīng)頁(yè)面，若圖片不夠?qū)挄?huì)出現(xiàn)背景斷裂。

　　> (3)圖片定位繁瑣：開發(fā)時(shí)需要通過工具測(cè)量計(jì)算每個(gè)背景單元的精確位置。

　　> (4)可維護(hù)性差：頁(yè)面背景需要少許改動(dòng)，可能要修改部分或整張已合并的圖片，進(jìn)而要改動(dòng)css。在避免改動(dòng)圖片的前提下，又只能(最好)往下追加圖片，但這樣增加了圖片字節(jié)。

　　**- End -**

　　更多關(guān)于“html5培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗(yàn)，課程大綱更科學(xué)更專業(yè)，有針對(duì)零基礎(chǔ)的就業(yè)班，有針對(duì)想提升技術(shù)的提升班，高品質(zhì)課程助理你實(shí)現(xiàn)夢(mèng)想。