VS Code 使用Emmet

Emmet使用类似于CSS选择器的语法来描述元素在生成的树和元素属性中的位置。


元素

您可以使用元素的名字,如divp以生成 HTML标签。Emmet没有预定义的可用标签名称集,您可以编写任何单词并将其转换为标签:div→ <div></div>foo→ <foo></foo>依此类推。

嵌套运算符

嵌套运算符用于在生成的树中定位缩写元素。

子元素 >

您可以使用>运算符将元素嵌套在彼此内:

div>ul>li

产生结果:

<div>
    <ul>
        <li></li>
    </ul>
</div>

兄弟元素:+

使用+运算符将元素放在彼此附近,在同一级别上:

div+p+bq

将输出

<div></div>
<p></p>
<blockquote></blockquote>

向上: ^

使用>运算符,您将向下生成的树,并且将针对最深的元素解析所有兄弟元素的位置:

div+div>p>span+em

将输出

<div></div>
<div>
    <p><span></span><em></em></p>
</div>

使用^运算符,您可以爬上树的一个级别并更改应显示以下元素的上下文:

div+div>p>span+em^bq

将输出

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

您可以根据需要使用尽可能多的^运算符,每个运算符将向上移动一级:

div+div>p>span+em^^^bq

将输出

<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

乘法:*

使用*运算符,您可以定义元素应输出的次数:

ul>li*5

将输出

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

分组: ()

Emmets的超级用户使用括号内容对复杂缩写中的子树进行分组:

div>(header>ul>li*2>a)+footer>p

将输出

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

如果您正在使用浏览器的DOM,您可能会将组视为文档片段:每个组包含缩写子树,并且所有以下元素都插入到与组的第一个元素相同的级别。

您可以将组嵌套在彼此内部并将它们与乘法*运算符组合:

(div>dl>(dt+dd)*3)+footer>p

将输出

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

属性运算符

属性运算符用于修改输出元素的属性。例如,在HTML和XML中,您可以快速class向生成的元素添加属性。

ID和CLASS

在CSS中,您使用elem#id和elem.class表示法来访问具有指定id或class属性的元素。在Emmet中,您可以使用相同的语法将这些属性添加到指定的元素:

div#header+div.page+div#footer.class1.class2.class3

将输出

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

CSS 缩写

对于CSS语法,Emmet有很多预定义的属性片段。例如,您可以展开m缩写以获取margin: ;片段。但是你不想只是margin属性,你想为这个属性指定一个值。所以你必须手动输入,比如说10px

Emmet可以在这里大大优化您的工作流程:您可以直接将值注入缩写。为了得到margin: 10px;你可以简单地扩展m10缩写。m10-20扩展为margin: 10px 20px;。负值:m-10--20扩展为margin: -10px -20px;