目录
Emmet语法简介
Emmet作用
Emmet在HTML中的使用
Emmet在CSS中的使用
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;
- 比如
