Emmet初探2
关于Emmet
Emmet插件的前身是Zen coding,可以大幅度提高前端开发效率的一个工具,也有人说类似于jade(高性能的模板引擎,它深受 Haml 影响,它是用 JavaScript 实现的,并且可以供 Node 使用)。再官方一些的官方语言的叽叽喳喳我就不详写了,直接百度可以找到。
Emmet支持的编辑器:
- Sublime Text 2
- TextMate 1.x
- Eclipse/Aptana
- Coda 1.6 and 2.x
- Espresso
- Chocolat (通过“Install Mixin”对话框添加)
- Komodo Edit/IDE (通过Tools → Add-ons菜单添加)
- Notepad++
- PSPad
- <textarea>
- CodeMirror2/3
- Brackets
第三方插件的支持
下面这些编辑器的插件都是由第三方开发者所提供的,所以可能并不支持所有Emmet的功能和特性。
Emmet安装方法(Sublime text 3安装emmet插件的方法:http://blog.csdn.net/mengke1124/article/details/41696779)
因为我用的是Sublime text 3,其他编辑器安装的方法可能要根据自己的需要在网上搜刮了
Emmet插件实用常用方法
(http://www.w3cplus.com/tools/emmet-cheat-sheet.html)
这篇文档写的很清晰,也有安装插件的方法。但是介绍的方法太多,感觉有点冗长,我汇总了一些我个人觉得比较实用常用的方法。
略写版:
div>(header>ul>li*2>a)+footer>p(+号连接下一个兄弟元素)
(div>dl>(dt+dd)*3)+footer>p(括号内为一个组)
ul>li$[title=item$]{hhh $}*5(li$,表示li自增+1)
h.item${hhh $}*5({}括号内为显示文本)
ul>li.item$$$*5($为自增,三个$为三位数字)
ul>li.item$@3*5(@从3开始自增+1)
ul>li.item$@-*5(@-,自减)
ul>li.item$@-3*5(@-3,自减最小数字为3)
form#search.wide(#为id,.为类)
p[title='hello word'](自定义属性)
(隐式标签)
.class
em>.class
ul>.class
table>.row>.col
!(页面html开始代码缩写)
(缩写)
a
a:link
hr
link
link.css
meta:utf
script:src
img
详写版:
div+div>p>span+em^bq(^为上级元素)
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
div+div>p>span+em^^bq
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
ul>li*5(>为后代缩写,*表示有几个)
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
div>(header>ul>li*2>a)+footer>p(+号连接下一个兄弟元素)
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
(div>dl>(dt+dd)*3)+footer>p(括号内为一个组)
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
ul>li$[title=item$]{hhh $}*5(li$,表示li自增+1)
<ul>
<li1 title="item1">hhh 1</li1>
<li2 title="item2">hhh 2</li2>
<li3 title="item3">hhh 3</li3>
<li4 title="item4">hhh 4</li4>
<li5 title="item5">hhh 5</li5>
</ul>
h.item${hhh $}*5({}括号内为显示文本)
<h class="item1">hhh 1</h>
<h class="item2">hhh 2</h>
<h class="item3">hhh 3</h>
<h class="item4">hhh 4</h>
<h class="item5">hhh 5</h>
ul>li.item$$$*5($为自增,三个$为三位数字)
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>
ul>li.item$@3*5(@从3开始自增+1)
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>
ul>li.item$@-*5(@-,自减)
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
ul>li.item$@-3*5(@-3,自减最小数字为3)
<ul>
<li class="item7"></li>
<li class="item6"></li>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
</ul>
form#search.wide(#为id,.为类)
<form action="" id="search" class="wide"></form>
p[title='hello word'](自定义属性)
<p title="hello word"></p>
(隐式标签)
.class
<div class="class"></div>
em>.class
<em><span class="class"></span></em>
ul>.class
<ul>
<li class="class"></li>
</ul>
table>.row>.col
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>
!(页面html开始代码缩写)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> </body>
</html>
(缩写)
a
<a href=""></a>
a:link
<a href="http://"></a>
hr
<hr>
link
<link rel="stylesheet" href="">
link.css
<link rel="stylesheet" href="" class="css">
meta:utf
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
script:src
<script src=""></script>
img
<img src="" alt="">
官方api:http://docs.emmet.io/cheat-sheet/
api表:http://www.w3cplus.com/sites/default/files/baiyaimages/CheatSheet.jpg
最新文章
- Entity Framework 实体框架的形成之旅--几种数据库操作的代码介绍(9)
- coursera机器学习-聚类,降维,主成分分析
- C++ STL轻松导学
- S5PV210之Sate210-F DIY硬件,移植uboot,kernel,android 活动现在已经进入实施阶段吗,欢迎广大网友参与 !
- C++primer 练习13.36
- Python实现顺时钟回形矩阵
- Node.js 学习(二) 创建第一个应用
- Hive学习之六 《Hive进阶— —hive jdbc》 详解
- libvirt python binding 变成了一个新项目
- 【百度地图API】如何用圆形搜索获取中心点周围100米内全部关键点?如天安门附近所有的餐厅、加油站、宾馆、大厦等
- node.js学习资料(2015-12)
- C# 如何获取SQL Server 中指定数据表的所有字段名和字段类型
- java添加templates模板,httpServlet模板改写
- certificate verify fails (https://gems.ruby-china.org错误
- IDEA 的 properties 文件的属性字段如何链接到调用的文件
- 如何取得SharePoint Timer Job的历史成功数和失败数,并按照日期计算排列
- 去掉C#中Guid.NewGuid().ToString()自动生成的短横线
- C++11中的继承构造函数
- HAproxy-1.6.3 安装部署
- Linux进程通信之匿名管道
热门文章
- Tomcat启动异常 java.net.BindException: Cannot assign requested address: JVM_Bind
- Spring初始化完成后直接执行一个方法,初始化数据(解决方法被重复执行两次的情况)
- 关于mysql的wait_timeout参数 设置不生效的问题
- 将properties文件放在Jar包并读取
- Unity3d通用工具类之NGUI图集分解
- 北京市基本医疗保险A类定点医疗机构名单(2010-09-29)
- 【hihoCoder】【挑战赛#12】
- [12] 扇形体(Fan)图形的生成算法
- 第一章 Java工具类目录
- 什么是Copy-Only Backup? 为什么要用它?