emmet html 基础语法 _ vscode html代码生成快捷键

1. 基本使用：

        a. 语法：标签+tab = 生成的html代码

div + tab<div></div>

2.不同符号的作用

0. $ 号：  为元素添加序号。
1.* 号： div*6 = 生成6个div
2.[] 号： a[href="#"] =   括号中的属性值
3.{} 号： 输入文本到标签中
    a[href="#"]{$}  
        <li><a href="#">1</a></li>

4. .号： 生成 class 熟悉值的表情
    div.class
        等级于：
        <div class="class"></div>
5. # 号：
    div#id
        等级于：
         <div id="id"></div>

3. 代码生成格式

1. 父子关系（>）:

div>ui>li>a

等价于：

<div>

        <ui>

            <li><a href=""></a></li>

        </ui>

</div>

2.兄弟关系（+）：

 div+p+div+a

 等价于：

<div></div>

  <p></p>

  <div></div>

<a href=""></a>

3. 一次生成多个（*）：

div*3

<div></div>

<div></div>

<div></div>

4. 给标签加类名(div.hanhan)

 div.hanhan

等价于：

<div  class="hanhan"></div>

5. 组合代码例子

div.y>ul>li*5>a[href="#"]{$}
等价于：
<div class="y">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul>
</div>