Emment语法(vscode快捷方式)

1.生成HTML5代码 

<!-- ! 或者 html:5 -->

2.生成子代元素：( > )

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

3.生成兄弟元素：( + )

<!-- div+p+h2 -->
<div></div>
<p></p>
<h2></h2>

4.生成多个元素： ( * )

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

5.生成上一个层级的元素：( ^ )

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

<!-- div>p>span^^h2+strong -->
<div>
    <p>
        <span></span>
    </p>
</div>
<h2></h2>
<strong></strong>

6.对元素进行分组( 使用() 括号分组 )

<!-- (div>p>span)+h2+strong -->
<div>
    <p>
        <span></span>
    </p>
</div>
<h2></h2>
<strong></strong>

<!-- div>(p>span)+h2+a-->
<div>
    <p>
        <span></span>
    </p>
    <h2></h2>
    <a></a>
</div>

7.生成元素属性(id属性，class属性，普通属性)

<!--id: div#main -->
<div id='main'></div>
<!--class: div.box -->
<div class='box'></div>
<!--普通属性: div[title] -->
<div class=''></div>
<!--普通属性赋值: div[title='文字内容'] -->
<div title='文字内容'></div>

<!--div#header>div.box1^div.page+div#footer-->
<div id='header'>
    <div class='box1'></div>
</div>
<div class='page'></div>
<div id='footer'></div>

8.生成元素的文字( 使用{} 花括号 )

<!--div#box{div文字内容}-->
<div id='box'>div文字内容</div>

9.生成结构中有数字( 使用 $ 符号)

<!-- 属性中有数字: div.box$*3-->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

<!-- 属性中的数字中有多个0: ul>li.item$$$*3 -->
<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
</ul>

<!-- 内容中有数字: div{第$行内容}*3 -->
<div>第1行内容</div>
<div>第2行内容</div>
<div>第3行内容</div>

10.隐式标签

<!-- 第一种: #header>.box (默认以 div 形式展示)-->
<div id="header">
    <div class="box"></div>
</div>

<!-- 第二种 ul>.item${文本内容$}*3 (ul中 默认是 li)-->
<ul>
    <li class="item1">文本内容1</li>
    <li class="item2">文本内容2</li>
    <li class="item3">文本内容3</li>
</ul>

<!-- 第三种 table>#row$*3>[colspan=2]-->
<table>
    <tr id="row1">
        <td colspan="2"></td>
    </tr>
    <tr id="row2">
        <td colspan="2"></td>
    </tr>
    <tr id="row3">
        <td colspan="2"></td>
    </tr>
</table>

11.CSS中的Emment语法

/* w100+h100+m0+p0 */
div{
    width: 100px;
    height: 100px;
    margin: 0;
    padding: 0;
}

/* m20-30-40-50 分别是上,右,下,左*/
div{
    margin: 20px 30px 40px 50px;
}

/* p-10-20--30 分别是上-10,右和左20,下-30*/
div{
    padding: -10px 20px -30px;
}

/* m10px20px   m10px-20*/
div{
    margin:10px  20px;
    margin:10px -20px;
}

/*dib  fz20  fz1.5  fw400  lh20px(行高必须加单位)*/
div{
    display: inline-block;
    font-size:20px;
    font-size:1.5em;
    font-weight:400;
    line-height:20px;
}

快捷键:alt+shift+f ：代码格式化