摘要：本文介绍了Emmet语法和HTML元素显示模式。Emmet语法能快速生成HTML结构和CSS样式，通过缩写提高编码效率，如使用*生成多个标签、>创建父子关系等。HTML元素分为块元素（独占一行，可设宽高）、行内元素（同行显示，宽高无效）和行内块元素（兼具两者特性）。元素显示模式可通过display属性转换。此外还介绍了VS Code自动格式化设置和Snipaste截图工具的基本用法。
七、emmet语法
Emmet语法的前身是Zencoding，它使用缩写，来提高html/css的编写速度，Vscode内部已经集成该语法.
1. 快速生成HTML结构语法
2. 快速生成CSS样式语法
7.1 emmet语法生成html标签
1.生成标签直接输入标签名按tab键即可。比如div然后tab键，就可以生成<div></div>
2.如果想要生成多个相同标签，加上*就可以了。比如div*10就可以快速生成10个div
3.如果有父子级关系的标签，可以用> 比如： ul>li就可以了
4. 如果有兄弟关系的标签，用+就可以了。比如： div+p
5. 如果生成带有类名或者id名字的，直接写.demo（类）或者#twotab键（id）就可以了
6.如果生成的div类名是有顺序的，可以用自增符号$
代码解释：按下tab键后表现为类名为demo,且顺序由1到5排序的div
7.如果想要在生成的标签内部写内容，可以用{ }表示
7.2emmet快速生成css样式语法
CSS基本采取简写形式即可。
比如 w200 按tab 可以生成 width: 200px,
比如 Ih26 按tab 可以生成 line-height:26px;
八、元素的显示模式及相互转换代码
8.1什么是元素显示模式
1.作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。
2.元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。
3.HTML元素一般分为块元素和行内元素两种类型。
8.2 块元素
1.常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<0l>、<li>等，其中<div>标签是最典型的块元素。
2.块级元素的特点：
(1)比较霸道，自己独占一行。
(2)高度，宽度、外边距以及内边距都可以控制。
(3)宽度默认是容器（父级宽度）的100%。
(4)是一个容器及盒子，里面可以放行内或者块级元素。
3.注意：
(1)文字类的元素内不能使用块级元素
(2)<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>
(3)同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素
8.3行内元素
1.常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
2.行内元素的特点：
(1)相邻行内元素在一行上，一行可以显示多个。
(2)高、宽直接设置是无效的。
(3)默认宽度就是它本身内容的宽度。
(4)行内元素只能容纳文本或其他行内元素。
3.注意：链接里面不能再放链接.
特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全
8.4行内块元素
1.在行内元素中有几个特殊的标签比如<img/>、<input/>、<td>，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。
2.行内块元素的特点：
(1)和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）。
(2)默认宽度就是它本身内容的宽度（行内元素特点）。
(3)高度，行高、外边距以及内边距都可以控制（块级元素特点）。
8.5元素显示模式的总结
| 元素模式 |
元素排列 |
设置样式 |
默认宽度 |
包含 |
例如 |
| 块级元素 |
一行只能放一个块级元素 |
可以设置宽度高度 |
容器的100% |
容器级可以包含任何标签 |
<div> |
| 行内元素 |
一行可以放多个行内元素 |
不可以直接设置宽度高度 |
它本身内容的宽度 |
容纳文本或者其他行内元素 |
<span> |
| 行内块元素 |
一行可以放多个行内块元素 |
可以设置宽度高度 |
它本身内容的宽度 |
8.6元素模式的转换
1.特殊情况下，我们需要元素模式的转换，简单理解一个模式的元素需要另外一种模式的特性
比如想要增加链接<a>的触发范围。
2.转换为块元素语法：display:block
转换为行内元素：display:inline;
转换为行内块：display: inline-block;
3.例如：
九、vscode自动格式化代码
步骤：
1.打开vscode软件→打开左下角管理，点开设置→点击文本编辑器→点击格式化→勾选Format On Save→按下ctrl+s保存
2.详情图：
一个小工具的使用snipaste
Snipaste是一个简单但强大的截图工具，也可以让你将截图贴回到屏幕上.
常用快捷方式：
1. F1可以截图，同时测量大小，设置箭头书写文字等
2.F3在桌面置顶显示
3.点击图片,alt可以取色（按下shift可以切换取色模式）
4. 按下esc 取消图片显示
感谢观看，感谢关注
CSS总结之-1: CSS简介+基础选择器-CSDN博客
CSS总结之-2: CSS总结之 三、字体属性和四、文本属性-CSDN博客
CSS3总结之-3 : 五、CSS的三种引入方式 + 六、chrome调试工具-CSDN博客
