如果感兴趣，现在就打开这个网站（新窗口打开）看看哦。我发现深入细节之后，自己的HTML还有很多潜力可以挖掘：）

关于这个网站的使用方法，我简单描述一下：

1. 在左上角，用鼠标选择一个HTML标签。
2. 右上角会出现这个标签的含义。例如你选择“<tfoot>”，右侧会出现：
   

   Defines a table footer. The thead, tfoot and tbody elements enable you to group rows in a table. When you create a table, you might want to have a header row, some rows with data, and a row with totals at bottom. This division enables browsers to support scrolling of table bodies independently of the table header and footer. When long tables are printed, the table header and footer information may be repeated on each page that contains table data.

   我简单翻译一下：（<tfoot>）定义一个table的底。thead、tfoot和tbody元素能让你为一个table分排（上中下）。因为，当你创建一个table的时候，你也许需要一个表头、内容和一个表尾（三排）。这样做的好处是，当一个table被打印时，表头和表尾会在每一页重复出现（内容在中间循环），这样用户看起来就会更加清晰。

3. 右下角有一个“Example Code”，这里面的内容可以即使编辑并在右侧看到效果，这一点类似Firebug的HTML Edit工具。对于一次性修改多处HTML、CSS非常有用。
4. 左下角是当前标签所能支持的各种属性。可以动态地修改以观察效果。类似3

我有一点感慨：现在Web开发的门槛随着Google AppEngine和大量的JavaScript开发库的涌现，已经非常低了。使用Google AppEngine（目前仅Python）和jQuery，可以很快的构建一套自己的Web服务。而开发者只需用到一些简单的Python、JavaScript知识来分别处理服务器端和前端的逻辑。而类似“HTML Playground”这些优秀的智能教程也在逐渐出现，Web开发本身会不会在未来成为一门“基本技能”呢？

可以说，快速、高效的Web开发如果成为一种基本技能，必然会给其他行业带来极大的（方）便利（益）。而（开发者）如何向第三方（使用Web开发受益的传统行业）索取回报，也许是未来一个有趣的话题。

10条评论, 立即发言 | 本文关键词: HTML, Stumble Upon, Web前端

©aw's blog 姿态永恒 1984-2008 | 链接地址 - http://www.awflasher.com/blog/archives/1313

@awguo （新浪微博） | @awguo （腾讯微博） | Twitter: @awguo

引子：如果你想追求每一个“美化工程”的细节，例如：你非常喜爱某一个模板，但是却发现其中某一处的颜色稍有偏差又不知如何入手，那么我想我写这篇文章比我做N个模板给你去套用更“实惠”。当然，不排除以后也会考虑发布一些原创的校内涂鸦模板。

首先，我想看这篇文章的人，大多数都是对HTML甚至上网的普通知识没什么了解的同学。先给大家说一下基础的东西，至少是页面显示的原理吧。

我们都知道，计算机通信，只能传输“0、1、0、1”这样的数据，这些数据经过一层层封装（这些封装我们可以忽视），变成了“HTML代码”。我们所看到的网页，如此绚丽多彩，有图片，有动画，甚至还有声音，这一切的一切，都是HTML代码的功劳。

我不妨把中国互联网行业内的一句“俗话”润色一下：“你可以不懂ASP、PHP这些服务器端技术，你也可以不懂MySQL、SQLServer这些数据库技术，甚至，你可以不懂JavaScript、Flash这些客户端技术，但是你必须得懂HTML，而且，懂的越多越光荣”。因此，我相信今天的内容肯定不止校内网的用户感兴趣：）

没错，就是这万恶的HTML代码，让你痛苦不堪吧？然而，它却是我们在互联网上一切娱乐、体验的源泉。

我不想花太多的篇幅去讲“HTML是什么”之类的问题；即便，你要学习HTML是什么，我也不建议你抱着文档啃概念。人是感性的动物，理性的成果适用于归纳总结和知识的传递，但并不适用于对知识的理解。因此，我先讲讲“HTML如何产生作用”。

我建议大家以一种“搭积木”的过程来理解HTML的作用：打开页面，给你一段HTML。这一页面的HTML中每一段代码都是一块积木。你拿到这些积木，可以依次把他们摆放在一个“容器”里。一段一段的代码，对应着一块一块的积木，当代码结束时，这个容器就会有一个特定的“形体”了。

Okay，这就是HTML。那么，为了美化，仅仅有HTML是绝对不够的！也许你已经听说了，对，就是它 – “CSS”！CSS无论是英文原文还是流行的翻译（叠层样式表），实在是晦涩难懂。仍然用刚才那个“搭积木”的例子，这里，CSS就好比你摆放积木的方式；并且，CSS可以对你的积木进行“润色”，你可以把一块红色的积木变成蓝色，或者给它涂上你自己喜爱的图案。你也可以把你不喜欢的积木“干掉”：）

我不知道到这里，诸位是否明白HTML、CSS了？我对自己的比方还是非常有信心的，我想这比你花钱到那些骗钱的“电脑学校”学习“互联网开发”要实在得多：）

其实，HTML和CSS常常是“形影相随”的：比如我们在涂鸦板中的代码，往往就是又HTML、CSS混合构成的。

接着，我们就xiaonei.com的个人页面来说说。

首先，所有的美化和修饰，都是从涂鸦板开始的。我们很不幸地要接受这样一个事实：页面的信息，除了涂鸦板以外，我们都不可控；但我们也很幸运：感谢xiaonei团队为我们提供的这样一个平台，一个支持HTML、CSS的平台（最然暂不支持JavaScript，但这仍然是非常大的自由）。我们可以利用xiaonei提供的HTML“平台”，往页面上增加新的内容；我们可以利用xiaonei提供的CSS“平台”，修改页面上的所有内容，包括校内默认的一些信息、数据以及你人为添加的信息，例如我的校内页面（http://xiaonei.com/hustaw）左侧提供的一些订阅服务。

HTML是代码，它的组成看似复杂，其实很简单，例如我要给朋友加一个链接，那么我的HTML代码应该是

<a href="http://www.awflasher.com/blog/">aw's blog</a> 

这样，我点“aw’s blog”，就可以访问到www.awflasher.com/blog/了。

你会发现，所有的HTML，都是“<”+“>”构成的一个个“标签”，他们罗列有序，互相嵌套，形成了一种严密的逻辑结构。

当这样的代码被显示成页面的时候，我们往往也称之为“DOM”结构。DOM是什么，我觉得也大可不必深究。在这样的场合下，我建议把DOM理解为“一棵树” – “DOM树”：有根（root），有枝（说法统一一下：不用“branch”，而用“children”），枝连接的两端，我们叫做结点（node），枝上也许有叶子（属性，“property”）。理解DOM，对我们以后的教程非常有意义，我来画一张图，以校内个人页面中右侧的人气数值的DOM结构来举例说明问题。这种图形表示DOM的思想，借鉴《Head Rush Ajax》一书中的插图方式。

图中，“1”是大家在页面上看到的内容；“2”，代表对应的HTML代码；“3”，代表HTML代码所表示的DOM结构。

h3是这一个DOM树的“根”；其下有“郭启睿”这个文本结点，然后有两个span结点。而这两个span，又作为“根”，产生出了更多的结点。

注意，“DOM”、“DOM结构图”，与字体、颜色等样式无关。DOM本身只是决定一些简单的样式的，如DOM的顺序和包含关系，决定了布局中，谁在上，谁在下，谁在谁内部。

利用CSS，我们可以让这棵树显示到屏幕上的样子“面目全非”！

没错，既然我们无法改变校内网个人页面涂鸦板以外的DOM，那么我们就只能在涂鸦版中通过CSS的手段修改那些系统生成的DOM的样式（比如系统的导航栏、系统的底栏、系统的侧栏，等等），不仅是颜色，甚至包括布局、背景等等，甚至，你可以把校内网个人页中的一些不希望看到的信息隐掉，换上你自己的内容，包括我们看到的一些很“酷”的Flash导航，其原理都是如此。

到这里，聪明的你一定知道我是如何利用涂鸦板修改我的“2339”为大一点儿的黑体了：通过CSS，修改DOM的布局！例如我对我上一段布局的修改，就是通过如下代码完成的：

#vcount{font-weight:bold; font-size:16px;}

这段代码的作用就是让字体变粗，并且大小为16px（校内其他的字体都是12px）。今天我暂且不谈这些代码中“#”、“：”等符号的具体意义，大家知道这段代码的作用，就行了。

在我下面的内容重会深入、针对性地讲如何利用CSS修改校内网个人主页的布局。

18条评论, 立即发言 | 本文关键词: DOM, HTML, xiaonei.com

©aw's blog 姿态永恒 1984-2007 | 链接地址 - http://www.awflasher.com/blog/archives/995

@awguo （新浪微博） | @awguo （腾讯微博） | Twitter: @awguo

3月21日更新，收集到的一些资料。

• 互联网应用程序的安装过程与桌面客户端应用程序的安装过程类似，而且是不依赖于浏览器执行的。
• Apollo应用程序可以方便对你的文件系统和网络进行操作，我已经用FlexBuilder2配合Apollo看到了它的相关组件了
• 可以通过服务器实时向客户端通信，通过Apollo框架实现，目前我还没有测试。
• 将非常好的支持PDF文档，这是非常有意义的。
• 对外部的API支持更加丰富，Apollo似乎计划把自己变成一个Web应用的“Meshup”（aw附：即“大杂烩”）你可以在用Amazon API来听音乐的同时使用Flickr API看图片，而且这些图片可以根据音乐来有所不同。
• 在Apple的Safari和Nokia S60平台上，Apollo采用的是Apple的Web Kit渲染引擎。
• 据说Apollo将尝试把JavaScript、ActionScript和WebKit上的JavaScript整合到一个虚拟机中，这个虚拟机可以高效率地将脚本“翻译”成设备代码。aw补充：也许这意味着可以直接基于不同的硬件开发不同的Apollo底层接口。
• Apollo对于Windows XP之后的操作系统的兼容性甚至比Microsoft做得更好，在XP和Vista的各种版本的平台，Apollo都能应对自如。同样，这归功于Apollo强大而稳定的底层建筑。

虽然说在Alpha2种会有更好的HTML支持，不过我觉得这应该是最大的看点。Flash的动画渲染能力已经有目共睹；FLV也已几乎垄断了整个Web Video行业。然而从第一版的FutureSplash开始就让人失望的文本渲染能力却仍然没有得到改善。

看了一个刚出炉的“ApolloBook” ，虽然很“cool”，但是不得不说这样浏览页面太累了，尤其是中文页面。无怪乎看到有人说“That’s really cool – a very painful way to browse the Internet – but very cool.”……至于有人借此无视微软，我觉得大可不必。真不知道Alpha2什么时候才能出来。否则大量的文本无法获得好的显示模式，实在是令人无奈啊。

看看ApolloBook的两张截图：（大图杀猫）

http://aw.awflasher.com/tmpimg/apollobook1.gif

http://aw.awflasher.com/tmpimg/apollobook2.gif

此外，补充一些今天逛到的其他Apollo资源，包括书籍和一种基于iframe的Flex2显示HTML的解决方案：

Adobe Apollo书籍：

Learning ActionScript 3.0: The Non-Programmer’s Guide to ActionScript 3 by Rich Shupe

Advanced ActionScript 3 with Design Patterns by Joey Lott and Danny Patterson

Object-Oriented ActionScript 3.0 by Peter Elst, Sas Jacobs, and Todd Yard

ActionScript 3.0 Cookbook by Joey Lott, Darron Schall, and Keith Peters

Foundation Actionscript 3.0 Animation: Making Things Move! by Keith Peters

Essential ActionScript 3.0 by Colin Moock

ActionScript 3 Bible by R. Braunstein

Foundation Actionscript 3.0 with Flash and Flex 2 by Steve Webster

The Essential Guide to Flex 2 with ActionScript 3.0 by Charles E Brown

ActionScript 3.0 Design Patterns: Object Oriented Programming Techniques by Bill Sanders and Chandima Cumaranatunge

Adobe System “Apollo Book ”

下载.air文件

在Flex2应用程序中嵌入HTML的解决方案演示+源码下载
Embedding HTML in a Flex application using an IFrame

附：其实关于Apollo将采用什么渲染引擎，去年就有很多人在讨论了：《Apollo’s HTML engine》

12条评论, 立即发言 | 本文关键词: Adobe, AIR, Apollo, HTML, WebKit

©aw's blog 姿态永恒 1984-2007 | 链接地址 - http://www.awflasher.com/blog/archives/830

@awguo （新浪微博） | @awguo （腾讯微博） | Twitter: @awguo

<a> 超链接标签
　　属性：href: 链接地址
　　target: 目标窗口 可取值为_blank,_parent,_self,_top。
　　例：

<b> 粗体标签
　　例：
　　my_txt.htmlText="<b> Bold </b>"

<br> 换行标签
　　例：
　　my_txt.htmlText="Title of Articles <br>"

<font> 字体标签
　　属性：color:字体颜色，格式#RRGGBB。
　　face:字体，可以是单个字体或字体列表。
　　size:字体大小，单位像素。
　　例：
　　my_txt.htmlText="<font color='#ff0000' face='Arial' size='12'>This is a text</font>"

<i> 斜体标签
　　说明：
　　例：
　　my_txt.htmlText="<i> Italic </i>"

<li> 列表项标签
　　例：
　　my_txt.htmlText="Sports:<li>Football</li> <li>Boxing</li><li>Swimming</li>"
　　注意，文本框要选中“多行”。

<p> 段落标记
　　属性：align:对其方式，可取值left,right,center。
　　class:应用一个css样式类。
　　例：
　　my_txt.htmlText="<p align='right' class='title'>align right</p><p align='left' class='body'>align 　　　left</p>"
　　注意，文本框要选中“多行”。本例假设css类title和body已存在。

<span> 标签
　　说明：对位于该标签内所有文本应用css样式，只有在定义了css对象后有效。
　　属性：class:应用一个css样式类。
　　例：
　　my_txt.htmlText="<span class='body'>this is a text confined by css</span>
　　注意，本例假设css类body已存在。

<u> 下划线标签
　　例：
　　my_txt.htmlText="<u> Underline </u>

两个特殊的标签：

　　<img> 图像标签
　　说明：这个标签的功能不仅仅是在文本框中插入图片，还可以插入SWF和MovieClip。
　　属性：src: 要加载的JPG或SWF的URL，或是MC的链接ID，这个属性是必要的，其他属性则可选。
　　注意：Flash不支持progressive格式的JPG。
　　id : 指定嵌入了JPG，SWF或MovieClip的电影剪辑的名称。
　　width: 图片/动画宽度。
　　height: 图片/动画高度。
　　align: 对其方式，可取值：left，right，默认为left。
　　hspace: 文本环绕图时水平方向上与图片的空隙。
　　vspace: 文本环绕图时垂直方向上与图片的空隙。

　　<textformat> 文本格式标签
　　说明：这个标签可以让你直接应用一些TextFormat对象的属性到文本中。
　　属性：blcokIndent: 段落缩进大小，单位像素。
　　indent: 段落首行缩进大小，单位像素。
　　leading: 文本行间距，单位像素。
　　leftmargin: 文本左边距，单位像素。
　　rightmargin: 文本右边距，单位像素。
　　tabstops: 表格划分，单位像素。
　　注意：关于属性tabstops：它的值是一个数组，用来表示表格的列划分情况。
　　在文本中用转义字符\t将输出位置移动到下一个制表位。
　　例：
　　tabField="<b>Name\tSex\tAge\t</b><br>";
　　tabRecord1="Jinni\t20\tMale\t<br>";
　　tabRecord2="Sucy\t21\tFemale\t<br>";
　　txt="<textformat tabstops='[50,150,150]'>"+ 　
　　tabField+tabRecord1+tabRecord2+"</textformat>";

5条评论, 立即发言 | 本文关键词: Flash, HTML, 教程, 标签

©aw's blog 姿态永恒 1984-2005 | 链接地址 - http://www.awflasher.com/blog/archives/79

@awguo （新浪微博） | @awguo （腾讯微博） | Twitter: @awguo