玄子Share - HTML Emmet 语法详细介绍

以下Emmet语法基于WebStorm 2023.2演示

Emmet 语法介绍

Emmet 是一种缩写语法，旨在简化 HTML 和 CSS 的编写。它基于 CSS 选择器的语法结构，通过输入特定的缩写，可以快速生成 HTML 结构。

Emmet 语法优点

提高开发效率： Emmet 的主要目的之一是提高开发效率。通过输入简单的缩写，您可以快速生成复杂的 HTML 和 CSS 代码，而无需手动键入每个标签和属性。这极大地减少了重复劳动和时间浪费。
减少错误和拼写问题：手动键入 HTML 和 CSS 代码时，经常会出现拼写错误、遗漏标签或属性等问题。Emmet 的自动补全功能可以减少这些错误，因为它根据缩写生成代码，不容易出现拼写错误。
简洁的语法： Emmet 的语法非常简洁明了。通过使用简短的符号和缩写，您可以表示复杂的结构，这使得代码更易于阅读和管理。
嵌套和结构更清晰： Emmet 支持嵌套结构，使得在 HTML 和 CSS 中创建嵌套元素和布局更加直观。这可以帮助您更清晰地组织代码，减少代码混乱的可能性。
与编辑器无缝集成**：** Emmet 集成到许多流行的代码编辑器中，如 Visual Studio Code、Sublime Text、Atom 等。这意味着您可以在编辑器中直接使用 Emmet 缩写，并且很多编辑器还支持自定义 Emmet 扩展。
功能丰富： Emmet 支持许多高级功能，如层级选择器、重复生成、数学表达式等。这些功能可以让您更灵活地生成代码，适应各种不同的开发需求。
跨平台支持：无论您是在 Windows、macOS 还是 Linux 上开发，Emmet 都提供跨平台支持，您可以在不同的操作系统上使用相同的缩写语法。

Emmet 基础语法

Emmet 编写的缩写通常是结合标签名、类名、ID、属性等信息，使用缩写后按下 Tab 键即可展开成完整的 HTML 或 CSS 代码。在您的编码工作中，掌握 Emmet 语法将会是一个非常实用的技能，它能够帮助您更快地编写出规范且高效的代码。

基础标签

<p></p>
<div></div>
<span></span>
<!-- * + Tab -->

输入对应标签名 + Tab补全标签，例如：div + Tab = <div></div>

属性标签

<a href=""></a>
<img src="" alt="">
<video src=""></video>
<audio src=""></audio>
<!-- * + Tab -->

输入对应标签名 + Tab补全标签，此类标签会生成必要属性，例如a标签的href属性

表单标签

<input type="button" value="">
<input type="radio" name="" id="">
<input type="checkbox" name="" id="">
<input type="file" name="" id="">
<input type="text" name="" id="">
<input type="password" name="" id="">
<input type="color" name="" id="">
<input type="image" src="" alt="">
<input type="range" name="" id="">
<input type="search" name="" id="">
<input type="date" name="" id="">
<input type="month" name="" id="">
<input type="datetime" name="" id="">
<input type="datetime-local" name="" id="">
<!-- input:data + Tab -->

大多表单标签生成语法均为input: + 表单类型 + Tab，例如input:date + Tab = <input type="date" name="" id="">

<textarea name="" id="" cols="30" rows="10"></textarea>
<select name="" id=""></select>
<!-- textarea + Tab -->

表单中的特殊标签，例如textarea与select标签等，Emmet语法与属性标签使用方法一致

textarea标签的必要属性会填充默认值

类名与 ID

Emmet 语法中，可以使用 . 符号来表示类名，使用 # 符号来表示 ID。

<div class="root"></div>
<!-- div.root + Tab -->
<span class="content"></span>
<!-- span.content + Tab -->
<img src="" alt="" class="logo">
<!-- img.logo + Tab -->
<header id="header"></header>
<!-- header#header + Tab -->
<nav id="navigate"></nav>
<!-- nav#navigate + Tab -->

输入对应标签名.class + Tab或标签名#id + Tab补全对应标签加class或id属性

直接写.class 或 #id默认生成div标签

标签文本

<div>这是一个 div</div>
<!-- div{这是一个 div} + Tab -->

输入对应标签名{text} + Tab，生成对应标签加text文本内容

标签属性

<a href="https://www.xuanzishare.com" target="_blank"></a>
<!-- a[href="https://www.xuanzishare.com"][target="_blank"] + Tab -->

输入对应标签名[属性名="属性值"] + Tab生成对应标签加对应属性，多对属性使用[ ]连续拼接

批量生成

在日常开发中一个ul 或 ol标签通常会附带多个li子标签，或多div子级嵌套都会出现多个重复的标签

<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<!-- li*5 + Tab -->

输入对应标签名*count + Tab，生成count个对应标签

编号排序

<li>1</li>
<li>2</li>
<li>3</li>
<!-- li{$}*3 + Tab -->

<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<!-- li{$@2}*5 + Tab-->

输入对应标签名{$}*count + Tab，生成count个对应标签，且文本自动填充编号，编号数量与count一致

使用@可修改起始编号

嵌套结构

Emmet 支持快速嵌套结构，可以使用>或+与^来实现。

<div><ul><li></li><li></li><li></li></ul>
</div>
<!-- div>ul>li*3 + Tab -->

输入对应标签名 > 子标签名 + Tab，生成指定标签的嵌套结构

<div></div>
<img src="" alt="">
<p></p>
<!-- div+img+p -->

输入对应标签名 + 兄弟标签名 + Tab，生成指定标签的同级结构

<div><p></p><img src="" alt="">
</div>
<div></div>
<!-- div>p+img^div + Tab -->

输入对应父级标签名 > 子级标签名 ^ 父级同级标签名 + Tab，生成指定父级标签的子级标签再返回父级标签生成父级的同级标签

Emmet 高级语法

Emmet 语法在 CSS 中同样可以带来高效的编码体验。

生成选择器

使用 Emmet 可以快速生成选择器，避免手动键入重复的类名或标签名。

输入 .class，会生成一个类选择器：.class {}
输入 #id，会生成一个 ID 选择器：#id {}
输入 div.container，会生成一个带标签和类名的选择器：div.container {}

生成属性

Emmet 也支持生成 CSS 属性，使您能够更快速地添加样式。

输入 bgc:red，会生成 background-color: red;
输入 fs:14px，会生成 font-size: 14px;
输入 p:10px 20px，会生成 padding: 10px 20px;

生成边框圆角

Emmet 可以生成一些常见的属性，如边框、圆角、阴影等。

输入 b:1px solid #ccc，会生成 border: 1px solid #ccc;
输入 br:5px，会生成 border-radius: 5px;

生成伪类和伪元素

Emmet 支持生成伪类和伪元素。

输入 h:hov，会生成 :hover {}
输入 b:bef，会生成 ::before {}

生成属性值

Emmet 还可以在属性值中生成数值序列，适用于一些需要重复的属性值，如动画关键帧。

输入 tr:0 100%，会生成 transform: translate(0, 100%);

生成属性值和自动补全

Emmet 支持生成属性值和自动补全，减少手动输入。

输入 m:a，会生成 margin: auto;
输入 d:f，会生成 display: flex;

这些示例展示了在 CSS 中使用 Emmet 的一些常见情况。Emmet 可以大大加速您编写 CSS 的速度，提高开发效率。它的语法简洁易懂，适用于各种样式的生成和快速编辑。

Emmet 实现场景

生成三行四列的表格加文本

table>tr*3>td{$}*4

<table><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>

生成指定数量的无序列表加文本

ol>li{$}*4

<ol><li>1</li><li>2</li><li>3</li><li>4</li>
</ol>

生成指定容器内多个同级元素加属性加文本

div.container>div.item${测试$}*8

<div class="container"><div class="item1">测试1</div><div class="item2">测试2</div><div class="item3">测试3</div><div class="item4">测试4</div><div class="item5">测试5</div><div class="item6">测试6</div><div class="item7">测试7</div><div class="item8">测试8</div>
</div>