谷歌调试工具和emmet语法

Chrome调试工具

左边是HTML元素结构，右边是CSS样式

右边CSS样式可以改动数值（左右箭头或者直接输入）和查看颜色

如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误

如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误

 

Emmet语法

Emmet 语法的前身是Zen coding，他是用缩写，来提高html/css的编写速度，vscode内部已经集成了该语法

快速生成HTML结构语法

1. 生成标签 直接输入标签名，按tab键即可，比如div然后tab键，就可以生成<div></div>
2. 如果想要生成多个相同的标签，加上*就可以了，div*3就可以快速生成3个标签
3. 如果有父子级关系的标签可以用> 比如ul>li 就可以了
4. 如果有兄弟关系的标签，用 + 就可以了 比如 div+p
5. 如果生成带有类名或者id名字的，直接写.demo或者 #two tab键就可以了 p.one  span.gray
6. 如果生成的div类名是有顺序的，可以用自增符号$    .demo$*5
7. 如果想要生成的标签内部写内容可以用{}表示