html/xml/css开发利器------Zen Coding
2012-08-03 23:35
393 查看
Zen Coding是一个开源项目,支持各种文本编辑器,能迅速提高你的html/xml/css开发效率。
http://code.google.com/p/zen-coding/downloads/list
![](http://my.csdn.net/uploads/201208/03/1344007820_7746.jpg)
将zen Coding拷贝到你的文本编辑器目录下,重启就能在菜单栏中插件下找到Zen Coding选项。自己可以先熟悉一下快捷键。
当然,最重要的快捷键是:ctrl+E运行书写的语法。
在zen coding文件目录下, 有个zen coding.js文件。 里面记录了内容的转换,不必要完全记住这些快捷语法,关键掌握规律,it is easy。
Zen Coding语法解析:
• 输入文档:
• 文档标签:(这些都可以在那个js源代码里面去看,抓规律)
• html:4t html4过度
• html:4s 4严格
• html:xt xhtml1.0 过度
• html:xs 严格
• html:xxs xhtml1.1 过度
• html:5 html5
• 一些标签记录:
• 输入html,再按chtl+e,便会将他自动转换成标签。其他的标签都是类似的。
• 输入a:link, a:mail 能自动加上属性。
• input:b 就是button。
• from:get
• from:post
• style
• script:src
• a:mail[aa="a"]
转换成<a href="mailto:" aa="aaa"></a>
• link:css
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
• link:print
<linkrel="stylesheet" type="text/css" href="print.css" media="print" />
• 'ol+':简写的 'ol>li'。这种简写在符合标签里面用到。
<ol>
<li></li>
</ol>
• ul+:
<ul>
<li></li>
</ul>
• ul#aa #表示id名
• ul.aa.bb .表示应用的class
• ul>a >表示子元素
• ul*5 *表示5个ul标签
• ul$*5 $表示数字自增。这句就是创建ul1--ul5 五个标签。
• a>b+b +表示兄弟
<a href="">
<b></b>
<b></b>
</a>
• 实例解析:
• div#header+div.name.app+div#content>div#foot 综合实例。
• CSS标签:
• 也能像算术运算那样加上括号。可以自己将复杂的命令保存备用。
• 要在出现CSS的地方,如style标签内(要在head里面)。
• @i @import url(|)
• @m @media print {\n\t|\n}
• ! !important
• CSS属性:
• fl float
• fl:l float:left
• pos
• pl
其他的内容,自己看看那个zen coding.js代码。
其他学习资源:
/article/4789219.html
http://baike.baidu.com/view/3371595.htm
http://code.google.com/p/zen-coding/downloads/list
![](http://my.csdn.net/uploads/201208/03/1344007820_7746.jpg)
将zen Coding拷贝到你的文本编辑器目录下,重启就能在菜单栏中插件下找到Zen Coding选项。自己可以先熟悉一下快捷键。
当然,最重要的快捷键是:ctrl+E运行书写的语法。
在zen coding文件目录下, 有个zen coding.js文件。 里面记录了内容的转换,不必要完全记住这些快捷语法,关键掌握规律,it is easy。
Zen Coding语法解析:
• 输入文档:
• 文档标签:(这些都可以在那个js源代码里面去看,抓规律)
• html:4t html4过度
• html:4s 4严格
• html:xt xhtml1.0 过度
• html:xs 严格
• html:xxs xhtml1.1 过度
• html:5 html5
• 一些标签记录:
• 输入html,再按chtl+e,便会将他自动转换成标签。其他的标签都是类似的。
• 输入a:link, a:mail 能自动加上属性。
• input:b 就是button。
• from:get
• from:post
• style
• script:src
• a:mail[aa="a"]
转换成<a href="mailto:" aa="aaa"></a>
• link:css
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
• link:print
<linkrel="stylesheet" type="text/css" href="print.css" media="print" />
• 'ol+':简写的 'ol>li'。这种简写在符合标签里面用到。
<ol>
<li></li>
</ol>
• ul+:
<ul>
<li></li>
</ul>
• ul#aa #表示id名
• ul.aa.bb .表示应用的class
• ul>a >表示子元素
• ul*5 *表示5个ul标签
• ul$*5 $表示数字自增。这句就是创建ul1--ul5 五个标签。
• a>b+b +表示兄弟
<a href="">
<b></b>
<b></b>
</a>
• 实例解析:
• div#header+div.name.app+div#content>div#foot 综合实例。
• CSS标签:
• 也能像算术运算那样加上括号。可以自己将复杂的命令保存备用。
• 要在出现CSS的地方,如style标签内(要在head里面)。
• @i @import url(|)
• @m @media print {\n\t|\n}
• ! !important
• CSS属性:
• fl float
• fl:l float:left
• pos
• pl
其他的内容,自己看看那个zen coding.js代码。
其他学习资源:
/article/4789219.html
http://baike.baidu.com/view/3371595.htm
相关文章推荐
- html/xml/css开发利器------Zen Coding
- 学习web开发,理解HTML,XHTML,XML,CSS,JS等技术的关系后,眼界会更宽(publish by sunwei)
- 快速编写HTML、CSS代码利器--Zen Coding
- 我也来谈谈使用Zen Coding快速开发html和css原理
- 【小程序开发】VSCode-:识别wxml,wxss文件为html,css格式
- 快速编写HTML、CSS代码利器--Zen Coding
- 学习web开发,理解HTML,XHTML,XML,CSS,JS等技术的关系后,眼界会更宽(pu...
- WebStorm 7.0 发布,智能HTML/CSS/JS开发利器
- html+css开发前端遇到的一些bug
- Eclipse所有编码格式修改位置(项目、文件、css、sql、xml、jsp、html等)
- 陈力:传智播客古代 珍宝币 泡泡龙游戏开发第八讲:DIV+CSS中类选择器、id选择器和html选择器介绍
- 这些HTML、CSS知识点,面试和平时开发都需要 No10-No11
- 使用 F12 开发人员工具调试 HTML 和 CSS(IE浏览器)
- Android开发必备武器,处理XML的利器--SAX快速上手
- 【HTML+CSS+JavaScript】网页实战开发笔记之一——HTML的头部信息里你不知道的事
- 简明 HTML CSS 开发规范
- Zen Coding的一种快速编写HTML/CSS代码的方法
- 前端开发入门:html和css基础知识回顾
- [Web开发] PSD 转换成HTML/CSS 的工具网站
- Zen Coding: 一种快速编写HTML/CSS代码的方法