提升排名：使用HTML5的四大理由

在過去幾年里，人們對HTML5的主要關(guān)注點(diǎn)是其在公司斗爭中扮演的角色：蘋果是否將標(biāo)準(zhǔn)化HTML5?谷歌是否利用其對Flash的支持來進(jìn)行對抗?

 

如果你想提升你的搜索名次，那么你最好支持移動用戶，改變你的開發(fā)程序，現(xiàn)在是時候?qū)TML5整合到你的網(wǎng)頁之中了。

1、更快的圖片下載速度，尤其是對于移動用戶

在網(wǎng)頁設(shè)計中，“漸變”是一種背景效果：你的網(wǎng)頁上的“窗口”擁有更精致的底紋或紋理。公司設(shè)計人員有更大的空間來平衡明暗度、匹配邊界，實(shí)現(xiàn)讓大數(shù)瀏覽者嘆為觀止的色彩或風(fēng)格。

漸變效果的頭二十年是通過“著色”來取得的。在HTML5之前，背景必須作為一個圖片(或是由多個子圖疊加在一起)被提供。例如，Photoshop有一個“漸變工具”。該工具主要用于構(gòu)建一個背景圖片以作為漸變色使用。這一功能獲得了很大的成功。每一名稱職的網(wǎng)頁設(shè)計者通常都會使用已經(jīng)有的漸變色作為背景圖片。

HTML5的出現(xiàn)改變了這一用法。HTML5的CSS3部分通過語義表達(dá)漸變，也就是說用有意義的單詞，而不是用圖片表達(dá)。例如：

.gradientArea { background: -o-linear-gradient(#FFB260, #FF7F13); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb260', endColorstr='#ff7f13', GradientType=0); } }

這一范例的句法細(xì)節(jié)并不重要，重要的是其通過單詞而不是圖像來展示這種效果。

首先，其非常簡潔。CSS3漸變規(guī)范通常有數(shù)百個字節(jié)，而表達(dá)漸變的背景圖片通常會有數(shù)千個字節(jié)。除了這一優(yōu)勢外，CSS3的是漸變是內(nèi)聯(lián)的，其傳輸不需要打開其它的文件。當(dāng)大量網(wǎng)站瀏覽者通過帶寬有限的移動瀏覽器訪問時，讓用于網(wǎng)頁渲染的輔助連接的數(shù)量保持低水平對于提升性能非常關(guān)鍵。

你的網(wǎng)頁設(shè)計人員能夠像以往那樣做同樣的事情——使用Photoshop的漸變工具或是類似工具，然后導(dǎo)出至CSS3而不是HTML4或XHTML。終端用戶在他們的瀏覽器上的效果幾乎沒有什么差別，但是下載速度卻提升了許多。此外，CSS3漸變色還能夠更容易的生就不同的屏幕尺寸和各種分辨率。

其它技術(shù)優(yōu)勢還包括：

?總體上，其能夠內(nèi)聯(lián)老式的漸變色，因此能夠減少下載成本。

? 除了CSS3之外，HTML5還包括了其它的漸變效果。

? 漸變色的CSS3支持將可編程性提升到了一個新的水平。例如，設(shè)計人員可以根據(jù)瀏覽者的年齡和位置調(diào)整漸變背景。

雖然這些功能對于編程者具有很高的娛樂性，但是我們并不推薦使用它們。不要讓它們將你的注意力從HTML5的可語義表達(dá)漸變色這一主要功能上吸引開。它們具有更快的下載速度、更容易輸出到移動設(shè)備上，維護(hù)成本也相對較低。

2、SEO(搜索引擎優(yōu)化)得到提升

一些常用的圖形效果有CSS3表達(dá)方式，包括不透明貼圖、圓角、陰影。這些效果與CSS3漸變色一起使得上傳更為簡潔，跨平臺維護(hù)也更為容易。此外，它們還在SEO(搜索引擎優(yōu)化)方面具有優(yōu)勢。

為了理解SEO，我們還要回到剛才提到的漸變色。CSS3漸變色的另一個優(yōu)勢是它們可以更好的向下兼容源代碼控制系統(tǒng)(SCCS)。在CSS3出現(xiàn)之前，漸變色通過圖片實(shí)現(xiàn)。在常用的SCCS中調(diào)整圖片是一個不透明的過程。

通過CSS3的漸變色語義標(biāo)記，SCCS能夠很方便在表面漸變的文本進(jìn)行操作。SCCS能夠在特定時間自動報告，漸變色彩的變化或是飽和度。其格式如下：

< background: -o-linear-gradient(#FFB260, #FF7F13); --- > background: -o-linear-gradient(#FFB260, #FF3F13);

編程人員發(fā)現(xiàn)這非常有用，他們通過管理源代碼的工作能夠讓W(xué)eb設(shè)計的圖形結(jié)構(gòu)成更為自然。

這上優(yōu)勢也提升了不透明貼圖和其它的CSS3標(biāo)記。假設(shè)一個名為Acme Widgets的公司想通過不透明貼圖在其網(wǎng)頁上標(biāo)記公司的名稱。在CSS3出現(xiàn)之前，他們需要使用Photoshop或類似工具才行，這導(dǎo)致需要設(shè)計一個圖片，通過一張不透明的貼圖顯示Acme Widgets。

由于內(nèi)容是內(nèi)嵌在圖片中的，因此Acme Widgets根據(jù)無法被搜索引擎找到。CSS3的出現(xiàn)改變了這一情況。