小李刀刀博客

div，作为web标准化进程中大火大热的HTML标签，在完成了取代table布局的使命之后，在强调语义化的今天，开始成为被滥用得最多的标签。HTML5新增的标签中，有一大部分是为了取代HTML4里的div使用场景。比如：

、

Visual Studio 2010 Ultimate RTM 版开放MSDN下载

小李刀刀 — Tue, 13 Apr 2010 20:31:51 +0000

在4月12日召开盛大的发布会之后，微软很快在官方网站开始提供Visual Studio 2010版相关试用版本的下载，MSDN的下载也已经提供。不过目前暂时没有中文版。

MSDN上的已经提供了Visual Studio 2010版全系列及.NET Framework 4.0相关的所有产品的下载。中文语言的暂时还没有任何项目。

以下为ultimate版的文件信息：

文件名 en_visual_studio_2010_ultimate_x86_dvd_509116.iso

发布日期 (UTC): 4/12/2010 8:53:48 AM
上次更新日期 (UTC): 4/12/2010 10:44:43 AM

SHA1: 84C90BB02AF92347010FF9058E0A2BA28F19CC53
ISO/CRC: B22E6250

Available to Levels: Developer AA; BizSpark Admin; BizSpark; VS Ultimate with MSDN (VL); VS Ultimate with MSDN (Retail);

安装后的版本提示为 Version 10.0.30319.1 RTMRel

安装后开始菜单下的项目变化不大，最主要的是增加了Microsoft Test Manager 2010，需要和Team Foundation Server搭配使用。

启动后可以选择的默认开发环境增加了几个。

我选择的是 Visual C# Development Settings，初次启动后连起始页都没有了，我估计应该是自动检测和导入了Visual Studio 2008的设置造成的。

创建新项目的界面：

创建新项目后，发现开发环境的颜色配置的确就是导入了Visual Studio 2008的配色方案，但是字体却恢复成了默认的“新宋体”而不是我在VS2008中设置的“Consolas”。

随便建个项目做了一点测试，很明显可以感觉出来在创建项目、添加新项、添加引用的时候反应敏捷了很多，用直接双击工具箱的方式向页面添加控件速度依然会比较慢（第一个控件，之后就没有延迟了）。

尝试打开一个Visual Studio 2008的解决方案，提示转换，但是没有备份的选项，转换时依然会自动提示是否将网站转换到4.0版本，其它项目不会转换。我的解决方案中包含三个类库一个ASP.NET MVC 1.0项目，转换后编译运行正常。

初步体验暂时如此。

需要下载试用版的同学可以移步到：http://www.microsoft.com/visualstudio/en-us/download。至于试用期满的问题，相信序列号很快就会出现。在Help菜单下单击Register Product按钮不是跳转到网站，而是弹出一个提示框，估计试用版升级为正式版的入口就在此处。

VSPaste 的持续改造

小李刀刀 — Sun, 04 Apr 2010 07:02:00 +0000

Paste from Visual Studio 是一个很好用的代码高亮插件，对于使用Visual Studio编写代码，用WLW写博客的我们来说实在是不二之选。但是作者从2007年11月22日之后就停止了该插件的更新。而到这时，这个插件还有一些不如人意的地方。

很多人都尝试过对这个插件的改造工作（参见《自己改造VSPaste插件》、《定制Paste from Visual Studio插件（上）》、《定制Paste from Visual Studio插件（下）》），在他们研究的过程中，都由于.NET Reflector无法完成工作而借助了IL。而我在尝试的时候，却发现只是用 .NET Reflector 就完成了对插件源代码的改造工作。以下是具体方法：

用.NET Reflector打开VSPaste.dll文件，选择Export：

导出后就会得到一个C#的项目：

然后，用Visual Studio打开这个项目。我的目的是解决以下几个问题：

当IDE的颜色主题做了修改之后（主要是背景），粘贴时自动将背景颜色设置到

标签而不是标签（一般情况下，背景色的改变都不会是针对关键字而是对整个文本编辑器的）；

如果从代码中间段复制（缩进层次比较多），粘贴时自动将多余的缩进去除。

这两个工作在《自己改造VSPaste插件》中其实都做了，唯一的区别就是DiryBoy是去除背景，而我要保留背景，只是换个地方放置。

第一步，参照DiryBoy的代码直接实现缩进的去除，在VSPaste.cs文件中找到Undent方法，替换其中的源代码：

public static string Undent(string s) {
    var beginSpaces = new System.Text.RegularExpressions.Regex("^(?:]*>|)( +)");
    var depth = beginSpaces.Match(s).Groups[1].Value.Length;
    if (depth == 0) return s;

    var space2trim = new System.Text.RegularExpressions.Regex
                     (
                         "^(]*>|) {" + depth + "}"
                         , System.Text.RegularExpressions.RegexOptions.Multiline
                     );
    var tmp = space2trim.Replace(s, "$1");
    var garbageSpan = new System.Text.RegularExpressions.Regex
                     (
                        "^]*>"
                        , System.Text.RegularExpressions.RegexOptions.Multiline
                     );
    return garbageSpan.Replace(tmp, String.Empty);
}

接下来是要将背景设置在

标签中，从源代码里可以发现，标签的生成是在VSPaste.cs的CreateContent方法中，而背景颜色的判断和设置却不在这里，于是我首先想到的是让具体负责背景颜色的代码将颜色值传递出来，所以对CreateContent的方法我做了这样的修改：
if (Clipboard.ContainsData(DataFormats.Rtf))
{
    string allBackColor = string.Empty;
    string htmlContent = Undent(HTMLRootProcessor.FromRTF(
        (string)Clipboard.GetData(DataFormats.Rtf),
        out allBackColor));
    if(string.IsNullOrEmpty(allBackColor)) {
        newContent = string.Format(
            "{0}
",
            htmlContent);
    }
    else
    {
        newContent = string.Format(
            "{1}
",
            allBackColor,
            htmlContent);
    }
    return DialogResult.OK;
}
原来的代码是：
if (Clipboard.ContainsData(DataFormats.Rtf))
{
    newContent = "" + Undent(HTMLRootProcessor.FromRTF((string) Clipboard.GetData(DataFormats.Rtf))) + "
";
    return DialogResult.OK;
}
我的改变就是用为HTMLRootProcessor类的FromRTF方法增加一个传出参数，通过这个参数来获取背景色，从而可以在生成
标签时直接使用。接下来，打开HTMLRootProcessor这个方法，通过阅读其源代码，可以知道，由int类型的颜色转成string类型是通过ColorProcessor的CssColor方法实现的，而每个HTMLRootProcessor方法里面有一个colors的私有字段就是ColorProcessor的实例。所以，我将HTMLRootProcessor的FromRTF方法改造如下：
public static string FromRTF(string rtf, out string allBackColor)
{
    string str;
    using (StringWriter writer = new StringWriter())
    {
        using (StringReader reader = new StringReader(rtf))
        {
            ProcessorStack stack = new ProcessorStack();
            HTMLRootProcessor processor = new HTMLRootProcessor(stack, writer);
            stack.Push(processor);
            Scanner scanner = new Scanner(reader);
            new Parser(scanner, stack).Parse();
            allBackColor = processor.background.HasValue ? processor.colors.CssColor(processor.background.Value) : string.Empty;
            str = writer.ToString();
        }
    }
    return str;
}


其中高亮的代码就是重点，首先我利用HTMLRootProcessor自带的background属性来存储背景色，然后调用colors实例的CssColor方法来为其赋值，如果没有背景色，则返回空字符串。最后一步，就是修改对background属性赋值的语句，使其只需要判断一次即可（整个代码总共就一种背景色，没必要反复赋值了）。这段代码在HTMLRootProcessor的SyncColors方法中，改造后的代码如下：
private void SyncColors(bool bgOnly)
{
    int? nullable;
    int? nullable2;
    if ((this.background != this.nextBackground) || ((((nullable = this.color).GetValueOrDefault() != (nullable2 = this.nextColor).GetValueOrDefault()) || (nullable.HasValue != nullable2.HasValue)) && !bgOnly))
    {
        if (this.color.HasValue || this.background.HasValue)
        {
            this.writer.Write("");
        }
        this.color = this.nextColor;
        if(this.background.HasValue == false)
            this.background = this.nextBackground;
        if (this.color.HasValue || this.background.HasValue)
        {
            this.writer.Write(");
            if (this.color.HasValue)
            {
                this.writer.Write("color:");
                this.writer.Write(this.colors.CssColor(this.color.Value));
            }
            //if (this.background.HasValue)
            //{
            //    if (this.color.HasValue)
            //    {
            //        this.writer.Write(';');
            //    }
            //    this.writer.Write("background:");
            //    this.writer.Write(this.colors.CssColor(this.background.Value));
            //}
            this.writer.Write("\">");
        }
    }
}
其中做了两处修改，第一处是在对background赋值前判断其是否已经有值，如果有了，则不再进行赋值操作。第二处是将原来给标签增加背景色的代码注释掉。
至此已经全部改造完毕，然后进行编译，顺利通过。将得到的VSPaste.dll覆盖到C:\Program Files\Windows Live\Writer\Plugins 目录下，启动WLW，随便从Visual Studio中赋值一段代码，粘贴，得到了本文中代码显示的效果。为了确认，打开没有改变颜色主题的Visual Web Developer 2008 Exress，复制一段代码，粘贴到WLW中，得到了没有背景色的代码样式（这里就不演示了）。至此，大功告成。
最后，对编译修改后的源代码做一点补充说明：如果生成配置是Debug，则没有任何问题，改成Release则一旦使用该插件就会造成WLW崩溃。如果要使用Release配置编译，则应该做如下调整：
 
这是经过我反复调整测试后得出的，关键在于“定义Debug常量”，其它选项都可选可不选。
本人水平有限，虽然通过尝试得出了正确结果，但是对于编译时发生的事情却不知其所以然，也无法解释其原因。望高人指点。
==================================================
修改后的VSPaste.dll下载：vspaste.zip
相关日志
2010-04-14 -- Visual Studio 2010 Ultimate RTM 版开放MSDN下载
2009-05-24 -- Visual Studio 2008 搭配64位SQL Server的问题解决方案
2009-04-30 -- VS2008 中 JS IntelliSense出错的解决
2009-04-13 -- [翻译]ASP.NET MVC动手实验1-3：开发ASP.NET MVC应用
2009-04-09 -- [翻译]ASP.NET MVC动手实验1-2：创建ASP.NET MVC应用
2009-04-09 -- [翻译]ASP.NET MVC动手系列1-1：ASP.NET MVC概述
2005-12-03 -- Visual Studio 2005体验感受

前台开发从头说起：理解css盒模型

小李刀刀 — Mon, 21 Dec 2009 14:58:41 +0000

在掌握了丰富而强大的css选择符之后，就具备了将css样式根据需要应用到网页中任何元素的能力。能够应用规则了，接下来就需要熟练掌握规则的制定方法——什么样的属性组合能够实现什么样的效果。一般的颜色、字体、字号、行高等的设置比较容易掌握，而初学者在应用css的时候，主要头疼的还是如何用css实现复杂的网页布局，从两栏布局、三栏布局，到表单设计等。在布局的时候，实际上主要是借助元素的宽、高、定位、浮动、边距、边框、间距、背景颜色、背景图片的组合来实现的。而所有这些，都要基于对css盒模型的理解。网上对盒模型的论述很多（推荐阅读《彻底理解css盒子模式》），我这里想从实用的角度来谈谈。

网上有两张著名的图片，分别以2D和3D的形式描述css盒模型：

通过这两张图，一般来说对于margin、border、background-color、background-image、padding以及width和height有较直观的了解了。

更为重要的是要了解以下几点：

对于所有以“块(block)”方式呈现的元素都具备这个模型的特性，而不只是div；
margin是以所指定元素的父级元素（常称为“容器”）为基准的；
一个元素（通常为块元素）在页面中所占的位置尺寸为：宽度= width + padding-left + padding-right + border-left-width + border-right-width + margin-left + margin-right；高度 = height + padding-top + padding-bottom + border-top-width + border-bottom-width + margin-top + margin-bottom；（部分浏览器有差异，以后再具体讨论）；
background-color将填满border内部的全部范围；background-image默认以图片左上角对齐border内部左上角点，然后完整显示整个图片（超出部分不予显示），如果图片尺寸不足铺满整个范围，图片默认重复自己直至铺满或超出范围；
background-image将叠加到background-color之上；通过指定图片的对齐方式，可以改变background-image的位置；

通过以上这些规则的组合，就能在有限的元素组合下，实现各种修饰性效果。一个简单的例子如下：

将一个15像素高，颜色为#c00的纯色图片放入一个高度为30像素，背景色为#f00的块元素，设定图片在Y轴方向不平铺，在x轴方向平铺。结果得到一个类似下图的效果：

这是简单的由背景色与背景图组合实现的效果。根据这样的原理，当我们的文档结构有两层时，例如：文字，我们可以通过由a元素的背景颜色图片和span元素的背景颜色图片组合，从而得到较为复杂的效果，例如：

这个按钮效果，用纯图片很容易实现，但是用图片实现就会面临一个问题：不通用。如果要通用，应该把文字和背景图片分离开来，同时，由于文字有多有少，因此按钮的宽度要是可变的，但是按钮并不是从左到右完全一致的背景，于是不能使用一张图片进行横向平铺，按照以前的做法，可能会使用一个一行三列的表格，第一个单元格放入左侧的图片，中间的单元格放文字和平铺的背景，右边的单元格放右侧的图片。这种思维传递到了“div+css”布局思维模式下，于是就出现了这样的结构：

<div class=”button”><div class=”left”>div><div class=”center”>div><div class=”right”>div>

这个结构的出现，就是为了实现自适应宽度的按钮，今天依然存在。实际上，使用上面的a+span的基本结构，就能实现这个效果。将中间平铺部分和左侧或右侧的边缘图片组合在一起，重复部分做得宽一些，作为a的背景图片，把另一侧的图片作为span的背景图片覆盖到a的背景图片上。组合起来看上去就成为一个整体。代码如下：

效果如下：

a {display:block;width:200px;height:36px;background:url(button.gif) no-repeat right bottom;}
a span {display:block;line-height:36px;background:url(button.gif) no-repeat left top;color:#fff;text-decoration:none;text-align:center;}

用到的背景图片如下：

这个例子很简单，但是需要对“背景组合”有足够的理解，能够想到应用。而要想到如此应用，首先是对于盒模型中的“background”足够的理解。否则，就只会想到三个div（或者其它元素组合方式），但是由于左右两个结构完全一样，为了区分它们，只好使用class或者id来标记。这就是我在上一篇中所提到的不必要的class和id。

除了利用display:block让行内元素改变为块元素从而使用盒模型特征外，在浮动的时候，也经常会用到盒模型的一些特征。再举个例子：

使用浮动布局的时候，并列呈现的浮动元素中的第一个如果设置与浮动方向相同的margin，则IE 6下会出现margin加倍的bug（这就是著名的IE6浮动边距加倍bug）。为了解决这个问题，很多人喜欢给一组浮动元素的第一个加上class=”first”，从而可以对这个元素单独应用样式。或者对这一组浮动元素加上display:inline的属性以解决这个bug。

上述两种方式都是没有使用hack选择符或者类似“_margin”这样的非标准属性的很好的hack方式。但是，如果不是非用margin不可，只要使用padding来代替margin，就能解决这个问题。或者采用与浮动方向相反的margin也可以。不需要任何额外的hack。这也是在充分理解盒模型的基础上，由于对这个bug的了解，从而在实现样式的时候直接避开，而不是出现了之后再用额外手段去hack。

对盒模型的理解，除了margin、border、padding、width、height五大属性以及两种背景的应用之外，还要了解父级元素与子元素之间的关系。比如父元素没有设置尺寸，而对子元素设置margin-top属性，在某些浏览器下，本来是想针对父元素的边缘设置margin，结果margin被设置到了父元素之外，造成父元素与外部元素的margin。这种情况，将子元素的margin改成父元素的padding，也可以在不改变表现的情况下实现相同的效果。

要想通过对盒模型特征的充分应用来减少css中的hack使用，或者以更简洁的代码实现更复杂的效果，需要对盒模型不断地尝试和总结。这是《css权威指南》之类的经典巨著也没法教给你的。

只有越理解盒模型，才能越好地利用浮动和定位来实现复杂、精确的布局。关于浮动的问题，下一次我们再一起来了解一下。

前台开发从头说起：谈谈CSS选择符

小李刀刀 — Wed, 16 Dec 2009 06:14:03 +0000

以前我接受了网上不少博文的说法，一直认为学习css的三大最重要问题是：盒模型、定位、浮动。因为这三块的内容决定了css布局的能力。但是通过上一篇日志的分析，xhtml要实现和css的解耦，就要尽量不依赖于css（或者说不要纯粹为了给css预留接口而添加不必要的class和id），那么，在用css布局之前，其实就有一个更紧迫的任务摆在我们的面前——如何将css规则准确应用到目标元素。于是，css选择符的地位在这个前提下就空前的提高了。所以，在开始学习盒模型、浮动、定位之前，有必要回顾一下选择符。

一般稍微接触过css的网页设计人员，都会很快地学会三种css选择符：

元素选择符（例如：body 、a 、li ）
ID选择符（例如：#head、#body、#foot）
类选择符（例如：.red、.item、.content）

更进一步之后，开始了解到一些进阶的选择符：

后代选择符（例如 #head .menu、#foot #copyright）
伪类选择符（例如 a:hover、a:link）

以及由这些选择符组合起来形成的综合选择符。实际上css还支持一些更丰富的选择符。但是能够被浏览器广泛支持的其实主要就是上面这几种，其它的选择符在css中往往用来区别处理不同的浏览器，或者用在jQuery一类的框架中。本文就不提了。有兴趣的可以自己在网上查一下，像属性选择符（input[type=’password’]、input[type=’radio’]）、直接后代选择符（body > div、 #head > ul）等。

实际上，有了上面列出的五种主要的选择符，通过对它们的组合，已经能够满足我们绝大部分时候的要求了，这也就意味着，相同结构下的元素，父级元素或者祖先元素只要有一点点区别，我们就能够在不借助id或者class的情况下直接访问到。例如：

<ul>
  <li><a href="#">菜单1a>
    <ul>
      <li><a href="#">菜单1-1a>li>
      <li><a href="#">菜单1-2a>li>
      <li><a href="#">菜单1-3a>li>
    ul>
  li>
  <li><a href="#">菜单2a>
    <ul>
      <li><a href="#">菜单2-1a>li>
      <li><a href="#">菜单2-2a>li>
      <li><a href="#">菜单2-3a>li>
    ul>
  li>
ul>

这个结构是我在《来自微软的纯css下拉菜单》一文中用到的下拉菜单结构。在那个示例中，没有使用任何的class或者id，但是我们通过不同优先级的元素+后台选择符，对结构中的不同层次的ul、li、a实现了精确定位。如下面的代码：

ul {}
li {}
ul ul {}
ul ul li {}
li a {}
ul li a {}
ul li:hover ul {}

那么，在实际开发中，为什么很多网页设计人员还是离不开多如牛毛的ID和class呢（我要声明一下，我从来没有说完全抛弃id和class，我的观点是他们应该尽量少，并且由文档结构决定而不是由css需要决定）？我觉得有三方面的原因：

第一、xhtml文档结构不合理，通过元素不能体现文档的层次结构。满篇都是div。没有有效利用Hx系列标签和ul、ol、dl等不同含义的列表标签、没有有效利用p、quote、pre等标签。xhtml为我们提供了丰富的标签元素，但是如果我们只会用div，那还不如人家用table来布局的。至少他的table在一定程度上也是文档结构的体现，而满篇嵌套的div，文档结构完全没体现。

第二、css选择符掌握得不够，不善于借助文档结构层次上的细微区别，用不同的组合选择符来区别相似但其实不同的元素。例如上面的下拉菜单结构，有的人就非要用“menu”和“submenu”来区别。

第三、css选择符的优先级不清楚。css是支持继承和覆盖的，什么时候继承，什么时候覆盖。两条规则都对相同元素做出了样式规定而且样式规定重复的情况下，哪一条规则会被应用呢？这些问题不清楚，就没办法充分利用优先级实现规则的覆盖。于是只好每个要应用样式的元素都加上id或者class。关于css选择符的优先级，网上也有很多文章，我就不赘述了。

所以说，如果感觉离不了class，离不了id，那只能说明两个问题——xhtml结构不合理或者css掌握得还不够。我上一篇博文发了以后，有位朋友评论说我没做过前台开发。因为没有class和id，就不能实现css和javascript的分离。实际上，只要是长期深入学习css和javascript的朋友应该都清楚：在结构有差异的情况下，用css选择符就能精确定位某个元素；在结构完全相同的情况下，借助javascript和DOM，同样可以精确定位某个元素。

仍然以上面的下拉菜单列表为例。首先使用 ul a 对父级菜单的链接应用样式，然后用ul ul a就可以精确定位到次级菜单的链接，应用新的样式，对ul a的定义进行覆盖。那么，如果是要精确定位到第二级菜单的第二个元素呢？由于css3的选择符目前还没被广泛支持，而结构又没有差异，不借助javascript有困难了。但是借助于javascript，非常轻松，比如在jQuery中，我们可以用 $("ul ul:nth(2) li:nth(2)”) 或者 $("ul ul”).eq(1).find(“li”).eq(1) 都能得到第二个子菜单的第二个菜单元素。

css和javascript能够自己精确找到网页中的任何一个元素，那么网页自然就不用自己标识自己的每个元素。少了这层负担，我们在设计网页文档结构的时候，自然就可以抛弃一切后顾之忧，那么，xhtml中和结构无关的id和class，还有什么必要存在呢？

去除了不必要的表现元素和属性（font、center、align、height）之后，又去除了不必要的id、class、onclick、onmouseover之类的样式和行为属性，我们的网页源代码尺寸越来越小，抓一个页面下来，少量必要的结构元素之外，剩下的全是链接和内容，这样的网站，搜索引擎能不喜欢吗？

没有了后顾之忧，认清了努力方向，那么下一次我们就来谈谈css的盒模型。

前台开发从头说起：关于web标准化

小李刀刀 — Mon, 14 Dec 2009 17:00:43 +0000

虽然CSS在表现方面天生具有很多优势，但是如果不是web标准化的盛行，估计CSS不会达到今天这样的热门。所以要说CSS，肯定要从web标准化说起。实际上，对CSS的理解越深，才能越好地理解和使用CSS。

很多人对于web标准化的理解就是“DIV+CSS”，或者“IE、FF、Chrome、Opera、Safari测试无错”，或者就是“通过w3c校验”。实际上，这些都只是web标准化以后附带的一些好处或者说一些表现。web标准化的精髓并不是为了抛弃表格，或者浏览器兼容，或者通过w3c校验。有时候，标准化了的网页未必一定能达到上述这些特征。

web标准化的精髓或者说本质到底是什么呢？其实很简单，就是“结构、表现、行为分离”。这句话看起来简单，但是真的实现起来，就不那么容易了。分离，分离到什么程度算是标准？分离的目的是什么？举例来说吧。

既然要分离，那么耦合度当然是越低越好。

以样式为例。我们可以把所有的样式都放到外部CSS文件中，那么，CSS规则如何影响你的页面元素呢？有时候用到ID，有时候用到class。如果你的页面充满了ID和class，那么实际上分离得就不怎么彻底，因为你的页面上仍然有大量的ID或者class实际上是为了样式表现而存在的，他们并不是文档结构本身的要求。所以现在有“class hell”的说法。就是为了完全由外部css对页面实现精确控制，而在页面文档中加入大量，甚至过多的class。

再以行为为例。很多时候我们需要和用户交互，于是要给页面上的元素添加“onclick”，“onchange”，“onmouseover”等属性，这些属性编写在页面文档中，依赖于外部javascript。一旦外部的javascript被拿走，页面就出现执行脚本错误，甚至完全不能正常阅读。在这种情况下，javascript实际上和xhtml就没有能够解除耦合。

实际上，由于只有xhtml、css、javascript三者存在，我们不可能在网页开发中引入“面向接口编程”之类的设计模式。那么，我们所谓的彻底分离，其实从三者分离的最根本目的来说，就是要实现xhtml对另外两者不依赖。即使去除了所有的css和javascript，xhtml本身也能很好地完成自己的职责——文档结构。而css和javascript呢？依赖于xhtml是必然的。

如此一来，如何解除耦合呢？其实答案就呼之欲出了。那就是尽量避免和文档结构无关的元素嵌套，尽量去除class和事件属性。比如：

<ul>
    <li><a href="#">国内新闻a>li>
    <li><a href="#">国际新闻a>li>
    <li><a href="#">财经新闻a>li>
    <li><a href="#">体育新闻a>li>
ul>

这样一段源代码，从文档结构的角度来理解，它就是一组彼此关联，没有先后和主次之分的列表，可以理解为列表，也可以理解为目录。

但是在css的作用下，它可以变成菜单、导航条等各种形式，如果css和javascript相结合起来，它还可以变成滑动门、三态菜单等。在这种情况下，css负责表现，javascript负责行为，而xhtml并没有因为css想实现什么样式或者javascript想实现什么交互行为而改变自己。不管css和javascript想做什么，都跟它没关系。那么实际上就真正达到了我们“彻底分离”的目的。保证了文档结构的纯粹性。这就是web标准的思维模式。

随之而来的好处，那就是页面的兼容性，不管在什么样的浏览器里，这段xhtml都是合法有效的。w3c校验也不会有任何问题。并且SEO也会非常好。因为搜索引擎想要的并不是class或者onmouseover，搜索引擎想要的只不过是链接地址和链接文字。

那么，没有class，怎么实现样式呢？没有onmouseover或者onclick，怎么实现javascript事件呢？这就需要网页开发人员的css功力和javascript功力了。

所以，越是标准化，对css和javascript的技术要求越高。反过来，css的能力达不到，或者javascript的能力达不到，那就需要借助于class（id和文档结构有关，不算在这里，后面我们再谈）、借助于onmouseover或者onclick这些与结构无关的属性来帮助实现样式或者行为。

在博客园上，暴牙齿提出“独立于根”的想法。我个人认为从文档结构的角度，并没有“独立于根”的要求。但是如果能够达到“独立于根”的开发能力，那么实现起标准化来就绝对会非常得心应手。因为连“独立于根”都能实现自己的设计样式和行为的话，有了结构的文档就更不在话下了。

理解了标准化的本质和终极目标，如何通过css和javascript来达到这个目标呢？这个问题，留到本系列以后的文章再谈。

关于web标准化的一些误区

小李刀刀 — Tue, 13 Oct 2009 10:13:06 +0000

“web标准”这个词最近几年在国内的热火程度就好像钱江潮一样一浪高过一浪，随着雅虎、MSN以及国内各大门户网站纷纷抛弃表格布局，现在的网页，要是还没有使用div+css布局，那别人一看就首先从心底鄙视起来。

但是作为一直在web开发这个领域混迹的开发人员，我从网上的文章，还有周围人的讨论中发现，很多人都把“web标准”和“div+css”完全弄混了。包括现在热卖的一些书也是这样，通篇都是“div+css”布局。严重一点的，那更是“万般皆div”。

“div+css”布局，作为web标准的一个重要部分，也是对web标准下网页布局的一个最直观布局，但是我们不应该顾名思义，以为web标准就是“div+css”布局，最后的结果就是，虽然完全抛弃了table，但是网页结构却离标准十万八千里。

web标准的本质是“结构、表现、行为”的彻底分离。在进行了多年的标准化实践以后，我越来越体会到应用web标准以后的种种好处。打开一个网页的源代码，结构清晰，标签应用准确，看到就知道这是标题，看到

就知道这是段落。去掉css以后，一个类似word文档的结构清晰的文件就呈现在页面上。

只有这样的网页，才能真正体现web标准化的优点。web标准化的优点主要是什么呢？加载速度快、易于维护、搜索引擎友好、减少带宽占用、利于团队分工合作……很多。采用div+css布局，做得好的话，也只不过是能够减小文件大小，提高加载速度，易于维护而已。有的文章里说“采用div+css”布局的页面更容易被搜索引擎索引，或者说“google更喜欢div+css”，这就是误区了。google喜欢的不是采用div布局或者table布局的页面，而是喜欢结构清晰良好的页面。比如一个导航条，如果采用table布局、采用flash实现、采用图片按钮等，那么google不能识别出这是对于网站来说很重要的导航条。而如果采用div布局，可以去掉很多不必要的table\tr标签，从而让对搜索引擎真正有用的两个内容——链接地址、标题更加突出。但是，只有真正符合web标准的结构，才能彻底剥离掉html代码里面的css和javascript。比如：

<a href="index.html" title="首页" onmouseover="highLight(this)"
 style="font-weight:bold;color:red">返回首页a>

这样一段代码，其中对搜索引擎有用的只不过是“index.html”和“首页”罢了。符合web标准的html应该是这样：

<a href="index.html" title="首页">返回首页a>

css怎么办呢？放到外部css文件里去，鼠标滑过的效果呢？放到外部js里去，为网页元素附加事件，这属于行为，应该是javascript的职责范围。不应该放到文档结构里。

刚才是一个结构表现行为混合的反面例子，除了三块不分开以外，现在网上流传很广的很多div+css布局的页面还存在另外一个问题，就是html标签使用不合理，虽然使用了div+css布局，但是html丝毫不能体现页面结构。比如：

<div id="wrap">
    <div id="head">
        <div id="logo">
            <img src="logo.gif" border="0" width="250" height="60" />
        div>
    div>
div>

像这样的例子，现在互联网上遍地都是，做成这样，你可以说你抛弃了表格，采用了div+css布局，但是这样的div布局，有什么意义呢？除了抛弃表格赶了现在的时髦以外。这里的这张图是网站的标识，也就是说，搜索引擎来到这里，应该得到的是网站的名称之类的信息。那么结构合理的站点怎么做的呢？

<div id="wrap">
    <div id="head">
        <h1>网站名称h1>
    div>
div>

作为网站标题，也就是一本书的书名，一篇文章的标题，在word里面我们一般会设置“标题一”，在现阶段的HTML规范里，那就对应着一级标题

，所以这里理所当然使用每个页面都应该有且仅有一个的

。

可是设计图里这个地方不显示网站的标题而是现实网站的LOGO，怎么办呢？这就不属于文档结构的问题，而是页面表现的问题了，应该是css的职责。实现起来其实也不难：

h1 {background:(logo.gif) no-repeat;width:250px;height:60px;text-indent:-9999px;}

在web标准中，文档结构是首要问题，你的HTML应该体现你的网页的文档结构和层次，从每个部分的先后、重要程度、主次程度出发，考虑是段落还是标题？是列表还是引用？从而使用对应的标签。而不是为了实现设计样式，把重要的放下面，把标题改成图片。当然其中最失败的，就是到处都是div。

HTML中提供了那么多的标签，本意就是每个标签对应文档的不同部分，每个标签有各自的用途和意义。如果一切都从布局需要出发，只要是要应用样式的就来个div，那HTML还有什么意义？只需要、、加上

、就够了。还要

、

、这些干什么呢？

最后还有一个误区，那就是——div+css布局才是标准化，用了table就是不标准。w3c从来没有说过table是不推荐使用的标签，更没有说过web标准要求禁止table。table的作用，是呈现数据，结构化的数据，在数据库中是怎么存储的？当然是以数据表的形式。那么这些数据要呈现到页面上，同样大部分时候仍然是以表格形式。在这个时候，就应该使用表格，使用table。

在web标准刚刚热火起来的时候，主要是针对大家已经使用多年形成依赖的table布局和table嵌套而把用div进行网页块划分和用table进行网页块划分的两种页面布局方式进行比较，从而才出现了“div布局”和“table布局”的概念。实际上，比这种叫法更准确的，应该是“css布局”和“html布局”。

一律使用div不是标准，标准也从来不禁用table。div只是web标准中用来实现网页布局的重要标签，实际上没有任何效果是必须依赖div的。所有的效果都是由css实现的，不管是div还是p，css都能让他们呈现出同样的效果。而table呢？应该回归到它本来的作用——呈现表格形式的数据。

我以前一直认为这只是网络上网页设计自学者和一些网页设计网站混淆了概念，搞错了重点。但是当我回到高校，从事电子商务开发方面的教学时，我才发现，问题已经蔓延到了高校教材、课堂教学中了。

现在其实有很多网页设计师，UI工程师和程序员都很努力地致力于web标准的推广。我想说的是，希望大家在传播web标准理念的时候，不要光顾技术细节、技巧方面的问题了，而忽略了web标准的本质——先进的设计模式和开发理念。

吃烧烤囧事

小李刀刀 — Wed, 07 Oct 2009 17:39:14 +0000

国庆长假的时候，回老家，返昆明之前在文山停留了一天，跟兄弟朋友聚聚。晚上唱完歌我们到“一品鸡翅尖”吃烧烤。可能是由于太晚了吧，生意不算很好，店铺里间只有我们和另外一桌。大家都是刚刚到。

就在等烧烤的时候，隔壁那一桌的对话就开始吸引我们的注意力了，一直到我们离开。实在让我觉得叹为观止。

隔壁最开始是三个女的一个男的，其中的一男大约是四十多接近五十岁的年纪，三个女的其中一个大约20多岁，长相一般，另外两个女的膀大腰圆，大约三十多岁。显然他们的人也没到齐。20多岁那个女的正在给朋友打电话：“快来快来，有两个美女一个帅哥！”

我由于位置关系，侧前方就是他们，看得非常清楚，听到这个女的打电话，和所看到的互相参照，让我有点忍俊不禁。当时脑子里重复了一下“两个美女一个帅哥”，很好笑但是没笑出来，也没跟朋友说起。

过了一会儿，我们正在吃，他们人都到齐了，一边吃一边互相敬酒。那位中年男人举起酒杯给其中一个三十多岁的胖女人敬酒，嘴里说：“我祝你永远美（丽）！”

按说朋友之间嘛，互相吹捧一下也是正常的，但是接下来那个女的回答的话差点让我们这桌刚喝的酒水全喷出来：“我心目中的美，就是要靠你们来多浇水、多施肥……”

我当时一下没忍住，赶紧把头转向另一边。我得承认，我在听到这句话的时候，心里实在是有点不健康的，不过，很显然不只是我这样理解了，我们这桌显然都是同样的理解。

我兄弟吃着吃着，嘴里开玩笑还把“多施肥”几个字说了出来，我频频提醒他：“别提起别提起……”，很担心因为这个导致两桌之间的冲突。

不过一个胖女人对一个老男人说：“我心目中的美，就是要靠你们来多浇水、多施肥”这样的形象，我不论从哪个角度去理解，都只能赞叹——太TMD经典了，太囧了！

突如其来的暴雨

小李刀刀 — Fri, 28 Aug 2009 12:21:48 +0000

昨天下班走得比较早，办了一卡通之后，就叫碧姐一起去食堂吃饭。等了蛮久她才忙完，我们要出门的时候已经开始飘起小雨了。我这个人向来是不备伞不带伞的，幸好之前办宽带的时候送了一把电信天翼的宣传伞。我拿了伞下楼，结果雨又小到若有若无了。

在食堂吃饭的时候，雨开始渐渐大起来。碧姐说：雨很大，干脆慢慢吃。

但是我吃完的时候看到有学生不打伞直接走出食堂，雨又小下去了。于是我们也离开食堂。刚走了十多米，暴雨骤然而至。从若有若无到倾盆大雨之间没有任何过度，别说是一把伞，就算是我们各拿了一把大伞也挡不住，何况还有风不断把雨从侧面吹过来。

旁边就是趁开学到学校来设点促销的遮阳伞摊点。一男一女两个年轻人已经收拾好东西了，只差伞和桌子还没收，我们赶紧跑到他们的伞下，暂避一时。

那个男的手里举着铺桌子的布，挡住风吹过来的雨，但是没坚持多一会儿，他就跑到车（他们开了一辆三厢轿车在那里）里去了，剩下那个女孩子怕风把伞吹跑，还守着。

这时候又有三个学生家长挤了进来，雨更大了，风也更大了。大家都把手里的伞撑到风吹过来的方向，挡住雨水。但是伞本来设计的是对付头顶落下的雨，挡侧面就有点力不从心了，大家尽量用伞护住头部和衣服，裤子、裙子都已经湿透了。一阵大过一阵的风刮来，虽然是8月，在暴雨中穿得很单薄的我们都冷得发抖。

坚持了十来分钟，风力猛然增大，太阳伞不断地向后扬。于是我们纷纷用手抓住伞梁，不让风把它吹走。这时候风助雨势雨借风力，三把雨伞终于失去了作用，我们每个人都已经是浑身湿透了，这时候站在太阳伞下已经失去了避雨的意义，我们唯一能做的就是尽量帮助那个拼命保护太阳伞的女孩子，帮她抓住在一阵强过一阵的风中摇摇欲坠的伞。

又过了一会儿，拿雨伞的三个人都坚持不住，跑回食堂去了，我们剩下的人依然在坚持，猛烈的雨水打在脸上，我觉得什么都看不清楚，只是感觉风力稍有增强，就拼命抓住。

最后，风还是没能把太阳伞连根拔起，但是伞布已经被撕破了，我们再抓住架子也没意义了，大家才陆续撒手跑进食堂去。那个女孩子还拼命地抓住伞架不肯走，我拼命跟她喊：“大家都走了，你一个人抓不住，你会被伞带翻的！”后来强行把她的手掰开，她才躲进了车里去。

我跑到食堂，碧姐和我都已经浑身湿透了，我身上的钱，还有背的包都无一幸免，我们干脆冒着雨跑回宿舍。我回到自己宿舍，换了衣服，擦干身子直接钻到被窝里睡觉了，虽然这时候还不到20点。

小李刀刀博客

最近的书单

相关日志

HTML5时代的div

Visual Studio 2010 Ultimate RTM 版开放MSDN下载

相关日志

VSPaste 的持续改造

相关日志

前台开发从头说起：理解css盒模型

相关日志

前台开发从头说起：谈谈CSS选择符

相关日志

前台开发从头说起：关于web标准化

相关日志

关于web标准化的一些误区

，所以这里理所当然使用每个页面都应该有且仅有一个的

相关日志

吃烧烤囧事

相关日志

突如其来的暴雨

相关日志