Emmet语法

Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法.

1. 快速生成HTML结构语法
2. 快速生成CSS样式语法

快速生成HTML结构语法

生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成

<!-- div  输入div 按tab键，直接生成div标签-->
    <div></div>

如果想要生成多个相同标签 加上 * 就可以了 比如 div*6 就可以快速生成6个div

 <!-- div*6  快速生成6个div标签-->
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

如果有父子级关系的标签，可以用 >，比如 ul > li就可以了

<!-- ul>li*5 -->
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

如果有兄弟关系的标签，用 + 就可以了 比如 div+p

<!-- div+p*3 -->
    <div></div>
    <p></p>
    <p></p>
    <p></p>

如果生成带有类名或者id名字的， 直接写 .demo 或者 #one tab 键就可以了

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

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

如果生成的div 类名是有顺序的， 可以用 自增符号$

<!-- .dome$*5 -->
    <div class="dome1"></div>
    <div class="dome2"></div>
    <div class="dome3"></div>
    <div class="dome4"></div>
    <div class="dome5"></div>

<!-- .#dome$*3 -->
    <div id="dome1"></div>
    <div id="dome2"></div>
    <div id="dome3"></div>

如果想要在生成的标签内部写内容可以用 { } 表示

<!-- p{我是一个段落} -->
    <p>我是一个段落</p>

<!-- p{我是很多的段落}*3 -->
    <p>我是很多的段落</p>
    <p>我是很多的段落</p>
    <p>我是很多的段落</p>

<!-- p.dome$*3{我是段落} -->
    <p class="dome1">我是很多的段落</p>
    <p class="dome2">我是很多的段落</p>
    <p class="dome3">我是很多的段落</p>
     
<!-- p{我是有顺序的段落$}*3 -->
    <p>我是有顺序的段落1</p>
    <p>我是有顺序的段落2</p>
    <p>我是有顺序的段落3</p>

<!-- p{$我是有顺序的段落}*3 -->
	<p>1我是有顺序的段落</p>
	<p>2我是有顺序的段落</p>
	<p>3我是有顺序的段落</p>

快速生成css样式

CSS 基本采取简写形式即可.

1. 比如 w200 按tab 可以 生成 width: 200px;
2. 比如 lh26px 按tab 可以生成 line-height: 26px;

 p {
     /* w200 */
     width: 200px;
     /* h200 */
     height: 200px;
     /* tac */
     text-align: center;
     /* ti2e */
     text-indent: 2em;
  }