By anjia

更新日期:

文章目录
  1. 1. 简介
  2. 2. 语法
    1. 2.1. 后代 >
    2. 2.2. 兄弟 +
    3. 2.3. 上级 ^
    4. 2.4. 分组 ()
    5. 2.5. 乘法 *
    6. 2.6. 自增符号 $
    7. 2.7. ID类 #
    8. 2.8. 自定义属性 [attr=”value”]
    9. 2.9. 文本 {}
    10. 2.10. 隐式标签
  3. 3. HTML
  4. 4. 参考

简介

“片段”：大多数文本编辑器都允许存储和重用一些代码块，即“片段”。片段的缺点：首先你必须先定义代码段，并且不能在运行时进行扩展。

Emmet：可以设置 CSS 形式的能够被动态解析的表达式，然后自动生成相应的内容。非常适用于编写 HTML/XML 和 CSS（也可以用于编程语言），能大幅度提高前端开发效率。

输入完后 Ctrl+e [Mac 里默认，也可以在配置里改成 tab]

语法

后代 >

nav>ul>li

1
2
3
4
5
<nav>
	<ul>
		<li></li>
	</ul>
</nav>

兄弟 +

div+p+bq

1
2
3
<div></div>
<p></p>
<blockquote></blockquote>

上级 ^

div+div>p>span+em^bq

1
2
3
4
5
<div></div>
<div>
	<p><span></span><em></em></p>
	<blockquote></blockquote>
</div>

div+div>p>span+em^^bq

1
2
3
4
5
<div></div>
<div>
	<p><span></span><em></em></p>
</div>
<blockquote></blockquote>

分组 ()

div>(header>ul>li*2>a)+footer>p

1
2
3
4
5
6
7
8
9
10
11
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div>
	<dl>
		<dt></dt>
		<dd></dd>
		<dt></dt>
		<dd></dd>
		<dt></dt>
		<dd></dd>
	</dl>
	<footer>
		<p></p>
	</footer>
</div>

乘法 *

ul>li*5

1
2
3
4
5
6
7
<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

自增符号 $

ul>li.item$*5

1
2
3
4
5
6
7
<ul>
	<li class="item1"></li>
	<li class="item2"></li>
	<li class="item3"></li>
	<li class="item4"></li>
	<li class="item5"></li>
</ul>

h$[title=item$]{Header$}*3

1
2
3
<h1 title="item1">Header1</h1>
<h2 title="item2">Header2</h2>
<h3 title="item3">Header3</h3>

ul>li.item$$$*5

1
2
3
4
5
6
7
<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$@-*5

1
2
3
4
5
6
7
<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

1
2
3
4
5
6
7
<ul>
	<li class="item3"></li>
	<li class="item4"></li>
	<li class="item5"></li>
	<li class="item6"></li>
	<li class="item7"></li>
</ul>

ID类 #

1
2
3
4
5
6
7
8
9
10
11
#header
<div id="header"></div>
  
.title
<div class="title"></div>
  
form#search.wide
<form action="" id="search" class="wide"></form>
  
p.class1.class2.class3
<p class="class1 class2 class3"></p>

自定义属性 [attr=”value”]

1
2
3
4
5
6
7
8
p[title="Hello World"]
<p title="Hello World"></p>
  
td[rowspan=2 colspan=3 title]
<td rowspan="2" colspan="3" title=""></td>
  
[a="value1" b="value2"]
<div a="value1" b="value2"></div>

文本 {}

1
2
3
4
5
a{click me}
<a href="">click me</a>
  
p>{Click}+a{here}+{to continue}
<p>Click<a href="">here</a>to continue</p>

隐式标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.class
<div class></div>
  
em>.class
<em><span class></span></em>
  
ul>.class
<ul>
	<li class></li>
</ul>
  
table>.row>.col
<table>
	<tr class="row">
		<td class="col"></td>
	</tr>
</table>

HTML

任何未知的缩写都会被解析成标签样子，比如

html:5

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

link

1
2
3
4
5
6
link
link:css
link:rss
<link rel="stylesheet" href="">
<link rel="stylesheet" href="style.css">
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">

a

1
2
3
4
5
6
a
a:link
a:mail
<a href=""></a>
<a href="http://"></a>
<a href="mailto:"></a>

form

1
2
3
4
5
6
form
form:get
form:post
<form action=""></form>
<form action="" method="get"></form>
<form action="" method="post"></form>

input

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
input
input:b
input:s
input:reset
 
input:c checkbox
input:r radio
 
input:p password
input:f file
  
<input type="text">
<input type="button" value="">
<input type="submit" value="">
<input type="reset" value="">
  
<input type="radio" name="" id="">
<input type="checkbox" name="" id="">
  
<input type="password" name="" id="">
<input type="file" name="" id="">
  
<input type="password" name="" id="">

btn

1
2
3
4
5
6
btn
btn:r
btn:s
<button></button>
<button type="submit"></button>
<button type="reset"></button>

其他

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
colg
<colgroup></colgroup>
  
cap
<caption></caption>
  
src
<source>
  
obj
<object data="" type=""></object>
  
ifr
<iframe src="" frameborder="0"></iframe>
  
bq
<blockquote></blockquote>
  
fig
<figure></figure>

参考

http://www.w3cplus.com/tools/emmet-cheat-sheet.html

http://www.ruanyifeng.com/blog/2013/06/emmet_and_haml.html

文章目录
  1. 1. 简介
  2. 2. 语法
    1. 2.1. 后代 >
    2. 2.2. 兄弟 +
    3. 2.3. 上级 ^
    4. 2.4. 分组 ()
    5. 2.5. 乘法 *
    6. 2.6. 自增符号 $
    7. 2.7. ID类 #
    8. 2.8. 自定义属性 [attr=”value”]
    9. 2.9. 文本 {}
    10. 2.10. 隐式标签
  3. 3. HTML
  4. 4. 参考