Chrom
调试工具
Chrom
浏览器提供了一个非常好用的调试工具,可以用来调试我们的HTML
结构和CSS
样式。
使用调试工具
1> Ctrl + 滚轮
可以放大开发者工具代码大小。
2> 左边
是HTML
元素结构,右边
是CSS
样式。
3> 右边CSS
样式可以改动数值(左右箭头或者直接输入)和查看颜色。
4> Ctrl + 0
复原浏览器大小。
5> 如果点击元素,发现右侧没有样式引入,机油可能是类名或者样式引入错误。
6> 如果有样式,但是样式前面有黄色叹号提示,则是样式属性书写错误。
Emmet
语法
Emmet
语法的前身是Zen coding
,它使用缩写来提高html/css
的编写速度,Vscode
内部已经集成该语法。
1.快速生成HTML
结构语法。
2.快速成圣CSS
样式语法。
1.1 快速生成HTML结构语法
- 生成标签直接输入标签 按 tab键即可 比如
div
然后tab
键, 就可以快速生成<div></div>
- 如果想要生成
多个相同
标签, 加上*
就可以了 比如div*3
就可以快速生成3个div
- 如果有
父子关系
的标签,可以用> 比如 ul> li
就可以 - 如果有
兄弟关系
的标签, 用 + 就可以了div+p
- 如果生成带有类名或者id 名字的, 直接写 .demo 或者 #two tab 键就可以了
- 如果生成的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;
只需要设置一次即可,以后都可以保存格式化代码