Emmet 语法

Docs

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具。
- 在前端开发的过程中，一大部分的工作是写 HTML、CSS 代码，如果手动来编写效果会非常低。
- VsCode 内置了 Emmet 语法，在后缀为 .html/.css 中输入缩写后按 Tab/Enter 键即会自动生成相应代码
! 和 html:5 可以快速生成完整结构的 html5 代码
> 子代
div>ul>li
```
<div>
  <ul>
    <li></li>
  </ul>
</div>
```

+ 兄弟

div+p+bq
<div></div>
<p></p>
<blockquote></blockquote>

div+div>p>span+i
<div></div>
<div>
  <p>
    <span><i></i></span>
  </p>
</div>

div+p+ul>li
<div></div>
<p></p>
<ul>
  <li></li>
</ul>

* 乘法（多个）

ul>li*5
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

ul>li.item$*5
<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
</ul>

ul>li.item$@-*5
<ul>
  <li class="item5"></li>
  <li class="item4"></li>
  <li class="item3"></li>
  <li class="item2"></li>
  <li class="item1"></li>
</ul>

^ 向上

div+div>p>span+i^bq
<div></div>
<div>
  <p>
    <span><i></i></span>
  </p>
</div>
<blockquote></blockquote>

div+div>p>span^^^^h1
<div></div>
<div>
  <p>
    <span></span>
  </p>
</div>
<h1></h1>

() 分组

div>(header>ul>li*2>a)+footer>p
<div>
  <header>
    <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </header>
  <footer>
    <p></p>
  </footer>
</div>

[] 属性

div#header+div#main>.container>a[href]
<div id="header"></div>
<div id="main">
  <div class="container">
    <a href=""></a>
  </div>
</div>

a[href='http://www.baidu.com']
<a href="http://www.baidu.com"></a>

a[href='http://www.baidu.com' title='百度' target='_blank' rel='noopener']
<a href="http://www.baidu.com" title="百度" target="_blank" rel="noopener"></a>

{} 文本 (内容）

ul>li{item$}*5
<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
</ul>

ul>li{item$@-*5}
<ul>
  <li>item5</li>
  <li>item4</li>
  <li>item3</li>
  <li>item2</li>
  <li>item1</li>
</ul>

a[href='http://www.baidu.com']{百度一下}
<a href="http://www.baidu.com">百度一下</a>

$ 数字递增

ul>li.item$*5
<ul>
  <li class="item001"></li>
  <li class="item002"></li>
  <li class="item003"></li>
  <li class="item004"></li>
  <li class="item005"></li>
</ul>

ul>li.item$@-*5
<ul>
  <li class="item005"></li>
  <li class="item004"></li>
  <li class="item003"></li>
  <li class="item002"></li>
  <li class="item001"></li>
</ul>

@ 递减

ul>li.item$@-*5
<ul>
  <li class="item5"></li>
  <li class="item4"></li>
  <li class="item3"></li>
  <li class="item2"></li>
  <li class="item1"></li>
</ul>

| 选择器

div|p|span
<div></div>
<p></p>
<span></span>

div|p|span|bq
<div></div>
<p></p>
<span></span>
<blockquote></blockquote>

. 隐式标签

.box+.container
<div class="box"></div>
<div class="container"></div>

.box>.container
<div class="box">
  <div class="container"></div>
</div>

# ID

#header+.container
<div id="header"></div>
<div class="container"></div>

#header>.container
<div id="header">
  <div class="container"></div>
</div>

css Emmet

w500+h500+m0+a+bg#f00+fs20+ff+lh1.5
width: 500px;
height: 500px;
margin: 0 auto;
background-color: #f00;
font-size: 20px;
font-family: sans-serif;
line-height: 1.5;

w20+h30+m40+p50
width: 20px;
height: 30px;
margin: 40px;
padding: 50px;

m20-30-40-50
margin: 20px 30px 40px 50px;

dib+va
display: inline-block;
vertical-align: middle;

bd1#cs
border: 1px solid #000;