目录
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;
- 比如