Emmet语法
Emmet语法能够利用缩写快速生成html以及css语法结构,大大提高写代码的效率。
vscode中快速生成HTML语法
1.生成标签直接输入标签名按tab键即可比如div然后tab键,就可以生成<dⅳ></diⅳ>
2.如果想要生成多个相同标签加上*
就可以了比如div*
3就可以快速生成3个div
3.如果有父子级关系的标签,可以用>比如ul>li就可以了
4.如果有兄弟关系的标签,用+就可以了比如div+p
5.如果生成带有类名或者id名字的,直接写标签名.demo或者标签名#two再tab键就可以了,不加标签名默认为div
6.如果生成的div类名是有顺序的,可以用自增符号$
7.如果想要在生成的标签内部写内容可以用{}表示
1. div ----> <div></div>
2. div*3 ----> <div></div>
<div></div>
<div></div>
3. ul>li ----> <ul>
<li></li>
</ul>
4. div+p ----> <div></div>
<p></p>
5. .类名 ----> <div class = "类名"></div>
#id名 ----> <div id = "id名"></div>
p.类名 ----> <p class = "类名"></p>
p#id名 ----> <p id = "id名"></p>
6. p.类名$*2 ----> <p class = "类名1"></p>
<p class = "类名2"></p>
7. p{文本} ----> <p>文本</p>
p{文本$}*2 ----> <p>文本1</p>
<p>文本2</p>
vscode快速生成css代码
在花括号中使用属性缩写加上tab键。
f ---> font:
fs ---> font-style:
w100 ---> width: 100px
html5基础知识:
https://blog.csdn.net/Arcofcosmos/article/details/122560992?spm=1001.2014.3001.5502
css基础知识:
https://blog.csdn.net/Arcofcosmos/article/details/122561105
css复合选择器:
https://blog.csdn.net/Arcofcosmos/article/details/122581153