Emmet表达式

怡晗★

已于 2024-04-18 09:05:13 修改

阅读量374

点赞数 3

分类专栏：前端基础文章标签：前端 html html5 css

于 2024-04-18 09:04:59 首次发布

本文链接：https://blog.csdn.net/m0_73281594/article/details/137903612

版权

前端基础专栏收录该内容

17 篇文章 2 订阅

订阅专栏

本文介绍了Emmet，一种用于加速HTML和CSS编码的简洁语法，通过缩写和快捷键实现快速生成标签结构、样式以及自定义属性。VScode已内置了这种语法支持。

摘要由CSDN通过智能技术生成

Emmet语法简介

Emmet语法的前身是Zen coding,它使用缩写,来提高HTML的编写速度，VScode内部已经集成该语法。

Emmet作用

快速生成HTML结构语法
快速生成CSS样式语法

Emmet在HTML中的使用

生成标签直接输入标签名按Tab键即可比如div然后Tab 键，就可以生成 <div></div>

如果想要生成多个相同标签加上 * 就可以了比如 div*3 就可以快速生成3个div

如果有父子级关系的标签，可以用 > 比如ul > li就可以了

如果有兄弟关系的标签，用+就可以了比如div+p

如果生成带有类名或者id名字的，直接写 .类名 或者 #id名再按Tab 键就可以了

如果生成的标签中的内容或类带有编号（从1开始），可以用自增符号$

如果想要在生成的标签内部写内容可以用{}表示

上面图片中的代码结果如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Emmet语法</title>
    <style>
        .red {
            color: red;
        }

        #box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <!-- 标签名＋Tab键快速生成标签 -->
    <span></span>
    <!-- 快速生成3个同类标签（内部不包含内容） -->
    <p></p>
    <p></p>
    <p></p>
    <!-- 快速生成3个同类标签（内部包含某一类选择器） -->
    <p class="red"></p>
    <p class="red"></p>
    <p class="red"></p>
    <!-- 快速生成3个同类标签（内部包含某一id选择器及内容） -->
    <p id="box">这是一段文本</p>
    <p id="box">这是一段文本</p>
    <p id="box">这是一段文本</p>
    <!-- 快速生成1个父子类型，内部3个孩子标签（内部包含同样的内容） -->
    <ul>
        <li>这是一段内容</li>
        <li>这是一段内容</li>
        <li>这是一段内容</li>
    </ul>
    <!-- 快速生成3个父子类型，内部1个孩子标签（内部包含同样的内容） -->
    <ol>
        <li>这是一段内容</li>
    </ol>
    <ol>
        <li>这是一段内容</li>
    </ol>
    <ol>
        <li>这是一段内容</li>
    </ol>
    <!-- 快速生成3个同级不同类的标签，两个不同标签为一组（内部包含相同的内容） -->
    <span>这是一段内容</span>
    <p>这是一段内容</p>
    <span>这是一段内容</span>
    <p>这是一段内容</p>
    <span>这是一段内容</span>
    <p>这是一段内容</p>
    <!-- 快速生成3个同级不同类的标签，同标签为一组（内部包含相同的内容） -->
    <span>这是一段内容</span><span>这是一段内容</span><span>这是一段内容</span>
    <p>这是一段内容</p>
    <p>这是一段内容</p>
    <p>这是一段内容</p>
    <!-- 快速生成3个同级的内容按顺序的标签（内部除编号以外包含相同内容） -->
    <span>这是一段内容1</span><span>这是一段内容2</span><span>这是一段内容3</span>
    <!-- 快速生成3个同级的内容按顺序的标签并包含有编号的类（内部除编号以外包含相同内容） -->
    <span class="red1">这是一段内容1</span><span class="red2">这是一段内容2</span><span class="red3">这是一段内容3</span>
</body>

</html>

Emmet在CSS中的使用

CSS 基本采取简写形式即可

对于没有连接符（即只有一个单词）的属性，直接输入首字母＋值按Tab键即可
- 比如w200按Tab可以生成 width: 200px;
对于有连接符（即有两个单词）的属性，需要输入两个单词的首字母+值按Tab键即可
- 比如lh26px按Tab可以生成 line-height: 26px;