Emmet详解

李宥小哥

已于 2023-04-21 16:40:31 修改

阅读量2k

点赞数 3

分类专栏：大前端文章标签： html 前端

于 2022-12-04 21:46:37 首次发布

本文链接：https://blog.csdn.net/liyou123456789/article/details/128178001

版权

大前端专栏收录该内容

65 篇文章 13 订阅

订阅专栏

Emmet详解

零、文章目录

一、简介

Emmet 的前身就是 Zen Coding。
Emmet可以使用简化的标签生成复杂的html标签，提升编写 HTML/CSS 代码效率。
Emmet是文本编辑器插件，几乎支持大多数常用的编辑器，vscode内置。
官网地址：https://www.emmet.io/
官方文档：https://docs.emmet.io/
源码地址：https://github.com/emmetio/emmet

二、操作方法

1、操作方法

（1）文本编辑器安装Emmet插件

（2）输入Emmet标签

（3）Tab触发插件工作

（4）插件翻译Emmet标签成html标签

2、案例

缩写：#page>div.logo+ul#navigation>li*5>a{Item $}

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

三、HTML缩写

1、标签缩写

（1）缩写：!

缩写：html:5 或者 !

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

（2）元素名：element

缩写：div

<div></div>

2、标签属性内容

（1）带`id`标签：#

缩写：div#main

<div id="main"></div>

（2）带`class`标签：.

缩写：div.main

<div class="main"></div>

（3）带属性标签：[]

缩写：div[name=ly age=18]

<div name="ly" age="18"></div>

（4）带文本标签：{}

缩写：div{文本内容}

<div>文本内容</div>

（5）数字编号：$

将$放置在元素的名称、属性的名称或属性的值内，以输出重复元素的数字编号

缩写：ul>li.item$*5

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

还可以使用多个$实现缺位补零

缩写：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$@-*5

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

@N放在$后面表示起始数字是N

缩写：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>

@N和@-合并使用效果就是递减到N

缩写：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>

3、嵌套运算符

（1）后代关系：>

缩写：div>ul>li

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

（2）兄弟关系：+

缩写：div+p+span

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

（3）父级兄弟关系：^

缩写：div>span^p

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

（4）重复：*

缩写：div*3

<div></div>
<div></div>
<div></div>

（5）标签分组：()

当标签比较复杂的时候可以用()，()中的部分作为一个整体来看

缩写：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>

4、缩写格式说明

当您熟悉 Emmet 的缩写语法后，您可能希望使用一些格式来使您的缩写更具可读性。例如，在元素和运算符之间使用空格，但它会让缩写失效，因为空格是Emmet 停止缩写解析的停止符号。

在标签中间任何位置写emmet也能正常解析成html标签，所以不需要换行和空格等

<ul class="nav">
    <li>span.info</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

解析结果

<ul class="nav">
    <li><span class="info"></span></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

5、常用默认属性

（1）缩写：a

<a href=""></a>

（2）缩写：a:link

<a href="http://"></a>

（3）缩写：a:mail

<a href="mailto:"></a>

（4）缩写：link

<link rel="stylesheet" href="">

（5）缩写：link:css

<link rel="stylesheet" href="style.css">

（6）缩写：link:favicon

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

（7）缩写：meta:utf

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

（8）缩写：meta:vp

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

（9）缩写：script:src

<script src=""></script>

（10）缩写：img

<img src="" alt="">

（11）缩写：form:post

<form action="" method="post"></form>

（12）缩写：form:get

<form action="" method="get"></form>

（13）缩写：input:h

<input type="hidden" name="">

（14）缩写：input:t

<input type="text" name="" id="">

（15）缩写：input:p

<input type="password" name="" id="">

（16）缩写：input:c

<input type="checkbox" name="" id="">

（17）缩写：input:r

<input type="radio" name="" id="">

（18）缩写：input:f

<input type="file" name="" id="">

（19）缩写：input:s

<input type="submit" value="">

（20）缩写：input:b

<input type="button" value="">

（21）缩写：btn:r

<button type="reset"></button>

（22）缩写：btn:s

<button type="submit"></button>

6、隐式标签

（1）简介

即使有如此强大的缩写引擎，可以从简短的缩写扩展成大型 HTML 结构，编写标签名称还是可能会非常繁琐。

在许多情况下，您可以省略标签名称，例如，div.content您可以简单地将其编写.content并扩展为<div class="content"></div>.

（2）原理

当您展开缩写时，Emmet 会根据父上下文解析子元素，自动补全。

li对于ul和ol
tr对于table,和tbody_thead``tfoot
td为了tr
option对于select和optgroup

（3）左边和右边等价

.wrap>.content	div.wrap>div.content
em>.info	em>span.info
ul>.item*3	ul>li.item*3
table>.row$*4>[colspan=2] \|	table>tr.row$*4>td[colspan=2]

7、占位标记

lorem表示占位标记，作用是随机生成一个文本。lorem1表示生成的文本包含一个单词，lorem2表示生成的文本包含两个单词，以此类推，loremN表示生成的文本包含N个单词。

缩写：div*4>lorem3

<div>Lorem, ipsum dolor.</div>
<div>Soluta, aliquam veritatis?</div>
<div>Praesentium, fugiat vel.</div>
<div>Quos, omnis nihil.</div>

四、CSS缩写

1、首字母缩写

fl → float: left;
fwb→font-weight: bold；
df→display: flex；
jcc→justify-content: center；
aic→align-items: center；
tac→text-align: center；
m10→margin: 10px；

2、首字母不够，前两个字母

poa→position: absolute；

3、多个属性值用`-`隔开

m4-6 → margin: 4px 6px;
p4-6-8 → padding: 4px 6px 8px;

4、提供带单位的值

当你用整数值展开一个缩写时，Emmet 会用一个px单位输出它，比如：m10→margin: 10px;
如果你用浮点值扩展一个缩写，它会输出一个em单位，比如：m1.5→margin: 1.5em;
可以明确提供单位名称，只需放在值后面即可，比如：m1.5ex→margin: 1.5ex;
明确定义单位，则无需再使用连字符分隔值，比如：m10ex20em→margin: 10ex 20em;

5、单位别名

p → %
e → em
x → ex

w100p → width: 100%
m10p30e5x → margin: 10% 30em 5ex

6、颜色值缩写

#1 → #111111
#e0 → #e0e0e0
#fc0 → #ffcc00

c#3 → color: #333
bd5#0s → border: 5px #000 solid

7、无单位属性缩写

有些属性值是没有单位的，比如z-index，line-height，opacity，font-weight

lh2→line-height: 2
fw400→font-weight: 400

8、!important缩写！

!→!important

p!→padding: !important
fl!→float: left !important

李宥小哥

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
2
评论
Emmet详解

Emmet 的前身就是 Zen Coding。Emmet可以使用简化的标签生成复杂的html标签，提升编写 HTML/CSS 代码效率。Emmet是文本编辑器插件，几乎支持大多数常用的编辑器，vscode内置。
复制链接

扫一扫