Emmet

Emmet简介

• Emmet能够快速生成HTML结构和CSS样式语法，提高了编写速度

快速生成HTML结构语法

生成标签

• 直接输入标签名然后按tab键

<tab></tab>

生成多个相同标签

• 使用*符号
• 例如生成3个div标签，输入div*3然后按tab键

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

生成有父子级关系的标签

• 使用>符号
• 例如输入div>p，按tab键，div为父标签，p为子标签

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

生成有兄弟关系的标签

• 使用+符号
• 例如输入div+p，按tab键

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

生成带有类名的标签

• 使用.符号
• 例如输入p.phd，按tab键

<p class="phd"></p>

生成带有id的标签

• 使用#符号
• 例如输入p#phd，按tab键

<p id="phd"></p>

生成带有类名或id顺序的多个相同标签

• 使用$符号
• 例如输入p.phd$*3，按tab键，$表示序号

<p class="phd1"></p>
<p class="phd2"></p>
<p class="phd3"></p>

• 例如输入p#phd$*3，按tab键，$表示序号

<p id="phd1"></p>
<p id="phd2"></p>
<p id="phd3"></p>

生成带有内容的标签

• 使用{}符号
• 例如输入p{无所谓}，按tab键

<p>无所谓</p>

• 例如输入p{无所谓$}*3，按tab键

<p>无所谓1</p>
<p>无所谓2</p>
<p>无所谓3</p>

快速生成CSS样式语法

直接输入每个单词的首字母，然后按tab键

• 例如输入w，按tab键

width: ;

• 例如输入ti，按tab键

text-indent: ;

可以把值也一起输入

• 可以不给数值加上单位，数值不加单位的默认单位为px
• 例如输入w100或w100px，按tab键

width: 100px;

• 例如输入ti2，按tab键

text-indent: 2px;

• 例如输入tac，按tab键

text-align: center;