By LSR

更新日期:

文章目录
  1. 1. Part 1
  2. 2. Part 2
  3. 3. Part 3
  4. 4. Part 4
  5. 5. Part 4

Emmet 是一个可以在编写HTML和CSS的时候提高效率的小规则

拥有对绝大多数常用编辑器的插件支持

废话不多说，开始。

官网上的例子：

1
ul#nav>li.item$*4>a{Item $}

按下tab键。。。

pia

1
2
3
4
5
6
<ul id="nav">
	<li class="item1"><a href="">Item 1</a></li>
	<li class="item1"><a href="">Item 2</a></li>
	<li class="item1"><a href="">Item 3</a></li>
	<li class="item1"><a href="">Item 4</a></li>
</ul>

是不是666呢！

Part 1

id就是id，class就是class，内容用大括号引起来

这点和CSS一模一样。

div#div.div{div}

1
<div id="div" class="div">div</div>

Part 2

  • 后代：>
  • 兄弟：+
  • 爹　：^
  • 分组：（）
  • 乘法：*
  • 自增：$

eg:

div>p

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

div+div

1
2
<div></div>
<div></div>

div>div>p^div

1
2
3
4
5
6
<div>
	<div>
		<p></p>
	</div>
	<div></div>
</div>

div>(h1+div>p)+div>h1

1
2
3
4
5
6
7
8
9
<div>
	<h1></h1>
	<div>
		<p></p>
	</div>
	<div>
		<h1></h1>
	</div>
</div>

div*5

1
2
3
4
5
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

h$*5

1
2
3
4
5
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>

Part 3

糖。

.btn

1
<div class="btn"></div>

ul>.class

1
2
3
<ul>
	<li class></li>
</ul>

table>.row>.col

1
2
3
4
5
<table>
	<tr class="row">
		<td class="col"></td>
	</tr>
</table>

lorem

1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore laborum minus animi veritatis. Rerum officiis, ducimus voluptatibus illum pariatur voluptate porro provident ea, nesciunt laborum, velit, laudantium explicabo deleniti nisi!

!

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>

a

1
<a href=""></a>

link

1
<link rel="stylesheet" href="">

meta:vp

1
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

meta:utf

1
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

script:src

1
<script src=""></script>

img

1
<img src="" alt="">

iframe abbr ifr

1
<iframe src="" frameborder="0"></iframe>

form:get

1
<form action="" method="get"></form>

btn

1
<button></button>

c{comment}

1
<!-- comment -->

cc:ie

1
2
3
<!--[if IE]>
	
<![endif]-->

Part 4

css中：

p-10!+m0-10e-20x30p

1
2
padding: -10px !important;
margin: 0 10em -20ex 30%;

上面例子很好理解吧 :)
嗯 不多说

1
p → %
e → em
x → ex
! → !important

颜色：

1
#1   → #111111
#e0  → #e0e0e0
#fc0 → #ffcc00

Part 4

官网

手册

enjoy :)

文章目录
  1. 1. Part 1
  2. 2. Part 2
  3. 3. Part 3
  4. 4. Part 4
  5. 5. Part 4