欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

使用VsCode自带的Emmet语法

程序员文章站 2022-05-26 14:19:37
...
  1. 新建html文件,保存之后,输入“”,按Tap(或Enter)键,自动生成HTML结构

  2. 标签只要直接输入标签名(不要输入<>),按Tap(或Enter)键自动生成完整的标签

  3. 输入标签和id:标签名#id名

    输入“span#sp",Tap(或Enter)键,

    =>

    <span id="sp"></span>
  4. 输入标签和class值:标签名.class 名

    输入"span.Sp",Tap(或Enter)键

    =>

    <span class="Sp"></span>
  • 【其中】:元素绑定多个类名:标签名.class名1.class名2。。。

    输入"span.Sp1.Sp2",Tap键(或Enter)键

    =>

    <span class="Sp1 Sp2"></span>
  1. 输入标签和标签中的值:标签名{标签内容}

    输入“span{test}",Tap(或Enter)键,

    =>

    <span>test</span>
  2. 同时输入多个同级标签:标签名+标签名+标签名。。。

    输入"li+li+li" , Tap(或Enter)键,

    =>

    <li></li>
    <li></li>
    <li></li>
  3. 同时输入父级标签和子标签:父级标签名>子级标签名。。。

    输入“table>ul>li+li ",Tap(或Enter)键,

    =>

    <table>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </table>
  4. 输入子级元素的父级元素的同级元素

    输入" div>p>span^ul>li "

    【注意】“^”之后的ul标签是和span的父级标签 p 同级的

    =>

    <div>
        <p><span></span></p>
        <ul>
            <li></li>
        </ul>
    </div>
  5. 输入超链接的链接href值

    输入“a:mail
    =>

    <a href="mailto:"></a>

    输入“a:link
    =>

    <a href="http://"></a>
  6. 输入标签的某个属性值
    输入“span[style=color:red]
    =>

    <span style="color:red"></span>

    输入“span[style=color:red].Sp#sp"

    =>

    <span style="color:red" class="Sp" id="sp"></span>
  7. 同级标签输入多个使用乘法
    输入“li*3"
    =>

    <li></li>
    <li></li>
    <li></li>

参考文章:

VsCode中使用Emmet神器快速编写HTML代码