使用VsCode自带的Emmet语法

余生长醉 提交于 2020-01-18 11:33:05
  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代码

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!