前端工程师学习HTML的经典网站 HTML Playground

今天在Stumble Upon看到一个推荐“HTML Playground”。虽然是2006年的作品,个人认为是目前为止看到的最好的学习HTML的资源。尤其是对于那些追求更好的语义化HTML产品的工程师,这个网站实在是一大福音。

如果感兴趣,现在就打开这个网站(新窗口打开)看看哦。我发现深入细节之后,自己的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开发受益的传统行业)索取回报,也许是未来一个有趣的话题。

校内网涂鸦版DIY教程(二)美化的具体原理、方法(附图讲解DOM)

转载请保留:http://www.awflasher.com/blog/archives/995
我的校内首页:http://xiaonei.com/hustaw

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

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

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

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

Continue reading “校内网涂鸦版DIY教程(二)美化的具体原理、方法(附图讲解DOM)”

Apollo令人失望的HTML支持 | 一些相关的书

转载请保留:http://www.awflasher.com/blog/archives/830

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的两张截图:(大图杀猫)


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

Adobe Apollo书籍: Continue reading “Apollo令人失望的HTML支持 | 一些相关的书”

[转载]flash中可以使用的HTML标签[有用]

不是很爱转贴,但是非常经典的,我一定会转的,相信对大家有帮助:)

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

 my_txt.htmlText="<a href='http://www.blueidea.com' target='_self'>蓝色理想</a>"

<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 Continue reading “[转载]flash中可以使用的HTML标签[有用]”