笔记：web前端学习HTML+CSS视频：黑马程序员 web 前端开发入门教程，前端零基础 html5+css3+前端项

视频：黑马程序员 web 前端开发入门教程，前端零基础 html5+css3+前端项目视频教程
笔记：web 前端开发入门

一、基础知识

1. 五大浏览器

谷歌 Chrome
Safari
IE
欧朋 Opera
火狐 FireFox

2. 渲染引擎（浏览器内核）

浏览器	内核
IE	Trident
FireFox	Gecko
Safari	Webkit
Chrome/Opera	目前：Blink，是Webkit的分支

3. Web标准

构成	语言	说明
结构	HTML	页面元素
表现	CSS 页面样式
行为	JavaScript	页面交互

二、HTML认知

HTML决定了身体，CSS决定了样式美观，JS决定了交互的动态效果

1. HTML感知

HTML (hyper text markup language) 超文本标记语言

2. HTML骨架

网页类似于一篇文章，每一页文章是有固定的结构的，网页也是。

3. HTML标签组成和关系

父子关系（嵌套关系）
兄弟关系（并列关系）

三、HTML标签学习

1、排版标签

含义	标签	说明
标题	<h1></h1> <h2></h2>	独占一行
段落	<p></p>	独占一行
换行	<br>	单标签独占一行
水平线标签	<hr>	单标签独占一行

2、文本格式化标签

在同一行显示，不独占一行

含义	标签	说明
加粗	<b> <strong>	strong 用在突出重要性的语境
下划线	<u> <ins>	ins 用在突出重要性的语境
倾斜	<i> <em>	em 用在突出重要性的语境
删除线	<s> <del>	del

3、媒体标签

含义	标签	说明
图片标签	<img src=" " alt=" " >	单标签， alt属性为图片加载失败时的替换文本， title属性为当鼠标悬停时，才显示的文本
音频标签	<audio src=" " controls> </audio>	controls 显示播放的控件 autoplay：自动播放，部分浏览器不支持; loop: 循环播放
视频标签	<video src=" " controls> <video>	controls 显示播放的控件 autoplay：自动播放，谷歌浏览器中需配合muted实现静音播放 loop: 循环播放支持mp4、WebM、Ogg
删除线	<s> <del>	del

相对路径

同级目录
./ 表示当前, 所以同级目录可以有两种写法

<img src="目标图片.gif">
<img src="./目标图片.gif">

<img src="目标所在目录/目标图片.gif">

上级目录
../ 表示上一级目录，所以目标图片在上级目录时

<img src="../目标所在目录/目标图片.gif">

4、链接标签

特点：行内元素，不换行
代码：<a href="">超链接</a>
属性：target，目标网页的打开形式。 _self 默认值，在当前窗口跳转，_blank 在新窗口跳转

5、列表标签

无序列表

<ul> //表示无序列表的整体
    <li></li>  //表示无序列表的每一项
    <li></li>
</ul>

有序列表

<ol> //表示有序列表的整体
    <li></li>  //表示有序列表的每一项
    <li></li>
</ol>

自定义列表

注意：

dd 前会默认缩进效果
dl 标签中只允许包含 dt 和 dd ，dt 和 dd 中可以放任何内容

<dl> //表示自定义列表的整体
    <dt>主题</dt>  //表示自定义列表的主题
    <dd>内容</dd>  //表示自定义列表的针对主题的每一项内容
</dl>

6、表格标签

标签名	说明
table	表格整体，可用于包裹多个tr
tr	表格每行，可用于包裹td
td	表格单元格，可用于包裹内容

6.1 表格标题和表头单元格标签

标签名	说明
caption	表格标题，书写在table标签内部，默认在表格整体顶部居中位置显示
th	表头，默认内部文字加粗并居中显示

<table border="1"> 
    <caption>表格标题</caption>
    <tr>
        <th>表头</th>
    </tr>
    <tr>
        <td>表格内容</td>
    </tr>    
</table>

6.2 表格的结构标签

场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰

结构标签：

标签名	说明
thead	表格头部
tbody	表格主体
tfoot	表格底部

注意：表格结构标签可以省略

<table border="1"> 
    <caption>表格标题</caption>
    <thead>
        <tr>
            <th>表头</th>
        </tr>
        <tr>
            <th>表头</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>表格内容</td>
        </tr> 
    </tbody>
    <tfoot>
        <tr>
            <td>表格底部</td>
        </tr> 
    </tfoot>   
</table>

6.3 合并单元格

跨行合并（垂直合并成一个）
跨列合并（水平合并成一个）
合并单元格步骤：

明确合并哪几个单元格
上下合并，只保留最上的，删除其他；左右合并，只保留最左的
给保留的单元格设置：跨列合并或者跨行合并

属性名属性值属性值
rowspan 合并单元格的个数跨行合并，将多行的单元格垂直合并
colspan 合并单元格的个数跨列合并，将多列的单元格水平合并

属性名	属性值	属性值
rowspan	合并单元格的个数	跨行合并，将多行的单元格垂直合并
colspan	合并单元格的个数	跨列合并，将多列的单元格水平合并

<table border="1"> 
    <caption>表格标题</caption>
    <thead>
        <tr>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">表格内容</td>
            <td>表格内容</td>
        </tr> 
    </tbody>
    <tfoot>
        <tr>
            <td>表格底部</td>
            <td colspan="2">表格底部</td>
        </tr> 
    </tfoot>   
</table>

7、表单标签

应用场景
- 收集用户数据类网页，如：登录页、注册页等

7.1 input标签

可以通过type属性值的不同，表现不同的形态

标签名	type属性值	说明
input	text	文本框，用于输入单行文本
input	password	密码框，用于输入密码
input	radio	单选框，用于多选一
input	checkbox	多选框，用于多选多
input	file	文件选择，用于之后上传文件
input	submit	提交按钮，用于提交
input	reset	重置按钮，用于重置
input	button	普通按钮，默认无功能，之后配合js添加功能

文本框

场景：在网页中显示输入单行文本的表单控件

type属性值：text

常用属性：

placeholder 占位符，提示用户输入内容的文本

value属性和name属性

value属性：用户输入的内容，提交之后会发送给后端服务器
name属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义
后端接收到数据的格式是：name的属性值 = value的属性值

密码框

场景：在网页中显示输入密码的表单控件

type属性值：password

常用属性（同文本框）：

placeholder 占位符，提示用户输入内容的文本

注意点：

•type属性值不要拼错或者多加空格，否则相当于设置了默认值状态：text→文本框

单选框

场景：在网页中显示多选一的单选表单控件

type属性值：radio

常用属性：

name 分组，有相同name属性的单选框为一组，一组中同时只能有一个被选中
checked 默认选中

注意点：

name属性对于单选框有分组功能
有相同name属性值的单选框为一组，一组中只能同时有一个被选中

多选框（复选框）

场景：在网页中显示多选多的多选表单控件

type属性值：checkbox

常用属性（同单选框）：

checked 默认选中

文件选择框

场景：在网页中显示文件选择的表单控件

type属性值：file

常用属性：

multiple 多文件选择

表单按钮

场景：在网页中显示不同功能的按钮表单控件

type属性值：

标签名	type属性值	说明
input	submit	提交按钮，点击之后提交数据给后端服务器
input	reset	重置按钮，点击之后回复表单默认值
input	button	普通按钮，默认无功能，之后配合js添加功能

注意点：如果需要使用功能：需要配合form标签一起使用（使用form标签把表单标签一起包裹起来即可）

7.2 button按钮标签

Ø 场景：在网页中显示用户点击的按钮

Ø 标签名：button

Ø type属性值（同input的按钮系列）：

标签名	type属性值	说明
button	submit	提交按钮，点击之后提交数据给后端服务器
button	reset	重置按钮，点击之后回复表单默认值
button	button	普通按钮，默认无功能，之后配合js添加功能

Ø 注意点：

谷歌浏览器中button默认是提交按钮
button标签是双标签，更便于包裹其他内容：文字、图片等

7.3 select 下拉菜单标签

Ø 场景：在网页中提供多个选择项的下拉菜单表单控件

Ø 标签组成：

select标签：下拉菜单的整体
option标签：下拉菜单的每一项

Ø 常见属性：

selected：下拉菜单的默认选中

7.4 textarea 文本域标签

Ø 场景：在网页中提供可输入多行文本的表单控件

Ø 标签名：textarea

Ø 常见属性：

cols：规定了文本域内可见宽度
rows：规定了文本域内可见行数

Ø 注意点：

右下角可以拖拽改变大小
实际开发时针对于样式效果推荐用CSS设置

7.5 label标签

Ø 场景：常用于绑定内容与表单标签的关系

Ø 标签名：label

Ø 使用方法①：

使用label标签把内容（如：文本）包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值

Ø 使用方法②：

直接使用label标签把内容（如：文本）和表单标签一起包裹起来
需要把label标签的for属性删除即可

<input type="checkbox" id="one" >
<label for="one">文本呢</label>

<label>
    <input type="checkbox" >文本内容
</label>

8、语义化标签

8.1 没有语义的布局标签-div和span

场景：实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签

div标签：一行只显示一个（独占一行）

span标签：一行可以显示多个

8.2 有语义的布局标签

场景：在HTML5新版本中，推出了一些有语义的布局标签供开发者使用

标签：

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章

注意点：

以上标签显示特点和div一致，但是比div多了不同的语义

9、字符实体

9.1 HTML中的空格合并现象

场景：如果在html代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格
在网页中展示特殊符号效果时，需要使用字符实体替代

结构：&英文;

常见字符实体：

显示结果	描述	实体名称
	空格
大于号		>
<	小于号	<

四、CSS基础

1、选择器

选择器类型	结构	注意点
id选择器	#id属性值 { css属性名：属性值； }	一个标签上只能有一个id属性值，一个id选择器只能选中一个标签
标签选择器	标签名 { css属性名：属性值； }	标签选择器无论嵌套关系有多深，都能找到对应的标签
后代选择器	选择器1 选择器2 { css属性名：属性值； }	选择器与选择器之间用空格隔开
子代选择器	选择器1>选择器2 { css属性名：属性值； }	子代只包括儿子
类选择器	.类名 { css属性名：属性值； }	类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
通配符选择器	*{ css属性名：属性值； }	开发中使用极少
伪类选择器	选择器:伪类	为选择器增加某种状态，比如选择器:hover表示选中鼠标悬停在元素上的状态，设置样式
并集选择器	选择器1 ，选择器2 { css }	同时选择多组标签
并集选择器	选择器1选择器2 { css }	选择器之间是紧挨着的

2、字体和文本样式

2.1 字体

字体大小： font-size
- 数字+px
字体粗细：font-weight
- 正常：normal 或 400
- 加粗：bold 或 700
字体样式：font-style
- 正常：normal
- 倾斜：italic
字体系列：font-family
- 具体字体1,具体字体2,具体字体3,具体字体4,...,字体系列
字体连写：font
- font : style weight size family;

2.2 文本样式

文本缩进 text-indent
- 数字 + px / em
文本水平对齐方式 text-align
- left / center / right
文本修饰 text-decoration
- text-align : center 能让哪些元素水平居中？
  1. 文本
  2. span标签、a标签
  3. input标签、img标签
- 如果需要让以上元素水平居中， text-align : center 需要给以上元素的 父元素 设置

2.3 行高

line-height
控制一行的上下间距
数字 + px
应用
1. 让单行文本垂直居中可以设置 line-height : 文字父元素高度
2. 网页精准布局时，会设置 line-height : 1 可以取消上下间距

3、背景相关属性

属性	属性名	属性值
背景颜色	background-color	默认值伪透明：rgba(0,0,0,0)、transparent
背景图片	background-image	背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的
背景平铺	background-repeat	repeat(默认)/no-repeat/repeat-x(水平方向平铺)/repeat-y(垂直方向平铺)
背景位置	background-position	可以为方向名词，也可以为数字加px
背景	background	background：color image repeat position

4、元素显示模式

4.1 块级元素

显示特点：
1. 独占一行（一行只能显示一个）
2. 宽度默认是父元素的宽度，高度默认由内容撑开
3. 可以设置宽高
代表标签： div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

4.2 行内元素

显示特点：
1. 一行可以显示多个
2. 宽度和高度默认由内容撑开
3. 不可以设置宽高
代表标签： a、span 、b、u、i、s、strong、ins、em、del……

4.3 行内块元素

显示特点：
1. 一行可以显示多个
2. 可以设置宽高
代表标签： input、textarea、button、select……

4.4 元素显示模式转换

display: block/inline-block/inline

4.5 居中方法总结

水平居中
1. text-align：center 文本，行内元素，行内块元素如input、img
2. margin：0 auto 块级元素，要求自己宽度已知，否则则表示占满父元素的宽度
垂直居中
1. line-height 单行文本，设置为与父元素高度相同

5、CSS特性

5.1 继承性

➢ 继承性的特性是什么？

子元素有默认继承父元素样式的特点

➢ 有哪些常见属性可以继承？

color
font-style、font-weight、font-size、font-family
text-indent、text-align
line-height

5.2 层叠性

➢ 特性：

给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效

➢ 注意点：

当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

5.3 优先级

➢ 特性：

不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式

➢ 优先级公式：

继承 < 通配符选择器 < 标签选择器（伪元素选择器：：before） < 类选择器（伪类选择器） < id选择器 < 行内样式 < !important

➢ 注意点：

!important写在属性值的后面，分号的前面！
!important不能提升继承的优先级，只要是继承优先级最低！
实际开发中不建议使用 !important 。

➢ 权重叠加计算：

先比较行内样式的个数，如果不相同，则选择大的那方；再比较id选择器、类选择器、标签选择器。如果都相同，则谁再最后谁有效。

6、盒子模型

6.1 盒子模型的介绍

盒子的概念
1. 页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局
2. 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子
盒子模型

➢ CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型

6.2 边框

border:10px solid red; 即为 border-width、border-style 、border-color的连写形式
border-方位名词 给某个方向单独设置边框，如 border-top：10px dashed yellow；

6.3 内边距

➢ 需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？

给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大？

➢ 解决方法 ① ：手动内减

操作：自己计算多余大小，手动在内容中减去

缺点：项目中计算量太大，很麻烦

➢ 解决方法 ② ：自动内减

操作：给盒子设置属性 box-sizing : border-box ; 即可

优点：浏览器会自动计算多余大小，自动在内容中减去

➢ 不会撑大盒子的特殊情况（块级元素）

如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子

6.4 外边距

➢ 作用：设置边框以外，盒子与盒子之间的距离

➢ 场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的margin和padding，后续自己设置

比如：body标签默认有margin：8px
比如：p标签默认有上下的margin
比如：ul标签默认由上下的margin和padding-left

6.5 外边距折叠现象

➢ 场景1 ：垂直布局的块级元素，上下的margin会合并

➢ 结果：最终两者距离为margin的最大值

➢ 解决方法：避免就好，只给其中一个盒子设置margin即可，或者采用BFC对两个块进行隔离

➢ 场景2 ：互相嵌套的块级元素，子元素的 margin-top 会作用在父元素上

➢ 结果：导致父元素一起往下移动

➢ 解决方法：

给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
给父元素设置overflow：hidden
转换成行内块元素
设置浮动

五、CSS布局-浮动

1、伪类选择器

目标：能够使用 结构伪类选择器在HTML中定位元素

作用与优势：
1. 作用：根据元素在HTML中的结构关系查找元素
2. 优势：减少对于HTML中类的依赖，有利于保持代码整洁
3. 场景：常用于查找某父级选择器中的子元素
选择器
- p:first-of-type 选择属于其父元素的首个元素
- p:last-of-type 选择属于其父元素的最后元素
- p:only-of-type 选择属于其父元素唯一的元素
- p:only-child 选择属于其父元素的唯一子元素
- p:nth-child(2) 选择属于其父元素的第二个子元素
- p:first-child 选择属于其父元素的第一个p元素
- p:last-child 选择属于其父元素的最后一个p元素
- p:nth-last-child(n) 选择属于其父元素的倒数第几个p元素

链接伪类选择器

➢ 场景：常用于选中超链接的不同状态

➢ 选择器语法：

a:link (选中a链接 未访问过 的状态)
a:visited (选中a链接 访问之后 的状态)
a:hover (选中 鼠标悬停 的状态)
a:active (选中 鼠标按下 的状态)

➢ 注意点：

如果需要同时实现以上四种伪类状态效果，需要按照 LVHA 顺序书写
记忆口诀：男盆友送了你一个 LV 包包，你开心的 HA 哈笑
其中 :hover伪类选择器使用更为频繁，常用于选择各类元素的悬停状态

焦点伪类选择器

➢ 场景：用于选中元素获取焦点时状态，常用于表单控件

➢ 选择器语法： :focus

➢ 注意点：

表单控件获取焦点时默认会显示外部轮廓线

2、伪元素

目标：能够使用 伪元素 在网页中创建内容

➢ 伪元素：一般页面中的非主体内容可以使用伪元素

➢ 区别：

元素：HTML 设置的标签
伪元素：由 CSS 模拟出的标签效果，并不存在于DOM中

➢ 种类

::before 在该元素内容的前面添加一个伪元素
::after 在该元素内容的后面添加一个伪元素

➢ 注意点：

必须设置content属性才能生效
伪元素默认是行内元素

3、标准流

➢ 标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素

➢ 常见标准流排版规则：

块级元素：从上往下，垂直布局，独占一行
行内元素或行内块元素：从左往右，水平布局，空间不够自动折行

4、浮动

➢ 浮动的作用是什么？

早期作用：图文环绕
现在作用：用于布局，让垂直布局的盒子变成水平布局，如：一个在左，一个在右

➢ 左浮动的属性是？右浮动的属性是？

左浮动：float : left
右浮动：float : right

4.1 浮动的特点

浮动元素会脱离标准流（简称：脱标），在标准流中不占位置，相当于从地面飘到了空中。
浮动元素比标准流高半个级别，可以覆盖标准流中的元素
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
浮动元素有特殊的显示效果。一行可以显示多个；可以设置宽高

➢ 注意点：

浮动的元素不能通过text-align:center或者margin:0 auto 设置

5、清除浮动

➢ 含义：清除浮动带来的影响

影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

➢ 原因：子元素浮动后脱标 → 不占位置

➢ 目的：需要父元素有高度，从而不影响其他网页元素的布局

清除浮动的方法

直接设置父元素高度
额外标签法

➢ 操作：
1. 在父元素内容的最后添加一个块级元素
2. 给添加的块级元素设置 clear:both
➢ 缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
单伪元素清除法

➢ 操作：用伪元素替代了额外标签

父元素::after{
   content: '';
   display: block;
   clear: both;
}

双伪元素清除法

父元素::before 是为了解决外边距塌陷问题，外边距塌陷：父子元素，都是块级，子级加margin会影响父级的位置

父元素::before,父元素::after{
   content: '';
   display: table;
}
父元素::after{
   clear: both;
}

overflow:hidden

6、BFC

➢ 块格式化上下文（Block Formatting Context）：BFC

是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

➢ 创建BFC方法：

根元素，即html
float的值不为none（默认）
overflow的值不为visible（默认）
display的值为inline-block、table-cell、table-caption或flex
position的值为absolute或fixed

➢ BFC盒子常见特点：

BFC盒子会默认包裹住内部子元素（标准流、浮动）→ 应用：清除浮动
BFC盒子本身与子元素之间不存在margin的塌陷现象 → 应用：解决margin的塌陷

六、CSS布局

1. 定位

1.1 定位介绍

网页常见布局方式

标准流
1. 块级元素独占一行 → 垂直布局
2. 行内元素/行内块元素一行显示多个 → 水平布局
浮动

可以让原本垂直布局的块级元素变成水平布局
定位
1. 可以让元素自由的摆放在网页的任意位置
2. 一般用于盒子之间的层叠情况

1.2 定位方式

定位方式	属性值	相对于谁移动	是否占位置
静态定位	position: static	不能通过方位属性来移动，就是标准流	占位置
绝对定位	position: absolute	相对于最近的且有定位的祖先元素移动	占位置
相对定位	position: relative	相对于自己原来的位置	不占位置，脱离标准流
固定定位	position: fixed	相对于浏览器可视区域	不占位置，脱离标准流

1.3 元素层级问题

➢ 不同布局方式元素的层级关系：

• 标准流 < 浮动 < 定位

➢ 不同定位之间的层级关系：

• 相对、绝对、固定默认层级相同

• 此时HTML中写在下面的元素层级更高，会覆盖上面的元素

➢ 场景：改变定位元素的层级

➢ 属性名：z-index

➢ 属性值：数字

• 数字越大，层级越高

2. 装饰

2.1 垂直对齐方式

➢ 设置行内/行内块元素垂直对齐方式的属性是什么？

vertical-align

➢ 项目中 vertical-align 可以解决的问题

文本框和表单按钮无法对齐问题
input和img无法对齐问题
div中的文本框，文本框无法贴顶问题
div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
使用line-height让img标签垂直居中问题

➢ 注意点：

学习浮动之后，不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题。推荐优先使用浮动完成效果

2.2 边框圆角

➢ 如果需要在网页中用盒子展示出一个正圆，应该如何完成？

盒子必须是正方形
设置 → border-radius:50%

➢ 如果需要在网页中用盒子展示出一个胶囊按钮，应该如何完成？

盒子要求是长方形
设置 → border-radius：盒子高度的一半

2.3 溢出部分显示效果

➢ 溢出部分：指的是盒子内容部分所超出盒子范围的区域

➢ 场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……

➢ 属性名：overflow

➢ 常见属性值：visible(默认值，溢出部分可见) ，hidden（溢出部分隐藏），scroll（无论是否溢出，都显示滚动条），auto（根据是否溢出，自动显示或隐藏滚动条）

2.4 元素本身隐藏

➢ 场景：让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏 ➢ 常见属性：

visibility：hidden
display：none

➢ 区别：

visibility：hidden 隐藏元素本身，并且在网页中 占位置
display：none 隐藏元素本身，并且在网页中 不占位置

➢ 注意点：

开发中经常会通过 display属性完成元素的显示隐藏切换
display：none；（隐藏）、 display：block；（显示）

2.5 元素整体不透明度

➢ 场景：让某元素整体（包括内容）一起变透明

➢ 属性名：opacity

➢ 属性值：0~1之间的数字

1：表示完全不透明；0：表示完全透明

➢ 注意点：

opacity会让元素整体透明，包括里面的内容，如：文字、子元素等

2.6 表格边框合并

➢ 场景：让相邻表格边框进行合并，得到细线边框效果

➢ 代码：border-collapse：collapse；