Chrome调试工具和Emmet语法

调试工具的使用：

打开页面，鼠标"右击"检查：

Ctrl+滚轮可以放大开发工具代码的大小：

右边CSS样式可以改变数值（左右箭头或者直接输入）和查看颜色，以此来即时改变网页的元素设置

Ctrl+0复原浏览器大小

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

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

举例：

Emmet语法：

快速生成html结构语法：

1：生成标签直接输入标签名按tab键即可，比如div，然后tab键

2：如果想生成多个相同的标签，加上*就可以了，比如div*3就可以快速生成3个div标签

举例：

 div*3

生成：

<div></div>
<div></div>
<div></div>

3：如果有兄弟关系的标签，用+就可以了比如div+p

举例：

div+p

生成：

<div></div>
<p></p>

4:如果有父子级关系的标签，用>即可，比如ul>li

举例：

ul>li

生成：

<ul>
    <li></li>
  </ul>

5：如果生成带有类名或者id名的，直接写.demo或者#two tab键即可

举例：

.demo

生成：

<div class="demo"></div>

6：如果生成的div类名是有顺序的，可以使用自增符号$,搭配*一起使用

举例：

p$*3

生成：

<p1></p1>
<p2></p2>
<p3></p3>

7：如果想在生成的标签内部写内容可以用{}表示

举例：

div{你好}*5

生成：

<div>你好</div>
<div>你好</div>
<div>你好</div>
<div>你好</div>
<div>你好</div>

快速格式化代码：

1:Vscode快速格式化代码：shift+alt+f

2:鼠标右击：