【学习笔记】前端入门学习笔记（四）

前言

本笔记是b站黑马程序员前端入门教程的听课笔记，主观性较强，初衷是与大家共同交流，一起进步。

Emmet语法

快速生成HTML结构语法

• 生成标签，直接输入标签名，按tab键即可
• 生成多个标签，输入标签名*标签数量，按tab键即可
• 如果有父子级关系标签，可用>，例如ul>li，即可生成
• 如果有兄弟关系的标签，用+，例如div+p，即可生成
• 如果生成带有类名或者id名字，.nav或#banner，默认生成div，其他标签要另行说明，例如span.gray
• 如果生成的div有顺序，使用 $ ，例如.demo $ *5
• 如果想要在生成的标签内部写内容可以用{}表示

快速生成CSS样式语法

直接打缩写（第一个字母连起来），tab生成。w100→weight: 100px;

快速格式化代码

shift+alt+f 可以直接快速格式化文档

CSS的复合选择器

常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器

1.后代选择器

后代选择器又称包含选择器，可以选择父元素里面的子元素。
写法：把外层标签写在前面，内层标签写在后面，中间用空格分割。（选择所有子标签）当标签发生嵌套时，内层标签就成为外层标签的后代。

<ol>
	<li>我是ol的孩子</li>
	<li>我是ol的孩子</li>
</ol>

ol li {
	color: pink;
}

注意：

• 元素1是父级，元素2是子级，最终选择的是元素2
• 元素2可以是儿子，也可以是孙子，只要是元素1的后代即可
• 元素1和元素2可以是任意的基础选择器

2.子选择器

子元素选择器只选择某元素的最近一级子元素

元素1>元素2{样式声明}

3.并集选择器

并集选择器可以选择多组标签，并同时为他们定义相同的样式。
并集选择器是各选择器通过(,)连接而成的，任何形式的选择器都可以作为并集选择器的一部分

div,
p {
	color: pink;
}

注意：

• 并集选择器一般用于集体声明

4.伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给连接添加特殊效果，或选择第1个，第n个元素。
伪类选择器书写最大的特点是用冒号（:）表示
链接伪类选择器
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接（鼠标按下未弹起的链接）
注意事项：

• 为了确保生效，要按照LVHA的顺序声明：link-visited-hover-active
• 因为链接在浏览器中具有默认样式，所以在实际工作中要对其进行样式定义
  在实际工作开发中的写法

/* a是标签选择器 所有的链接*/
a {
	color: gray;
}
/* : hover是链接伪类选择器 鼠标经过*/
a: hover{
	color: red;
}

:focus伪类选择器
用于选取获得焦点的表单元素。
一般情况下，< input >类的表单元素才能使用。

/*把获得光标的input表单元素选取出来*/
input: focus {
	background-color: yellow;
}

CSS的元素显示模式

1.什么是元素显示模式

网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好地布局我们的网页。
元素显示模式是元素（标签）以什么方式进行显示的。
HTML元素一般分为块元素和行内元素两种类型。

2.块元素

块元素的特点：

• 自己独占一行
• 高度、宽度、外边距以及内边距都可以控制
• 宽度默认是容器的100%
• 是一个容器及盒子，里面可以放行内或者块级元素
  注意：
• 文字类的元素内不能使用块级元素
• < p >标签主要用于存放文字，不能放块级元素

3.行内元素

行内元素的特点：

• 相邻行内元素在一行上，一行可以显示多个
• 高、宽直接设置是无效的
• 默认宽度就是它本身内容的宽度
• 行内元素只能容纳文本或其他行内元素

注意：

• 链接里不能放链接
• 特殊情况< a >链接元素里可以放块级元素，但是给< a >转换一下块级模式最安全

4.行内块元素

在行内元素中有几个特殊的标签：< img /> < input /> < td >，同时具有块元素与行内元素的特点，有些资料称它们为行内块元素。
特点：

• 一行可以显示多个
• 默认宽度是本身内容的宽度
• 高度、行高、外边距以及内边距都可以控制

5.元素显示模式的转换

一个模式需要另一个模式的特性

/*转换为块级元素*/
display: block;
/*转换为行内元素*/
display: inline;
/*转换为行内块元素*/
display: inline-block;