论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

{WEB标准}并没有WEB标准,有的只是建议

文章类别:div+css布局 | 发表日期:2008-9-26 11:53:49

现今的互联网领域,在用户和web开发者的概念里,WEB标准这个词正在变得越来越时髦。但是,WEB标准的概念过于笼统,人们对WEB标准到底是什么和她所包含的一些东西有着各自不同的看法。在由中国E动网赞助的“E动杯”ShopEx模板大赛论坛上,参赛者和点评者就什么是WEB标准和模板代码的“表现手法”发言踊跃,本文阐述了作者对于WEB标准的观点,以便大家了解通常意义上WEB标准所指代的概念。

并没有所谓的“标准”,有的只是建议

首先,你应该了解实际上并不存在真正的WEB标准,真正存在的是一些推行标准化的组织,就像ISO standards,Ecma。当大多数人提到WEB标准时,他们实际指的是W3C的一些东西。但W3C并不真正制定标准,他们仅是提供建议,以他们自己的话来说:“A W3C Recommendation is a specification or set of guidelines that, after extensive consensus-building, has received the endorsement of W3C Members and the Director. W3C recommends the wide deployment of its Recommendations.”

WEB标准的含义

一般情况下,WEB标准是由以下几个部分组成的,

•有效的HTML/XHTML

•代码语意清楚

•内容(HTML/XHTML)表现(CSS)和交互(Javascript)相分离

对有些人来说,WEB标准意味着以上所有部分,而对于另一些人来说,可能只是其中一点。但最重要的是这三部分是构建一个优秀站点所不可或缺的。

有效的HTML/XHTML

让我们从第一点开始,有效的代码是WEB标准的第一步。对大多数人来说,有效仅意味着HTML/XHTML代码,但不要忘了也有CSS的验证。验证你的HTML/XHTML代码有效性基本上就是指你网页上的代码是否符合你选用的doctype。

选择正确的doctype很重要,它决定了HTML/XHTML代码该如何被解释以及在不同浏览器中布局的差异。经过验证后的代码能够很好的在不同浏览器中显示,而不需要考虑太多浏览器的兼容性。通过验证你可能会发现潜在的影响页面的代码,修正他们以使开发过程更有效率,和降低日后维护的成本。

代码验证工具

•W3C Markup Validation Service

•W3C CSS Validation Service

•WDG HTML Validator

•Firefox HTML Validator add-on

•Internet Explorer Developer Toolbar

代码语意清楚

任何一个存在于页面中的元素都应该有它存在的意义并能准确表意。简单来说就是要根据上下文关系来选择合适的元素。例子如下

这段代码语意不清

以下为引用的内容:

<div class="page-heading">Title of the page</div>
<div class="text-paragraph">
Some text explaining what this web
site is about, which is really a
complete paragraph of text
</div>

<a class="menu-item" href="/item-1">Menu item 1</a>
<a class="menu-item" href="/item-2">Menu item 2</a>
<a class="menu-item" href="/item-3">Menu item 3</a>

同样的表现,语意就清楚多了

以下为引用的内容:

<h1>Title of the page</h1>
<p>
Some text explaining what this web
site is about, which is really a
complete paragraph of text
</p>

<ul class="menu">
<li><a href="/item-1">Menu item 1</a></li>
<li><a href="/item-2">Menu item 2</a></li>
<li><a href="/item-3">Menu item 3</a></li>
</ul>

要使代码语意清楚其实很简单,用h1-h6来定义标题,用p来定义文章段落,用ul,ol等来定义列表项等等。。。这会方便帮助你找到代码中你想要的部分,并能显著减少页面加载时间,因为它减少了代码量。而且,不要忘了,这对于SEO也很有帮助,清楚的语意能帮助Google和其他搜索引擎更好的检索你的站点。

内容(HTML/XHTML)表现(CSS)和交互(Javascript)相分离

有太多理由认定将内容(HTML/XHTML)表现(CSS)和交互(Javascript)相分离是至关重要的。他们有着各自不同的分工,如何合理的应用他们需要经过仔细斟酌。

分离的几大原因

效能:外部文件比如css和js会在第一次加载后保存在用户的缓存里,这就节省了以后的加载时间,提高了体验。

总体:你总能准确的找到代码并放置它们。

可用性:你总能方便的引用代码,并能在整个网站的范围内重用它们。

维护:所有有关表现和交互的代码集中存放,方便维护。

如何更贴近用户?

有人说要使网站变得更加贴近用户需要耗费更多额外时间,但其实只要你能做到文章中提到的三点,你就已经在更加贴近用户的道路上前进了一大步。

正确有效的代码,会使你更方便的发现页面中错误的内容。语意清楚的代码能更好的支持手持设备,也能使网站在没有CSS修饰的情况下更好的被用户浏览。而结构表现交互相分离使得网站在缺乏javascript支持的情况下仍能保持基本功能,当然你可以通过增加javascript层来增进站点的体验,但这绝对不是一个网站赖以运作的最基本的部分。

视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058