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

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

 

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

1、更快的圖片下載速度，尤其是對(duì)于移動(dòng)用戶

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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