玄子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补全标签，例如：div + Tab =
属性标签
<a href=""></a><img src="" alt=""><video src=""></video><audio src=""></audio>输入对应
标签名 + 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: + 表单类型 + Tab，例如input:date + Tab =
<textarea name="" id="" cols="30" rows="10"></textarea><select name="" id=""></select>表单中的特殊标签，例如
textarea与select标签等，Emmet语法与属性标签使用方法一致
textarea标签的必要属性会填充默认值
类名与 ID
Emmet 语法中，可以使用 . 符号来表示类名，使用 # 符号来表示 ID。
<div class="root"></div><span class="content"></span><img src="" alt="" class="logo"><header id="header"></header><nav id="navigate"></nav>输入对应
标签名.class + Tab或标签名#id + Tab补全对应标签加class或id属性直接写
.class 或 #id默认生成div标签
标签文本
<div>这是一个 div</div>输入对应
标签名{text} + Tab，生成对应标签加text文本内容
标签属性
<a href="https://www.xuanzishare.com" target="_blank"></a>输入对应
标签名[属性名="属性值"] + Tab生成对应标签加对应属性，多对属性使用[ ]连续拼接
批量生成
在日常开发中一个ul 或 ol标签通常会附带多个li子标签，或多div子级嵌套都会出现多个重复的标签
<li></li><li></li><li></li><li></li><li></li>输入对应
标签名*count + Tab，生成count个对应标签
编号排序
<li>1</li><li>2</li><li>3</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>输入对应
标签名{$}*count + Tab，生成count个对应标签，且文本自动填充编号，编号数量与count一致使用
@可修改起始编号
嵌套结构
Emmet 支持快速嵌套结构，可以使用>或+与^来实现。
<div><ul><li></li><li></li><li></li></ul></div>输入对应
标签名 > 子标签名 + Tab，生成指定标签的嵌套结构
<div></div><img src="" alt=""><p></p>输入对应
标签名 + 兄弟标签名 + Tab，生成指定标签的同级结构
<div><p></p><img src="" alt=""></div><div></div>输入对应
父级标签名 > 子级标签名 ^ 父级同级标签名 + Tab，生成指定父级标签的子级标签再返回父级标签生成父级的同级标签
页面结构
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body></body></html>输入对应
! + Tab，生成 HTML 基础页面结构
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>玄子Share – HTML Emmet 语法详细介绍 8.19