请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

php163

php163 首页 技术专栏 html 查看内容

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

2012-4-15 21:00| 发布者: php163| 查看: 1928| 评论: 0

摘要: 你曾经考虑过想要加快 HTML 和 CSS 编码速度吗?不管你是否想过,都来看看这篇文章吧,你会从中学到很多东西。我们要讨论的不是 CSS 网格框架,也不是 CSS Reset。在这篇文章中,我们关注的是不同寻常的编码方式&mdas

 

你曾经考虑过想要加快 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 代码是多么的迅速。


  1. 		#profile  
  2.   .left.column  
  3.     #dateprint_date 
  4.     #addresscurrent_user.address  
  5.   .right.column  
  6.     #emailcurrent_user.email  
  7.     #biocurrent_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"><

    鲜花

    握手

    雷人

    路过

    鸡蛋

    收藏 分享

    最新评论

    QQ:24940422 2698114111 电话:0532-89993080|Archiver|手机版|php163开源技术分享社区   

    GMT+8, 2017-12-19 00:47 , Processed in 0.028316 second(s), 14 queries .

    回顶部