这次召开地点依然在杭州，两个会场。

我这里不多说，已经开始接受报名，详情见 http://www.d2forum.org/d2/6/ 。

我个人最感兴趣的是杨永全老师关于无障碍的分享，盲人用户的真实体验比我们看再多的资料都来的实在。

当然，其他几位大师的分享看起来也很吸引人。

比较好的是，这次议题不是一窝蜂的HTML5，哈哈，最近这类分享会太多了。。。

div

HTML Spec: “The div element has no special meaning at all.”

这个标签是我们见得最多、用得最多的一个标签。本身没有任何语义，用作布局以及样式化或脚本的钩子(hook)。

section

HTML Spec: “The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.”

与 div 的无语义相对，简单地说 section 就是带有语义的 div 了，但是千万不要觉得真得这么简单。section 表示一段专题性的内容，一般会带有标题。看到这里，我们也许会想到，那么一篇博客文章，或者一条单独的评论岂不是正好可以用 section 吗？接着看：

“Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the elemen.”

当元素内容聚合起来更加言之有物时，应该使用 article 来替换 section 。

那么，section 应该什么时候用呢？再接着看：

“Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information.”

section 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一个网站的主页可以分成简介、新闻和联系信息等几部分。其实我对这里传达信息很感兴趣，因为感觉 section 和下面要介绍的 artilce 更加适用于模块化应用，这个话题以后会出篇专门的文章来讨论，这里暂时略过。

要注意，W3C 还警告说：

“The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.”

section 不仅仅是一个普通的容器标签。当一个标签只是为了样式化或者方便脚本使用时，应该使用 div 。一般来说，当元素内容明确地出现在文档大纲中时，section 就是适用的。

<article>
 <hgroup>
  <h1>Apples</h1>
  <h2>Tasty, delicious fruit!</h2>
 </hgroup>
 <p>The apple is the pomaceous fruit of the apple tree.</p>
 <section>
  <h1>Red Delicious</h1>
  <p>These bright red apples are the most common found in many
  supermarkets.</p>
 </section>
 <section>
  <h1>Granny Smith</h1>
  <p>These juicy, green apples make a great filling for
  apple pies.</p>
 </section>
</article>

article

HTML Spec: “The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.”

article 是一个特殊的 section 标签，它比 section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。一般来说， article 会有标题部分(通常包含在 header 内)，有时也会 包含 footer 。虽然 section 也是带有主题性的一块内容，但是无论从结构上还是内容上来说，article 本身就是独立的、完整的。

HTML Spec 中接着又列举了一些 article 适用的场景。 “This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.”

当 article 内嵌 article 时，原则上来说，内部的 article 的内容是和外层的 article 内容是相关的。例如，一篇博客文章中，包含用户提交的评论的 article 就应该潜逃在包含博客文章 article 之中。

问题是怎么才算“完整的独立内容”？有个最简单的判断方法是看这段内容在 RSS feed 中是不是完整的。看这段内容脱离了所在的语境，是否还是完整的、独立的。

例子：

<article>
 <header>
  <h1>The Very First Rule of Life</h1>
  <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
 </header>
 <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
 <p>...</p>
 <footer>
  <a href="?comments=1">Show comments...</a>
 </footer>
</article>

<article>
 <header>
  <h1>The Very First Rule of Life</h1>
  <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
 </header>
 <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
 <p>...</p>
 <section>
  <h1>Comments</h1>
  <article>
   <footer>
    <p>Posted by: George Washington</p>
    <p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p>
   </footer>
   <p>Yeah! Especially when talking about your lobbyist friends!</p>
  </article>
  <article>
   <footer>
    <p>Posted by: George Hammond</p>
    <p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p>
   </footer>
   <p>Hey, you have the same first name as me.</p>
  </article>
 </section>
</article>

总结

div section article ，语义是从无到有，逐渐增强的。div 无任何语义，仅仅用作样式化或者脚本化的钩子(hook)，对于一段主题性的内容，则就适用 section，而假如这段内容可以脱离上下文，作为完整的独立存在的一段内容，则就适用 article。原则上来说，能使用 article 的时候，也是可以使用 section 的，但是实际上，假如使用 article 更合适，那么就不要使用 section 。nav 和 aside 的使用也是如此，这两个标签也是特殊的 section，在使用 nav 和 aside 更合适的情况下，也不要使用 section 了。

对于 div 和 section、 article 以及其他标签的区分比较简单。对于 section 和 article 的区分乍看比较难，其实重点就是看看这段内容脱离了整体是不是还能作为一个完整的、独立的内容而存在，这里面的重点又在完整身上。因为其实说起来 section 包含的内容也能算作独立的一块，但是它只能算是组成整体的一部分，article 才是一个完整的整体。

因为其实有些时候每个人都有自己的看法，所以难免有难于决断的时候，怎么办？

在 HTML5 设计原理 中，有一条是专门用来解决类似情况的：

最终用户优先(Priority of Constituencies)

“In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.” 一旦遇到冲突，最终用户优先，其次是作者，其次是实现者，其次标准制定者，最后才是理论上的完满。

推荐各位多读几遍 HTML5 设计原理，这才是纷繁世界背后的最终奥义。

我们是阿里巴巴日本。
我们致力于建设最权威，最强大的中日电子商务平台。
现在，我们要招聘靠谱的前端开发工程师：

工作地点：

杭州，点击我查看具体位置

职位要求：

1. 必须：非常熟练HTML+CSS;
2. 必须：深刻理解web标准;
3. 必须：热爱前端。
4. 必须：经验丰富或者潜力过人(二选一)。

加分项

1. 熟练使用Javascript;
2. 至少使用过一门后端脚本，如PHP、Python等;
3. 喜欢尝试新东西，好奇心强烈;
4. 有个人网站;
5. 会日语;
6. 很Open，多才多艺;
7. 美女或者帅哥;
8. 熟悉SEO;

减分项

1. 觉得上面的要求太简单不屑一顾;
2. 习惯使用百度查文档;
3. 英语特别特别差;
4. 特别低调，不擅言谈;
5. 不知道怎么找到我的联系方式;

附加说明

1. 我们希望能够招到两种人：a. 经验丰富 或者 b. 善于学习、潜力过人
2. 加分项是指优先录用的条件，如果全部满足，好，那就是你了. :) .。
3. 你的应聘邮件将会最快被处理，只要合适我会马上安排面试。
4. 我们招聘靠谱的前端，因此薪水也会很靠谱。如果你满足要求，我甚至可以教你#%*()%_)$#$ (敏感词)。
5. 请发送Doc(或者PDF等格式便于打印)的简历给我。

出现这样的问题，主要是因为feedburner使用feedproxy.google.com二级域名来做转向，然而由于众所周知的原因，feedproxy被土啬屏蔽了。这就导致了在转向到前端观察的时候，出现问题。

事实上，我们的默认feed地址一直是可以使用的，也就是  http://www.qianduan.net/feed ，你可以将原来的feedburner的地址更换成这个。其实在Google reader或者鲜果、哪咤能网站订阅前端观察的时候，直接输入我们的域名www.qianduan.net就可以自动找到这个feed地址。

之前我们并不推荐使用这个默认的feed地址，因为在前端观察刚刚开通的时候，我们使用的是默认的url规则，也就是动态生成的url(/?p=id)，也没有使用wp的缓存插件，为了防止增加服务器的负担，当时我们采用了feedsky的服务，之后才开始使用feedburner。

事实上我们很久以前就更改URL规则并使用静态化插件了，所以我们可以放心的让大家采用默认的feed地址了。

feedsky的确很慢，但是我们会为部分用户保留，feedbunner的服务的确不错，可是发生这样的事情我们也感到很无奈，但是也会继续保留。

我们不想让事情变的复杂，但是还是无法避免。

UPDATE：经过任平生在评论中的指点，现在已经修正feedbunner通过feedproxy跳转的问题，现在feedbunner的订阅地址已经可用，所以，我们还是推荐使用feedbunner：http://feeds.feedburner.com/qianduannet

如果还有任何问题，欢迎提出。

体验一下先：

当然，你还可以用这个自定义的搜索来做跟多事情，比如：

• 添加到IE和Firefox的搜索栏中
• 添加到IE8的加速器

了解更多请访问：http://s.princeb4d.com/
前端博客搜索页面：http://www.google.com/cse/home?cx=006584053597041109181:d0cihlrffdy&hl=zh-CN

事实上，前天才是前端观察的周年纪念日，但是由于那天我被重感冒困扰，竟然忘掉了这件事情，实在不应该啊……

回想这一年来的历程，我心存感激并感到幸福。这一年来有很多朋友在我遇到困难的时候为我提供了很多帮助，也有很多网友对前端观察提出了很好的建议和批评，嗯，还有更多的读者通过评论于我们进行技术交流或纠正我们内容中的不足或错误……这一切，都是我们坚持和前进的动力。有目标的人是幸福的。谢谢大家。

在这里我要特别感谢我们的编辑团队的每个成员，糖伴西红柿、菠菜、江海客，大家在前端观察的每一份付出，都是前端观察成长的见证。这是我们大家共同努力的财富。

我之前想，要不要在这个时候为网站改一下版呢？算是给网站的小礼物。事实上我自己并没有发现网站现在的不足，也没有审美疲劳，因为网站的界面也不断有些小改动。加上一直没有灵感，就一直拖延，最终也没能实现。

那就祝福一下吧，我祝愿前端观察越来越好，越来越成熟与专业，我们编辑团队也会一如既往的努力，让网站更好，让内容更有价值。

如果你对前端观察有什么好的建议，或者对于现在的网站有什么意见，欢迎提出来，我们会不断的改进，会在适当的时候优化网站或者在下次改版的时候将你的意见考虑进来。

只要努力，明天就会更美……

这个投票的目的是想了解大家的订阅习惯，以便为大家提供更好的服务，希望大家踊跃投票，谢谢！

呃，这个，即使你没有订阅前端观察也可以参加投票滴 :)

最近涌现出了很多的RSS阅读器，比如有道阅读，QQ邮箱，MobeeHome，呃还有139邮箱也有了订阅RSS的功能。这些都可以很方便的管理我们订阅的内容，而且各有特色——没有最好的阅读器，只有最适合自己的。

doubanclaimd336bb0e45ef7051

关于webrebuild.org网站，我想无需多介绍了，网站本身及其推动IE6升级活动我想国内做前端或网站重构的，没几个人不知道。

话说昨天下午，来到了环境优美的华侨城，这个地方不是很好找，但最终算是没迟到。但是由于我是第一年参加，平时也和同行很少线下交流，所以到了之后才发现，一个人都不认识！后来慢慢的就和大家有些接触，然后中间休息的时候，99css的站长yztong认出了我，很是惊喜，同时他介绍了些牛人给我，在此多谢了…

但是很遗憾，准备不足——没带相机，没带纸笔，开始的时候想通过twitter直播些内容，但是手机后来也没电了，惨！

但是收获还是很多的：

1. 各位大牛分享的技术很精彩，舜子的关于前端优化的演讲《改善用户体验的第一印象——don’t make me wait》很系统，也有很多不错的技巧（呼吁当天有记录的童鞋分享一下笔记）
2. 彪叔的一上来就向大家展示了他博大精深的知识面，会后听他讲股市四大规律在重构方面的应用同样感到非一般的精彩，毕竟能够将股市K线和网站分析联系起来的，想必不会有几个人……
3. rukey的《公用模板的重构》讲的也很系统，一些技巧对我们平时的工作和团队协作很有用；
4. 腾讯－辛春红《前瞻性研究-RDFa》的确让我了解到了些新的东西；
5. 最后上台讲CSS3的mm，整理的CSS3的知识很系统，如果能够分享出来，我想会对很多人都有用的，另外，我更期待提到的《css 3 manual》，希望能够早一点儿share……
6. 参加聚会的人好多，据说到场的有70多个人，很热闹——我想，我们是否可以搞一个关于前端/重构的协会了；
7. 遇到很多前端界的大牛，彪叔和舜子就不必说了，到场的还有老鬼、weilaixu、林小志、Tommy、greengnn、rukey等等等等，我就不一一列出了，回忆那些名字好费脑子哦……
8. 做前端的mm不少哦，而且还那么专业，真的很不简单……
9. 我想我不能再闭门造车了，以后有机会会多参加一些线下活动，多结交些gg和mm ^-^

蓝色有网友做了部分直播，感兴趣的朋友可以去看一下，另外等待当天带高级相机的童鞋分享一些照片出来……

呃，就说这么多吧，算是抛砖引玉，我想参会的每位童鞋都会有些感受吧，欢迎分享给大家……

PS：请原谅我流水线式的记录吧，以后的聚会我会报道的更加专业一些！

PS2：聚会的PPT和相关资料下载：

1. begin.rar —— 开篇
2. 第一印象.rar —— 腾讯 —— 陈子舜
3. 公用模板重构.rar —— 网易 —— 鲁齐
4. 一专多长.rar —— 腾讯 —— 梁璟彪
5. RDFa.rar —— 腾讯 —— 辛春红
6. CSS3.0 手册项目分享会.rar —— 腾讯 —— 吴珍妮
7. CSS3.0 手册下载

本文将保持更新，在我们或者读者发现有新的手册的时候，我们会立即更新本文的。

HTML速查手册

1. HTML速查手册 [直接下载]
2. HTML5 速查手册 [直接下载]
3. HTML字符实体速查手册 [直接下载]
4. RGB十六进制手册 [直接下载]
5. 微格式速查手册 [直接下载]
6. HTML5视觉手册 [直接下载]

CSS速查手册

1. CSS 速查手册 (V2) [直接下载]
2. CSS3 速查手册 [直接下载]
3. CSS2视觉手册 [直接下载]
4. BluePrint框架速查手册 [直接下载]
5. CSS 3.0参考手册 [直接下载]

javascript速查手册

1. javascript速查手册 [直接下载]
2. javascript DOM 速查手册 [直接下载]
3. 正则表达式速查手册V2 [直接下载]
4. jQuery Visual Map
5. jQuery视觉手册 [直接下载]
6. mootools 1.2 速查手册 [直接下载]
7. Prototype 1.6.0.2 速查手册 [直接下载]
8. jQuery api 参考文档 [离线版下载] [1.3版]——另，据作者shawphy透露，最近可能会有一次更新，期待并关注之……

你有发现好用的速查手册而本文没有收录吗？请在评论中提交给我们吧，谢谢先… :)

尽管这对国内没有太大的影响，但是，只要是能够推动IE消亡的事情，我想，我们还是需要多多支持的。

目前已经有将近4000人参加了这个活动。事实上，昨天，“IE6 must die”已经成为Twitter最热门关键词之一。

如果你也想参加，首先你要有个Twitter帐号，并且熟练掌握翻墙术。

点击这个链接，参加此活动。

注：在该页面只需用你的Twitter帐号登录一下，就可以自动的在你的Twitter头像上添加一个小图标。

Follow 前端观察