前端Emmet语法

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