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

在过去几年里，人们对HTML5的主要关注点是其在公司斗争中扮演的角色：苹果是否将标准化HTML5?谷歌是否利用其对Flash的支持来进行对抗?

 

如果你想提升你的搜索名次，那么你最好支持移动用户，改变你的开发程序，现在是时候将HTML5整合到你的网页之中了。

1、更快的图片下载速度，尤其是对于移动用户

在网页设计中，“渐变”是一种背景效果：你的网页上的“窗口”拥有更精致的底纹或纹理。公司设计人员有更大的空间来平衡明暗度、匹配边界，实现让大数浏览者叹为观止的色彩或风格。

渐变效果的头二十年是通过“着色”来取得的。在HTML5之前，背景必须作为一个图片(或是由多个子图叠加在一起)被提供。例如，Photoshop有一个“渐变工具”。该工具主要用于构建一个背景图片以作为渐变色使用。这一功能获得了很大的成功。每一名称职的网页设计者通常都会使用已经有的渐变色作为背景图片。

HTML5的出现改变了这一用法。HTML5的CSS3部分通过语义表达渐变，也就是说用有意义的单词，而不是用图片表达。例如：

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

这一范例的句法细节并不重要，重要的是其通过单词而不是图像来展示这种效果。

首先，其非常简洁。CSS3渐变规范通常有数百个字节，而表达渐变的背景图片通常会有数千个字节。除了这一优势外，CSS3的是渐变是内联的，其传输不需要打开其它的文件。当大量网站浏览者通过带宽有限的移动浏览器访问时，让用于网页渲染的辅助连接的数量保持低水平对于提升性能非常关键。

你的网页设计人员能够像以往那样做同样的事情——使用Photoshop的渐变工具或是类似工具，然后导出至CSS3而不是HTML4或XHTML。终端用户在他们的浏览器上的效果几乎没有什么差别，但是下载速度却提升了许多。此外，CSS3渐变色还能够更容易的生就不同的屏幕尺寸和各种分辨率。

其它技术优势还包括：

•总体上，其能够内联老式的渐变色，因此能够减少下载成本。

• 除了CSS3之外，HTML5还包括了其它的渐变效果。

• 渐变色的CSS3支持将可编程性提升到了一个新的水平。例如，设计人员可以根据浏览者的年龄和位置调整渐变背景。

虽然这些功能对于编程者具有很高的娱乐性，但是我们并不推荐使用它们。不要让它们将你的注意力从HTML5的可语义表达渐变色这一主要功能上吸引开。它们具有更快的下载速度、更容易输出到移动设备上，维护成本也相对较低。

2、SEO(搜索引擎优化)得到提升

一些常用的图形效果有CSS3表达方式，包括不透明贴图、圆角、阴影。这些效果与CSS3渐变色一起使得上传更为简洁，跨平台维护也更为容易。此外，它们还在SEO(搜索引擎优化)方面具有优势。

为了理解SEO，我们还要回到刚才提到的渐变色。CSS3渐变色的另一个优势是它们可以更好的向下兼容源代码控制系统(SCCS)。在CSS3出现之前，渐变色通过图片实现。在常用的SCCS中调整图片是一个不透明的过程。

通过CSS3的渐变色语义标记，SCCS能够很方便在表面渐变的文本进行操作。SCCS能够在特定时间自动报告，渐变色彩的变化或是饱和度。其格式如下：

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

编程人员发现这非常有用，他们通过管理源代码的工作能够让Web设计的图形结构成更为自然。

这上优势也提升了不透明贴图和其它的CSS3标记。假设一个名为Acme Widgets的公司想通过不透明贴图在其网页上标记公司的名称。在CSS3出现之前，他们需要使用Photoshop或类似工具才行，这导致需要设计一个图片，通过一张不透明的贴图显示Acme Widgets。

由于内容是内嵌在图片中的，因此Acme Widgets根据无法被搜索引擎找到。CSS3的出现改变了这一情况。