Emmet 缩写语法

1、#创建id 和 .创建class

• id：输入 div#id 点击tab键生成

<!-- div#id -->
<div id="id"></div>

• class： 输入div.class 点击tab键

<!-- div.class -->
<div class="class"></div>

2、> 创建下一级标签

• 输入 div>p 点击tab键生成

<!-- div>p -->
<div>
    <p></p>
</div>

3、{} 创建标签内容

• 输入 div{内容} 点击tab键生成

<!-- div{内容} -->
<div>内容</div>

4、[] 创建标签属性

• 输入 input[type=button value=按钮] 点击tab键生成

<!-- input[type=button value=按钮] -->
<input type="button" value="按钮">

5、: 创建input标签类型

• button：输入 input:b 点击tab键生成

<!-- input:b -->
<input type="button" value="">

• checkbox：输入 input:c 点击tab键生成

<!-- input:c -->
<input type="checkbox" name="" id="">

等等

6、* 创建多个标签和 $ 根据 * 迭代数字

• " * "：输入 input*2点击tab键生成两个input
• " $ "：输入 input[type=button value=按钮$]*2 点击tab键生成

<!-- input[type=button value=按钮$]*2 -->
<input type="button" value="按钮1">
<input type="button" value="按钮2">

• 输入div{内容$}*2 点击tab键生成

<!-- div{内容$}*2 -->
<div>内容1</div>
<div>内容2</div>

7、() 包裹整体

• 输入 (div>div)*2 点击tab键生成

<!-- (div>div)*2 -->
<div>
    <div></div>
</div>
<div>
    <div></div>
</div>

8、+ 创建兄弟标签

• 输入 div+div+div 点击tab键生成

<!-- div+div+div -->
<div></div>
<div></div>
<div></div>

9、复合使用

• 输入 ul.ac>((li.ac-item>div[id=ac-item-hd$ class=ac-item-hd]{头部$}+div.ac-item-bd{内容$})*2) 点击tab键生成

<!-- ul.ac>((li.ac-item>div[id=ac-item-hd$ class=ac-item-hd]{头部$}+div.ac-item-bd{内容$})*2) -->
<ul class="ac">
    <li class="ac-item">
        <div id="ac-item-hd1" class="ac-item-hd">头部1</div>
        <div class="ac-item-bd">内容1</div>
    </li>
    <li class="ac-item">
        <div id="ac-item-hd2" class="ac-item-hd">头部2</div>
        <div class="ac-item-bd">内容2</div>
    </li>
</ul>