XHTML与CSS的校验

CSS 2013年05月25日 , ,

1.为什么要做XHTML与CSS验证

建议最初做网站前端设计的时候要按照XHTML的标准进行设计,也许会有一部分人认为没有必要这样去做,因为我的网站即使没有按照XHTML的标准去写也没有任何的问题。

那让我们来看看采用XHTML标准的好处,对于网站的浏览者来说:

  • 文件下载与页面的显示速度更快。
  •  内容能被更多的用户所访问,包括失明、视弱、色盲等残障人士。
  • 内容能被更广泛的设备所访问,包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等。
  • 用户能够通过样式选择定制自己的表现界面。
  •  所有页面都能提供适于打印的版本。

对于网站所有者来说:

  • 更少的代码和组件,更易维护。
  • 带宽要求降低,代码更简洁,成本更低。
  • 更容易被搜索引擎搜索。
  • 改版方便,不需要变动页面内容。
  • 提高网站易用性。

那么怎么才能知道自己的网站或者网页是否符合标准呢?

2.XHTML校验

校验网址:http://validator.w3.org/

XTHML1-1

校验方式有三种方式:

  • 直接URI。(适用于已经架设好的网站)
  • 上传文件。(正在进行开发的网站)
  • 直接输入代码。(练习使用,适合于测试没有通过时的直接修改)

验证分为三步,如上图所示:

1. 选择直接URI方式。

2. 输入要验证的地址http://furzoom.com/

3. 点击“Check”。

然后会得到一个类似下面的这个结果。 XTHML1-2

本网站校验后的结果为”This document was successfully checked as HTML5!”,表明通过了校验。如果校验失败会显示更多校验选项和错误信息。

如果页面通过XHTML 1.0校验,可以在页面上放置一个图标,如下图所示。

HTML5_2

<p>
<a href=http://validator.w3.org/check?uri=referer><img src = http://www.w3.org/icons/valid-xhtml10 alt = “valid XTHML 1.0 Transitional” height=”31” width = “88” /></a>
</p>

3.CSS3校验

校验网址http://jigsaw.w3.org/css-validator/

HTML5_3

校验方式有三种方式:

  • 通过指定URI
  • 通过文件上传。
  • 通过直接输入。

验证分为三步,如上图所示:

1. 选择通过指定URI方式。

2. 输入要验证的地址http://furzoom.com/lab/

3. 点击“Check”。

然后会得到一个类似下面的这个结果。

HTML5_4

本网站校验后的结果为” 恭喜恭喜,此文档已经通过 CSS 版本 3 校验!”,表明通过了校验。如果校验失败会显示更多校验选项和错误信息。

如果页面通过CSS3校验,可以在页面上放置一个图标,如下图所示。

CSS3.0

<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" />
</a>
</p>

vcss-blue

<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="Valid CSS!" />
</a>
</p>

4.通过校验并不是最终目的

W3C校验仅仅是帮助制作者检查XHTML代码的书写是否规范,CSS的属性是否都在CSS3的规范内。代码的标准化仅仅是第一步,不是说通过校验的网页就标准化了。使用很多方法都可以苦难校验程序而得到通过验证的那个小图标。

让网页具有良好的结构、更快的浏览速度、更友好的界面以及更多设备的支持才是最终目的。

如无特别说明,本站文章皆为原创,若要转载,务必请注明以下原文信息:
日志标题:《XHTML与CSS的校验》
日志链接:http://furzoom.com/xhtml1-css3-validator/
博客名称:枫竹梦

发表评论

插入图片

NOTICE1:请申请gravatar头像,没有头像的评论可能不会被回复!

回到顶部