Emmet 语法——快速生成html结构

蛋炒饭加俩蛋

已于 2023-08-22 19:06:20 修改

阅读量237

点赞数

分类专栏：前端拓展知识文章标签：前端 html

于 2023-08-06 13:27:41 首次发布

本文链接：https://blog.csdn.net/weixin_52701795/article/details/132129942

版权

前端拓展知识专栏收录该内容

2 篇文章 1 订阅

订阅专栏

class(类名)或#id(id名)——生成带有类名或id名

元素[ 属性="属性"]——可以定义标签属性

Emmet 简介

什么是Emmet

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具. 在前端开发的过程中，一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候，效率会特别低下，因为需要敲打很多尖括号，而且很多标签都需要闭合标签等。于是，就有了 Emmet，它可以极大的提高代码编写的效率，它提供了一种非常简练的语法规则，然后立刻生成对应的 HTML 结构或者 CSS 代码，同时还有多种实用的功能帮助进行前端开发。

目前主流的编辑器工具如Visual Studio Code、WebStorm、hbuilderX、Sublime Text都已经集成了Emmet工具，无需手动安装即可使用

Emmet 语法

标签名+tab键——生成闭合标签

如：div

<div></div>

其他也都是要加tab键的我这里就省略了

标签 * 数字——生成多个标签

可以快速生成 html 元素

如：div*3

<!-- div*3 可以快速生成  -->
<div></div>
<div></div>
<div></div>

标签 > 标签——子节点(父子关系嵌套)

如：div>p

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

标签 + 标签——兄弟节点

如：div+div

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

标签 ^ 标签——上级节点

如: div>p^div

<!-- div>p^div -->
<div>
  <p></p>
</div>
<div></div>

class(类名)或#id(id名)——生成带有类名或id名

如：.demo、#demo、p.demo

注意：默认是生成div，如需要指定元素，需要在前面加个元素名称

<div class="demo"></div>
<div id="demo"></div>
<p class="demo"></p>

元素[ 属性="属性"]——可以定义标签属性

如：a[href="#"]

<a href="#"></a>

元素{}——自定义文本内容

如：div>a{点这里跳转}

<div><a href="">点这里跳转</a></div>

元素$*数字——$可以用于自增长

如：.div$*3、

<!-- .div$*3 -->
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

<!-- div{$}*3 -->
<div>1</div>
<div>2</div>
<div>3</div>

@修饰符—— 升序或者降序

如：div{$@-}*5，div{$@2}*5

<!-- div{$@-}*5 -->
<div>5</div>
<div>4</div>
<div>3</div>
<div>2</div>
<div>1</div>

<!--  div{$@2}*5 -->
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>

(元素+元素)——()元素分组

如：div>(p+span)

<!-- div>(p+span) -->
<div>
  <p></p>
  <span></span>
</div>

Lorem——快速生成乱数假文

如：lorem、lorem数字

默认是30个，如果想要限制单词数量，可以在后面添加数字，如 lorem数字

<!-- 快速生成随机生成30单词 可以用于假数据 -->
<!-- lorem -->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem aperiam totam doloribus sunt, reiciendis incidunt, minima soluta hic aspernatur magnam blanditiis repudiandae quam, cumque odit necessitatibus sint quibusdam! Quo, iste.

<!-- lorem5 -->
Lorem ipsum dolor sit amet.