Emmet 语法——快速生成html结构

93 阅读1分钟

标签名+tab键——生成闭合标签

如:div

<div></div>

标签 * 数字——生成多个标签

可以快速生成 html 元素

如:div*3

<!-- div*3 可以快速生成  -->
<div></div>
<div></div>
<div></div>

标签 > 标签——父子关系嵌套

如:div>p

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

标签 + 标签——兄弟关系

如:div+div

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

class(类名)或#id(id名)——生成带有类名或id名

如:.demo、#demo、p.demo

注意:默认是生成div,如需要指定元素,需要在前面加个元素名称

<div class="demo"></div>
<div id="demo"></div>
<p class="demo"></p>

元素[ 属性="属性"]——可以定义标签属性

如:a[href="#"]

<a href="#"></a>

元素{}——自定义文本内容

如:div>a{点这里跳转}

<div><a href="">点这里跳转</a></div>

元素数字——*数字—— **可以用于自增长**

如:.div$*3、

<!-- .div$*3 -->
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

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