Emmet详解

Emmet详解
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 1a>li>
        <li><a href="">Item 2a>li>
        <li><a href="">Item 3a>li>
        <li><a href="">Item 4a>li>
        <li><a href="">Item 5a>li>
    ul>
div>
1
2
3
4
5
6
7
8
9
10
```
三、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>Documenttitle>
head>
<body>
    
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
```
（2）元素名：element

缩写：div
```
<div>div>
1
```
2、标签属性内容

（1）带id标签：#

缩写：div#main
```
<div id="main">div>
1
```
（2）带class标签：.

缩写：div.main
```
<div class="main">div>
1
```
（3）带属性标签：[]

缩写：div[name=ly age=18]
```
<div name="ly" age="18">div>
1
```
（4）带文本标签：{}

缩写：div{文本内容}
```
<div>文本内容div>
1
```
（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>
1
2
3
4
5
6
7
```
还可以使用多个$实现缺位补零

缩写：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>
1
2
3
4
5
6
7
```
@-放在$后面表示递减

缩写：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>
1
2
3
4
5
6
7
```
@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>
1
2
3
4
5
6
7
```
@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>
1
2
3
4
5
6
7
```
3、嵌套运算符

（1）后代关系：>

缩写：div>ul>li
```
<div>
    <ul>
        <li>li>
    ul>
div>
1
2
3
4
5
```
（2）兄弟关系：+

缩写：div+p+span
```
<div>div>
<p>p>
<span>span>
1
2
3
```
（3）父级兄弟关系：^

缩写：div>span^p
```
<div><span>span>div>
<p>p>
1
2
```
（4）重复：*

缩写：div*3
```
<div>div>
<div>div>
<div>div>
1
2
3
```
（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>
1
2
3
4
5
6
7
8
9
10
11
```
4、缩写格式说明

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

在标签中间任何位置写emmet也能正常解析成html标签，所以不需要换行和空格等
```
<ul class="nav">
    <li>span.infoli>
    <li>li>
    <li>li>
    <li>li>
    <li>li>
ul>
1
2
3
4
5
6
7
```
解析结果
```
<ul class="nav">
    <li><span class="info">span>li>
    <li>li>
    <li>li>
    <li>li>
    <li>li>
ul>
1
2
3
4
5
6
7
```
5、常用默认属性

（1）缩写：a
```
<a href="">a>
1
```
（2）缩写：a:link
```
<a href="http://">a>
1
```
（3）缩写：a:mail
```
<a href="mailto:">a>
1
```
（4）缩写：link
```
<link rel="stylesheet" href="">
1
```
（5）缩写：link:css
```
<link rel="stylesheet" href="style.css">
1
```
（6）缩写：link:favicon
```
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
1
```
（7）缩写：meta:utf
```
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
1
```
（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">
1
```
（9）缩写：script:src
```
<script src="">script>
1
```
（10）缩写：img
```
<img src="" alt="">
1
```
（11）缩写：form:post
```
<form action="" method="post">form>
1
```
（12）缩写：form:get
```
<form action="" method="get">form>
1
```
（13）缩写：input:h
```
<input type="hidden" name="">
1
```
（14）缩写：input:t
```
<input type="text" name="" id="">    
1
```
（15）缩写：input:p
```
<input type="password" name="" id="">         
1
```
（16）缩写：input:c
```
<input type="checkbox" name="" id="">     
1
```
（17）缩写：input:r
```
<input type="radio" name="" id="">     
1
```
（18）缩写：input:f
```
<input type="file" name="" id="">        
1
```
（19）缩写：input:s
```
<input type="submit" value=""> 
1
```
（20）缩写：input:b
```
<input type="button" value="">
1
```
（21）缩写：btn:r
```
<button type="reset">button>   
1
```
（22）缩写：btn:s
```
<button type="submit">button>
1
```
6、隐式标签

（1）简介

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

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

（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>
1
2
3
4
```
四、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
1
2
```
6、颜色值缩写
- #1 → #111111
- #e0 → #e0e0e0
- #fc0 → #ffcc00
```
c#3 → color: #333
bd5#0s → border: 5px #000 solid
1
2
```
7、无单位属性缩写

有些属性值是没有单位的，比如z-index，line-height，opacity，font-weight
```
lh2→line-height: 2
fw400→font-weight: 400
1
2
```
8、!important缩写！
- !→!important
```
p!→padding: !important
fl!→float: left !important
1
2
```
相关阅读:
MASA MAUI Plugin （五）Android 指纹识别
 怎么解决Spring的循环依赖
 C++ vector容器
 无线路由器设置成交换机
 【贪心构造证明】Codeforces Round #814 (Div. 2) E. Fibonacci Strings
（一）centos7案例实战——nginx服务器搭建详解
 【Linux】vim
怎么复习信息系统项目管理师？
如何测试服务器的速度
 前端框架 React中Typecript的使用
原文地址：https://blog.csdn.net/liyou123456789/article/details/128178001

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

Emmet详解

零、文章目录

一、简介

二、操作方法

1、操作方法

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

（2）输入Emmet标签

（3）Tab触发插件工作

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

2、案例

三、HTML缩写

1、标签缩写

（1）缩写：!

（2）元素名：element

2、标签属性内容

（1）带id标签：#

（2）带class标签：.

（3）带属性标签：[]

（4）带文本标签：{}

（5）数字编号：$

3、嵌套运算符

（1）后代关系：>

（2）兄弟关系：+

（3）父级兄弟关系：^

（4）重复：*

（5）标签分组：()

4、缩写格式说明

5、常用默认属性

（1）缩写：a

（2）缩写：a:link

（3）缩写：a:mail

（4）缩写：link

（5）缩写：link:css

（6）缩写：link:favicon

（7）缩写：meta:utf

（8）缩写：meta:vp

（9）缩写：script:src

（10）缩写：img

（11）缩写：form:post

（12）缩写：form:get

（13）缩写：input:h

（14）缩写：input:t

（15）缩写：input:p

（16）缩写：input:c

（17）缩写：input:r

（18）缩写：input:f

（19）缩写：input:s

（20）缩写：input:b

（21）缩写：btn:r

（22）缩写：btn:s

6、隐式标签

（1）简介

（2）原理

（3）左边和右边等价

7、占位标记

四、CSS缩写

1、首字母缩写

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

3、多个属性值用-隔开

4、提供带单位的值

5、单位别名

6、颜色值缩写

7、无单位属性缩写

8、!important缩写！

（1）带`id`标签：#

（2）带`class`标签：.

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