首页 > 代码库 > 结合Zen Coding快速编写HTML代码（sublime text2篇）
结合Zen Coding快速编写HTML代码（sublime text2篇）
首先说下，如何在sublime text2加上zen coding插件
按 Ctrl+`(就是~这个键) 复制下面的代码 确认 重新启动sublime text2
import urllib2,os;pf=‘Package Control.sublime-package‘;ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),‘wb‘).write(urllib2.urlopen(‘http://sublime.wbond.net/‘+pf.replace(‘ ‘,‘%20‘)).read())
重启看到如上图所示，代表Package Control 安装成功
接下来就是暂时分享下自己还不是那么熟悉的zen coding的语法
1.新建html
不知道大家新建一个html 页面时，是如何输入文档声明和 head 那一坨东西的。现在有了Zen Coding，只需输入几个字母就能立马生成相应文档声明的 html 结构框架
html:4t (HTML 4.01 Transitional)html:4s (HTML 4.01)html:xt (XHTML 1.0)html:xs (XHTML 1.0 Strict) html:xxs (XHTML 1.1)html:5 (HTML5)
然后按上ctrl+E，马上就可以新建成功
2.若是你对CSS的选择器比较熟悉，就可以得用简短的类似于CSS选择器的代码高效的编写出HTML代码。
div#header>div#logo+ul.nav>li.item-$*5>a接着按一下快捷键ctr+E，就会自动生成如下的HTML代码：
<div id="header"> <div id="logo"></div> <ul class="nav"> <li class="item-1"><a href=http://www.mamicode.com/""></a></li> <li class="item-2"><a href=http://www.mamicode.com/""></a></li> <li class="item-3"><a href=http://www.mamicode.com/""></a></li> <li class="item-4"><a href=http://www.mamicode.com/""></a></li> <li class="item-5"><a href=http://www.mamicode.com/""></a></li> </ul></div>
3.head 中常用到的一些缩写
meta:utf, meta:compatstyle, link:css, link:print, link:favicon, link:rss,script, script:src以上介绍的仅仅是有关HTML的缩写，CSS的缩写就更多了，建议查看 Zen Coding 小抄，学习CSS 的 Zen Coding 方式
相关链接：http://rpsh.net/archives/zen-coding-npp/
http://www.cn-sass.com/blog/32.html
结合Zen Coding快速编写HTML代码（sublime text2篇）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。