关于本书，可以参考一下我去年的书评。对于前端工程师来说，很多情况下都需要重新捡起以前的代码，不管是不是自己写的，都会面临抉择：重新来过还是基于现状？大部分情况下，后者是唯一选择。勿怨天尤人，重构是你的好朋友。即便是在全新的工作进程中，当你闻到坏坏味道时，也需要很多小型的重构。那么，到底什么是重构？这可不是前几年流行的《网站重构（Designing with Web Stardards）》那本书里说的“重构”，而是”Refactor”，编程术语上的“重构”……说到底，还是得买一本才能了解透彻的，哈哈。

随着网页的程序化（就是 Web Application 越来越多了），眼观六路，耳听八方，前端工程师跟浏览器打交道，除了在掌握浏览器在展示页面上的知识，还需要有浏览器跟后台交互的基本知识，本书涉猎 HTTP 的基本要点，虽不深入但亦可管中窥豹了。

作为第一本在 HTML 领域探讨重构的《重构 HTML: 改善 Web 应用的设计》终于上市了，各大网上书店均已铺货。

两种家

我们困惑不解、迷惑不安，很大程度上源于没有指导思想。要摆正自己的位置，我们究竟是想做科学家，还是想做工程师。简明扼要，科学家经常要问“为什么”，他们关心了解人类不懂的知识；工程师则利用科学家发现的知识，制造对人类有用的物体或工具。前者研究，后者实战。很明显，我们大多数人属于工程师，W3C 那一群才是科学家。端正自己的态度，很多疑问就会迎刃而解。

两种用法

HTML 生为标记语言，是组织文档的一种格式。随着技术和社会的不断进步，HTML 的用途也逐渐升级。今天它不仅出现在浏览器上（普通网页），它还出现在桌面程序上（Adobe AIR），出现在手机程序上（PalmPre WebOS）；它不仅用来展示网页，也用来构建程序的用户界面。Web 标准要求我们，HTML 必须有良好的语义化，对于展示内容的文档来说，这是毋庸置疑的，但对于只是作为构建用户界面的程序来说，强调语义是没有多大意义的。要注重语义的时候一定不能松懈，只是用户界面而已的话，怎么方便怎么来，利用最方便的手段做最适合的布局。

实用主义的前提

工程师信奉的是实用主义，但不等于可以放弃原则和规范。工程师关键任务是在遵守规范的前提下，发现、理解并结合实际的局限来达到满意的结果。作为一个流量巨大的网站，Google 对待 HTML 的态度是一个非常好的例子，省略</body> 和 </html> 的做法我们何曾想过呢？但这却是符合 HTML 4 规范的。详见： http://code.google.com/speed/articles/optimizing-html.html（需自行翻墙）。

注意，这不需要任何 JavaScript，是浏览器内部实现的功能。很遗憾的是到目前为止只有 Opera 9+ 有部分实现，作为前端开发者，每天都在为表单验证、自动完成等提升表单用户体验的事情上拼了老命，重复发明轮子。好消息是，基本上这些都可以通过 JavaScript 来模拟实现，项目当然有人在做了：webforms2，不妨下载一试。

当然，它们是根据表单的字段名称进行猜测与匹配的。如何给表单字段起个好名字，以方便自动填写工具的匹配，就变得有必要起来。

既然说“标准”，那名字肯定不是乱取的。RFC3106 据此而生。比方说，用户 ID 使用 Ecom_User_ID, 密码使用 Ecom_User_Password 等等，你可以访问该页面查看更多的对应实例。虽然商业气息比较浓重，但不妨碍我们的使用，以及给用户带来的便利。

皆因我不知道“重构”(refactoring)。

或许你第一次看到这个词，会欢呼雀跃，耶，“重构”，网站重构，一切重新再来？很明显，不是。相反，它的过程是逐步的，有时甚至是很微小的。作为一门在编程中的高级技术，重构是指“在不改变代码外在行为的前提下，对代码作出修改，以改进程序的内部结构”（《重构：改善既有代码的设计》，2003，中国电力出版社）。对于 HTML 来说，就是不改变 HTML 所表达意义的基础上，对 HTML 作出修改，以改进 HTML 的内部结构。是不是很简单？

读者都知道 web 标准的意义所在，很明显，重构的目的是改善既有的 HTML，向 web 标准进军。重点在于改善，而不是取代。在很多情况下，取代的代价远比改善大得多。如果才能做到最大化的投入产出比，很明显，答案是重构。

啰嗦这么多，到底怎么重构？特别是 HTML, 怎么重构啊，看着堆垃圾我就头痛，是不？很多公司的网站，我们可以看到，比如腾讯，雅虎的新推出的页面，都是基于 web 标准的了，但还是存在大量的旧页面，就算访问量巨大，也是纹丝不动。我相信，这很大程度上不是由于不想改，而是除了全盘推翻重头再来之外，实在找不到好的解决办法。重构是你的解药，宝贝。

由世界知名的 XML 专家 Elliotte Rusty Harold 所著的 Refactoring HTML: Improving the Design of Existing Web Applications 是你解药的配方。书中大谈特谈的章节不多，就第一章说说who, what, why, when, where，其他章节都是说 how. how, yeah, 就是到底怎么重构的锦囊妙计。书中从编程世界中“窃取”被证明是可行的、成熟的技术，很多可能是 web 标准实践者闻所未闻的技术，结合到 HTML 来，创造行之有效的新技术，解决 HTML 特有的难题。比方说，你关心过 GET 和 POST 是什么吗？知道为何 Google 爬虫爬一爬，很多页面消失殆尽吗？（嗯嗯，老油条们，我知道你知道（绕吧？），我在这里问的是“页面仔”）。关心过自动化测试吗？什么，你还刀耕火种，写一行就在浏览器刷一下看效果？知道怎么样批量校验你的页面吗？不要告诉我你一页又一页的把上千个页面轮番轰炸 W3C Validator…

不知道？那怎么还浪费时间看什么书评，赶紧的打开书来看啊！噢哦，没有书？google 一下，有得下。英文看不懂？很吃力？噢哦，明年中文版就会上市，嗯嗯，译者就是我……（终于露出狰狞面目）……

本书是探讨 HTML 领域的重构，是对重构这门技术的又一创造性运行。它从工具入手（我们知道，工具是重构的重要辅助），然后逐一分析良构（well-formness）、合法性、布局、无障碍、web 应用程序和内容等等需要重构的方面，提出问题，讨论理据（motivation）并提供行之有效的解决方案（mechanics）。对于接触 web 标准较少的人来说，提供了一个百科全书式的的参考，而对于我的同行们，sure, 亲爱的页面仔们，不仅可以查漏补缺，亦可学习程序工业中的先进经验，提升自己的“工业”素养。总之，这不是一本束之高阁的书。

编写 HTML 不仅是一门技术，更是一门艺术。你会了解的，在读了本书之后。在此我很严肃地说。仅以此献给中国所有的页面仔，共勉。

原理

我们知道，自CSS革命以降，HTML倾向于语义化，在一般情况下不再在标记里写装饰性的内容而是把呈现的任务交给了CSS。GUI是缤纷多彩的，少不了各种漂亮的图来装点。新时代的生产方式是，在HTML布满各种各样的钩子（hook），然后交由CSS来处理。在需要用到图片的时候，现阶段是通过CSS属性background-image组合background-repeat, background-position等来实现（题外话：为何我提现阶段，因为未来浏览器若支持content则又新增另外的实现方法）。我们的主角是，你一定猜到了，就是background-position。通过调整background-position的数值，背景图片就能以不同的面貌出现在你眼前。其实图片整体面貌没有变，由于图片位置的改变，你看到只该看到的而已。就好比手表上的日期，你今天看到是21，明天看到是22，是因为它的position往上跳了一格。所以你也大概了解到，CSS Sprites一般只能使用到固定大小的盒子（box）里，这样才能够遮挡住不应该看到的部分。

我们使用YUI的sprite.png举个例子，假如我们有这么一段代码，max代表最大化，min代表最小化，我们需要给它们配上相应的漂亮图片（这样我们的网站才能够吸引人，才可以卖钱，才可以到佛罗里达晒太阳:D）：

<div class="max">最大化</div>
<div class="min">最小化</div>

这两个class都使用同一个图片：

.min, .max {
  width:16px;
  height:16px;
  background-image:url(http://developer.yahoo.com/yui/build/assets/skins/sam/sprite.png);
  background-repeat: no-repeat; /*我们并不想让它平铺*/
  text-indent:-999em; /*隐藏文本的一种方法*/
}

效果如下：

我们看到一团灰，没错，因为我们还没有指定background-position，默认为 0 0，可以看下sprite.png, 处于这个位置正是灰块。好了，我们要找到代表最大化的加号和代表最小化的减号的位置找出来。经过测量，最大化按钮位于Y轴的350px处，最小化按钮位于Y轴400px处。想一想我们如何才能让它们能够显示出来呢，明显，要向上提升sprite.png，得到代码如下：

.max {
  background-position: 0 -350px;
}
.min {
  background-position: 0 -400px;
}

耶，我们成功了：

（注意：为了举例的方便，本例子直接在HTML内置样式，切勿在实践中的非特殊情况使用这种方式）。

优点

我们从前面了解到，CSS Sprites为什么突然跑火，跟能够提升网站性能有关。显而易见，这是它的巨大优点之一。普通制作方式下的大量图片，现在合并成一个图片，大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。

缺点

至于可维护性，这是一般双刃剑。可能有人喜欢，有人不喜欢，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐。而且算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。当然，在性能的口号下，这些都是可以克服的。

由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。

前面我们也提到了，必须限制盒子的大小才能使用CSS Sprites，否则可能会出现出现干扰图片的情况。这就是说，在一些需要非单向的平铺背景和需要网页缩放的情况下，CSS Sprites并不合适。YUI的解决方式是，加大图片之间的距离，这样可以保持有限度的缩放。

总结

性能压倒一切。CSS Sprites是值得推广的一种技术。尤其适宜用于FIR，比如固定大小的icon替换。为保持兼容性，图片中的各个部分保持一定的距离是一种不错的做法。

推荐阅读：

• CSS Sprites: Image Slicing’s Kiss of Death
• 14 Rules for Faster-Loading Web Sites
• High Performance Web Sites

更新：有网友问到IE6不支持png的问题。其实真相是，IE6不支持的是半透明（alpha transparency）的png，对于全透明的png, IE6并不存在问题。因此，在实践中，不涉及到半透明而需要透明背景的图片，其实都可以使用png, 这是很安全的。

结构元素

这真是大快人心。目前，我们定义结构只能通过一个“万能”的div, 试图通过设置它的特性id的值如header, footer, sidebar等来分别表达头部，底部或者侧栏等。有了它们，代码编写者不再需要为id的命名费尽心思，对于手机、阅读器等设备更有语义的好处。HTML 5增加了新的结构元素来表达这些最常用的结构：

• section: 这可以表达书本的一部分或一章，或者一章内的一节
• header: 页面主体上的头部。并非head元素
• footer: 页面的底部（页脚），可以是一封邮件签名的所在
• nav: 到其他页面的链接集合
• article: 诸如blog, 杂志，纲要等之中的一条独立记录。

举个例子，一个blog的首页，用HTML 5写的话，可以是这样（有省略）：

<<!DOCTYPE HTML>
<HTML>
  <head>
    <title>realazy</title>
  </head>
  <body>
    <header>
    <h1>realazy</h1>
    </header>
    <section>
    <article>
    <h2><a href="http://realazy.org/blog">标题</a></h2>
    <p>内容在此...（省略n字）</p>
    </article>
    <article>
    <h2><a href="http://realazy.org/blog">标题2</a></h2>
    <p>内容2在此...（省略n字）</p>
    </article>
    ...
    </section>
    <footer>
    <nav>
    <ul>
      <li><a href="http://realazy/blog">导航1</a></li>
      <li><a href="http://realazy/blog">导航2</a></li>
      ...
    </ul>
    </nav>
    <p>© 2007 realazy</p>
    </footer>
  </body>
</HTML>

块级block的语义元素

HTML还增加以下三个块级元素：

• aside
• figure/code>
• dialog

aside可以用以表达注记、贴士、侧栏、摘要、插入的引用等诸如作为补充主体的内容。比如这样表达blog的侧栏：

<aside>
  <h3>最新文章</h3>
  <ul>
    <li><a href="http://realazy.org/blog/">文章标题</a></li>
    ...
  </ul>
</aside>

figure元素表示一个有说明的块级图片。比如：

<figure>
  <legend>这是图片的说明</legend>
  <img alt="图片可替换文本" src="/path/to/img.png" />
</figure>

dialog元素用于表达人们之间的对话。在HTML 5中，dt用于表示说话者，而dd则用来表示说话者的内容。如：

<dialog>
  <dt>佛</dt>
  <dd>色即是空</dd>
  <dt>悟空</dt>
  <dd>我现在需要点空……

行内（inline）的语义元素

m元素用来标记一些不是那么需要着重强调的文本。现在尚有争议，可能最终会改为mark.

time元素如其名，用来表达时间。它需要一个datetime的特性来标明机器能够认识的时间，如：

<time datetime="2008-08-08T20:08:08">2008年8月8日晚上8时8分8秒</tiem>

meter元素表达特定范围内的数值。可用于薪水、百分比、分数等。比如：

很遗憾地告诉你，我只有<meter>150cm</meter>

它还有6个特性来表达各方面的含义，比如：

<p>您的分数是：<meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+</meter>.</p>

还有一个progress，也是义如其名，用以表达进度：

目标完成度：<progress value="40" max="100">40%</progress>

嵌入多媒体

新增video和audio元素。顾名思义，分别是用来插入视频和声音的。至于格式，交由浏览器实现，HTML再也不需要特别的代码去播放特定的格式。就像img一样，不管是png, jpg还是gif都可以显示。值得注意的是，它们可以包含内容。比如，可以把歌词放到某段歌曲中去：

<audio src="谁人伴你睡.mp3">
  <p>泪枯干</p>
  <p>难忍怎么委屈自已</p>
  <p>曾经有一刻悲与喜</p>
  ...
</audio>

交互性

HTML 5同时也叫Web Applications 1.0, 因此也进一步发展交互能力。这些标签就是为提高页面的交互体验而生：

• details
• datagrid
• menu
• command

details用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如点击）与legend交互才显示出来。这跟现在各种通过JavaScript隐藏一段内容，在点击后才显示出来的做法有些类似。比如：

一句话记录生活中的点点滴滴，
<details>
  <legend>更多</legend>
  <p>交流与分享，拉近你和朋友，支持 MSN/GTalk/QQ、短信、手机 WAP</p>
</details>

它可以有一个open的特性，用来显示细节与否。

datagrid用来控制数据，可以由用户或者脚本来更新。

menuHTML 2就存在了，不过HTML 4把它废弃了。HTML 5废物利用，并在期内加上command元素。

参考：New elements in HTML 5

1. 不要使用import引入CSS，可以避免内容的无样式瞬间（FOUC）问题。
2. 不要把样式的link放到页面后（</body>之前），以防止页面6-10秒的空白。

这条是关于Firefox的。

在Firefox里，嵌入flash影片的HTML代码存在wmode特性时，在某些position:relative的元素内，会产生不可点击的现象（很遗憾，我总结不出具体条件，只知道必备条件是这个）。解决方法，只能依赖于JavaScript。思路是，暂时改变的了的元素的position为static, 然后恢复。JavaScript代码大致如下：

function fixSWFUnclickable(wrapper){
		wrapper.style.position = 'static';
		setTimeout(function(){wrapper.style.position = 'relative';}, 1);
}

以上。

经测试，这个beta版对中文支持严重不足。只有满足以下条件才可以正确显示：

1. 你的系统装有微软正黑体（microsoft jhenghei）
2. 正在浏览的网站字体优先指定为微软正黑体

很凑巧，我的blog符合第二个条件。请穿墙看截图：http://www.flickr.com/photos/realazy/541766405/.

尝鲜Safari 3 on Windows，那么装上微软正黑体后，可以访问我的网站来测试（可能是世界上唯一能够在当前版本的Safari 3 on Windows正确显示的中文网站？）。

以上。

更新：Safari 3.0.2 已经支持中文的显示。

在未来，所有的伺服为text/html的标记都将被视为HTML 5处理。

XHTML，尽管Firefox和Opera有所支持，但是已名存实亡。它并未见得不先进，但是历史的现实（试想想如果转换到真正的XHTML，有多少网页会由于不良够而无法显示）无情地把它丢进了历史的垃圾桶中。尽管如此，Web标准观念已经深入人心，尽管核心概念跟XHTML并未有根本的联系，但是XHTML曾作为一个推广标准的急先锋并成为某些人忽悠、炫耀的名词功不可没。

尽管如此，当今运行在世界各个角落的web网站或者web应用，除了一些热心的个人追随者，基本上所有的都是HTML, CSS和JavaScript纠缠不清，分离的理念有所推进但也不是灵丹妙药。

除了可维护性那么一点点可怜的理由，为见得分离就有什么强大的好处。accessibility? 开发另外一个版本的成本未见得维护一个“万能”的版本要高。

web标准的价值有限。HTML和CSS充其量是构建简单界面的标记语言，把界面表示出来就是他们的最大用处。同样，JavaScript能把动态效果运行起来，给用户最佳体验，只要以一种可维护性较高的方式编写即可。当然，就目前来说，可维护性较好的方式，还是web标准的分离方式。

xhtml已死，web标准的含义亦函待改进。否则说不定明天就会有web标准的可替代方案（XAML? XUL?）。

当然，我在这里并没有号召大家不要管web标准了，在当前来说，它是最先进的，你还是需要学习并理解运用它。当然，不要受到条条框框的束缚，我其实想表达的是：在web中，实用主义是最高指导思想。你不仅需要理解，还需要变通。

期望HTML更好的未来。

他还挺诙谐，标题叫做Yet Another JavaScript Library Without Documentation，对，世界上又一个没有文档的JavaScript库诞生了……

没有文档难道是光荣的？非也，因为base2.DOM遵循W3的标准（甚至包括草案），文档就散落在这些标准中。另外，遵循标准，让您的代码future-proof ! 这是最大的意义所在。现在满世界的框架/库，每种都有自己的特色API，命名方式千奇百怪，未见得对开发者友好。base2.DOM使用标准的API命名，不仅友好，而且，现在你就可以进入未来，难道你不想在IE上能使用forEach, DOMContentLoaded？Just have a try…

Dean的原文浅显易懂，我也不掺和什么了，特色请看原文的Highlights。总而言之，这些标准的API不用怕找不着文档，一般都可以在 Mozilla Developer Center上找到答案，大部分还有例子。

使用它，你不必像其他库一样必须按照它的方式来写js，你可以写出最raw的js。

使用它写了个拖放的例子作为练习，标准的方式让人心情愉快：http://realazy.org/lab/base2/dragsort.html

• 表格单元格
• 行内块（inline-block）

第一个比较好理解，第二个很多人可能会忽略。比如，很多人在图片与文本混排的时候想让图片相对于文本垂直居中除了用IE的私有特性 valign="absmiddle"别无他法。记住，默认下图片就是属于inline-block，你只需简单的img {vertical-align:middle;}即可。

那么，我们进入主题。现在我们由于某些特殊需要两个并排的div想实现垂直居中。如前所述，div非表格，但是当代的浏览器中除了IE都支持display:table-cell。恰好，IE支持dispaly:inline-block，那么我们就用两种方式为当代浏览器实现非表格的垂直居中，殊途同归。

HTML如下：

<div id="div1">blah blah...看见我居中了吗？</div>
<div id="div2">
	<p>blah blah...</p>
	....
</div>

CSS如下：

#div1, #div2 {display:table-cell; *display: inline; zoom:1; vertical-align:middle;}

我们来重点分析CSS。如您所知，*property是一个只有IE（包括IE7）才能解析的hack. 那么为何是inline而不是inline-block呢？这跟IE的变态工作方式有关，具体不深究。在此你只需知道加上zoom:1后，就等价于inline-block。另外，如果是a, span等非block的元素，则按正常方式display:inline-block。

OK, 既然是tip, 废话不宜多，自己看例子：http://realazy.org/lab/div-valign/.

Update:严格地说，IE确实不支持inline-block，这就是为什么直接赋予div会不生效的问题。准确地说，在IE中，为inline赋予inline-block会使IE触发hasLayout，从而获得部分inline-block的表现。请参考：http://cn.autos.yahoo.com/as2007/sub1/index.html .

自从Yahoo!的首页引进页签（tab, 见下图）之后，这种可用性极佳的方式越来越受欢迎，用户也逐步习惯和喜欢上它，因为它可以在原有的空间上增加更多的可用信息，而且只需切换，不需刷新整个页面，浏览更舒畅。很多网站接受并使用，如新浪等。

页签的标记结构

那么，让我们来看看这些页签后的代码。

新浪完全不考虑什么标准，就是表格嵌套，我们略过不提。Yahoo!的XHTML形式是这样的：

<div>
  <ul>
    <li>页签1</li>
    <li>页签2</li>
    ...
  </ul>
</div>
<div>
  <div>内容1</div><!--它们可能由Ajax载入-->
  <div>内容1</div>
  ...
</div>
...

符合标准，但却没有语义。页签和相应内容没有任何关联。也就是说，在没有CSS展现的情况下，用户并不晓得页签究竟对应哪一块内容。而且就JavaScript实现来说，必须对元素定义更多的id或者class作为调用钩子（hook），容易造成代码冗余。有人对此作出改良，使用连接元素的hash（即#号后的字段）跟内容进行关联，即下面这种形式：

<div>
  <ul>
    <li><a href="#content1">页签1</a></li>
    <li><a href="#content2">页签2</a></li>
    ...
  </ul>
</div>
<div>
  <div id="content1">内容1</div><!--它们可能由Ajax载入-->
  <div id="content2">内容1</div>
  ...
</div>
...

这种方式对于机器来说，确实找到了关联点，而且用户点击的时候，也能在hash的作用下（传统说法中的“锚点”）调到相应的内容区块。有进步，但还是不够语义。

语义，语义，语义！

理想中标准的、语义的tab代码应该是怎么样的呢？在我看来，应该是这样：

<dl>
  <dt>页签1</dt>
  <dd>内容1</dd>
  <dt>页签2</dd>
  <dd>内容2</dd>
</dl>

当然，我认为并不是Yahoo!的设计师／开发者并不了解语义，可能是由于某些特殊的需求在这种代码下可能会实现不了，只好采取折衷方案。是的，在这种代码形式下，语义虽能充分体现，但是要实现页签的表现形式，确实是一个难题。

解决之道

首先，请打开我们的Demo页面，先自行分析一下。如果您使用Firefox，可以尝试把CSS样式禁用进行“欣赏”（如果您装了Web developer toolbar，您可以CTRL + SHIFT + S）。继续。

解决dt的横排

dt与dd交错，如何能够使得dt排在一行上？well，理论不分析太多，要使它们在一起，我们假设dd不存在。这样的话，使用float就能排在一起。既然dd不能不存在，ok，那么让它们脱离文档流，如何做？position:absolute;就可以了。但是IE6有问题，wtf . 我的解决方法是，使用JavaScript把所有的dt凑一块，这样严重伤害了语义，但这只是一个浏览器问题，而且是在有JavaScript的时候才产生语义问题，阿弥陀佛，辩证法认为事物都具两面性。

解决dd的自适用高度

对于已经position:absolute;了的dd，无论是理论还是实践，使用纯CSS都没有解决方法。同样，我使用了JavaScript来动态计算它的每一次高度，然后赋予整个dl。

局限性与缺点

这样做保证了标准、语义、Unobtrusive。但对于少部分拥有能解析CSS的先进浏览器但却关闭了JavaScript的用户来说，极有可能会被不能自适用高度的页签下的内容区块挡住了跟随在后的信息。

s2uTab

很高兴我能写出一些实用的JavaScript，以上所提到的，我将之命名为s2uTab — 偏要解释的话，它就是Standard, Semantic, Unobtrusive Tab的缩写。首先，它很小，不依赖于任何库，在IE6+, opera 9+, Firefox 2+均通过测试（若您有Safari，务必帮忙测试一下，谢谢）。其次，灵活，除了dl外无须任何钩子，且页签数目灵活没有限制。再次，您可以指定页签切换的事件形式，可以指定初始的页签是哪个。

用法

您可以为window.onload添加如下函数：

s2uTab(页签, 事件类型, 初始页签);

其中，页签指dl元素的引用，如果您传入的是字符串，则返回id是改字符串的dl引用；事件类型是指，页签的激活是点击还是鼠标悬停，传入click或者mouseover（注意：没有”on”!）即可；初始页签是指您在初始化页面时需要激活的页签，注意，为符合编程习惯，请从0算起。

请多多参考我们的例子。

为什么之前我之前也拷贝粘贴过JavaScript, 也曾试图学习过，但都无疾而终？除了这种JavaScript的经典学习方式不适合作为非程序员的我外，更重要的，网上或者市面上根本没有合适的教程，您所看到的大部分教程，除了让您一头雾水外，还可能把您引入岐途。随着web标准的发展，JavaScript的开发方式已经发生了质的变化，急需一本结合web标准理念来教学JavaScript的入门教程来革新旧开发者的观念，引导初学者一开始就走在正确的路上，这方面，我想没有谁能够比领导WaSP DOM Scripting Task Force的Jeremy Keith更权威。

最近，由人民邮电引进出版的中文版《JavaScript DOM编程艺术》终于面市，我第一时间购买了并阅读完毕，因此将我读后感发表出来与大家分享，如有什么高见，请留言不吝赐教，谢谢。

首先要说的本书的书名，原书名是: Dom Scripting: Web Design with JavaScript and the Document Object Method, 显而易见，本书是面向初学者的，而且对象比较明确，web设计师, 并且表明了本书的内容主要就是DOM, 因此想从本书里看到JavaScript奇技淫巧，想看到Ajax的高级应用什么的，肯定会大失所望。中文版的译名在我本人看来没能表达出原书名要表达的意思，当然基于市场考虑，加上“艺术”之流的字眼还是可以原谅的，最重要的，还是书本的内容质量。翻译来说，虽然有个术语比较别扭（如hook翻译成“挂钩”），但有些也相当精确（如graceful degradation翻译为“预留退路”）。比起CSS Mastery的翻译来，相当不错了。

为何面对设计师?（当然不是说不是设计师就不能看）当web标准越来越普及，使用XHTML和CSS来构建兼容标准的网页的设计师越来越多，接触了web标准的观念和大量使用CSS之后，对于DOM其实已经有了非常感性的认识，只需高人来点破即可迅速掌握DOM的基本操作，而在网页里，对DOM的操作，绝大部分是JavaScript. 所以，我觉得，如果您现在已经了解web标准并积累有一定的项目经验，那么，这本书对您来说，阅读应该很轻松，即使，您没有任何的编程经验。所以，书中对于怎么入门编程，其实就只是简介一下JavaScript的语法，而也不会使用复杂的语句来构建例子程序，绝大部分只停留在if, for等简单的逻辑上。

至于书的内容，我觉得您直接去看网上提供的目录就可以一目了然。在我看来，它只不过就是获取DOM节点及其类型和值，如何改变DOM节点的类型和值，如何插入和删除DOM节点，如果您CSS基础好，那么您简直就是在看一本CSS书籍中的选择器介绍，只不过DOM更强大和灵活，并活起来罢了。并简要介绍了JavaScript的动画原理，让您明白，动的背后其实很简单，还提供了一个制作整站实例的过程，对于一些非设计师来说可以一窥网站诞生的流程。最后一章展望，其实就是入门书都提供的，就是对JavaScript的一些高级应用的概述，来吸引您继续学习的兴趣。不过连展望都不忘提醒贯穿整书的理念：

JavaScript是用来充实网页而不是构建网页的，并基于web标准的结构，表现，行为分离原则。任何时候不要忘了无障碍，网页的核心内容在JavaScript缺席的时候不能受影响。

确实，这是本不折不扣的入门书，对于初学者更合适。但是，是不是说对于老鸟就不适合了呢？非也，前面已经提到，尽管本书的技术浅显，但始终贯穿书本的开发理念与原则，或许是作为老鸟的您从来没有听过或者一知半解的，我建议您可以把它当作一本小说来看，不必像初学者一样拘泥于技术细节。为何这么说？

Ajax引爆JavaScript的流行，流行展望当今JavaScript，大量框架的涌现，您已经可以不费吹灰之力迅速搭建一个JavaScript应用，这样让大家的应用看起来都一样，最终结果看起来似乎都一样：解决了问题。但是您有否想过，这相同结果可能在只有JavaScript的时候？您是否想过能在禁止JavaScript的情况下，人家的能用您的不能用？为何？书本不会直接给您答案，但我相信您能间接找到。没错，该刷新您的开发观念了。而且书不厚，您只需花一个下午。

通往终点的过程与终点本身同样重要。

如果非要找点瑕疵，那么就是，本书作者作为WaSP的成员，在里面的例子中竟然同时使用两次h1，有违W3C h1每页只出现一次的建议。另外，翻译中把”you”翻译成“你们”，让人感觉作者高高在上的样子，还不如翻译成“您”或“你”来得亲切。

由常可翻译的Bulletproof Web Design: 《无懈可击的Web设计》 由清华大学出版社出版了，从印刷上说，相比其他国内出版书目，尚可算赏心悦目，全彩的印刷让阅读更轻松。

首先，作者Dan Cederholm在业界鼎鼎大名，他也并不像Eric Meryer是一位纯理论家，他投入实践，有着丰富的应用经验，他要着手解决的问题确实存在于现实的非理想世界中。这是我推荐这本书的第一个理由。

其次，译者常可属于国内比较早应用Web标准的先锋，同样拥有丰富的实战经验。值得一提的是，他是一位程序员而不是设计师，所以视角可能会更宽泛。这是我推荐这本书的第二个理由。

请使用Firefox打开一个网站，使用标准构建的更好（如果您着实找不到，我建议打开http://news.163.com）， 使用字体缩放功能（按住CTRL，然后向下滚轮）放大字体，您会看到什么现象？举个简单例子，您会看到导航字体放大后超出框的边界或者被隐藏，框并未自适应放大后的字体，导致混乱的布局……您回头看看您的项目，是不是也有类似现象？如果您能翻开这本书，或许您能够在里面找到更多的例子让您似曾相识，是啊，这些“有懈可击”的例子或许就出自您手。

如果连业界楷模的网站都如此弱不禁风，我不相信您没有什么理由不看这本书，无论您是新手想学习到一种新技术，或者老鸟查漏补缺，最重要的是，不是把设计实现出来就万事大吉，而是帮您的设计穿上防弹衣，能够适应浏览器这个恶劣环境，让您的设计无懈可击。

本书开篇强调灵活，适应和亲和力，这三个元素是如此重要，贯穿本书的始终。从解决一个变态浏览器（您知道我指的是IE）的字体适应性开始，每一章都从现实世界中找到一个“有懈可击”的案例，然后一步一步教您如何无懈可击，代码详尽，您可以亲手实践，在学习CSS技术的同时，最重要的，是让您知道，“有懈可击”错在哪里，如何才能无懈可击。很多案例都有触类旁通举一反三之功。

总之，这本书不会教您怎么使用XHTML，不会教您CSS的基础，它建立在您有一定的CSS经验基础上，它不会教您如何开始，但是它会让您的视野更宽阔，教您如何提升设计的水平，全书只有一个目标：无懈可击。而且这个目标并不是不可能实现的。