CSS3_02
1. Emmet 语法
Emmet 语法的前身是 Zen cooding,它使用缩写来提高 html 和 css 的编写速度,Vscode内部已集成该语法
1.1 快速生成 HTML 语法
- 生成标签: 直接输入标签名按 tab 键即可
- 生成多个相同的标签:加上*
- 生成有父子关系的标签:>
- 生成有兄弟关系的标签:+
- 生成带有类名或 id 名字的标签:直接写类名或者 id 名(默认生成在 div 标签下)
- 生成有顺序类名:$
- 在生成的标签内部书写:{}
<!-- 生成多个相同标签 -->
<!-- div*5 -->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<!-- 生成有父子关系的标签 -->
<!-- div>span -->
<div><span></span></div>
<!-- ul>li -->
<ul>
<li></li>
</ul>
<!-- 生成有兄弟关系的标签 -->
<!-- h4+p -->
<h4></h4>
<p></p>
<!-- 生成有类名或id名的标签 -->
<!-- . -->
<div class=""></div>
<!-- .color -->
<div class="color"></div>
<!-- #banner -->
<div id="banner"></div>
<!-- p.gray -->
<p class="gray"></p>
<!-- p#red -->