6. Chrome调试工具和Emmet语法

6.1Chrome调试工具

Chrome浏览器提供了一个非常好用的调试工具,可以用来调试我们的HTML结构和CSS样式。

1.打开调试工具
打开Chrome浏览器,按下F12(+Fn)键或者右击页面空白处->检查。

2.使用调试工具
①Ctrl+滚轮 可以放大开发者工具代码大小。
②左边是HTML元素结构，右边是CSS样式。
③右边CSS样式可以改动数值(左右箭头或者直接输入)和查看颜色。
④Ctrl + 0 复原浏览器大小。
⑤如果点击元素 ，发现右侧没有样式引入,极有可能是类名或者样式引入错误。
⑥如果有样式,但是样式前面有黄色叹号提示，则是样式属性书写错误。

6.2Emmet语法

Emmet语法的前身是Zen coding,它使用缩写,来提高htm/css的编写速度, Vscode内部已经集成该语法.
1.快速生成HTML结构语法
2.快速生成CSS样式语法

一、快速生成HTML结构语法

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

二、快速生成CSS样式语法

CSS基本采取简写形式即可.
1.比如 w200 按tab 可以生成width: 200px;
2.比如 lh26 按tab 可以生成line-height: 26px;