例如我的网站有提供Feed，但blog的某个分类却没提供，这时如果分类的页面能输出hatom的结构与数据的话，就可以能过工具（例如： hAtom transcoder ， hatom2atom ）把它转换成atom或者RSS，试着访问： http://tools.microformatic.com/transcode/atom/hatom/http://www.aoao.org.cn/blog/category/dev/ 看到的就是转换出来的atom，这样的话你甚至可以把搜索的结果转成atom（其实WP虾米feed都是可以输出），好像转把页面转成RSS或者atom也没什么特别的作用，介于这样，我们只研究不应用好了。

hAtom整体结构如下:

• hfeed (hfeed). optional.
  • feed category. optional. keywords or phrases, using rel-tag.
  • hentry (hentry).
    • entry-title. required. text.
    • entry-content. optional (see field description). text. [*]
    • entry-summary. optional. text.
    • updated. required using datetime-design-pattern. [*]
    • published. optional using datetime-design-pattern.
    • author. required using hCard. [*]
    • bookmark (permalink). optional, using rel-bookmark.
    • tags. optional. keywords or phrases, using rel-tag.

[*] Some required elements have defaults if missing, see below.

本来想全译成中文的，可是我发现我用了二十几年的语言都不知道怎样表达 Feed Entry及一些看起来很简单的东东，所以大家就将就着看，我也就不翻译了，抽出几个出来，详细完整的介绍看官方WIKI。

• Feed : 标示一个feed元素，使用class hfeed，可选，如果没用则假设整个页面都是，hAtom可能包括有多个feed元素
• Feed Category：必须在feed内但又不在entry内，使用rel标记。
• Entry：在<blockquote> or <q> 里的微格式会给忽视。
• Entry Title：如果没有的话会找entry里第一个Hx 或者页面的<title>（在没有feed的情况下），或者把它当成空处理。
• Entry Content：出现多个会按文档顺序连起来
• Entry Permalink：如果没有的话会用网页的url，如果entry内有ID的话就是锚点，
• Entry Updated：如果没有就用Entry Published，
• Entry Author：要hCard，可以有多个。

如果你想在wordpress上使用hatom的话，可以参考一下这篇hAtom and WordPress。

在官方有批examples ，上边有各种关于hatom奇奇怪怪的应用。 个人看法，现在对应的“硬件”不成熟，各种应用都比较极限，也许在以后，hAtom会有很好的发展。

在CSS规范中有一个渲染对象的概念，通常用一个盒子（box, rectangle）来表示。 mozilla通过一个叫frame的对象对盒子进行操作。frame主要的动作有三个：

• 构造frame, 以建立对象树（DOM树）
• reflow, 以确定对象位置，或者是调用mozilla的Layout（这里是指源码的实现）
• 绘制，以便对象能显示在屏幕上

总的来说，reflow就是载入内容树（在HTML中就是DOM树）和创建或更新frame结构的响应的一种过程。

现在，我们能形象地看到这个reflow是怎样的一个过程了（via:What is a reflow?），先看一下Mozilla的首页；
阅读器看不到点这里看。

如果能了解渲染过程的话，自然就可以控制减少网页的开销，不过我还不知道这是怎样搞出来滴，谁知道跟我说一下，这里还有维基百科首页和跟google.co.jp的首页的。

阅读器里看不到点这里看
阅读器看不到点这里看

扩展阅读：Notes on HTML Reflow

如果你使用的是Safari(iphone上的不一样，不过会Go按钮会变成Search)或者是其他WebKit引擎的浏览器的话，你就可以看出下面这个input与其他的不同了。

看不到的朋友可以看一下图片：

看一下相关的代码：

<input type="search" placeholder="测试搜索" autosave="aoao.org.cn" results="8" >

相关的说明，就几个属性的介绍，比较简单，没有译了中文，大家看看就是，其实不用看也要以猜得出。

The incremental attribute can be used to control whether or not the search is performed as you type.

The placeholder attribute can be used to set the greyed placeholder text in the control.

The autosave attribute allows you to specify an autosave name for your search results in the dropdown. What’s cool about the autosave is that it’s global, which means that two Web sites could put up a search field with an autosave name of google and then they would share the search results. (Since the actual result values are not accessible to the page there is no privacy violation.)

The results attribute allows you to specify how many results should be displayed in the dropdown.

The search DOM event fires at the precise time the search should be performed and obeys the heuristic for the control, so you don’t have to trap key and click events at all. You can use the onsearch attribute on the control to respond when the search happens.

BTW：CSS Naked Day差不多到了，今年改在9号，有兴趣的朋友凑凑热闹。

那要怎样OO呢？现在大家都知道CSS是可以介样写滴：

.G_G { /* xxxxxx */ }

我们可以把它大约看一个原型，或者说成类，-__-b 好像本来就是类的样子，然后要在HTML里“实例化”一个对象，例如：

<div class="G_G">笨蛋嗷嗷</div>

该元素会使用上CSS相应的定义，但仅仅对应的class还是不够的，因为我们页面可能会多处应用到这个class，为了处理好“私有”的关系，把刚才的代码改成：

<div id="aoao" class="G_G">笨蛋嗷嗷</div>

这样的话，这个ID为aoao的元素就会应用.G_G这个类的定义，而且可以用#aoao{}这样的选择符来进去私有效果的定义，这样也不会影响到公共用的.G_G这个类，同时，#aoao定义的优先权会比.G_G高，符合私有定义比公共定义优先高的常理^^。

由于我使用了ID这个具有唯一性的东东，对这种私有定义后的东西复用就成了问题（一个ID只能在一个页面上出现一次，不知道谁说的，反正是真理）。如果我们要实现多个相同私有化的东东怎办呢？那我们就必须来实现“多态”。挖哈哈。再改一下代码：

<div class="G_G o_O">笨蛋嗷嗷</div>

一个是“G_G”，另一个是“o_O”，但是我们如果使用上.o_O{}也是可以定义到元素，假如CSS是这样的话：

.G_G {width:100%}
.o_O {color:#123456}

元素将都被定义到，而且由于定义不层叠，都会给应用。再假如代码是这样的话，不知道会不会更好理解。

<div class="layout color">不是笨蛋嗷嗷鸟</div>

.layout{width:100%}
.color{color:#123456}

接着，要来实现“封装”。子级选择符大家应该常常用吧，换代码：

<div class="G_G"><span class="bendan">笨蛋</span>嗷嗷</div>

虽然.bendan{}跟.G_G .bendan{}都可以定义，但是后者只能应用在class为“G_G”的元素，我们可以简单把.bendan{}理解成全局定义，把.G_G .bendan{}理解成局部定义，这样的话就有利于我们XHTML与CSS的模块化。^^传说中的“封装”出现了，再接着。

<div id="aoao" class="G_G o_O"><span class="bendan">笨蛋</span>嗷嗷</div>

这样的代码就可以产生无数的变化了，还不明白的从头看起。^^

其实，这些跟真正的面向对象还有很大一段距离，我只是在学标题党，不过可以用它来理解ID与class的应用。

那用侧栏有什么好处呢？侧栏是独立的窗口，可以多赚点PV ^_^ ，如果是用IE或者Firefox的朋友点一下Music For Bloggers看一下效果。有没有用大家就自己衡量了，不同的应用的不同的价值，就看应用在哪里。

那怎样实现呢？

<a target="_search" href="http://labs.aoao.org.cn/bloggingmusic/" title="Music For Bloggers">Music For Bloggers</a>

注意到target="_search"没，在Web标准流行的今天target早就给人抛弃了，其实还是很有作用滴。不过支持的只是IE跟Firefox，虽然Opera也有侧栏，但我还没找在页面里把它打开的方式。Safari好像没有侧栏，也许有，不过我没见过，因为Safari会自动把页面的宽度当成窗体的宽度。

我记得以前IE还支持target="_mdiea"，可是。现在的测试却没效果。不管了，反正firefox也不支持。那么，怎样使用Opera的侧栏呢？只能用收藏的方式。

<a rel="sidebar" href="http://labs.aoao.org.cn/bloggingmusic/" title="Music For Bloggers">Music For Bloggers</a>

这回关键的是rel="sidebar"，不用写什么鬼脚本了，浏览器会自动识别，点击就添加收藏，试一下，Firefox也支持这种方式，^_^ 很好~很强大。不过需要用户来收藏再使用意义已经变了。注意，rel不是用来给JS识别然后打开新窗口的，rel还有很多作用滴。

var myStyle:TextField.StyleSheet = new TextField.StyleSheet();
myStyle.load("sample.css");
content_txt.styleSheet = myStyle;
content_txt.multiline= true;
content_txt.wordWrap = true;
content_txt.html = true;
var story:XML = new XML();
story.ignoreWhite = true;
story.load("sample.html");
story.onLoad = function () {
content_txt.htmlText = story;
}

这个是加载外部CSS跟HTML（其实是加载XML当HTML用-_-b ）的。后来Den写了两种把样式写在AS里的方式：

var css_str:String = ".aoao{color:#010101;font-weight:bold;} .aoao:hover{color:#ff0000}";
myStyle.parseCSS(css_str)

myStyle.setStyle(".aoao", {color:'#010101', fontWeight:'bold'});
myStyle.setStyle(".aoao:hover", {color:"#ff0000"});

其实HTML也可以写在AS里面，直接拼string就行。对于CSS在写在AS里还是加载外部CSS就要看情况了，用Web上还要考虑请求数，文件大小，缓存，更重要的是维护成本。不过在Web应用我也没想到有什么比较适合的应用，在浏览器里使用HTML加载Flash之后再用Flash加载HTML和CSS意义并不大，而且支持不是一般的弱，看一下支持的HTML标签跟CSS属性，＝。＝ 本来想用来解决中文下划线的问题，结果还是不行，据说别人是用flash画下划线滴。

浏览器的应用玩玩就算了。还是留在桌面应用吧。

打个比方。比如打War3 不知道你会不会打呢？1 vs 1 的战场上一定会有一个人输。为什么呢？war3任何一个族都有十几种兵。每种兵都是不同的血，不同的攻击，不同的防御。掌握得到细节才能立于不败。

一般新手都不会考虑那样多。只要兵多点，以人海作战。div一片倒。打得多了就聪明点。比如当对手出火枪时就想一下要出什么兵对应。用用h 用用p等。打得更多点的就开始研究一下。比如蜘蛛出来有多少血，攻击多少。li默认的margin padding 等等。打得更更多点的又接着研究。比如小鹿配什么兵去打好一点呢 光环是干啥。药水是干啥。研究一下不同元素的搭配应用。h3+ul 还是h3+ol好一点，或者table最好。打得更更更多点的又接着研究。比如什么时候打什么怪升级最快，建筑应该怎样建，要不要定义热键。CSS 对应的是什么。。来。大伙猜猜。 接着着。研究各种各种可以玩的东西。已经不再为了打胜战为第一目标了。在过程中寻找快乐。比如做做CSS特效等。

突然有一天，我发现。其实我压根的不了解War3，我接着又从头开始一点一点的研究各种兵的各种属性。对针对打别的兵有什么跟什么。。哪怕1hp也不放过。如同war3 我发现我自己也一点都不了解html跟css，我又从开头研究html和css的各种各样相关的。对各种各样的浏览器有什么跟什么。连0.1%都不放过。
再接着学什么呢？我也不知道。我还没研究完。。估计还要研究好长的一段时间。

这时候。我再次问一下。你真的学完html和CSS吗？
如果真的学完的话。。哇。。我还没学完。。不如换个问题。

学过了xhtml+css或者div+css之后要学什么呢？

如同学xhtml+CSS一样。打久了war3 还换点别的。打CS好呢还是打星际呢？
如果想快点上手的话。。自然是选xml+xslt拉。简单的说。html约等于xml+xslt，就像魔兽与星际一样。有什么相同的地方。但是还是有些不一样。如果是选CS的，那就不能用war3的打法打，不然一定被暴头的滴。因为那是了别一种战斗的方式，比如写js。

其实除了war3可以玩外。还有很多很多游戏可以玩。 你非一定要把它玩精了再玩别的游戏,可以同时玩很多游戏滴。 网页也一样，除了html css还有很多东西。 你非一定要把它们学精了再学别的。可以同时学很多种技术。

不过术业有专攻。。。这句话大家应该听过。怎样选择就看你自己。你发展的方向是什么。就是你的选择。如果你有不同的想法，一起交流一下，经典讨论地址。
BTW:其实，应该比如成星际会更精准一点，不过我不会打星际。。

代码是这样滴

<input type="checkbox" name="testtest" id="testtest" /><label for="testtest">点啊点啊点这里</label><br />
<input type="checkbox" name="testtest" />点啊点啊点这里也没用

我相信一定也有人不喜欢只能点那个小方块，如果分辨率再高点，点中总得瞄准一下。

不只checkbox有这样的问题，radio也一样。大家快给他们配个老婆（label）吧
关于label的说明，可以看下这里http://phpx.com/man/dhtmlcn/objects/LABEL.html