如何使用emmet秘籍代码更快地编写HTML / CSS

Posted on by

Emmet是我最喜欢的VS代码内置功能之一。它也可以作为扩展在其他代码编辑器中使用。

把Emmet想象成简写。有了它，您可以轻松快速地编写大量代码。它大大加快了您的 HTML 和 CSS 工作流程。

了解如何使用Emmet实际上是一种超能力。有些人甚至称其为编码作弊代码。?

它只是VS Code众多令人惊叹的内置功能之一。

最近，我推出了一门全面而详细的课程，名为“成为VS代码超级英雄”。 它非常深入地涵盖了VS代码的各个方面。

本文基于本课程的 11 个部分之一：编写和格式化代码。

Emmet的前身是Zen coding，是一款用于快速生成HTML或CSS代码的插件，可用于绝大多数主流文本编辑器。它的语法类似于CSS选择器，通过使用元素或属性的缩写，大大提高了HTML和CSS的编写速度，从而大幅度提高前端开发的效率。

官网地址

速查表

初始模板

输入：!或html:5，然后按Tab键，自动生成HTML文档的初始模板。

HTML

使用Emmet，您可以在眨眼间快速创建HTML样板。在HTML文件中，只需键入，您就会看到Emmet已弹出作为建议。现在点击 .你有它，一个基本的，空白的HTML网页准备就绪。!Enter

如果您以前从未见过HTML，并且不知道这一切是什么，请不要担心。我只是演示 VS 代码和Emmet的功能。你现在不必知道这意味着什么。

基本标签

要创建基本的 HTML 标签，只需键入标签的名称并点击 。请注意 Emmet 如何将光标放在 标记内。现在，您已设置为继续在 标记内键入内容。Enter

  • 尝试键入：then , or , or .divEnterh1 Enterp Enter
  • 这些也适用于：对于 a 、对于 a 、对于 a 、对于 a 和 对于节。bq<blockquote>hdr<header>ftr<footer>btn<button>sect

类

如果您熟悉 CSS，Emmet 会以同样的方式使用 .要定义一个类以及标记，只需像这样添加它：.

  • div.wrapper—><div class="wrapper"></div>
  • h1.header.center—><h1 class="header center"></h1>

ID’s

Id的工作非常相似：

  • div#hero—><div id="hero"></div>

结合

您可以将这些字符串串在一起：

  • div#hero.wrapper—><div id="hero" class="wrapper"></div>

属性

我们还可以为标签指定属性：

  • img[src="cat.jpg"][alt="Cute cat pic"]—><img src="cat.jpg" alt="Cute cat pic" />

内容

要在 标记中包含内容，我们只需将内容包装在大括号中。{ }

  • p{This is a paragraph}—><p>This is a paragraph</p>

兄弟姐妹和孩子

它只是越来越好。我们还可以使用 和 字符指定兄弟姐妹和孩子。+>

  • section+section—><section></section><section></section>
  • ul>li—><ul><li></li></ul>

爬上去

你必须试着想象你在脑海中构建的东西，当你输入Emmet速记时。在此示例中，我们将使用 “向上爬”树。^

div+div>p>span+em^bq

结果：

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

在这里，我们希望块引用与段落处于同一水平。正因为如此，我们需要“爬上去”。否则，它将在该段内。

分组

如果您的结构非常复杂，则可能需要对标签进行分组，而不是通过攀爬进行遍历。

在此示例中，我们将创建一个页眉和页脚，而不使用括号 。( )

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

结果：

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

乘法和 $

我们可以通过使用美元符号（）按顺序对项目进行乘法（）来生成多个标签。*$

  • ul>li*5—><ul><li></li><li></li><li></li><li></li><li></li></ul>
  • ul>li{Item $}*3—><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>

您甚至可以通过用零填充来自定义编号顺序，从特定数字开始，甚至反向方向。

带零的Pad：ul>li.item$$$*5

结果：

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>

从特定数字开始：ul>li.item$@3*5

结果：

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

反转方向：ul>li.item$@-*5

结果：

<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

从特定数字反转方向：ul>li.item$@-3*5

结果：

<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>

隐式标记名称

某些标记不需要键入，并且可以暗示。

  • 最初定义的没有标记的类将隐含为 .
    —><div>.wrapper<div class="wrapper"></div>
  • 在强调标记中定义的类将暗示为 .
    —><span>em>.emphasis<em><span class="emphasis"></span></em>
  • 在列表中定义的类将隐含为列表项。
    —>ul>.item<ul><li class="item"></li></ul>
  • 在表中定义的类将隐含为 a，而在行中将隐含为 。
    —><tr><td>table>.row>.col<table><tr class="row"><td class="col"></td></tr></table>

使用标签换行

有时，您有想要用 标记包装的现有代码。我们可以很容易地用艾米特来做。

只需突出显示要包装的代码，然后打开命令托盘 （）。然后搜索 。然后，您将看到一个对话框，您可以在其中键入元素。F1Emmet: Wrap with Abbreviation

test—><div>test</div>

您还可以在此对话框中使用标准 Emmet 语法。尝试用 将某些文本换行。span.wrapper

默认情况下，此功能未分配给键盘快捷键。因此，如果您发现自己经常使用它，则可能需要为其添加自定义快捷方式。

Lorem Ipsum

“Lorem Ipsum”是开发人员用来表示页面上的数据的虚拟文本。只需键入并点击 .Emmet将生成30个单词的假文本，您可以将其用作项目中的填充物。loremEnter

生成的字数也可以定义。

  • lorem10会给你10个单词的随机文本。

把它们放在一起

让我们使用到目前为止学到的几件事。试试这个：

ul.my-list>lorem10.item-$*5

结果：

<ul class="my-list">
  <li class="item-1">Lorem ipsum dolor sit amet.</li>
  <li class="item-2">Numquam repudiandae fuga porro consequatur?</li>
  <li class="item-3">Culpa, est. Tenetur, deleniti nihil?</li>
  <li class="item-4">Numquam architecto corrupti quam repudiandae.</li>
</ul>

CSS

在 CSS 中，埃米特的每个属性都有一个缩写。我不打算列出所有这些，但我会指出我最常用的。要查看完整列表，请参阅 Emmet 备忘单。

位置

  • pos– >（默认为相对）position:relative;
  • pos:s—>position:static;
  • pos:a—>position:absolute;
  • pos:r—>position:relative;
  • pos:f—>position:fixed;

显示

  • d– >（默认为阻止）display:block;
  • d:n—>display:none;
  • d:b—>display:block;
  • d:f—>display:flex;
  • d:if—>display:inline-flex;
  • d:i—>display:inline;
  • d:ib—>display:inline-block;

光标

  • cur—>cursor:pointer;

颜色

  • c—>color:#000;
  • c:r—>color:rgb(0, 0, 0);
  • c:ra—>color:rgba(0, 0, 0, .5);
  • op—>opacity: ;

边距和填充

  • m—>margin: ;
  • m:a—>margin:auto;
  • mt—>margin-top: ;
  • mr—>margin-right: ;
  • mb—>margin-bottom: ;
  • ml—>margin-left: ;
  • p—>padding: ;
  • pt—>padding-top: ;
  • pr—>padding-right: ;
  • pb—>padding-bottom: ;
  • pl—>padding-left: ;

Box尺寸

  • bxz—>box-sizing:border-box;

宽度

  • w—>width: ;
  • h—>height: ;
  • maw—>max-width: ;
  • mah—>max-height: ;
  • miw—>min-width: ;
  • mih—>min-height: ;

边框

  • bd—>border: ;
  • bd+—>border:1px solid #000;
  • bd:n—>border:none;

Emmet真棒！

使用Emmet，您可以使用一行创建一个非常复杂的HTML结构。这真的很棒。而且，它也适用于CSS。

您可以看到Emmet如何在编写HTML和CSS时大大提高您的效率和速度。

推荐阅读：