快速编写HTML和CSS的工具和技术

加快HTML 编码的方法有很多，这里我们要介绍的是 HTML 缩写技术。取代传统的编写完整 HTML 标签，我们只需要编码缩写代码就能扩展到完整的HTML标记，一个简单的例子：#container将被转换成<div id="container"></div>。实现 HTML 缩写技术，有两种著名的解决方案——Zen Coding 和 HAML。

Zen Coding

Zen Coding 是一个用于快速编写 HTML，CSS，XML，XSL 或者其他结构化格式语言编码的插件，包括 Zen HTML 和 Zen CSS 两部分。这个插件核心是一个强大的缩写引擎，允许你扩展表达式，类似于从CSS选择器到 HTML 代码。支持Aptana/Eclipse、TextMate、Coda、Notepad++、Espresso、Dreamweaver、UltraEdit、Visual Studio、NetBeans、EmEditor、Vim等所有常见的编码工具。强烈推荐给编写 HTML 和 CSS 代码的朋友，让你代码飞起来!

Haml

Haml 的作者 Hampton Catlin 是这样介绍 Haml 的：Haml 是对传统 XHTML 生成方式的一种反叛，它既不是纯粹的代码，也不是一种文本处理语言，它是与众不同的，是一种在我看来最为自然的 XHTML 构造方式。Haml 是 Rails 下的一种可选模板语言方案，使用 CSS 风格的语法来描述 DIV 的 ID 和 Class，以更加优雅简洁的方式编写 HTML 代码。

这是我从 Haml 网站拿过来的一个示例，你将看到编写 HTML 代码是多么的迅速。

1. 		#profile  

2.   .left.column  
3.     #date= print_date 
4.     #address= current_user.address  
5.   .right.column  
6.     #email= current_user.email  
7.     #bio= current_user.bio 

Haml 模板引擎能够把上面的代码生成如下的标准 HTML 代码：

1. 		<div id="profile"> 

2.   <div class="left column"> 
3.     <div id="date"><%= print_date %></div> 
4.     <div id="address"><%= current_user.address %></div> 
5.   </div> 
6.   <div class="right column"> 
7.     <div id="email"><%= current_user.email %></div> 
8.     <div id="bio"><http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!