Emmet语法
1.快速生成HTML结构语法
- 生成标签：直接输入标签名，然后按下tab键即可
- 添加多个标签*号，如：div*3
- 可以使用父子关系标签>，如：ul>li
- 可以使用兄弟标签 ，如：div p
- 生成带类名（class）或id直接写名字".a"或者"#a"
- 生成带有顺序的，可以用自增符号$，如div{$}
注：这些符号可以复合使用
2.快速生成CSS样式语法
简写直接采用
（1）w200--width:200px tac----taxt-align:"center"
（2）in26--line-height:26px
快速格式化代码
Vscode快速格式化代码：shift alt f 或者选择鼠标右键
复合选择器
在CSS根据选择器的类型，选择器可分为基本选择器和复合选择器。复合选择器是基于基本选择器组合基本选择器形成的。
- 目标元素(标签)的选择可以更准确、更高效地选择
- 复合选择器由两个或多个基本选择器以不同的方式组合而成
- 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪选择器等
后代选择器
后代选择器，也被称为包含选择器，可以选择父元素中的子元素。它的写作方法是在前面写一个外部标签，在后面写一个内部标签，当标签嵌套时，内标签成为外标签的后代。 元素1 元素2{ 样式声明} 上述语法表示元素1中的所有元素2（后代元素）。 例如︰
ul li { 样式声明}/*选择ul里面所有的li标签元素*/- 元素1和元素2之间的空间
- 元素1为父级，元素2为子级，最终选择元素2
- 元素2可以是儿子或孙子，只要是元素1的后代
- 元素1和元素2可以是任何基本选择器
子选择器
子元素选择器(子选择器)只能选择作为某一元素的最新子元素。简单理解就是选择亲子元素. 语法︰ 元素1>元素2{样式声明} 上述语法表示所有直接后代(子元素)元素2中的元素1。 例如︰
div > p { 样式声明}/*选择div 所有最新级别p 标签元素*/- 元素1和元素2中间大于号隔
- 元素1为父级，元素2为子级，最终选择元素2
- 元素2必须是自己的儿子，孙子、重孙等都不属于他
并集选择器
开集选择器可以选择多组标签，并定义e相同的样式。通常用于集体声明. 并集选择器由英文逗号(，)连接而成，任何形式的选择器都可以作为并集选择器的一部分。
语法︰ 元素1，元素2{风格声明} 上述语法表示元素1和元素2的选择。 例如∶
ul, div {风格声明}/* 选择ul和div标签元素 */- 元素1和元素2用逗号隔开
- 逗号可以理解为和
- 通常竖着写
- 最后一个选择器不需要逗号
伪类选择器
伪选择器用于向某些选择器添加特殊效果，如向链接添加特殊效果，或选择第一个和第n个元素。伪选择器书写的最大特点是使用冒号(∶）例如：hover 、:first-child 。 因为伪类选择器很多，比如链接伪类、结构伪类等这里先给大家讲解一下常用的链接伪类选择器。
- a : link /*选择所有未访问的链接*/
- a : visited/*选择所有被访问的链接*/
- a : hover/*选择鼠标指针上方的链接*/
- a :active/*选择活动链接(鼠标按下未弹起的链接)*/
链接伪选择器注意事项 为保证生效，请遵守规定的循顺序声明:link - :visited - :hover - :active。 由于a链接在浏览器中有默认风格，我们需要在实际工作中单独指定链接的风格。
h和通常用于实际工作a。
用于选择获得焦点的表单元素。 焦点是光标，一般情况下<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
input : focus { background-color: yellow ; }
CSS元素显示模式
元素显示模式就是元素（标签）以什么方式显示，比如div自己占一行
html元素一般分为两种类型：块元素和行内元素
块元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
特点:
- 更霸道，自己独占一行。
- 可控制高度、宽度、外距和内距。
- 默认宽度是容器(父级宽度)的100%。
- 它是一个容器和盒子，可以放行内部或块级元素。
注意:
- 块级元素不能用于文本元素
- <p>标签主要用于存储文本，因此<p>块级元素不能放在里面，尤其是<div>
- 同理，<h1>~<h6>都是文字块级标签，里面不能放其他块级元素
行内元素
行内常见元素有<a>、<label>、<b>、<em>、<i>、<del>、<s>、<ins>、<U>、<span>等，其中<span>标签是最典型的行业元素。有些地方也称行内元素为内联元素。
特点:
- 一行可以显示相邻行中的多个元素。
- 高宽直接设置无效。
- 默认宽度是其自身内容的宽度。
- 行内元素只能容纳文本或其他行内元素。
注意:
- 链接不能放链接
- 特殊情况链接<a>块级元素可以放在里面，但可以放在里面<a>转换块级模式是最安全的
行内块元素
行业元素中有几个特殊的标签——<img />、<input />、<td>，它们还具有块元素和行内元素的特点。有资料称之为行内块元素。
特点:
- 与相邻的行内元素(行内块)在一行上，但它们之间会有空白。一行可以显示多个(行内元素特征)。
- 默认宽度是其自身内容的宽度(行内元素特征)。
- 高度、行高、外距、内距均可控制(块级元素特征)。