Emmet语法 快速生成HTML标签&CSS样式

Emmet语法 快速生成HTML标签&CSS样式

重点是搭配使用tab键

一、快速生成HTML标签

1、快速生成一个标签

直接输入标签名，按tab键即可
eg：输入div，按tab
即可生成<div></div>

2、生成多个相同标签，使用*

eg：输入div*10，按下tab
即可生成10个<div></div>

注意：div*10之间不能有空格

3、父子级关系标签，使用 >

eg：输入ul > li
即可生成

<ul>
	<li></li>
</ul>

4、兄弟级关系标签，使用 +

eg：输入div+p
即可生成

<div></div>
<p></p>

5、生成带有类名或者id名的标签

.demo + tab键，生成带类名的标签（默认为div标签）
#demo + tab键，生成带id名的标签（默认为div标签）
eg：生成一个叫nav的导航栏
输入：.nav + 按tab键
输出：<div class="nav"></div>

输入：#banner + 按tab键
输出：<div id="banner"></div>

生成带有类名或者id名的任意标签
标签名.demo + tab键，生成带类名的标签
标签名#demo + tab键，生成带id名的标签
eg：生成一个叫nav的导航栏
输入：p.nav + 按tab键
输出：<p class="nav"></p>

输入：ul>li#aaa + 按tab键
输出：

<ul>
	<li id="aaa"></li>
</ul>

6、生成有顺序的标签，使用$

生成自增的标签
eg：
输入：.demo$*5
输出：

7、在所生成的标签内部写内容，使用{ }

标签+{内容}+tab键
eg1：
输入：

div{levi is writing her blog}

输出：

<div>
levi is writing her blog
</div>

eg2：
输入：

div{$}*5

输出：

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

二、快速生成CSS样式

CSS基本采取简写形式即可
eg1:
输入：

tac

+tab键
输出：

text-align: center;

eg2:
输入：

w100

+tab键
输出：

width:100;