认识两位先驱

图灵

• 二战时期，破译德军编码——英格玛。

• 加快了二战的结束。

• 设立图灵奖，人工智能之父 。

冯诺依曼

• 制订了现代计算机标准——冯诺依曼体系结构。

• 提出计算机要采用二进制，明确计算机组成部分。

• 现代计算机之父。

计算机基础

C/S架构与B/S架构

C/S架构

• 需要安装

• 偶尔更新

• 不跨平台

B/S架构

• 无需安装

• 无需更新

• 可跨平台

浏览器相关知识

五大浏览器四大内核

• Chrome 👉早期webkit现在Blink

• Safari👉webkit

• IE👉Trident

• Firefox👉Gecko

• Opera👉Blink

网页相关概念

• 一个网页由HTML（结构），CSS（表现）， JavaScript（行为）三部分组成。

HTML简介

• 全称：HyperText Markup Language（超文本标记语言）

• 超文本：和普通文本相比，内容更丰富。

• 标记：文本变成超文本就需要用到各种标记符号。

• 语言：每个标记的写法、读音、使用规则、构成标记语言。

HTML最开始由IETF正式发布，后来给了W3C接管，HTML只能打开网页，由于当时的对游戏影音的需求比较大，就出现了Flash，直到WHATWG和W3C合作在2014年的时候由W3C发布了HTML5。

准备工作

• 选择图片的打开方式。

• 更改图片默认的打开方式。

HTML初体验

1. 第一步：鼠标右键→新建→文本文档→输入以下内容并保存。

2. 第二步：修改后缀为.html 也可以是.htm，然后双击打开即可。

3. 程序员写的代码叫源代码，要交给浏览器进行渲染。

4. 借助浏览器查看源代码：网页空白处右键→查看网页源代码。

HTML标签

1. 标签又称元素，是HTML基本组成单位。

2. 标签分为：单标签和双标签（绝大多数都是双标签）

3. 标签不分大小写，建议使用规范的小写。

• 双标签

• 单标签

• 标签之间的关系：并列关系、嵌套关系，可以使用tab键进行缩进。看如下例子。

HTML标签属性

1. 用于给标签提供附加信息。

2. 可以写在：起始标签或单标签中，形式如下：

3. 有些特殊的属性，没有属性名，只有属性值，例如：

4. 不同的标签，有不同的属性；也有一些通用属性（在任何标签都能写）

5. 属性名、属性值不能乱写，都是W3C规定好的。

6. 属性名、属性值，都不区分大小写，建议小写。

7. 双引号也可以写成单引号，甚至不写都行，但还是建议写双引号。

8. 标签中不要出现同名属性，否则后写的会失效，例如：

HTML基本结构

检查和查看网页源代码的区别

• 查看网页源代码是：程序员编写的源代码。

• 检查是：经过浏览器“处理”后的源代码。

• 日常开发中，检查用得最多。

网页的基本结构如下

1. 想要呈现在网页中的内容写在body标签中。

2. head标签中的内容不会出现在网页中。

3. head标签中的title标签可以指定网页的标题。

安装VSCode

1. 安装中文语言包。

2. 使用VSCode打开文件夹的两种方式。

3. 调整字体大小。

4. 设置主题。

5. 安装图标主题：bscod-icons。

安装Live Server插件

1. 可以更加方便的打开网页。

2. 打开网页的方式更贴近项目上线。

3. 代码出现改动后，可以自动刷新。

4. 根据自己的情况，配置一下VSCode的自动保存。

5. 使用Live Server之前，务必VSCode打开的是文件夹。

6. 打开的网页必须是标准的HTML结构，否则无法刷新。

HTML注释

1. 特点：注释的内容会被浏览器忽略，不呈现在页面中，但源代码依然可见。

2. 作用：对代码进行解释和说明。对某段代码临时不参与运行。

3. 注释不可以嵌套。

HTML文档说明

1. 作用：告诉浏览器当前网页的版本。

2. 新写法：W3C推荐使用HTML5写法。

3. 文档声明必须写在网页第一行，且在html标签的外侧。

字符编码

1. 计算机对数据的操作：存储：对数据编码。读取：对数据解码。

2. 编码解码会遵循一点的规范叫字符集。

3. 编码出错不可以挽回数据，解码出错可以挽回数据。

4. 平时编写代码时，统一才有UTF-8编码（最稳妥）。

HTML设置语言

1. 虽然浏览器默认是UTF-8，防止出错我们最好通过meta标签配合charset属性指定字符编码。

2. 让浏览器显示对应的翻译提示。

3. 有利于搜索引擎优化。

4. zh代表中文-CN代表中国大陆。还有一种写法zh-Hans，zh代表中文，Hant代表简体。

HTML标准结构

1. HTML标准结构如下：

2. 输入！回车快速生成标准结构。

3. 可在VSCode内置插件emmet中配置生成结构的属性定制。

4. 在存放代码的文件中（VSCdoe打开的文件夹），存放一个favicon.ico图片，可以配置网站图标。

开发者文档

1. 标签的使用，标签文档等等的学习可以通过下面三个网站学习到。

• W3C官网：www.w3c.org

• W3Sshool：www.W3school.com.cn(大陆网站)

• MDN：developer.mozilla.org（平时用最多）

排版标签

1. h1是标题最好只写一个，h2-h6能适当多写。

2. h1-h6不能互相嵌套。

3. p标签比较特殊，它里面不能有：h1-h6、p、div标签。

语义化标签

1. 概念：用特定的标签，去表达特定的含义。

2. 原则：标签默认的效果不重要（后期可以通过css控制），语义最重要。

3. 语义化标签的意义是：代码结构清晰可读性强，有利于SEO，方便设备解析。

块级元素与行内元素

1. 块级元素：独占一行。（排版标签都是块级元素）。

2. 行内元素：不占一行。

文本标签

1. 用于包裹：词汇、短语等等。

2. 通常写在排版标签里。

3. 排版标签更宏观（一段文字），文本标签更微观（词汇、短语）。

4. 文本标签通常都是行内元素。

不常用的文本标签

1. 这些不常用的标签，编码时不用过于纠结，酌情而定。

2. 下面举例的不常用标签中blockquote与address是块级元素，其他的文本标签都是行内元素。

3. 有些语义感不强的标签，一般很少用，例如：small、b、u、q、blokquote。

4. HTML标签太多了，记住重要的，语义感强的标签即可，例如：h1-h6、p、div、 strong、span。

图片标签

基本使用

1. 标签：img

2. 标签语义：图片

属性	作用
src	图片路径（地址），图片的具体位置
alt	图片描述
width	图片宽度（单位：像素）例如：200px或200
height	图片高度（单位：像素）例如：200px或200

3. 尽量不要同时修改图片的宽和高，可能会造成比例失调。

4. 暂时认为img是行内元素。（css后面会学到它具体属于什么元素）。

5. alt的属性作用：
• 浏览器可以通过alt得知图片内容（主要作用）
• 但图片无法显示时，浏览器会显示alt属性值来告知图片的大概内容
• 盲人阅读器会朗读alt属性的值

图片相对路径和绝对路径

./	同级	引入【怪兽.jpg】：<ing src=”./怪兽。jpg”>
/	下一级	引入【喜羊羊.jpg】：<img src=”./a/喜羊羊.jpg”>
../	上一集	引入【奥特曼.jpg】：<ing src=”../奥特曼.jpg”>

1. 相对路径注意事项：
• 相对路径的./ 可以省略不写。
• 相对路径依赖的是当前位置，后期若调整了文件位置，那么文件中的路径也要修改。

2. 上面说完相对路径，下面来看看绝对路径吧。
• 绝对路径以根位置作为参考点，去建立路径。
• 绝对路径分为两种，一种是磁盘路径，另一种是网络路径。
• 本地绝对路径：E:/a/b/c/奥特曼.jpg（磁盘路径）（很少使用）。
• 网络绝对路径：http://www.atguigu.com/images/index_new/logo.png。
• 使用本地绝对路径，一旦更换设备，路径处理起来就比较麻烦，所以很少使用。
• 使用网络绝对路径，确实方便，但要注意的是若服务器开启了防盗链就会造成图片引入失败。

常见图片格式

图片的格式非常多，下面介绍的这些只是常见的，我们前端人员经常接触到的。

1. jpg格式
• 概述：扩展名为.jpg或者.jpeg，是一种有损的压缩格式（把肉眼看不出的细节抛弃了）。
• 主要特点：支持的颜色丰富、占用空间较小，不支持透明背景，不支持动图。
• 使用场景：对图片细节没有极高要求的场景，例如：网站的产品宣传图等（该格式网页中很常见）。

2. png格式
• 概述：扩展名为.png，是一种无损的压缩格式，能够更高质量的保存图片。
• 主要特点：支持的颜色丰富、占用空间略大、 、不支持动态图。
• 使用场景：想让图片有透明背景，想要高质量的呈现图片，例如：公司logo图、重要的配图等。

3. bmp格式
• 概述：扩展名为.bmp，不进行压缩的一种格式，在最大程度上保留图片更多的细节。
• 主要特点：支持的颜色丰富，保留的细节更多，占用空间极大，不支持透明背景，不支持动态图。
• 使用场景：对图片细节要求极高的场景，例如：一些大型游戏中的图片。（网页中很少使用）

4. gif格式
• 概述：扩展名为.gif，仅支持256种颜色，色彩呈现不是很完整。
• 主要特点：支持的颜色较少，支持简单透明背景，支持动态图。
• 使用场景：网页中的动态图片。

5. webp格式
• 概述：扩展名为.webp，谷歌推出的一种格式，专门用来在网页中呈现图片。
• 主要特点：具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题。
• 使用场景：网页中的各种图片。

6. base64格式
• 本质：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。
• 原理：把图片进行bsse64编码，形成一串文本。
• 如何生产：借助一些工具或网站。
• 如何使用：直接作为img标签的src属性的值即可，并且不受文件位置的影响。
• 使用场景：一些较小的图片，或者需要和网页一起加载的图片。

超链接

1. 标签：a

2. 标签语义：超链接

3. 主要作用：从当前页面进行跳转。

属性	作用
href	要跳转的具体位置
target	跳转时如何打开页面，通常值如下：_self：在本页签中打开。_blank：在新页签中打开。

4. 跳转页面举例子：

5. 注意点：
• 代码中的多个空格，多个回车，都会被浏览器解析成一个空格。
• 虽然a是行内元素，但a元素可以包裹除它自身外的任何元素。

跳转到文件

1. 若浏览器无法打开文件，则会引导用户下载。

2. 也可以通过通过download 属性触发强制下载，属性值既为下载文件的名称。

跳转到锚点

设置锚点

1. 锚点是网页中的一个标记点。

2. 设置锚点有两种方式：

3. 设置锚点需要注意：
• 具有href属性的a标签是超链接，具有name属性的a标签是锚点。
• name和id都是区分大小写的，且id最好别是数字开头。

跳转锚点

唤起指定应用

1. 通过a标签，可以唤起设备应用程序。

超文本的真正含义

1. 超文本：是一种组织信息的方式，通过超链接将不同空间的文字、图片等各种信息组织在一起，能从当前阅读的内容，跳转到超链接所指向的内容（页面、文件、锚点、应用）。

列表

有序列表：ol

1. 概念：有顺序或侧重顺序的列表。

无序列表：ul

1. 概念：无顺序或不侧重顺序的列表。

列表嵌套

1. 概念：列表中的某个项内容，又包含一个列表（注意：嵌套时务必吧结构写完整）

2. 注意：li标签组好写在ul或ol中，不要单独使用。

自定义列表：dl

1. 概念：所谓的自定义列表，就是一个包含术语名称以及术语描述的列表。

2. 一个dl就是一个自定义列表，一个dt就是通过术语名称，一个dd就是术语描述（可以有多个）

表格

基本结构

1. 一个完整的表格由：表格标题、表格头部、表格主体、表格脚注，四部分组成。

2. 表格涉及到的标签：
• table：表格
• caption：表格标题
• thead：表格头部
• tbody：表格主体
• tfoot：表格脚注
• tr：每一行
• th、td：每个单元格（备注：表格头部中用th，表格主体和脚注用：td）







常用属性

1. 表格：teble （双标签）
• width：设置表格宽度
• height：设置表格最小高度，表格最终高度可能比设置的值大。
• border：设置表格边框宽度
• cellspacing：设置单元格之间的间距。
2. 表格头部：thead （双标签）
• height：设置表格头部高度。
• align：设置单元格的水平对齐方式，可选值如下：
• left：左对齐
• center：中间对齐
• right：右对齐
• valign； 设置单元格的垂直对齐方式，可选值如下：
• top：顶部对齐
• middle：中间对齐
• bottom：底部对齐
3. 表格主体：tbody （双标签）
• 常用属性与thead相同
4. 行：tr （双标签）
• 常用属性与thead相同
5. 表格脚注：tfoot （双标签）
• 常用属性与thead相同
6. 普通单元格：td （双标签）
• width：设置单元格的宽度，同列所有单元格都受影响
• heigth：设置单元格的高度，同列所有单元格都受影响
• align：设置单元格的水平对齐方式
• valign：设置单元格的垂直对齐方式
• rowspan：指定要跨的行数
• colspan：指定要跨的列数
7. 表头单元格：th（双标签）
• 常用属性与td相同
注意：
• <table>元素的border属性可以控制表格边框，但border值的大小，并不控制单元格边框的宽度，只能控制表格最外侧的宽度，这个问题要靠后期CSS控制解决。
• 给某个th或td设置了宽度之后，它们所在的那一列的宽度就确定了。
• 给某个th或td设置了高度之后，它们所在的那一行的高度就确定了。

跨行与跨列

1. 跨行：rowspan“需要跨的行数”
• rowspan是td标签的属性

2. 跨列：colspan“需要跨的列数”
• colspan是td标签的属性

常用标签补充

• 不要在<br>来增加文本之间的行间隔，应使后面即将学到的 CSS margin属性。

• <hr>的语义是分隔，如果不想要语义，只是想画一条水平线，那么应当使用CSS完成。

表单

基本结构

• action：用于指定表单的提交地址（需要于后端人员沟通后确定）

• target：用于控制表单提交后，如何打开页面，常用值如下：
• _self：在本窗口打开
• _blank：在新窗口打开

• method：用于控制表单的提交方式，暂时只需了解

• type：设置输入框的类型，目前用到的值是text，表示普通文本

• name：用于指定提交数据的名字（需要与后端人员沟通后确定）

表单_文本框与密码框

常用的表单控件

1. 文本输入框
常用属性如下：
• name属性：数据的名称
• value属性：输入框的默认输入值
• maxlength属性：输入框最大可输入长度

2. 密码输入框
常用属性如下：
• name属性：数据名称
• value属性：输入框的默认输入值（一般不用，无意义）
• maxlength属性：输入框最大可输入长度

3. 单选框
常用属性如下：
• name属性：数据的名称，注意：想要单选效果，多个radio的name属性值保持一致
• value属性：提交数据值
• checked 属性：让该当单选按钮默认选中

4. 复选框
常用属性如下：
• name属性：数据的名称
• value属性：提交数据值
• checked属性：让该复选框默认选中

5. 隐藏域
作用：用户不可见的一个输入区域，作用是：提交表单的时候，携带一些固定的数据。
常用的属性如下：
• 隐藏域需要把input的type属性填写为hedden
• name属性：指定数据的名称
• value属性：指定的真正提交的数据

6. 提交按钮
注意：
• button标签type属性的默认值是submit (默认提交)
• button不要指定name属性
• input标签编写的按钮，使用value属性指定按钮文字

7. 重置按钮
注意：
• button不要指定name属性
• input标签编写的按钮，使用value属性指定按钮的文字

8. 普通按钮
注意：
• 不同按钮的type值为button，若不写type值则默认值是submit会引起表单的提交

9. 文本域
常用属性如下：
• rows属性：指定默认显示的行数，会影响文本域的高度
• cols属性：指定默认显示的列数，会影响文本域的宽度
• 不能编写type属性，其他属性，与普通文本输入框一致

10. 下拉框
常用的属性：
• name属性：指定数据的名称
注意事项：
• option标签设置value属性，如果没有value属性，提交的数据是option中间的文字；如果设置了value属性，提交的数据就是value的值（建议设置value属性）
• option标签设置了selected属性，表示默认选中

11. 禁用表单控件
作用：给表单控件的标签设置disabled既可禁用表单控件
使用访问：input、textarea、button、select、option都可以设置disabled属性

12. label标签
作用：label标签可与表单控件相关联，关联之后点击文字，与只对应的表控件就会获取焦点
两种与label关联方式如下：
• 第一种是让label标签的for属性的值等于表单控件的id
• 第二种是把表单控件套在label标签里面

13. fieldset与legend的使用
作用：fieldset可以为表单控件分组、legend标签是分组的标签

14. 框架标签
标签：iframe
标签语义：框架（功能：在网页中嵌入其他文件）
属性：
• name：框架名字，可以与target属性配合
• width：框架的宽度
• height：框架的高度
• frameborder：是否显示边框，值：0或1
应用场景：
• 在页面中嵌入广告
• 与超链接或表单的target配合，展示不同的内容

常见字符实体

符号	描述	实体名称	实体编号
	空格	 	 
<	小于号	&lt;	&#60;
>	大于号	&gt;	&#62;
&	和号	&amp;	&#38;
“	引号	&quot;	&#34;
‘	反引号	&acute;	&#180;
￥	元	&yen;	&#165;
©	版权	&copy;	&#169;
®	注册商标	&reg;	&#174;
™	商标	&trade;	&#8482;
×	乘号	&times;	&#215;
÷	除号	&divide;	&#247;

完整实体列表请参考：HTML Standard（whatwg.org）

HTML全局属性

1. 属性：id
含义：给标签指定唯一标识，注意：id不能在同一个文件中重复
作用：可以让label标签与表单控件相关联；也可以与CSS，JavaScript配合使用。
注意：不能在一下HTML元素中使用：<head>、<html>、<meta>、<script>、<style>、<title>
2. 属性：class
作用：给标签指定类名，随后通过CSS就可以给标签设置样式
3. 属性：style
作用：给标签设置CSS样式
4. 属性：dir
作用：内容的方向，值：ltr、rtl
注意：不能在一下HTML元素中使用：<head>、<html>、<meta>、<script>、<style>、<title>
5. 属性：title
作用：给标签设置一个文字提示，一般超链接和图片用得比较多
6. 属性：lang
作用：给标签指定语言
注意：不能在一下HTML元素中使用：<head>、<html>、<meta>、<script>、<style>、<title>
完整的全局列表，请参考 ：全局属性-HTML（超文本标记语言）| MDN

meta元信息

CSS简介

• CSS的全称为：层叠样式表（Cascading Style Sheets）
• CSS也是一种标记语言，用于给HTML结果设置样式，例如：文字大小、颜色、元素宽高等等。
• 简单理解：CSS可以美化HTML，让HTML更漂亮
• 核心思想：HTML搭建结构，CSS添加样式，实现了结构与样式的分离

CSS的编写位置

行内样式

语法：写在标签style属性中（又称：内联样式）
注意：
• style属性的值不能随便写，写要符合CSS语法规范，是名：值；的形式
• 行内样式表，只能控制当前标签的样式，对其他标签无效
存在的问题：
• 书写繁琐、样式不能复用、并且没有体现：出结构与样式分离的思想，不推荐大量使用，只有对当前元素添加简单样式时才偶尔使用。

内部样式

语法：写在html页面内部，将所有的CSS代码取出来，单独放在<style>标签中
注意点：
• <style>标签理论上可以放在HTML文档的任何地方，但一般放在<head>标签中
• 这种写法：样式可以复用，代码结构也更清晰
存在的问题：
• 并没有实现：结构与样式完全分离
• 多个HTML页面无法复用样式

外部样式

语法：写一个单独的.css文件，随后在HTML文件中引入使用
• 步骤1
• 步骤2
注意点：
• <link>标签要写在<head>标签中
• <link>标签属性说明：
• rel：（relation：关系）说明引入的文档与当前文档之间的关系
• href：引入的文档来自于哪里
• 外部样式的优势：样式可以复用，结构清晰，可触发浏览器的缓存机制，提高访问速度，实现了机构与样式的完全分离。
• 实际开发中，几乎都使用外部样式，这是最推荐的使用方式

样式表的优先级

优先级规则：行内样式>内部样式=外部样式
7. 内部样式、外部样式，这二者的优先级相同，且：后面的会覆盖前面的（简记：后来者居上）
8. 同一个样式表中，优先级也和编写顺序有关，且：后面的会覆盖前面的（简记：后来者居上）

分类	优点	缺点	使用频率	作用范围
行内样式	1.优先级最高	1.结构与样式未分离 2.代码结构混乱 3.样式不能复用	很低	当前标签
内部样式	1.样式可复用 2.代码结构清晰	1.结构与样式未彻底分离 2.样式不能多页面复用	一般	当前页面
外部样式	1.样式可多页面复用 2.代码结构清晰 3.可触发浏览器的缓存机制 4.结构与样式彻底分离	1.需要引入才能使用	最高	多个页面

CSS语法规范



CSS语法由两部分构成：
• 选择器：找到添加样式的元素
• 声明块：设置具体的样式（声明块是由一个或多个声明组成的），声明的格式为：属性名：属性值；
注意：
• 最后一个声明后的分号理论上可以省略，但最好还是写上
• 选择器与声明块之间，属性名与属性值之间，均有一个空格，理论上能省略，但最好还是写上
CSS内注释的写法：
注释符号是/* */，*号与文本之间均要一个空格（非强制性）。

CSS代码风格

• 展开风格——开发是推荐，便于维护和调试
• 紧凑风格——项目上线是推荐，可减少文件体积
注意：
项目上线时，我们会通过工具（webpack）将【展开风格】的代码，变成【紧凑风格】，这样可以减少文件体积，节约网络流量，同时也能让用户打开网页时速度更快

CSS基本选择器

基本选择器包括：
9. 通配选择器
10. 元素选择器
11. 类选择器
12. id选择器

通配选择器

作用：可以选中所有的HTML元素
语法：
举例：
注意：目前来看通配选择器貌似有点鸡肋，但后面清除样式时，会对我们有很大帮助

元素选择器

作用：为页面中某种元素统一设置样式
语法：
举例；
注意：元素选择器无法实现差异化设置，例如上面的代码中吗，所有的p元素效果都一样

类选择器

作用：根据元素的class值，来选中某些元素
语法：
举例：
注意：
• 元素的class属性值不带.，但CSS的类选择器要带.
• class值，是我们自定义的，按照标准：不要使用纯数字、不要使用中文、尽量使用英文与数字的组合，若由多个单词组成，使用-做连接，例如：left-menu，且命名要有意义，做到“见名知意”
• 一个元素不能写多个class属性，下面是错误示例：
• 一个元素的class属性，能写多个值，要用空格隔开，例如：

ID选择器

作用：根据元素的id属性值，来准确的选中某个元素
语法：
举例：
注意：
• id属性值：尽量由字母、数字、下划线（_）、短杠（-）组成，最好以字母开头，不要包含空格、区分大小写
• 一个元素只能拥有一个id属性，多个元素的id属性值不能相同
• 一个元素可以同时拥有id和class属性

基本选择器总结

基本选择器	特定	用法
通配选择器	选中所有标签，一般用于清除样式	* {color:red}
元素选择器	选中所有同种标签，但是不能差异化选择	h1 {color：red}
类选择器	选中所有特定类名（class值）的元素——使用频率高	.say {color:red}
ID选择器	选中特定id值的那个元素（唯一的）	#earthy {color:red}

交集选择器

交集有并且的含义（通俗理解：既……又……）的意思，例如：年轻且长得帅

• 有标签名，标签名必须写在前面

• id选择器、理论上可以作为交集的条件，但实际应用中几乎不用——因为没有意义

• 交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是p元素又是span元素

• 用的最多的交集选择器是：元素选择器配合类名选择器，例如：p.beauty

并集选择器

所谓并集就是或者的含义（通俗理解：要么……要么……）的意思，例如：给我转10万块钱或者我报警。

多个选择器通过，连接，此处，的含义就是：或。

• 并集选择器，一般竖着写（清晰）

• 任何形式的选择器，都可以作为并集选择器的一部分

• 并集选择器，通常用于集体声明，可以缩小样式表体积

HTML元素间的关系

1. 父元素：直接包裹某个元素的元素，就是该元素的父元素

2. 子元素：被父元素直接包含的元素（简洁：儿子元素）

3. 祖先元素：父亲的父亲……，一直往外找，都是祖先（父元素也算是祖先元素的一种）

4. 后代元素：儿子的儿子……，一直往里找，都是后代（子元素也算是后代元素的一种）

5. 兄弟元素：具有相同父元素的元素，互为兄弟元素



后代选择器

作用：选中指定元素中，符合要求的后代元素
语法：选择器1 选择器2 选择器3…… 选择器n {}（先写祖先，再写后代）
注意：
• 选择器之间用空格隔开，空格可以理解为：“xxx中的”，其实就是后代的意思。
• 选择器1234……n，可以是我们之前学的任何一种选择器
举例：
注意：
• 后代选择器，最终选中的是后代，不选中祖先
• 儿子、孙子、重孙子，都算是后代
• 结果一定要符合之前讲的HTML嵌套要求，例如：不能p中写h1-h6

子代选择器

子代选择器又称：子元素选择器、子选择器

选择器之间，用>隔开，>可以理解为：“xxx的子代”，其实就是儿子的意思；选择器1234…n，可以是我们之前的任何一种选择器

• 子代选择器、最终选择的是子代，不是父级

• 子、孙子、重孙子、重重孙子……统称后代！，子代选择器的子是指儿子。

兄弟选择器

所谓的相邻，就是紧挨着他的下一个，简记：睡我下铺的兄弟

属性选择器

• [属性名]选中属性值符合一定要求的元素

• [属性名=“值”]选中包含某个属性，且属性值等于指定值的元素

• [属性名^=”值”]选中包含某个属性，且属性值以指定的值开头的元素

• [属性名$=“值”]选中包含某个属性，且属性值以指定的值结尾的元素

• [属性名*=“值”]选中包含某个属性，属性值包含指定值的元素

伪类选择器

如何理解“伪”？假的，不是真的。伪类它像类但不是类，是元素的一种特殊状态。

常用的伪类选择器

1. :link超链接未被访问的状态

2. :visited超链接访问过的状态

3. :hover鼠标悬停在元素上的状态

4. :active元素激活的状态 （按下鼠标不松开的状态）
注意：要遵循LVHA的顺序，既：link、visited、hover、active

5. :focus获取焦点的元素（表单类元素才能使用:focus伪类）
注意：当用户点击元素、触摸元素、或通过键盘的“tab”键等方式，选择元素时（输入状态），就是获得焦点

常用的伪类选择器

1. :first-child所以兄弟元素中的第一个

2. :last-child所有兄弟元素的最后一个

3. :nth-child(n)所有兄弟元素的第n个

4. :first-of-type所有同类型兄弟元素中的第一个

5. :last-of-type所有同类型兄弟元素中的最后一个

6. :nth-of-type(n)所有同类型兄弟元素中的第n个

1. 0或不写：什么都选不中（几乎不用）

2. n：选中所有子元素（几乎不用）

3. 1~正无穷的整数：选中对应序号的子元素

4. 2n或even：选中序号为偶数的子元素

5. 2n+1或odd：选中序号为奇数的子元素

6. -n+3：选中的是前3个

不常用的伪类选择器

1. :nth-last-child(n)所有兄弟元素中的倒数第n个

2. :nth-last-of-type(n)所有同类型兄弟元素中的倒数第n个

3. :only-child选中没有兄弟的元素

4. :only-of-type选择没有同类型兄弟的元素

5. :root根元素

6. :empty内容为空元素（空格也算内容）

否定伪类

UI伪类

1. :checked被选中的复选框或单选按钮

2. :enable可用的表单元素（没有disabled属性的）

3. :disabled不可用的表单元素（有disabled属性才可用）

目标伪类

1. :target选中锚点指向的元素

语言伪类

1. :lang()根据指定的语言选择元素（本质是看lang属性的值）

伪元素选择器

1. ::first-letter选中元素中的第一个文字

2. ::first-line选中元素中的第一行文字

3. ::selection选中被鼠标选中的内容

4. ::placeholder选中输入框的提示文字

5. ::before在元素最开始的位置，创建一个字元素（必须用content属性指定内容）

6. ::after在元素最后的位置，创建一个子元素（必须用content属性指定内容 ）

选择器的优先级

• 通过不同的选择器，选中相同的元素，并且为相同的样式名设置不同的值时，就发了样式冲突，此时就需要看优先级了

• 简单描述优先级：行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器

权重详细计算

1. 计算方式：每个选择器都可以计算出一组权重，格式为：(a,b,c)
• a：IP选择器的个数
• b：类、伪类、属性选择器的个数
• c：元素、伪元素选择器的个数
例如：

选择器	权重
ul>li	(0,0,2)
div ul>li p a span	(0,0,6)
#atguigu .slogan	(1,1,0)
#atguigu .slogan a	(1,1,1)
#atguigu .slogan a:hover	(1,2,1)

2. 比较规则：按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比，例如：

• (1,0,0) > (0,2,2)

• (1,1,0) > (1,0,3)

• (1,1,3) > (1,1,2)

1. 特殊规则：
• 行内样式权重大于所有选择器
• !important的权重大于行内样式，大于所有选择器，权重最高

CSS三大特征

1. 层叠性
• 概念：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）
• 冲突是指元素的同一个样式名，被设置了不同的值，这就是冲突

2. 继承性
• 概念：元素会自动拥有其父元素或其祖先元素上所设置的某些样式
• 规则：优先继承离得近的
• 常见的可继承属性：text-??, font-??, line-??, color…… （参考MDN网站，可查询属性是否可被继承）

3. 优先级

• 简单描述优先级：
• !important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器(*) >继承的样式

颜色的表示

表示方式一：颜色名

• 编写的方式：直接使用颜色对应的英文单词，编写比较简单，例如：
• 红色：red
• 绿色：green
• 蓝色：blue
• 紫色：purple
• 橙色：orange
• 灰色：gray

表示方式二：rgb或rgba

• 编写方式：使用红、黄、蓝这三种光的三原色进行组合
• r表示红色
• g表示绿色
• b表示蓝色
• a表示透明度

• 若三种颜色值相同，呈现的是灰色，值越大，灰色越浅

• rgb(0, 0, 0)是黑色，rgb(255, 255, 255)是白色

• 对于rgba来说，前三位的rgb形式要保持一致，要么都是0-255的数字，要么都是百分比

表示方式三：HEX或HEXA(十六进制的RBG)

• HEX的原理同与RGB一样，依然是通过：红、绿。蓝色进行组合，只不过要用6个数字，分成3组来表达
格式：#rrggbb
• 每一位数字的取值范围是：0~f，即：（0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f）
• 所以每一种光的最小值是：00，最大值是：ff

表达方式四：HSL或HSLA

• HSL是通过：色相、饱和度、亮度，来表示一个颜色的，格式为：hsl(色相,饱和度,亮度)
• 色相：取值范围是0-360度，具体度数对应的颜色如下图：
• 饱和度：取值范围是0%-100%（向色相中对应颜色中添加灰色，0%全灰，100%没有灰）
• 亮度：取值范围是0%-100%（0%亮度没了，所以是黑色；100%亮度太强，所以就是白色了）

• HSLA其实就是在HSL的基础上，添加了透明度

CSS字体属性

字体大小

1. 属性名：font-size

2. 语法：

3. 注意点：
• Chrome浏览器支持最小文字为12px，默认的文字大小为16px，并且0px自动消失
• 不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要用默认大小
• 通常以给body设置font-size属性，这样body中的其他元素就都可以继承了

4. 借助控制台看样式

字体族

• 使用字体的英文名字兼容性会更好，具体的英文名可以自行查询，或在电脑的设置去寻找

• 如果字体包含空格，必须使用引号包裹起来

• 可以设置多个字体，按照从左到右的顺序逐个查找，找到就用，没有找到就使用后面的，且通常在最后写上serif（衬线字体）或sans-serif（非衬线字体）

• windows系统中，默认的字体就是微软雅黑（可以在电脑C盘搜索Fonts关键字查看已下载的字体）

字体风格

1. normal：正常（默认值）

2. italic：斜体（使用字体自带的斜体效果）（现实斜体时，更推荐使用tialic）

3. oblique：斜体（强制倾斜产生的斜体效果）

字体粗细

• 关键词
1. lighter：细
2. normal：正常
3. bold：粗
4. bolder：很粗（多数字体不支持）

• 数值
1. 100-1000且无单位，数值越大，字体越粗（或一样粗，具体得看字体设计的精确程度）
2. 100-300等同于lighter，400-500等同于normal，600以上等同于bold

字体复合写法

1. 字体大小，字体族必须都写上

2. 字体族必须是最后一位，字体大小必须是倒数倒数第二位

3. 各个属性间用空格隔开

文本颜色

1. 颜色名

2. rgb或rgba

3. HEX或HEXA（十六进制）

4. HSL或HSLA

开发中常用的是：rgb/rgba或HEX/HEXA（十六进制）

文本间距

• 字母间距：letter-spacing

• 单词间距：word-spacing（通过空格识别词）

• 属性值为像素（px），正值让间距增大，负值让间距边小

文本修饰

1. none：无装饰线（常用）

2. underline：下划线（常用）

3. overline：上划线

4. line-through；删除线

1. dotted：虚线

2. wavy：波浪线

3. 也可以指定颜色

文本缩进

文本对齐_水平

1. left：左对齐（默认值）

2. right：右对齐

3. center：居中对齐

行高

1. normal：由浏览器根据文字大小决定的一个默认值

2. 像素（px）

3. 数字：参考自身font-size的倍数（很常用）

4. 百分比：参考自身font-size的百分比

1. line-height过小文字会产生重叠，且最小值是0，不能为负数

2. line-height是可以继承的，且为了能更好的呈现文字，最好写数值

3. line-height和height的关系是：
• 设置了height，那么高度就是height的值
• 不设置height的时候，会根据line-height计算高度

1. 对于多行文字：控制行与行之间的距离

2. 对于单行文字：让height等于line-height，可以实现文字垂直居中

文本对齐_垂直

1. 顶部：无需任何属性，在垂直方向上，默认就是顶部对齐

2. 居中：对于单行文字，让height=line-height即可（多行文字后面会讲到）

3. 底部：对于单行文字，目前的一个临时的方式：让line-height=(height×2)-font-size-x (x是根据字体族动态决定的一个值)

vertical-align

1. baseline（默认值）：使元素的基线与父元素的基线对齐

2. top：使元素的顶部与其所在行的顶部对齐

3. middle：使元素的中部与父元素的基线加上父元素字母x的一半对齐

4. bottom：使元素的底部与其所在行的底部对齐

CSS列表属性

1. CSS属性名：list-style-type
功能：设置列表符号
属性值：
• none：不显示前面的标识（很常用）
• square：实心方块
• disc：圆形
• decimal：数字
• lower-roman：小写罗马字
• upper-roman：大写罗马字
• lower-alpha：小写字母
• upper-alpha：大写字母

2. CSS属性名：list-style-position
功能：设置列表符号的位置
属性值：
• inside：在li的里面
• outside：在li的外面

3. CSS属性名：list-style-image
功能：自定义列表符号
属性值：url（图片地址）

4. CSS属性名：list-style
功能：复合属性
属性值：没有数量、顺序的要求

CSS表格属性

1. CSS属性名：border-width
功能：边框宽度
属性值：CSS中可用的长度值

2. CSS属性名：border-color
功能：边框颜色
属性值：CSS中可用的颜色值

3. CSS属性名：border-style
功能：边框风格
属性值：
• none默认值
• solid实线
• dashed虚线
• dotted点线
• double双实线

4. CSS属性名：border
功能：边框复合属性
属性值：没有数量、顺序的要求

表格独有属性

1. CSS属性名：table-layout
功能：设置列宽度
属性值：
• auto：自动，列宽根据内容计算（默认值）
• fixed：固定列宽，平均

2. CSS属性名：broder-spacing
功能：单元格间距
属性值：
• CSS中可用的长度值
• 生效的前提是单元格边框不能合并

3. CSS属性名：border-collapse
功能：合并单元格边框
属性值：
• collapse：合并
• separate：不合并

4. CSS属性名：empty-cells
功能：隐藏没有内容的单元格
属性值：
• show：显示，默认
• hide：隐藏
• 生效的前提是单元格不能合并

5. CSS属性名：caption-side
功能：设置表格标题位置
属性值：
• top：上面（默认值）
• bottom：在表格下面

CSS背景属性

1. CSS属性名：background-color
功能：设置背景颜色
属性值：
• 符号CSS中颜色规范的值
• 默认背景颜色是transparent

2. CSS属性名：background-image
功能：设置背景图片
属性值：
• url（图片的地址）

3. CSS属性名：background-repeat
功能：设置背景重复方式
属性值：
• repeat：重复，铺满整个元素，默认值
• repeat-x：只在水平方向重复
• repeat-y：只在垂直方向重复
• no-repeat：不重复

4. CSS属性名：background-position
功能：设置背景图位置
属性值：
• 通过关键字设置位置
• 写两个值，用空格隔开
• 水平：left、center、right
• 垂直：top、center、bottom
• 如果只写一个值，另一个方向的值取center
• 通过长度指定坐标位置
• 以元素左上角为坐标原点，设置图片左上角的位置
• 两个值，分别是x坐标和y坐标
• 只写一个值 ，会被当做x坐标，y坐标取center

5. CSS属性名：background
功能：复合属性
属性值：
• 没有数量和顺序要求

CSS鼠标属性

• pointer：小手

• move：移动图标

• text：文字选择器

• crosshair：十字架

• wait：等待

• help：帮助

CSS盒子模型

CSS长度单位

1. px：像素

2. em：相对元素font-size的倍数

3. rem：相对根字体大小，html标签就是根

4. %：相对父元素计算

元素的显示模式

1. 在页面中独占一行，不会与任何元素公用一行，是从上到下排列

2. 默认宽度：撑满父元素

3. 默认高度：由内容撑开

4. 可以通过CSS设置宽高

1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列

2. 默认宽度：由内容撑开

3. 默认高度：由内容撑开

4. 无法通过CSS设置宽高

1. 在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左往右排列

2. 默认宽度：由内容撑开

3. 默认高度：由内容撑开

4. 可以通过CSS 设置宽高

总结各元素的显示模式

1. 主体结构标签：<html>、<body>

2. 排版标签：<h1>-<h6>、<hr>、<p>、<pre>、<div>

3. 列表标签：<ul>、<ol>、<li>、<dl>、<dt>、<dd>

4. 表格相关标签：<table>、<tbody>、<thead>、<tfoot>、<tr>、<caption>

1. 文本标签：<br>、<em>、<trong>、<sup>、<sub>、<del>、<ins>

2. <a>与<label>

1. 图片：<img>

2. 单元格：<td>、<th>

3. 表单控件：<input> 、<textarea>、<select>、<button>

4. 框架标签：<iframe>

修改元素显示模式

盒子模型的组成

1. margin（外边距）：盒子与外界的距离

2. border（边框）：盒子的边框

3. padding（内边距）：紧贴内容的补白区域

4. content（内容）：元素中的文本或后代元素都是它的内容

盒子内容区（content）

• max-width、min-width一般不与width一起使用

• max-height、min-height一般不与height一起使用

关于默认宽度

1. 所谓的默认宽度，就是不设置width属性时，元素所呈现出来的宽度

2. 总宽度 = 父的content - 自身的左右margin

3. 内容区的宽度 = 父的content - 自身的左右margin - 自身的左右border - 自身的左右padding

盒子内边距（padding）

1. padding：10px;四个方向内边距都是10px

2. padding：10px 20px;上10px，左右20px（上下、左右）

3. padding：10px 20px 30px;上10px，左右20px，下30px（上，左右、下）

4. pedding：10px 20px 30px 40px;上10px，右20px，下30px，左40px（上、右、下、左）

• padding的值不能为负数

• 行内元素的左右内边距是没问题的，上下内边距不能完美的设置

• 块级元素、行内块元素，四个方向内边距都可以完美设置

盒子边框（border）

• none：默认值

• solid：实线

• dashed：虚线

• dotted：点线

• double：双实线……

• border-left

• border-left-style

• border-left-width

• border-letf-color

• border-ridht

• border-ridht-style

• border-ridht-width

• border-ridht-color

• border-top

• border-top-style

• border-top-width

• border-top-color

• border-bottom

• border-bottom-style

• border-bottom-width

• border-bottom-color

盒子外边距（margin）

margin注意事项

1. 子元素的margin，是参考父元素的content计算的（因为是父亲的content中承装着子元素）

2. 上margin、左margin：影响自己的位置；下margin、右margin：影响后面兄弟元素的位置

3. 块级元素、行内块元素，均可以完美的设置四个方向的margin；但行内元素，左右margin可以完美设置，上下margin设置无效

4. margin的值也可以是auto，如果给一个块级元素设置左右margin都为auto，该块级元素会在父元素中水平居中

5. margin的值可以是负值

margin塌陷问题

1. 给父元素设置不为0的padding

2. 给父元素设置宽度不为0的border

3. 给父元素设置CSS样式overflow:hidden

margin合并问题

处理内容溢出

1. overflow-x、overflow-y不能一个是hidden，一个是visible，目前是实验性属性，不建议使用

2. overflow常用的值是hidden和auto，除了能处理溢出的显示方式，还可以解决很多疑难杂症

隐藏元素的方式

1. visibility属性：visibility属性默认值是show，如果设置为hidden，元素会隐藏（元素看不见了，还占有原来的位置，元素的大小依然保持）

2. display属性：设置display:none，就可以让元素隐藏（彻底地隐藏，不但看不见，也不占用任何位置，没有大小宽高）

样式的继承

默认样式

1. <a>元素：下划线、文字颜色、鼠标小手

2. <h1>-<h6>元素：文字加粗、文字大小、上下外边距

3. <p>元素：上下外边距

4. <ul>、ol元素：内外边距

5. body元素：8px外边距（4个方向）

布局小技巧

1. 行内元素、行内块元素，可以被父元素当做文本处理
• 即：可以像处理文本对齐一样，去处理：行内、行内块在父元素中的对齐
• 例如：text-aling、line-height、text-indent等

2. 如何让子元素，在父元素中水平居中：
• 若子元素为块元素，给父元素加上：margin:0 auto;
• 若子元素为行内元素、行内块元素，给父元素加上：text-align:center

3. 如何让子元素，在父元素中垂直居中：
• 若子元素为块元素，给子元素加上：margin-top，值为：（父元素content - 子元素盒子总高）/ 2
• 若子元素为行内元素、行内块元素：
• 让父元素的height = line-height，每个子元素都加上：vertical-align:middle;
• 若想绝对垂直居中，父元素font-size设置为0

元素之间的空白问题

1. 方案一：去掉换行和空格（不推荐）

2. 方案二：给父元素设置font-size:0，再给需要显示文字的元素，单独设置字体大小（推荐）

行内块的幽灵空白问题

1. 方案一：给行行内块设置vertical，值不为baseline即可，设置为middel、bottom、top均可

2. 方案二：若父元素中只有一张图片，设置图片为display:block

3. 方案三：给父元素设置font-size:0；如果该行内块内部还有文本，则需要单独设置font-size

浮动

浮动的简介

元素浮动后的特点

1. 脱离文档流

2. 不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高

3. 不会独占一行，可以与其他元素共用一行

4. 不会margin合并，也不会margin塌陷，能够完美的设置四个方向的margin和padding

5. 不会像行内块一样被当做文本处理（没有行内块的空白问题）

浮动后的影响

1. 对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟元素没影响

2. 对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素

解决浮动后产生的影响（清除浮动）

1. 方案一：给父元素指定高度

2. 方案二：给父元素也设置浮动，带来其他影响

3. 方案三：给父元素设置overflow:hidden

4. 方案四：在所有浮动元素的最后，添加一个块级元素，并给该块级元素设置clear:both

5. 方案五：给浮动元素的父元素，设置为伪元素，通过伪元素清除浮动，原理与方案四相同。（推荐使用）举例代码如下：

布局中的一个原则：设置浮动的时候，兄弟元素要么全部浮动，要么全都不浮动

定位

相对定位

1. 设置相对定位
• 给元素设置position:relative即可实现相对定位
• 可以使用left、right、top、bottom四个属性调整位置

2. 相对定位的参考点
• 相对自己原来的位置

3. 相对定位的特点
• 不会脱离文档流，元素位置的变化只是视觉效果上的变化，不会对其他元素产生任何影响
• 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的
• 默认规则：定位的元素会盖在普通元素之上
• 都发生定位的两个元素，后写的元素会盖在先写的元素之上
• left不能和right一起设置，top和bottom不能一起设置
• 相对定位的元素，也能继续浮动，但不推荐这样做
• 相对行为的元素，也能通过margin调整位置，但不推荐这样做
注意：绝大多数情况下，相对定位，会与绝对定位配合使用

绝对定位

1. 设置绝对定位
• 给元素设置position:absolute即可实现绝对定位
• 可以使用left、right、top、bottom四个属性调整位置

2. 绝对定位的参考点
• 参考它的包含块
• 什么是包含块？
• 对于没有脱离文档流的元素：包含块就是父元素
• 对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都没定位，那包含块就是整个页面）

3. 绝对定位的特点
• 脱离文档流，会对后面的兄弟元素、父元素影响
• left不能和right一起设置（left生效），top和bottom不能一起设置（top生效）
• 绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主
• 绝对定位的元素，也能通过margin调整位置，但不推荐这样做；还有如果设置了定位top值那就不能使用margin-top值，四个方向都同理
• 无论是什么元素就（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素
• 定位元素：默认宽高都被内容所撑开，且能自由设置宽高

固定定位

1. 设置固定定位
• 给元素设置position:fixed即可实现固定定位
• 可以使用left、right、top、bottom四个属性调整位置

2. 固定定位的参考点
• 参考它的视口
• 对于浏览器来说，视口就是我们看到网页的那扇窗户

3. 固定定位元素的特点
• 脱离文档流，会对后面的兄弟元素、父元素有影响
• left不能和right一起设置，top和bottom不能一起设置
• 固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主
• 固定定位的元素，也能通过margin调整位置，但不推荐就这样做
• 无论是什么元素（行内、行内块、块级）设置为固定定位后，都变成了定位元素

粘性定位

1. 设置粘性定位
• 给元素设置 position:sticky即可实现粘性定位
• 可以使用left、right、top、bottom四个属性调整位置，不过最常用的是top值

2. 粘性定位的参考点
• 离他最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先

3. 粘性定位元素的特点
• 不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式
• 最常用的值是top值
• 粘性定位和浮动可以同时设置，但不推荐这样做
• 粘性定位的元素，也能通过margin调整位置，但不推荐这样做

定位层级

1. 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的

2. 如果位置发生重叠，默认情况是：后面的元素，会显示在前面元素之上

3. 可以通过CSS属性z-index调整元素的显示层级

4. z-index的属性值是数字，没有单位，值越大显示层级越高

5. 只有定位元素设置z-index才有效

6. 如果z-index值大的元素，依然没有覆盖掉z-index值小的元素，那么请检查其包含块的层级

定位的特殊应用

1. 发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，且依然可以设置宽高

2. 发生相对定位后，元素依然是之前的显示模式

3. 以下所说的特殊应用，只针对绝对定位和固定定位的元素，不包括相对定位的元素

1. 块宽想与包含块一致，可以给定位元素同时设置left和right为0

2. 高度想与包含块一致，top和bottom设置为0

• 方案一：

• 方案二：

版心

• 在pc端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网页的版心

• 版心的宽度一般是960-1200（目前主流）像素之间

• 版心可以是一个，也可以是多个

常用布局名词

重置默认样式

1. p元素有默认的上下margin

2. h1-h6标题也有上下margin，且字体加粗

3. body元素有默认的8px外边距

4. 超链接有默认的文字颜色和下划线

5. ul元素有默认的左pading

6. 等等的默认样式

在早期，元素默认样式，能够让我们快速的绘制网页，但如今网页的设计越来越复杂，内容越来越多，而且很精细，这些默认样式会给我们绘制网页带来麻烦；而且这些默认样式，在不同的浏览器上呈现出来的效果也不一样，所以我们需要重置这些默认样式

此种方法，在简单案例中可以用一下，但实际开发中不会使用，因为*选择的是所有元素，而并不是所有的元素都有默认样式；而且我们重置时，有时候是需要做特定处理的，比如：想让a元素的文字是灰色，其他元素文字是蓝色

经过reset后的网页，好似“一张白纸”，开发人员可以根据设计稿，精细的去添加具体的样式

• 官网地址：http://necolas.github.io/normalize.css

1. 保护了有价值的默认样式，而不是完全去掉它们

2. 为大部分HTML元素提供一般化的样式

3. 新增对HTML5元素的设置

4. 对并集选择器的使用比较谨慎，有效避免调试工具杂乱

Normalize.css的重置，和reset.css相比，更加觉得温和，开发时可根据实际情况进行选择

HTML5新增内容

HTML5简介

• HTML5是新一代的HTML标准，2014年10月由万维网联盟（W3C）完成标准定制

• 官网地址：
• W3C提供：https://www.w3.org/TR/html/index.html
• WHATWG提供：https://whatwg-cn.github.io/html/multipage

• HTML5在侠义上是新一代的HTML标准，在广义上是指：整个前端

1. 针对JavaScript，新增了很多可操作的接口

2. 新增了一些语义化标签，全局属性

3. 新增了很多媒体标签，可以很好的替代flash

4. 更加侧重语义化，对于SEO更友好

5. 可移植性好，可以大量应用在移动设备上

• 支持：Chrome、Safari、Opera、Firefox等主流浏览器（IE浏览器必须是9及以上版本才支持HTML5，且IE9仅支持部分HTML5新特性）

新增语义化标签

1. artical里面可以有多个section

2. section强调的是分段或分块，如果你想将一块内容分成几段的时候，可使用section元素

3. article比section更强调独立性，一块内容如果比较独立，比较完整，应该使用article元素

新增状态标签

• 语义：定义已知范围内的标量测量。也被称为gauge（尺度），双标签，例如：电量，磁盘用量等

• 常用属性如下：

属性	值	描述
high	数值	规定高值
low	数值	规定低值
max	数值	规定最大值
min	数值	规定最小值
optimum	数值	规定最优值
value	数值	规定当前值

• 语义：显示某个任务完成的进度的指示器，一般用于表示进度条，双标签，例如：工作完成进度等

• 常用属性如下：

属性	值	描述
max	数值	规定目标值
value	数值	规定当前值

新增列表标签

新增文本标签

新增表单功能

input新增属性值

视频标签

音频标签

新增全局属性（了解）

HTML5兼容性处理

• 添加元信息，让浏览器处于最优渲染模式

• 使用html5shiv让低版本浏览器认识H5的语义化标签

• 扩展

lt小于、lte小于等于、gt大于、gte大于等于、！逻辑非

• 实例

CSS3简介

CSS3概述

• CSS3是CSS2的升级版本，它在CSS2的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题

• CSS2在未来按照模块化的方式去发展：https://www.w3.org/Style/CSS/current-work.html

• CSS3的新特性如下：
• 新增了更加实用的选择器，例如：动态伪类选择器、目标伪类选择器、伪元素选择器等等
• 新增了更好的视觉效果，例如：圆角、阴影、渐变等
• 新增了丰富的背景效果，例如：支持多个背景图片，同时新增了若干个背景相关的属性
• 新增了全新的布局方案——弹性盒子
• 新增了Web字体，可以显示用户电脑上没有安装的字体
• 增强了颜色，例如：HSL、HSLA、RGBA几种新的颜色模式，新增opacity属性来控制透明度
• 增加了2D和3D变换，例如：旋转、扭曲、缩放、位移等
• 增加动画与过渡效果，让效果的变换更具流线性、平滑性
• ……

CSS3私有前缀

• W3C标准所有提出的某个CSS特性，在被浏览器正式支持之前，浏览器厂商会根据浏览器的内核，使用私有前缀了

• 举个例子：

• 查询CSS3兼容性的网站：https://caniuse.com

• Chrom浏览器：-webkit-

• Safari浏览器：-webkit-

• Firefox浏览器：-moz-

• Edge浏览器：-webkit-

• 旧Opera浏览器：-o-

• 旧IE浏览器：-ms-

CSS3新增长度单位

1. rem根元素字体大小的倍数，只与根元素字体大小有关

2. vw视口宽度的百分之多少，10vw就是视口宽度的10%

3. vh视口宽度的百分之多少，10vh就是视口宽度的10%

4. vmax视口宽高中大的那个的百分之多少

5. vmin视口宽高中小的那个的百分之多少

CSS3新增颜色设置方式

CSS3新增选择器

CSS3新增盒子属性

box-sizing怪异盒模型

resize调整盒子大小

box-shadow盒子阴影

• 语法：box-shadow：h-shadow v-shadow blur spread color inset;

• 各个值饿含义

• 默认值：box-shadow：none表示没有阴影

• 实例：

opacity不透明度

• opacity属性能为整元素添加透明效果，值是0到1之间的小数，0是完全透明，1表示完全不透明

• opacity是一个属性，设置的是整个元素（包括元素里的内容）的不透明度

• rgba是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度

CSS3新增背景属性

background-origin

• 作用：设置背景图的原点

• 语法：
1. padding-box：从padding区域开始显示背景图像（默认值）
2. border-box：从border区域开始显示背景图像
3. content-box：从content区域开始显示背景图像

background-clip

• 作用：设置背景图的向外裁剪的区域

• 语法：
1. border-box：从border区域开始向外裁剪背景（默认值）
2. padding-box：从padding区域开始向外裁剪背景
3. content-box：从content区域开始向外裁剪背景
4. text：背景图只呈现在文字上
注意：若值为text，那么backgroun-clip要加上-webkit-前缀

background-size

• 作用：设置背景图的尺寸

• 语法：
1. 用长度值指定背景图片大小，不允许负值
2. 用百分比指定背景图片大小，不允许负值
3. auto：背景图片的真实大小（默认值）
4. contain：将背景图片等比缩放，使背景图片的宽或高，与容器的宽或高相等，再将完整背景图片包含在容器内，但要注意：可能会造成容器里部分区域没有背景图片
5. cover：将背景图片等比缩放，直到完全覆盖容器，图片会尽可能全的显示在元素上，但要注意：背景图片有可能显示不完整（相对是较好的选择）

backgorund复合属性

• 语法：

1. origin和clip的值如果一样，如果只写一个值，则origin和clip都设置；如果设置了两个值，前面的就是origin，后面的clip

2. size的值必须写在position值的后面，并且用 / 分开

边框圆角

• 在CSS3中，使用border-radius属性可以将盒子变为圆角

• 同时设置四个角的圆角：

• 分开设置每个角的圆角（几乎不用）：

属性名	作用
border-top-left-radius	设置左上角圆角半径： 1.一个值是正圆半径 2.两个值分别 是椭圆的x半径、y半径
border-top-right-radius	设置右上角圆角半径： 1.一个值是正圆半径 2.两个值分别 是椭圆的x半径、y半径
border-bottom-right-radius	设置右下角圆角半径： 1.一个值是正圆半径 2.两个值分别 是椭圆的x半径、y半径
border-bottom-left-radius	设置左下角圆角半径： 1.一个值是正圆半径 2.两个值分别 是椭圆的x半径、y半径

• 分开设置每个角的圆角，综合写法（几乎不用）

边框外轮廓

• outline-width：外轮廓的宽度

• outline-color：外轮廓的颜色

• outline-style：外轮廓的风格
• none：无轮廓
• dotted：点状轮廓
• dashed：虚线轮廓
• solid：实线轮廓
• double：双线轮廓

• outline-offset设置外轮廓与边框的距离，正负值都可以设置
注意：outline-offset不是outline的子属性，是一个独立的属性

• outline复合属性

CSS3新增文本属性

文本阴影

• 在CSS3中，我们可以使用text-shadow属性给文本添加阴影

• 语法：

值	描述
h-shadow	必需写，水平阴影的位置（允许负值）
v-shadow	必需写，垂直阴影的位置（允许负值）
blur	可选，模糊的距离
color	可选，阴影的颜色

默认值：text-shadow: none表示没有阴影

文本换行

• 在CSS3中，我们可以使用white-space属性设置文本换行方式

• 常用值如下：

文本溢出

• 在CSS3中，我们可以使用text-overflow属性设置文本内容溢出时的呈现模式

• 常用值如下：

值	含义
clip	当内联内容溢出时，将溢出部分裁切掉（默认值）
ellipsis	当内联内容溢出块容器时，将溢出部分替换为…

文本修饰

• CSS3升级了text-decoration属性，让其变成了复合属性

• 子属性及其含义：
• text-decoration-line设置文本装饰线的位置
• none：指定文字无装饰（默认值）
• underline：指定文字的装饰是下划线
• overline：指定文字的装饰是上划线
• line-through：指定文字的装饰是贯穿线
• text-decoration-style文本装饰线条的形状
• solid：实现（默认）
• double：双线
• dotted：点状线条
• dashed：虚线
• wavy：波浪线
• text-decoration-color文本装饰线条的颜色

文本描边

• -webkit-text-stroke-width：设置文字描边的宽度，写长度值

• -webkit-text-stroke-color：设置文字描边的颜色，写颜色值

• -webkit-text-stroke：复合属性，设置文字描边宽度和颜色

CSS3新增渐变

• 多个颜色之间的渐变，默认从上到下渐变

• 使用关键词设置线性渐变的方向

• 使用角度设置线性渐变的方向

• 调整开始渐变的位置

径向渐变

• 多个颜色之间的渐变，默认从圆心四散（注意：不一定是正圆，要看容器本身的宽高比）

• 使用关键词调整渐变圆的圆心位置

• 使用像素值调整渐变圆的圆心位置

• 调整渐变形状为正圆

• 调整形状的半径

• 调整开始渐变的位置

web字体

• 语法（简写方式）

• 语法 （高兼容性写法）

• 中文的字体文件很大，使用完整的字体文件不现实，通常针对某几个文字进行单独定制
• 可使用阿里Web字体定制工具： https://www.iconfont.cn/webfont
 

字体图标

• 相比图片更加清晰

• 灵活性高，更方便改变大小、颜色、风格等

• 兼容性好，IE也能支持

2D装换

2D位移

1. 先给元素添加转换属性transform

2. 编写transform的具体值，相关可选值如下：

值	含义
translateX	设置水平方向位移，需指定长度值；若指定的是百分比，是参考自身宽度的百分比
translateY	设置垂直方向位移，需指定长度值，若指定的是百分比，是参考自身高度的百分比
translate	一个值代表水平方向，两个值代表；水平和垂直方向

3. 注意点：
• 位移与相对定位很相似，都不脱离文档流，不会影响到其他元素
• 与相对定位的区别：相对定位的百分比值，参考的是其父元素；定位的百分比值，参考的是其自身
• 浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高
• transform可以链式编写，例如：transform：translateX(30px) translateY(40px);
• 位移对行内元素无效
• 位移配合定位，可以实现元素水平垂直居中

2D缩放

1. 先给元素添加转换属性transform

2. 编写transform的具体值，相关可选值如下：

值	含义
scaleX	设置水平方向的缩放比例，值为一个数字，1表示不缩放，大于1放大，小于1缩小
scaleY	设置垂直方向的缩放比例，值为一个数字，1表示不缩放，大于1放大，小于1缩小
scale	同时设置水平方向、垂直方向的缩放比例，一个值代表同时设置水平和垂直缩放；两个值分别代表：水平缩放，垂直缩放

3. 注意点：
• scale的值，是支持写负数的，但几乎不用，因为容易让人产生误解
• 借助缩放，可实现小于12px的文字

2D旋转

1. 先给元素添加转换属性transform

2. 编写transform的具体值，相关可选值如下：

值	含义
rotate	设置旋转角度，需指定一个角度值（deg），正值顺时针，负值逆时针

2D扭曲

1. 先给元素添加转换属性transform

2. 编写transform的具体值，相关可选值如下：

值	含义
skewX	设置元素在水平方向扭曲，值为角度值，会将元素的左上角，右下角拉扯
skewY	设置元素在水平方向扭曲，值为角度值，会将元素的左上角，右下角拉扯
skew	一个值代表skewX，两个值分别代表：skewX、skewY

多重变换

变换原点

• 元素变换时，默认的原点是元素的中心，使用transform-origin可以设置变换的原点

• 修改变换原点对位移没有影响，对旋转和缩放会产生影响

• 如果提供两个值，第一个用于横坐标，第二个用于纵坐标

• 如果只提供一个，若是像素值，表示横坐标，纵坐标取50%；若是关键字，则另一个坐标取50%

1. transform-origin: 50% 50%，变换原点在元素的中心位置，百分比是相对于自身（默认值）

2. transform-origin: left top，变换原点在元素的左上角

3. transform-origin: 50px 50px，变换原点距离元素左上角50px 50px的位置

4. transform-origin: 0，只写一个值的时候，第二个值默认为50%

3D转换

• flat：让子元素位于此元素的二维平面内（2D空间）（默认值）

• preserve-3d：让子元素位于此元素的三维空间内（3D空间）

• none：不指定透视（默认值）

• 长度值：指定观察者距离z=0平面的距离，不允许负值

透视点位置

3D位移

1. 先给元素添加转换属性transform

2. 编写transform的具体值，3D相关可选值如下：

3D旋转

1. 先给元素添加旋转属性transform

2. 编写transform的具体值，3D相同可选值如下：

3D缩放

1. 先给元素添加转换属性transform

2. 编写transform的具体值，3D相关可选值如下：

多重变换

背部不可见

过渡

transition-property

• 作用：定义哪个属性需要过渡，只有在该属性中定义的属性（比如宽、高、颜色等）才会以有过渡效果

• 常用值：
1. none：不过渡任何属性
2. all：过渡所以能过渡的属性
3. 具体某个属性名，例如：width、height，若有多个逗号分隔
注意：不是所有的属性都能过渡，值为数字，或者值能转为数字的属性，都支持过渡，否则不支持过渡。常见的支持过渡属性有：颜色、长度值、z-index、opacity、2D变换属性、3D变换属性、阴影

transition-duration

• 作用：设置过渡的持续时间，即：一个状态过渡到另一个状态耗时多久

• 常用值：
1. 0：没有任何过渡时间（默认值）
2. s或ms：秒或毫秒
3. 列表：如果想让所有属性都持续一个时间，那就写一个值。如果想让每个属性持续不同的时间那就写一个时间的列表

transition-delay

• 作用：指定开始过渡的延时时间，单位：s或ms

transition-timing-function

• 作用：设置过渡的类型

• 常用值：
1. ease：平滑过渡（默认值）
2. linear：线性过渡
3. ease-in：慢→快
4. ease-out：快→慢
5. ease-in-out：慢→快→慢
6. step-start：等同于steps(1，start)
7. step-end：等同于steps(1，end)
8. steps(integer，？)：接受两个参数的步进函数。第一个参数必须为正数，指定函数的步数。第二个参数值可以是start或end，指定每一步的值发生变化的时间点。第二个参数默认值为end
9. cubic-bezie(number，number，number，number)：特定的贝塞尔曲线类型（在线制作贝塞尔曲线：https://cubic-bezier.com）

transition复合属性

• 如果设置了一个时间，表示duration；如果设置了两个时间，第一是duration，第二个是delay；其他值没有顺序要求

动画

动画的基本使用

• 第一步：定义关键帧（定义动画）
1. 简单方式定义
2. 完整方式定义：

• 第二步：给元素应用动画，用到的属性如下：
1. animation-name：给元素指定具体的动画（具体的关键帧）
2. animation-duration：设置动画所需时间
3. animation-delay：设置动画延时

动画的其他属性

• animation-timing-function，设置动画的类型，常用值如下：
1. ease：平滑过渡（默认值）
2. linear：线性过渡
3. ease-in：慢→快
4. ease-out：快→慢
5. ease-in-out：慢→快→慢
6. step-start：等同于steps(1，start)
7. step-end：等同于steps(1，end)
8. steps(integer，？)：接受两个参数的步进函数。第一个参数必须为正数，指定函数的步数。第二个参数值可以是start或end，指定每一步的值发生变化的时间点。第二个参数默认值为end
9. cubic-bezie(number，number，number，number)：特定的贝塞尔曲线类型（在线制作贝塞尔曲线：https://cubic-bezier.com）

• animation-iteration-count，指定动画的播放次数，常用值如下：
1. number：动画循环次数
2. infintte：无限循环

• animation-direction，指定动画方向，常用值如下：
1. normal：正常方向（默认）
2. reverse：反方向运行
3. alternate：动画先正常运行再反方向运行，并持续交替运行
4. alternate-reverse：动画先反运行再正方向运行，并持续交替运行

• animation-fill-mode，设置动画之外的状态
1. forwards：设置对象状态为动画结束时的状态
2. backwards：设置对象状态为动画开始时的状态

• animation-play-state，设置动画的播放状态，常用值如下：
1. running：运动（默认）
2. paused：暂停

动画复合属性

多列布局

• column-count：指定列数，值是数字

• column-width：指定列宽，值是长度

• columns：同时指定列宽和列数，复合属性；值没有数量和顺序要求

• column-gap：设置列边距，值是长度

• column-rule-style：设置列与列之间边框的风格，值与border-style一致

• column-rule-width：设置列与列之间边框的宽度，值是长度

• column-rule-color：设置列与列之间边框的颜色

• coumn-rule：设置列边框，复合属性

• column-span：指定是否跨列；值：none、all

伸缩盒模型

伸缩盒模型简介

• 2009年，W3C退出了一种新的盒子模型Flexible Box（伸缩盒模型，又称：弹性盒子）

• 它可以轻松的控制：元素分布方式、元素对齐方式、元素视觉顺序……

• 截止目前，除了在部分IE浏览器不支持，其他浏览器均已全部支持

• 伸缩盒模型的出现，逐渐演变出一套新的布局方案flex布局

1. 传统布局是指：基于传统盒状模型，主要靠：display属性+position属性+float属性

2. flex布局目前在移动端应用比较广泛，因为传统布局不能很好的呈现在移动设备上

伸缩容器、伸缩项目

• 伸缩容器：开启了flex的元素，就是：伸缩容器
1. 给元素设置：display:flex或display:inline-flex，该元素就变为了伸缩容器
2. display:inline-flex很少使用，因为可以给多个伸缩容器的父容器，也设置伸缩容器
3. 一个元素可以同时是：伸缩容器、伸缩项目

• 伸缩项目：伸缩容器所有子元素自动成为了：伸缩项目
1. 仅伸缩容器的子元素成为了伸缩项目，孙子元素、重孙子元素等后代，不是伸缩项目
2. 无论原来是哪种元素（块、行内块、行内），一旦成为了伸缩项目，全都会“块状化”

主轴与侧轴注

• 主轴：伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是：从左到右（左边是起点，右边是终点）

• 侧轴：与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是：从上到下（上边是起点，下边是终点）

主轴方向

• 属性名：flex-direction

• 常用值如下：
1. row：主轴方向水平从左到右（默认值）
2. row-reverse：主轴方向水平从右到左
3. column：主轴方向垂直从上到下
4. column-reverse：主轴方向垂直从下到上

主轴换行方式

• 属性名：flex-wrap

• 常用值如下：
1. nowrap：默认值，不换行

2. wrap：自动换行，伸缩容器不够自动换行

3. wrap-reverse：反向换行

flex-flow

• flex-flow是一个复合属性，复合了flex-direction和flex-wrap两个属性，值没有顺序要求

主轴对齐方式

• 属性名：justify-content

• 常用值如下：
1. flex-start：主轴起点对齐（默认值）

2. flex-end：主轴终点对齐

3. center：居中对齐

4. space-between：均匀分布，两端对齐（最常用）

5. spance-around：均匀分布，两端距离是中间距离的一半

6. space-evenly：均匀分布，两端距离与中间距离一致侧轴对齐方式

侧轴对齐方式

• 所需属性：align-items

• 常用值如下：
1. flex-start：侧轴的起点对齐

2. flex-end：侧轴的终点对齐

3. center：侧轴的中点对齐

4. baseline：伸缩项目的第一行文字的基线对齐

5. stretch：如果伸缩项目未设置高度，将占满整个容器的高度（默认值）

多行的情况

• 所需属性：align-cotent

• 常用值如下：
1. flex-start：与侧轴的起点对齐

2. flex-end：与侧轴的终点对齐

3. center：与侧轴的中点对齐

4. space-between：与侧轴两端对齐，中间平均分布

5. space-around：伸缩项目间的距离相等，比距边缘大一倍

6. space-evenly：在侧轴上完全平分

7. stretch：占满整个侧轴（默认值）

flex-basis

• 概念flex-basis设置的是主轴方向的基准长度，会让宽度或高度失效（主轴横向：宽度失效；主轴纵向：高度失效）

• 作用：浏览器根据这个属性设置的值，计算主轴上是否有多余空间，默认值auto，即：伸缩项目的宽或高

flex-grow（伸）

• 概念：flex-grow定义伸缩项目的放大比例，默认为0，即：纵使主轴存在剩余空间，也不拉伸（放大）

• 规则：
1. 若所有伸缩项目的flex-grow值都为1，则：它们将等分剩余空间（如果有空间的话）
2. 若三个伸缩项目的flex-grow值分别为：1、2、3，则：分别瓜分到：1/6、2/6、3/6的空间

flex-shrink（缩）

• 概念：flex-shrink定义了项目的压缩比例，默认为1，即：如果空间不足，该项目将会缩小

• 收缩项目的计算，略微复杂一点，我们拿一个场景举例：
例如：三个伸缩项目，宽度分别为：200px、30px、200px，它们的flex-shrink值分别为：1、2、3；若想刚好容纳下三个项目，需要总宽度为700px，但目前容器只有400px，还差300px；所以每个人都要收拾一下才可以放下，具体收缩的值，这样计算：
1. 计算分母：（200x1）+ （300x2）+（200x3）= 1400
2. 计算比例：
• 项目一：（200x1）/ 1400 = 比例值1
• 项目二：（300x1）/ 1400 = 比例值2
• 项目三：（200x1）/ 1400 = 比例值3
3. 计算最终收缩大小：
• 项目一需要收缩：比例值1 x 300
• 项目二需要收缩：比例值2 x 300
• 项目三需要收缩：比例值3 x 300

flex复合属性

• 如果写flex:1 1 auto，则可简写为：flex：auto

• 如果写flex:1 1 0，则可简写为：flex：1

• 如果写flex:0 0 auto，则可简写为：flex：none

• 如果写flex:0 1 atuo，则可简写为：flex：0 auto（即flex初始值）

项目排序

• order属性定义项目的排列顺序，数值越小，排列越靠前，默认为0

单独对齐

• 通过align-self属性，可以单独调整某个伸缩项目的对齐方式

• 默认值为auto，表示继承父元素的align-itema属性

媒体查询

媒体类型

媒体特性

运算符

常用阈值

结合外部样式的用法

BFC

通俗易懂的描述BFC：

1. BFC是Block Formatting Context（块级格式上下文），可以理解成元素的一个“特异功能”

2. 该“特异功能”，在默认的情况下处于关闭状态；当元素满足了某些条件后，该“特异功能”被激活

3. 所谓激活“特异功能”，专业点说就是：该元素创建了BFC（又称：开启了BFC）

如何开启BFC

• 根元素

• 浮动元素

• 绝对定位、固定定位的元素

• 行内块元素

• 表格单元格：table、thead、tbody、tfoot、th、td、tr、caption

• overflow的值不为visible的块元素

• 伸缩项目

• 多列容器

• column-span为all的元素（即使该元素没有包裹在多列容器中）

• display的值，设置为flow-root

开启了BFC能解决什么问题

1. 元素开启BFC后，其子元素不会再产生margin塌陷问题

2. 元素开启BFC后，自己不会被其他浮动元素所覆盖

3. 元素开启BFC后，就算其子元素浮动，元素自身高度也不会塌陷

数组

• 元素：数组中保存的每个数据都叫数组元素

• 下标：数组中数据的编号

• 长度：数组中数据的个数，通过数组的length属性获得

• 用循环把数组中每个元素都访问到，一般会用for循环遍历

数组-新增

• 数组.push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度（重点）