使用VsCode自带的Emmet语法

Posted shanzhiming

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用VsCode自带的Emmet语法相关的知识,希望对你有一定的参考价值。

  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代码


以上是关于使用VsCode自带的Emmet语法的主要内容,如果未能解决你的问题,请参考以下文章

如何在 VSCode 中添加自定义 emmet 片段?

vscode使用技巧

vscode使用技巧

VScode 使用emmet

vscode快捷操作emmet语法

vscode 解决vue emmet不起作用