Emmet学习笔记

前言

学习摘录使用，非原创。

原文链接：抛弃HTML Snippets，拥抱Emmet成为html大师！持续创作，加速成长！这是我参与「掘金日新计划 · 6 月 - 掘金 (juejin.cn)

Emmet概述

缩写是 Emmet 工具包的核心：这些特殊的表达式在运行时被解析并转换成结构化的代码块，例如 HTML。缩写的语法看起来像 CSS 选择器，带有一些特定于代码生成的扩展。因此，每个 Web 开发人员都已经知道如何使用它。

简单来说，Emmet是基于html和css这些基础，当然，也包括React和Vue，设计而出的一套snippet。

就跟我们下载的其他snippet一样，或者我们手动在vscode里新增的snippet片段，效果是一样一样的。

下面，我们来介绍下Emmet到底有多方便吧！

先贴一个例子

javascript

 代码解读
复制代码#page>div.logo+ul#navigation>li*5>a{Item $}

生成：

xml 代码解读复制代码<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

好啦，下面详细来看下语法吧，语法也很简单哟！简单到看着看着就上瘾的程度哈哈哈哈

Emmet语法

  • >添加子节点

    • div>p

      css 代码解读复制代码<div>
  <p></p>
</div>

  • +同级添加标签

    • div+p

      css 代码解读复制代码<div></div>
<p></p>

  • ^层级向上跳一级

    • 通常用于>之后，可以理解为Emmet是线性的，可以通过>和^来互相跳转层级

    • div>p+bq

      css 代码解读复制代码<div>
  <p></p>
  <blockquote></blockquote>
</div>

    • div>p^bq

      css 代码解读复制代码<div>
  <p></p>
</div>
<blockquote></blockquote>

  • *重复，不止可以重复标签，也可以重复属性值和文本

    • div*3

      css 代码解读复制代码<div></div>
<div></div>
<div></div>

  • .给标签添加class

    • div.name

      ini

 代码解读
复制代码<div class="name"></div>

    • div.name1.name2

      ini

 代码解读
复制代码<div class="name1 name2"></div>

  • #给标签添加id

    • div#name

      bash

 代码解读
复制代码<div id="name"></div>

  • []给标签添加属性

    • div[name='xxx']

      ini

 代码解读
复制代码<div name="xxx"></div>

  • ()分组，与其他所有语法一样，是用来将不同操作分隔成不同分组的

    • div+p*3

      css 代码解读复制代码<div></div>
<p></p>
<p></p>
<p></p>

    • (div+p)*3

      css 代码解读复制代码<div></div>
<p></p>
<div></div>
<p></p>
<div></div>
<p></p>

  • {}文本

    • div{xxx}

      css

 代码解读
复制代码<div>xxx</div>

  • $通常与*一同使用，用来填充递增的序号

    • div{item$}*3

      css 代码解读复制代码<div>item1</div>
<div>item2</div>
<div>item3</div>

    • div.item$*3

      ini 代码解读复制代码<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>

    • div[name='item$']*3

      ini 代码解读复制代码<div name="item1"></div>
<div name="item2"></div>
<div name="item3"></div>

  • @x是用于指定基础序号的，也因此通常与$向关联使用

    • div.item$@2*3

      ini 代码解读复制代码<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>

  • @-是用来倒序序号的

    • div.item$@-*3

      ini 代码解读复制代码<div class="item3"></div>
<div class="item2"></div>
<div class="item1"></div>

    • 也可以与@x联合使用

      • div.item$@-3*3

        ini 代码解读复制代码<div class="item5"></div>
<div class="item4"></div>
<div class="item3"></div>

Emmet语法中间不可以有缩进与空格，当然，如果是{}定义文本的话可以有空格

否则默认为不使用Emmet规则

Emmet css语法

这个语法用于css中

css属性+px

这个规则很简单，基本所有的都可以参考，比如

  • m2

    css

 代码解读
复制代码margin: 2px;

  • p2

    css

 代码解读
复制代码padding: 2px;

  • mr2

    css

 代码解读
复制代码margin-right: 2px;

  • t2

    css

 代码解读
复制代码top: 2px;

其他的属性可以类比

css属性+百分比

如果number单独使用，则被解释成px，如果添加%或p则为百分比

  • m2%

    css

 代码解读
复制代码margin: 2%;

  • m2p

    css

 代码解读
复制代码margin: 2%;

其他的可以类比

css属性+em

number后跟e即可

  • m2e

    css

 代码解读
复制代码margin: 2em;

其他类比

css属性+ex

number后跟x即可

  • m2x

    css

 代码解读
复制代码margin: 2ex;

其他类比

css属性+important

  • m2!

    css

 代码解读
复制代码margin: 2px !important;

其他类比

css属性+颜色

默认color的颜色为#000，此时光标会选中#000，直接更改颜色即可，比如，此时直接键入red即可将默认的#000为red

  • c!

    css

 代码解读
复制代码color: #000 !important;

  • c#1

    css

 代码解读
复制代码color: #111;

  • c#e2

    css

 代码解读
复制代码color: #e2e2e2;

  • c#fc0

    css

 代码解读
复制代码color: #fc0;

    此时跟#ffcc00作用一致

css属性的模糊匹配

所有的css属性都可以通过键入关键字符来模糊匹配相应的css属性

  • bg

    css

 代码解读
复制代码background: #000;

  • poa

    css

 代码解读
复制代码position: absolute;

  • lh

    arduino

 代码解读
复制代码line-height: ;

    此时可以直接键入具体数值

  • bxz:cb或bxzc

    css

 代码解读
复制代码box-sizing: content-box;

  • bxz:bb或bxzb

    css

 代码解读
复制代码box-sizing: border-box;

  • fxdc

    css

 代码解读
复制代码flex-direction: column;

  • aic

    css

 代码解读
复制代码align-items: center;

  • ais

    css

 代码解读
复制代码align-items: start;

  • jcc

    css

 代码解读
复制代码justify-content: center;

  • jcs

    css

 代码解读
复制代码justify-content: start;

  • db

    css

 代码解读
复制代码display: block;

  • df

    css

 代码解读
复制代码display: flex;

  • dib

    arduino

 代码解读
复制代码display: inline-block;

  • lg或bgi

    css

 代码解读
复制代码background-image: linear-gradient();

其他可以类比

css属性与:联合使用

:后面可以直接书写目标属性，当然，有的可以直接缩写

如

  • bgs:100p

    或

    bgs100p

    arduino

 代码解读
复制代码background-size: 100%;

  • pl9:!

    css

 代码解读
复制代码padding-left: 9px !important;

其他可以类比

css属性+Emmet语法

css可以像标签一样使用Emmet语法

  • m2+p3+df+aic

    css 代码解读复制代码margin: 2px;
padding: 3px;
display: flex;
align-items: center;

  • t3+poa+l2

    css 代码解读复制代码top: 3px;
position: absolute;
left: 2px;

其他类比，这个有点限制，比如不能poa在前面等。

其他

其他的基本没了，其他的涉及一些结合Emmet的快捷操作，比如跳转、定位等。

这些功能现在编辑器都可以实现。

最主要的用途就是上述html和css的便捷书写

Emmet语法适用于React和vue，还有一般网页，可以说是非常全能了。

Emmet官网

结语

如果文章真的有帮到你，希望可以多多点赞、收藏、关注支持一波呀！！小阵会很开心哒~

posted @ 2025-02-06 23:08  AJun816  阅读(13)  评论(0)  编辑  收藏  举报