软件工程师-快速编写HTML和CSS的工具集合.docx

在这篇文章中，我们关注是不一样平常编码方法——CSS 编译器和 HTML 缩写编码技术。借助这些优异工具和技术，能够大大降低开发时间，加紧开发进度。
AD：
你曾经考虑过想要加紧 HTML 和 CSS 编码速度吗?不管你是否想过，全部来看看这篇文章吧，你会从中学到很多东西。我们要讨论不是 CSS 网格框架，也不是 CSS Reset。在这篇文章中，我们关注是不一样平常编码方法——CSS 编译器和 HTML 缩写编码技术。借助这些优异工具和技术，能够大大降低开发时间，加紧开发进度。
HTML
加紧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 代码是多么快速。
#profile  
  .  
    #date= print_date 
    #address=   
  .  
    #email=   
    #bio=  
Haml 模板引擎能够把上面代码生成以下标准 HTML 代码：
<div id="profile"> 
  <div class="left column"> 
    <div id="date"><%= print_date %></div> 
    <div id="address"><%=  %></div> 
  </div> 
  <div class="right column"> 
    <div id="email"><%=