Prower's Blog » WEB标准

传说中的一年一度的网站裸奔节：CSS裸体日

摄氏度 — Thu, 09 Apr 2009 00:41:15 +0000

各位童鞋小盆友，传说中的一年一度的意义盛大的网站裸奔节——CSS裸体日又来临了，今年是第四度了。本博继去年脱去博皮惊艳一裸后，今天再度裸体上阵！

传说中的CSS裸体日是需要除去网站的样式以及广告来展示网站最原始的结构代码的，但因为本博侧边栏的广告如果除去的话怕被广告商惩罚，所以广告就不去了，把样式脱去吧。

CSS实体日的日的是为推动Web标准、提倡简洁为美、使用正确的 (x)html语义标记、良好的层次结构。

各位童鞋小盆友，清凉夏日来了，赶紧一起裸吧。

解读HTML：WEB标准从头开始

摄氏度 — Fri, 05 Dec 2008 15:58:45 +0000

在较早之前的网页上，我们经常可以看到如下的网页结构代码：

这是一个网页

……

……

很显然的，这种结构的网页代码是不符合Web标准规范的，但是浏览器仍然可以很好的呈现出这个网页来，只要代码没出什么错误。这个其实就像是用Table布局的页面跟Div构架的页面一样，浏览器都可以呈现出来，关健是哪个页面呈现的质量会更高。

做出一个页面，跟做好一个页面，中间有着很遥远的距离。

在浏览器的发展历程中，微软凭借着将Internet Explorer捆绑进Windows操作系统中，从来成为浏览器市场上的霸主，从而也造成了一系列的IE对W3C组织所制定的Web标准于不顾的事情，微软的IE一直都只遵循自家的Web标准。很庆幸的是，微软决定在他的IE8中支持Web标准，虽然这事还没最终确定。除微软的IE外，Mozilla Firefox、Apple Safari、Opera、Chrome等浏览器则以支持Web标准的名义与IE做得长久的对抗。

浏览器的不同，于是就造成了对HTML代码默认解析的不同，所以即使同样的代码在不同的浏览器下也可能呈现出不同的样式来，于是这就需要有一份众浏览器都遵循的规则来协调众浏览器之间的差异，这份规则需要一个声明来引用它，这个声明就是DOCTYPE——document type（文档类型）。

DOCTYPE声明是标准网页中必不可少的部分，所以，想要制作一个符合W3C标准的网页，首先就需要为这个页面声明一个文档类型。

DOCTYPE所声明的DTD（文档类型定义）分为三种，分别是：

Transitional（过渡的）：要求不是很严格的DTD，允许你继续在页面中使用HTML4.01的标签；

Strict（严格的）：这是制作页面时理想的DTD方式，但是这个文档类型定义不允许使用任何的表现层上的标签和属性；

Frameset（框架的）：这个专门针对页面设计中包含有框架的DTD。

由于框架型的设计可能对网页在搜索引擎中收录的影响，很多网页中都不使用框架设计；而Strict的DTD对于大多数人来说还只是一种理想化的方式；Transitional型的DTD则是目前最适用也是使用最广泛的文档类型定义。

现在随便打开一个符合Web标准的网页，都可以在页面的最开始处看到这样一句声明：

这是一个关于XHTML网页文档的DOCTYPE声明。当然并不是说DOCTYPE声明只能针对XHTML网页文档，对于使用HTML4.01的网页文档来说，同样可以使用DOCTYPE声明：

过渡的DTD：

严格的DTD：

唯一需要注意的是，DOCTYPE声明的位置必须是位于页面的最开始处，在DOCTYPE声明代码之前不能出现任何的代码或是标签，否则页面中的标签或是CSS样式可能会失效。

解读HTML：WEB标准的误解

摄氏度 — Tue, 02 Dec 2008 06:45:33 +0000

在HTML4 Elements中共计有91个标签，然而在这么多的标签中经常被使用到的标签不到四分之一，在这些常用的标签中有两个标签是属于最通用型的——div、span，这两个结构性的标签因为本身不带呈现样式及语义而被广泛的用于网页制作中，再加上之前很多人直接把WEB标准误解为就是div+css，于是在一个页面里出现了特多的div或者是span标签，尽管这些地方本身有更符合语义的标签来实现。

Table式的页面布局因为其本身的简便以及有Dreamweaver这样的可视化操作的Web制作软件的存在，从而引领了Web制作的一个时代，也正是因此而导致了过多的Web设计人员从来没有真正关注过HTML标签的真正语义，当Web标准开始兴起的时候，于是就直接被理解成是div+css的布局。

于是Web标准中的结构标签几乎变成了div的秀场。

div标签的过度使用，已经导致了很多人对于Web标准的误解，最明显的一点就是，当网页切换到使用div标签布局后，table标签便被无情的抛弃，俨然Web标准已经被理解成就是div+css。而事实上，table标签是不能被抛弃的，当需要显示数据内容时，由table标签构建的HTML结构的优势要强于div标签构建的布局，table标签仍然是显示数据时最符合HTML语义的标签。

Table页面布局所生成的过多的冗长代码，以及混杂其中的HTML样式属性，已经严重影响到页面的性能，尤其是对于大访问量的网站，解决的方法即是对页面进行基于Web标准的重构。然而对Web标准的误解，造成页面整体结构上div被过多的使用；以及Table布局所遗留下来的思想，造成页面上的结构嵌套过多。这些仍然影响着页面的整体性能。

所以，以更符合语义化的标签来构建页面，是Web标准推崇的理念。在这个理念下构建的页面还应该尽量的精简代码，使页面代码尽量的保持轻简，让浏览器更快速呈现的同时也便于日后的代码维护。

Web标准并不是某一个单独的标准，而是一系列标准的集合，包括结构、表现、行为三部分。这里的结构并不是指div，而是指标准化的语言——XHTML、XML。

明明标签可以实现粗体样式，为什么还要用标签再搭配粗体样式去实现呢？

解读HTML：大厦的基石

摄氏度 — Mon, 24 Nov 2008 05:36:07 +0000

在许多人看来，HTML应该是WEB制作所有语言中最简单的语言，因为它不需要编译、封闭等，甚至只需要一个记事本就可以让其在浏览器中呈现出来。所以我们也看到很多人都在说HTML很简单超简单之类的话，网上也有很多诸如“花个两三天学习下HTML就可以制作网页”之类的理论。在这些人看来，学HTML就像是学英文字母ABC一般简单。

正是这样的理论这样的思想，导致学习HTML的人都不把它当回事，认为HTML仅仅只是诸如“加粗用标签，斜体用标签”之类的应用。这样的思想尤其是在初学者当中流传，而一旦真正深入的了解学习HTML之后，才会发现HTML远非想像中的那么简单。

而随着WEB标准大潮的席卷互联网，更多的人索性就差不多抛弃HTML众多标签般的只用DIV，似乎DIV+CSS就是WEB标准的核心。这个错误的理论与HTML超简单的理论被绑在了一起，在互联网中传播着。思想改变行动，最终造成了WEB标准在国内互联网推行的困难重重。

真正的WEB标准应该是推崇以更合适的语义标签来制作网页结构，完全不是在整个页面写满DIV就是符合WEB标准。与此相同的道理是，HTML远远不是你所想像中的那么简单。

一个网站在浏览器中呈现效果的好坏，视觉因素占一半的比重，而另一半的比重就在于网页的结构上。

我们可以在网上看到很多整个页面都是由DIV架构的网页，这些DIV结构的页面在配合上CSS时，整个页面在浏览器中呈现的也许很正常，并看不出什么问题。可是如果用户禁用掉CSS之后呢？浏览器还能否正确的理解网页结构并呈现出来，就成了判断这个网页结构好坏的很重要的一个标准。而对于这些完全由DIV结构组成的页面，很显然的，在CSS被禁用之后，浏览器就很难呈现出一个结构清晰明了的页面来，而用户自然也很难从结构上去判断哪些内容是标题，哪些内容是真正的内容。

而如果在页面中采用了更符合语义的HTML标签的话，即使CSS样式在被禁用之后，浏览器依然可以根据标签来显示成标题，根据
标签来显示成段落，最终仍然可以为用户呈现出结构清晰明了的页面。

如果把网站建设比喻成是建造一栋大厦，那么HTML无疑就是这栋大厦的基石，如果基石不够坚稳的话，那么这栋大厦就很有可能会面临倾倒的危险。

从深层次理解并学习HTML的标签语义，从思想上重视HTML，别忘了，整个网站都是基于HTML结构来呈现的。

给链接一个添加下划线的理由

摄氏度 — Fri, 17 Oct 2008 15:35:07 +0000

互联网上有着无以计数的海量信息，而这些信息依靠着链接维持着之间的关系，从而避免了一个个独立的信息孤岛，互相关联的才能形成互联网。链接在互联网的交互上有着不可替代的重要性。

之前提到过关于链接的几种提示及打开方式，其中有一个关于链接的提示是：文字带有颜色没有下划线。有时候为了页面的美观，很多设计师会特别的去掉链接文字的下划线，而仅仅只是改变链接文字的颜色。的确，这也算是链接的一种提示方式了，至少让链接文字表现出了与普通文字的不同之处。

可是，在这里设计师们忘记了一个人群——色弱或者色盲者，对于他们而言，仅仅是改变链接文字的颜色是远远不够的，很有可能他们无法辨别出文章中的链接文字与普通文字的颜色区别，所以他们就可能差过了文章中的链接，这样的话，文章作者添加链接时的本意也就无法被这部分读者获知。

设计师们不能以页面美观或者色弱色盲人群数量少为借口，真正基于WEB标准设计的网站应该是能满足几乎所有的访问者的，这些访问者应该包括失明、视弱、色盲等残障人士。设计师们完全没有理由抛弃这部分用户。

所以，仅仅是让文章中的链接文字显示为其它颜色是不够的，为这些链接文字加上下划线吧，让他们更易被识别。

当然，这个添加下划线的表现样式，可以只针对内容页，我一向是主张在新闻列表页不使用下划经的，因为新闻列表页的文字几乎全是可链接的文字，下划线在这里的意义已经变得不再明显，甚至影响视觉上的流畅感，即使是在新闻列表页里有部分的说明文字，这部分说明文字也可以添加上链接地址，因为这些说明文字本来就是目标内容的一部分，为何不让目标内容多一分被点击的概率呢？

浏览器之战国时期

摄氏度 — Wed, 03 Sep 2008 17:18:03 +0000

做为互联网的入口之一，以及电脑中必不可少的软件之一，浏览器正成为一块人人都想独吞的蛋糕，谁能霸占了这个桌面与互联网联系最紧密的软件，自然就可以笑傲互联网江湖，但事实未能如愿，有市场就会有竞争，所以微软做不到，Mozille也做不到，Apple更不可能做到，浏览器市场一直在混战中……

如果不是当初依靠在Windows系统中捆绑Internet Explorer，也许Internet Explorer会像现在的Mozilla Firefox一样在努力缩小与市场占有量第一的巨大差距，也许已经被宣告死亡的Netscape会像今日的Internet Explorer一样占领着过半的市场份额……

然而，这仅仅只是也许。

Firefox 3的推出让Firefox的拥护者们以为看到了胜利前的曙光，IE8 Beta2版的推出又彻底粉碎了这个希望，Apple Safair正努力改变自己一贯的高傲姿态向Windows用户抛出媚眼，Opera也不甘寂寞的时不时的跳出来搅和一下，与Apple Safair采用相同Webkit内核的Google Chrome高举着开源的旗帜也加入战局……

2008的浏览器市场之争，由于各路巨头的激烈竞争而变得犹其热闹，战国时期已经来到。

很显然，Internet Explorer在浏览器市场上所占的份额在可预期之内依然是不可动摇的。即使Firefox 3的上百项改进足以帮助其增加一部分市场份额，但这仍只是极其微弱的一小部分，而且Firefox不但要拼尽全力的追赶领头羊Internet Explorer，还要顾及其身后不甘寂寞的Opera。而Apple Safair由于其一贯的高姿态，以及对Windows用户的亲和做得不够，短期内很能在Windows领域有所做为。

由于各个浏览器采用的内核不同，各自对WEB标准的支持程度也不同，所以导致很大一部分网站在不同浏览器下有着不同的表现，而这个表现往往是以显示错位居多。

因为Internet Explorer占据的市场份额巨大，所以很多时候默认的WEB标准就是Internet Explorer的标准，然而这只是在以前。当Firefox、Opera们在不停的宣称对WEB标准的支持程度时，微软终于坐不住了，于是Internet Explorer 7诞生了，然而IE7对WEB标准相对于IE6来说有很大的改善，但支持程度依然不够，于是微软又推出了IE8。微软在推出IE8的同时，也给自己出了道难题：如何面对市场上同时出现的三个版本的Internet Explorer？面对Internet Explorer系列中占有量过半IE6的用户，微软该如何收场？

即使微软在2007年的时候就宣称将要强制升级IE6到IE7，然而如很多的宣称一样，仅仅只是一个宣称，并没有多少实际效果，于是仍然有过半的Internet Explorer用户紧守IE6阵地不放弃，其实很大一部分原因是这些用户认为IE7没有优秀到让他们升级浏览器的程度，也就是说，这部分用户对IE7的态度是排斥的。显然这是让微软很头疼的一件事，当这部分用户对IE7产生怀疑的时候，那么就很有可能被其他优秀浏览器吸引住，微软从而可能失去这部分用户，所以微软如此积极的推出IE8，除了抵抗Firefox们的竞争外，很大一个原因就是要重新吸引Internet Explorer系列用户的眼光，给IE用户一个可以让他们升级浏览器的理由。

虽然Firefox 3创造了24小时内软件下载次数最多的世界吉尼斯纪录，然而在下载数创纪录的同时其仍然不得不面对卸载数也高的尴尬。微软的Internet Explorer在市场上占有的份额过多的结果是，WEB标准成了IE标准之后的第二标准，任何网站，第一个要解决的就是要保证在IE的下的正常运行，而非Firefox的兼容性。所以即使Firefox的性能强过IE，但却仍然无法俘获用户的心。做为一个普通用户来讲，浏览器只要能正常显示网页即可，对于浏览器之间的性能差距几乎是从来不关注的，相较而言，在交互方式上的改变更能吸引用户的关注。然而Firefox的改进重点仍然一直是在性能上，未在交互方式上做出重大的突破，而这也是Firefox所能战胜Internet Explorer的不多的机会之一。

一贯以高贵少数人著称的Apple，其旗下的Safair也继承了这一特点，即使Safair号称是世界上最优秀的浏览器，然而Windows用户却仍然对其置之不理。Apple Safair的问题在于其采用的内核是与Internet Explorer、Firefox都不同的Webkit内核，面对IE标准的网页，所以Apple Safair不讨Windows用户欢心也在情理之中。

Google Chrome的推出也许能给Apple Safair带来一线光明，一个走的是少数人的高端路线，而另一个走的则是平民路线，因为两者采用的是相同的内核，两个相同内核的浏览器相加的用户数自然要多过一个，当网页运行不存在问题后，Apple Safair的机会也许就来了。

与以往浏览器新版本面市的推广手段不同的是，除了Google这个本身无比响亮的金字招牌外，Google Chrome在追求性能的同时，更加关注交互方式，Google Chrome改变优化了现有浏览器的一些交互方式，以此来做为抢占市场的资本。也许Firefox未能实现的梦想，在Google Chrome身上会得以实现。

浏览器之战国时期，群雄涿鹿中……

WEB标准的重要性

摄氏度 — Wed, 18 Jun 2008 03:40:34 +0000

也许现在来说WEB标准的重要性似乎已经有点晚了，因为这已经是几年前的概念了，放到现在来说可能有点炒冷饭的意思。可是事实是，即使这是几年前的概念，但这个概念的普及实施也仅仅是在互联网比较发达的一些城市，而在另一些互联网不发达或者说是发展缓慢的城市里，WEB标准依然是它们很遥远很遥远的一个梦。

本人所在江西省就是这样一个互联网发展缓慢的城市。

查看江西排名靠前的十大网站，竟然有七个还是停留在Table布局的时代：大江网、今视网、中国江西网、江西热线、江西人才人事网、小刀在线、江西搜房网，其中江西人才人事网2008版、江西搜房网新版这两个网站最近出台或即将出台的新版竟然仍然停留在Tabel布局的时代！似乎基于WEB标准化的布局对于它们来说还是无限遥远的事情；剩下的三个已经开始采用DIV+CSS的布局方式：地宝网、易圈网、南昌网吧协会，然后这仅剩的这三个网站中，南昌网吧协会的布局依然很烂，即使在不完全支持WEB标准的IE7浏览器下显示错位的情况都相当严重，不过所知情人士透露，这个网站也即将推出新版，新版网站将完全基于DIV+CSS的方式制作，版面布局也更显大气条理清晰，因为这个新站就是他本人制作的。

上面做的统计数据只是说明有多少网站仍然用着古老的Table来布局制作网站，而不是说用DIV+CSS制作的网站就是WEB标准化的网站，事实上它们离WEB标准化还有很长的一段路要走。

很多国人都认为WEB标准实际上就是DIV+CSS，还有很多的教程什么的都挂着DIV+CSS这样的噱头来欺骗读者，其实这是一个完全错误的理解，DIV+CSS仅仅只是一个表现而已，引用一下百度百科里关于WEB标准的简介：

WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如 W3C DOM）、ECMAScript等。

确切的说，DIV仅仅只是一个容器，他本身的作用并不大，只在当它配合了CSS后才能突显出它的强大来，所以很多人天天都号称着要用DIV+CSS来制作基于WEB标准的网站，于是很多的教材也挂着DIV+CSS的噱头来欺骗读者，其实这也是一个的理解。

从上面的简介也可以看出来，结构标准指的并不是DIV，而是标准化的语言：XHTML和XML。一个真正基于WEB标准化的网站的结构并不是一味的DIV，而是推崇以更合适的语义标签来制作网页结构。但是我们仍然可以看到很多网页的结构还是清一色的DIV，既然是明明可以用
等标签来表示的标题依然使用DIV来包含着，然后用CSS来调整它的样式。

如果一个站全用DIV来进行布局，加载了CSS样式后，也许你看它很正常没什么不对劲，可是一旦撤掉这个CSS样式表后，这个网站所显示出来的页面数据就会让用户找不着北，因为完全不能体现出网页的架构，用户甚至都不可能分得清哪个是标题哪个是正文。

举办CSS裸体日这个活动并不是为了好玩，更为重要的意义是为了验证网站的结构。

由于本人才疏学浅，对于行为标准不熟悉，所以在此略过不谈，望有才学之人补充。

基于WEB标准制作的网站，在难度是比Table布局的时代要高上一个等级，可是“付出就会有回报”这句话不会有假，制作出一个基于WEB标准的网站，所带来的好处也是显而易见的：

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

对于网站所有者：
● 更少的代码和组件，容易维护。
● 带宽要求降低（代码更简洁），成本降低。举个例子：当 ESPN.com 使用 CSS改版后，每天节约超过两兆字节（terabytes）的带宽。
● 更容易被搜寻引擎搜索到。
● 改版方便，不需要变动页面内容。
● 提供打印版本而不需要复制内容。
● 提高网站易用性。在美国，有严格的法律条款（Section 508）来约束政府网站必须达到一定的易用性，其他国家也有类似的要求。

在开发基于WEB标准的网站时，所带来的好处也同样显而易见，因为WEB标准的结构、表现、行为的分离，开发人员的分工可以更加明确，程序员完全不必像以前一样为在纷杂的Table的中寻找位置而苦恼，甚至只需要轻松的将数据绑定在诸如
这样的标签即可；而页面制作人员也不必为了怕担心页面效果程序无法实现而不得不去改动设计好的页面。

如何制作一个基于WEB标准的网站，记住一点：WEB标准不等于DIV+CSS。

关于IE8的些微杂谈

摄氏度 — Thu, 06 Mar 2008 04:29:36 +0000

在今天凌晨的时候，微软对所有喜欢尝鲜的小白鼠们开放了IE8 Beta1英文版的下载，对于也身在小白鼠之列的笔者来说，而且这又是关系到自己的工作，所以也赶紧的去下载了一个下来试用。虽然咱英文不行，可是搞定一个浏览器应该还是没有问题的。

安装的过程与IE7没多大区别，安装界面与使用界面也与IE7没什么区别，对于笔者来说唯一的区别可能就是界面语言的不同了。但是使用过程中的确是有区别的，首先IE8在速度上就超载了IE7，其次是IE8在遵循WEB标准上也超过了IE7，从现有的资料来看，IE8已经开始基于WEB标准或是无限靠近WEB标准了，这对WEB开发人员来说是个很大的好消息。

本来IE8的测试版放出来给所有人试用本身并没有什么问题，真正的问题是在很多人还停留在IE6上的时候微软却即将推出IE8来，软件的更新换代本无可厚非，可是像微软这样的让自家的软件“三代同堂”的似乎不多，而这跟微软最近的策略似乎也有些相关。

与IE浏览器的情况很像的是，在大多数人还在使用XP的时候，微软的Windows 7却快要面世了，这两个操作系统中间还有一个Windows Vista。在很多人看来，在Vista的销量相对于XP少得可怜甚至不惜一次又一次的通过降低售价来增加销量的情况下放出下一代操作系统的消息，似乎微软这是在搬起石头砸自己的脚。因为这样一来，Vista的销量只会更加的少，市场占有率也不会增加。

可是微软却不得不这么做。在互联网上GOOGLE的顺风顺水让微软多少会感到有一种芒刺在背的感觉，所以微软努力的地互联网上追赶GOOGLE，可是相对于互联网来说，桌面才是微软真正起家的地方，所以无论如何桌面是微软必须占有的领域。所以在Vista得不到大众认同的时候，微软必须拿出一款可以让大众期待的操作系统来，何况还有Linux的紧逼，于是Windows 7就应运而生。

在互联网的世界里，浏览器无疑是法宝中的法宝。当Aol宣布停止Netscape的开发的时候，Firefox与Opera又不停的推出新版本时，IE浏览器在市场的占有率节节下降，在还靠着IE6打天下而IE7迟迟得不到普及的情况下，微软无疑需要祭出一款利器用以征战互联网，于是IE8也应运而生。

在面对WEB标准越来越普及的情况下，微软无法再坚持着自家的标准，所以IE7相对于IE6来说，对标准的支持已经进步了很多很多，可是这还不够。WEB开发者们还是要同时兼顾到几种不同的浏览器，无疑这将造成开发成本上的增加。这个时候，对WEB标准支持不够完善的IE无疑就会成为众矢之的，而微软需要拥抱这部分开发者，就需要开发一个完全基于WEB标准或者无限接近WEB标准的浏览器。

很长时间以来，微软一直担负着“垄断”这个“恶名”，也一直不停的受到欧盟的巨额罚款。正是由于微软的“垄断”，所以他可以不停的制定自家的标准，于是IE成了事实上的“标准浏览器”，因为没有人能不顾及IE的使用者。虽然微软的目的达到了，可是名声却不好，而对于一家世界级的企业来说，名声无疑是其品牌中极其重要的一环。

IE8的诞生将让浏览器市场变得更加的混乱，当IE8、Firefox、Opera站在同一起跑线上时，而WEB开发人员也不用再为浏览器的兼容性而耗费时间跟精力时，IE8与Firefox是否会平分市场呢？要知道微软可不希望这样的情况出现。