chrom调试工具

Chrom 调试工具

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

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

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

1.1 快速生成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 类名是有顺序的，可以用自增符号 $

1.2 快速上生成CSS样式语法
CSS 快速采取简写形式即可。
1 比如 w200 按tab 可以生成 width: 200px;
2 比如

lh26   按tab  可以生成 line-height：26px;
1.3 快速格式化代码
Vscode`  快速格式化代码  ： `shift+alt+f`
也可以设置 当我们 保存页面的时候自动格式化代码：
1） 文件 --------> 【首选项】-------->【设置】；
2）搜索`emmet.include;`
3)   在setting.json 下的【用户】中添加以下语句：
* editor.formatOnType*:true;
* editor.formatOnSave*:true;

只需要设置一次即可，以后都可以保存格式化代码