有关W3C网站新标准下的网站建设
技术分析和研究报告总结。

视觉互动网 · 2010-7-23 yefeng

  • 一、关于网站标准的概念性的分析以及技术总结：

    • 网站标准的目的就是：

  • · 提供最多利益给最多的网站用户
  • · 确保任何网站 文挡都能够长期有效
  • · 简化代码、降低建设成本
  • · 让网站更容易使用，能适应更多不同用户和更多网路设备
  • · 当浏览器版本更新，或者出现新的网络交互设备时，确保所有应用能够继续正确执行。

网站标准目标受益

  • 对网站浏览者的好处：
  • · 文件下载与页面显示速度更快；
  • · 内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）；
  • · 内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等等）
  • · 用户能够通过样式选择定制自己的表现界面
  • · 所有页面都能提供适于打印的版本
  • 对网站所有者的好处：
  • · 更少的代码和组件，容易维护
  • · 带宽要求降低（代码更简洁），成本降低。举个例子：当 ESPN.com 使用 CSS改版后，每天节约超过两兆字节（terabytes）的带宽。
  • · 更容易被搜寻引擎搜索到
  • · 改版方便，不需要变动页面内容
  • · 提供打印版本而不需要复制内容
  • · 提高网站易用性。在美国，有严格的法律条款（Section 508）来约束政府网站必须达到一定的易用性，其他国家也有类似的要求。
    • 什么是web新标准？

WEB标准不是某一个标准，而是一系列标准的集合。
网页主要由三部分组成：
结构（Structure）
表现（Presentation）
行为（Behavior）
对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。
 web标准最主要的特点就是：   结构与表现形式以及行为做分离
1．结构标准语言
（1）XML
XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0，参考（www.w3.org/TR/2000/REC-XML-20001006）。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。关于XML的好处和技术规范细节这里就不多说了，网上有很多资料，也有很多书籍可以参考。
（2）XHTML
XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0（参考http://www.w3.org/TR/xhtml1）。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。
2. 表现标准语言
CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2（参考http://www.w3.org/TR/CSS2/）。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。
3.行为标准
（1）DOM
DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范（http://www.w3.org/DOM/），DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。
(2) ECMAScript
ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言（JAVAScript）。目前推荐遵循的是ECMAScript 262（http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM）。

关于WEB标准的结构语言的概述

    • 非常重要的区别：
  • XHTML elements must be properly nested
    XHTML元素必须合理嵌套
  • XHTML documents must be well-formed
    XHTML文档必须格式正确
  • Tag names must be in lowercase
    标签名称必须是小写
  • All XHTML elements must be closed
    所有XHTML元素必须关闭

详细分解web标准机构语言

  • 为页面添加正确的DOCTYPE

(1) 过渡型（Transitional ）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(2) 严格型（Strict ）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(3)框架型（Frameset ）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

  • 声明你的编码语言

为了被浏览器正确解释和通过标识校验，所有的XHTML文档都必须声明它们所使用的编码语言。代码如下：
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
这里声明的编码语言是简体中文GB2312，你如果需要制作繁体内容，可以定义为BIG5。

  • 用小写字母书写所有的标签
    XML对大小写是敏感的，所以，XHTML也是大小写有区别的。所有的XHTML元素和属性的名字都必须使用小写。否则你的文档将被W3C校验认为是无效的。
  • 为图片添加 alt 属性；
    为所有图片添加alt属性。alt属性指定了当图片不能显示的时候就显示供替换文本，这样做对正常用户可有可无，但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了alt属性，代码才会被W3C正确性校验通过。注意的是我们要添加有意义的alt属性，象下面这样的写法毫无意义：
    <img src="logo_unc_120x30.gif" alt="logo_unc_120x30.gif">

正确的写法：<img src="logo_unc_120x30.gif" alt="UNC公司标志，点击返回首页">
而关于alt属性的设置的分析结果是针对扩大用户体验和浏览器的兼容性设置的,以及用来表示由屏幕阅读器或其他辅助性设备阅读的替换文本：
a>手机web业务
b>目的是为盲人和视力正常的人传递相同的图像信息（这部分的用户使用的浏览器可能大多使用纯文本浏览器和使用屏幕阅读机浏览以便对内容文字作转换表述）
c>带宽不够时或者用户为快速浏览网站的主要的信息点，部分用户设置为屏蔽图片或者flash等等而基本上以文本的形式浏览信息，这个时候图片和flash等网站的元素，用alt属性可以解决缺失信息的作用。

  • 给所有属性值加引号
    例：height="100"，而不能是height=100
  • 关闭所有的标签
    <p>每一个打开的标签都必须关闭。</p> <b>HTML可以接受不关闭的标，XHTML就不可以。</b>

    • 关于浏览器兼容性问题以及市场调查分析

  • 1、关于浏览器的基本调查：目前互联网用户使用率最高的是Internet Explorer (IE)_占有率已经达到94.9%,

调查分析：A、 [ 美国纽约当地时间9月30日(北京时间10月1日)消息，位于荷兰阿姆斯特丹的OneStat.com公司所进行的一次关于全球网络浏览器使用量的调查显示， Mozilla1.0的全球使用量从6月份的0.4%上升到了本月的0.8%，NetScape7.0的全球使用量在这段时期内从0.3%上升到了0.5%。与之相比，微软最新的浏览器IE6.0的全球使用量从6月份的46.4%上升到了9月份的52.3%。根据详细的数据统计，微软的IE系列浏览器的市场占有率为94.9%，而美国在线时代华纳的Netscape和Mozilla的市场占有率为3%，Opera占有0.9%的市场。微软的IE6.0的市场占有份额的上升主要是抢夺其他版本的IE浏览器的份额的结果，例如IE5.5的市场占有率就从6月份的23.9%下降到了9月份的20.9%。]
B、早些时候的调查显示：在该调查中居第一位“IE 6.0”的市场占有率达到66.3％。随后是“IE 5.5”占14.5％，“IE 5.0”占12.7％。居第4位的Mozilla只有1.6％。同样基于Mozilla技术的Netscape Navaigator等的市场占有率合计只达到4.1％。其他产品包括挪威Opera Software的“Opera”占了0.6％，前述“Safari”占了0.25％，勉强进入排行榜。这一数字比在90年代后半期已经停止开发的Netscape Navigator 4.x的市场占有率还小。

  • 2、关于兼容性问题：目前互联网Internet Explorer (IE)具有比较强的兼容性，Mozilla 1.0-2.0等浏览器相对兼容性能稍微弱点。

这主要是各个浏览器对于WC3推出的网站标准的结构语言上的识别有区分，而相对IE来说Firefox的结构识别比较严格，但因为其不够完善以及之前关于一些插件识别版权的问题目前他的还带有一些bug性的瓶颈。也正因为这些原因所以目前互联网市场因为IE的扩展兼容性能比较好（可以兼容包括之前html和目前的推出的xhtml的结构语言）而继续高亢在霸主的位置，也更受用户和网站开发者的欢迎。

  • 关于web标准下结构语言的实施经验与一些观点纠正：

    • 1、根据什么是web标准以及对浏览器的分析，WC3 推出的web标准核心体现在结构与表现形式以及行为做分离。而绝非目前互联网上热炒的DIV+CSS=web标准 TABLE \TR \TD就属于非标准。正确的理解是：web新标准是一系列标准的集合，它主张结构与表现形式以及行为分离。而无所谓网站开发者使用DIV或者TABLE架构页面呈现。不过WC3在网站页面结构方面不提倡用table来建构主体框架。他着重在于结构语言上的标准避免页面出现很多废代码和浑浊的语言逻辑。从而为网络传输和特殊使用以及数据共享等等提供可能。
  • 2、Web标准与包括IE和FIREFOX等在内的浏览器没有直接性的标准判断。就是说浏览器只是识别web标准结构语言以及解析表现形式和行为的解码器。只是相对而言：IE既能兼容WC3最新推出web新标准也能兼容之前的WC3之前推出的标准，而FIRFOX基于WC3新标准的结构语言核心技术开发的识别浏览器，对于非新web标准的结构语言如：原html结构语言不提供兼容解析。
  • 3、关于使用DIV使用TABLE的分析：

使用WEB标准之后,并不是说排除表格的使用,表格并不是鸡肋,而正好相反是一道大餐, 之所以在很多关于CSS布局的文章中常提到"为什么使用表格排版是不明智的"这句话,可能是大家对他的理解有误,这里注意一点"使用表格排版"是"不明智"的.指的是我们使用了很多年的,用表格来排版是不明智的,表格归根截底是一种显示"数据"的方式,大家可以想象一下EXCEL,表格就是起这个使用的,有的时候信息使用表格显示让我们能清晰易读,所以才使用表格,比如公司员工联系表,产品与型号对应表等。
那么所谓表格大餐呢,其实意见上升到了一个层次,也就是说你如果能像专业市场分析公司那样,灵活使用表格来显示客户数据和调查数据等消息的时候,那才是真正利用了表格的优势.所以,关于那句使用以久的话,应该改为"使用表格作为网页排版, 布局页面元素是不合理的,表格是用来显示数据的"。

关于其它元素
这里按使用经验,把XHTML标准中的一些元素,分为三大类:
第一类是称之为辅助布局设计元素:
这里我指的是DIV,SPAN等,这类元素的主要功能是用来布局整个页面的,灵活使用这些元素的各种属性,可以让你的页面表现丰富多彩.
第二类称为结构化元素或叫信息元素
这里指的是TABLE,UL,PRE,CODE类元素是一种信息显示与整理方式,比如TABLE很明显就是用来显示表格信息的,UL是用来显示列化信息的,当需要用表格或列表的时候,用这二种方式来显示是明智的。
第三类指的是这样的,完全是为了实现一些功能,如填上关键字的META keyword,还有做链接的A。

那么正确的符合标准的设计思路是：

    • 1、使用DIV等布局元素来制作页面的设计布局,定位,色块,图片等。
    • 2、使用TABLE,UL等这样的元素来显示页面中需要展示数据 。

当然,DIV也起整理数据的作用,使用DIV的ID属性可以很方便的将一个DIV作为一个你名命的数据块。所以使用WEB标准来制作网站,实际是一个信息合理化整合的一个过程,什么地方该用什么元素还是照用不误,尽量不把表格当布局工具就行，这就是WC3新标准XHTML所谓的不提倡用table布局网站的意识。

  •  

 

  • 二、 WEB新标准以及XHTML结构语言的实施可能以及问题和建议 .

网站建设尽量使用基于标准的语言规范，同时任何包括WC3推出的新标准回归理性和互联网共识需要一定的过程，其中时效性尤其重要。所以在实施过程中因充分考虑现实的互联网兼容型的问题以及用户网络浏览习性。这个过程中我们始终定位于大众用户为这些标准实施的基要。

  • 实施WEB标准的可能性几个基本的配套：

 

  • 1、WC3推出web标准的时效性以及用户体验的默契还需要磨合。
  • 2、充分理解到WC3新推出web新标准核心价值的网站开发团队。（如web标准下的程序人员以及XHTML标准制作人员，以及网站开发团队的开发习惯。）
  • 3、浏览器兼容性的问题（如：IE与FIREFOX的结构语言的解析区分与支持）
  • 4、网站开发软件的配套升级的问题。（如：目前最为流行的程序编辑和编写语言习惯插件配套的其次，设计页面静态XHTML制作的软件Macromedia Dreamweaver等升级的可能
  • 5、用户以及特殊使用的体验的需求的提出。

 

 

    • 基于以上分析与现实考量在实施web新标准的几个部分的概念。

                                               

  • 1、关于建档模式：建议采用 过渡型（Transitional ）：W3C//DTD XHTML 1.0 Transitional//EN"

目前这种形式在互联网大部分用户和网站开发团队里面得到运用。
当然我们也可以采用比较严格的建档模式：严格型（Strict ）W3C//DTD XHTML 1.0 Strict//EN"

  • 2、关于结构与形式以及行为分离的问题：结构XHTML语言尽量做到规范。同时根据页面呈现的效果，定位为重轻之分灵活处理WEB标准实施问题。同时分离页面结构与表现形式（css）和行为（js）的分离。
  • 3、关于css标准问题，可以实施css2.0的标准同时兼顾css1.0的页面兼容性。建议css分为几个规范的部分实施：
    • 通用css （包括table、tr、td；img；。。。）
    • 页面呈现相关css （包括div和table的id和css标识 如：#content）
    • 文本控制css（包括大小文本和特殊文本css。如：.frad12）
    • 临时使用css （通用图片结构css定义等等临时增加css）
关于网站图片问题：网站基于技术方面的要求网站原则上图片统一使用png，但考虑用户习惯以及网络流速和带宽问题，建议采用国际上有对图片采用共识的标准，图片颜色少的采用gif或者png压缩gif型；而颜色多的图片，如：照片建议采用jpg（好处压缩比高质量流失比较少，）

 

此文为视觉互动网独家发布技术文档，请勿转摘，更多文章请登录 视觉互动网 www.oneyesky.com

新研究发布：视觉互动网（上海）
申明：网站所发布案例，版权所有，严禁转载。律师：上海东城律师事务所，张东明
电话：13816230467
Mail： yf_5120@163.com
返回视觉互动网一级首页