前端三件套学习笔记（持更）

HTML + CSS

1、HTML，CSS，JS区别

HTML--结构

CSS--表现

JavaScript--行为

2、HTML5 中新增

1）语义化标签

<header>、<main>页面主要内容、<aside>侧边栏、<footer>、<nav>、<article> 加载页面一块独立内容、<section> 相当于 div 。

2）多媒体元素

<audio> 和 <video> 。

3）Canvas

在网页上绘制图形、动画和图像处理。

4）新的表单元素和属性

表单元素：<input type="email">、<input type="url">、<input type="date">、<input type="number"> （选择xx的输入框）等，

表单属性：required 必填项、pattern 输入框的匹配模式、placeholder、min、max 等。

5）地理定位

Geolocation API，网页可以获取用户的地理位置信息。

6）本地存储

提供了 localStorage 和 sessionStorage API，使得网页可以在客户端存储数据，实现离线应用和持久化存储。

7）WebSocket

提供了 WebSocket API，使得网页可以创建基于 TCP 的全双工通信通道，实现实时通信和数据交换。

3、CSS3 新增

1）Flexbox 布局

弹性布局，使得元素的排列更加灵活和简单，能够轻松实现水平和垂直居中、自适应布局等效果。

2）Grid 布局

二维网格布局系统，使得页面的布局更加灵活和精确，能够实现复杂的多列布局、栅格系统等。

3）响应式设计支持

引入媒体查询（Media Queries），使得样式可以根据设备的特性和视口大小进行调整，从而实现响应式设计。

4）自定义字体（@font-face）

5）渐变

6）内外阴影

7）圆角（Border-radius）

8）动画（Animations）

使用关键帧（Keyframes）来定义动画效果，包括元素的平移、旋转、缩放等动作。

9）过渡（Transitions）

为元素的状态变化（如悬停、焦点、点击等）添加过渡效果，使得状态变化更加平滑和自然。

10）变换（Transforms）

包括平移、旋转、缩放、倾斜等，以实现复杂的动态效果。

3、HTML结构

<!DOCTYPE html>
<html><head><title>我的第一个页面</title></head><body>很高兴，开始了我的web前端之旅！</body>
</html>

4、布局标签：<div> 和 <span>

<div> 块级元素，一行只能放一个<div>。大盒子，用于创建页面的结构布局。
<span> 内联元素，一行上可以多个 <span>。小盒子，用于对文本的一部分进行样式设置。

5、表格

th（table header cell）：标头单元格
tr（table row）：一行
td（table data cell）：一个单元格

跨行合并：rowspan = "合并单元格的个数"

跨列合并：colspan = "合并单元格的个数"

6、元素显示模式

1）块元素 Block

2）行内/内联元素 Inline

3）内联块元素 Inline-block

转换

转换为块元素： display: block;
转换为行内元素：display: inline;
转换为行内块元素：display: inline-block;

7、浮动，清除浮动

1）含义：float 属性用于创建浮动框，将其移动到一边，直到左边缘或者右边缘触及包含块或另一个浮动块的边缘。

2）作用：

实现多个块级元素没有空白缝隙的一行展示。
实现两个盒子左右对齐。

3）加了浮动之后的元素，会：

浮动元素会脱离标准流（脱标，漂浮在普通流的上面，不占原有的位置）
浮动的元素会一行内显示并且元素顶部对齐。
浮动的元素具有行内块元素的特性：
- 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动之后，它的大小根据内容来决定。

4）有了浮动，不需要转换块级/行内块元素，可直接给高度和宽度。

5）浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。

6）网页布局一般采取的策略是：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。

7）为什么需要清除浮动？
父级盒子很多情况下，不方便给高度，但是内部的子盒子浮动之后又不占据位置（脱标），最后父级盒子的高度就是0，那么就会影响下面的标准流盒子。

如果父元素本身有设置高度，则不需要清除浮动。
没有高度，内容需要浮动，则需要清除浮动。
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准文档流了。
清除浮动不是清除浮动本身，而是清除浮动对其他元素的影响。

清除浮动的策略是：闭合浮动（只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。）

8、选择器

1）基础选择器

id 选择器（唯一的）和类选择器最大的不同在于使用次数上。

2）复合选择器

后代选择器、子选择器、并集选择器、伪类选择器

//后代选择器
ol li a {color: red;}//亲儿子选择器div>a {color: red;}//并集选择器
div,p,.pig li {color: pink;}//伪类选择器/* 1. a:link  默认，未访问过，把没有点击过的(访问过的)链接选出来 */a:link {color: #333;text-decoration: none;}/* 2. a:visited 已访问过，选择点击过的(访问过的)链接 */a:visited {color: orange;}/* 3. a:hover 悬停，选择鼠标经过的那个链接 */a:hover {color: pink;}/* 4. a:active 点击，选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */a:active {color: green;}/* 5. ：focus 选取获得焦点的表单元素input:focus {background-color: red;color: blue;}

9、px、em、rem

px 像素。相对长度单位，相对于显示器屏幕分辨率而言的。

em 单位是相对于父元素的字体大小来计算的。例如，父元素的字体大小为 16 像素，1em = 16 像素，1.5 em = 24 像素。

rem 单位则是相对于根元素（通常是 `<html>` 元素）的字体大小来计算的。这使得 `rem` 更具有全局性，因为它不受父元素字体大小的影响。例如，如果根元素的字体大小为 16 像素，1rem = 16 像素。

10、CSS 引入方式/样式表

1）行内（内联）

<p style="color: red; font-size: 16px;">这是一段红色的文字。</p>

2）内部

<head><style>p {color: red;font-size: 16px;}</style>
</head>
<body><p>这是一段红色的文字。</p>
</body>

3）外部

<head><link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body><p>这是一段使用外部样式表定义的文字。</p>
</body>

style.css

p {color: blue;font-size: 18px;
}

4）@import 导入样式表

@import url("styles.css");

11、CSS三大特性

1）层叠性

相同的选择器设置相同的样式，此时一个样式会被覆盖（层叠）掉另一个冲突的样式，层叠性主要解决的是冲突的问题。

2）继承性

子标签会继承父标签的某些样式，如文本、字体、列表。不可以被继承：尺寸（宽高）、定位、内外边距。

行高的继承：

行高可以跟单位，也可以不跟单位
如果子元素没有设置行高，就会继承父亲元素的行高的 1.5 倍
此时子元素的行高是：当前子元素的文字大小的 1.5 倍

3）优先级

12、选择器优先级/权重

权重不会有进位
!important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 继承或者通配符选择器
继承的权重为0，如果该元素没有被直接选中，不管父元素权重多高，子元素得到的权重都是0

13、CSS 盒子

包括：边框 border、外边距 margin、内边距 padding 和实际内容 content。

box-sizing: border-box; /* 让边框算进高度里面 */

14、position 定位的属性值

1）relative

相对定位，不脱离文档流，相对于自身定位。

2）absolute

绝对定位，脱离文档流，相对于父级定位。

3）fixed

固定定位，脱离文档流，相对于浏览器窗口定位。

4）sticky

粘性定位，常做吸顶使用，会在滚动到特定位置时生效，这个位置通常是相对于容器的顶部、底部、左侧或右侧。

5）static

默认值，元素出现在正常的流中。

15、float，flexbox，position：relative 区别

float 实现一些简单的布局效果，如图片环绕等。
flexbox 沿着主轴和交叉轴的方向进行灵活的排列和对齐，实现各种复杂的布局效果。默认主轴是 row（水平），可通过 flex-direction 更换为 column（垂直）；reverse 可以变成从右往左，从下往上
position：relative 通常用于局部微调，而不是整个布局的设计

16、子元素如何在父元素中居中

1）水平居中

1.子父元素宽度固定，子元素设置 margin：auto，并且子元素不能设置浮动，否则居中失效
2.子父元素宽度固定，父元素设置 text-align：center，子元素设置 display：inline-block，并且子元素不能设置浮动，否则居中失效

2）水平垂直居中

子元素相对于父元素绝对定位，子元素top，left设置50%，子元素margin-top和margin-left减去各自宽高的一半
子元素相对于父元素绝对定位，子元素上下左右全为0，然后设置子元素 margin：auto
父元素设置display：table-cell vertical-align：middle，子元素设置 margin：auto(多行文本垂直居中）
子元素相对父元素绝对定位，子元素 top，left 值为50%，transform：translate（-50%，-50%）
父元素设置弹性盒子，display：flex； justfy-content：center ；align-item：center；

3）单行文字垂直居中

文字的行高 = 盒子的高度

JavaScript

1、闭包，冒泡，委托

1）闭包（Closure）

由函数及其相关的引用环境（包括函数创建时所处的作用域）组合而成的包裹，从内部函数访问外部函数的作用域。

2）事件冒泡（Event Bubbling）

当一个元素上发生了某个事件（例如点击事件），这个事件会按照从内向外（从目标元素向祖先元素）的顺序进行传播，直至传播到最外层的祖先元素或到达文档的根节点。

3）事件委托（Event Delegation）

适用于处理大量相似元素上。它利用事件冒泡的机制，将事件处理程序绑定到它们的共同祖先，而不是绑定到每个单独的元素上。这样一来，只需一个事件处理程序即可管理一组元素上的事件。

2、判断基本数据类型的方法

1）typeof

判断基本数据类型，如：string，number，boolean，symbol，bigint（es10新增一种基本数据类型 bigint），undefined 等。
typeof 目前能返回 string，number，boolean，symbol，bigint，unfined，object，function 这八种判断类型。

2）instanceof

判断引用数据类型，如：Object，Function，Array，Date，RegExp 等。

3）Object.prototype.toString（最准确）

3、如何判断一个数据是 NaN 非数字

NaN 非数字，用 typeof 检测是 number 类型。

isNaN(); 会接受一个参数，如果参数是 NaN 或不能转换为数字，则返回 true ，否则返回 false.

isNaN(NaN);      // true
isNaN("hello");  // true，因为 "hello" 不能转换为数字
isNaN(123);      // false，因为 123 是一个有效的数字

Number.isNaN(); 严格检查，不会将参数转换为数字（isNaN(); 在判断之前会将参数转换为数字。

4、null 和 undefined 区别

1）相同点

用 if 判断时，两者都会被转换成 false。

2）不同点

①number 转换的值不同

number（null）为0；

number（undefined）为 NaN。

②
Null 定义，但是空值。
Undefined 没被定义，变量声明但未赋值。

5、localStorage、sessionStorage 、cookie

1）cookie

4KB，主要保存登录信息，一般由服务器生成，可设置失效时间。
2）sessionStorage

5MB，仅在当前会话下有效，关闭页面或浏览器后被清除。每个标签页或窗口拥有自己独立的 sessionStorage，不同标签页之间的数据不共享。

3）localStorage
5MB，除非被清除，否则永久保存。

6、ES6 新特性

ES6 常用语法-CSDN博客

7、let、var、const区别

var 声明的变量

存在变量提升；函数作用域；可以被重复声明

let 声明的变量

不会变量提升；块级作用域，即在 {} 内部声明的变量只在该块中有效；不可以被重复声明

const 声明的变量

不会变量提升；块级作用域；必须进行初始化赋值；声明的常量是不可变的；但如果常量是对象或数组等复合类型数据，可以修改其内部的属性或元素（因为 JavaScript 中的对象和数组是引用类型，它们的值存储的是内存地址，而不是实际的数据。）。

8、数组方法

1. push()

在数组末尾添加一个或多个元素，并返回数组的新长度。

2. pop()

删除并返回数组的最后一个元素。

3. shift()

删除并返回数组的第一个元素。

4. unshift()

在数组开头添加一个或多个元素，并返回数组的新长度。

5. slice()

返回数组的指定部分（浅复制）。

6. splice()

从数组中添加或删除元素，可以在指定位置添加新元素，或删除现有元素。

7. concat()

连接两个或多个数组，并返回一个新数组，不会修改原数组。

8. join()

将数组的所有元素连接成一个字符串。

9. reverse()

颠倒数组中元素的顺序。

10. sort()

对数组的元素进行排序，默认是按照字母顺序排序。

11. indexOf()

返回数组中某个元素第一次出现的索引，如果不存在则返回 -1。

12. lastIndexOf()

返回数组中某个元素最后一次出现的索引，如果不存在则返回 -1。

13. forEach()

对数组中的每个元素执行指定操作。

14. map()

对数组中的每个元素执行指定操作，并返回操作后的结果组成的新数组。

15. filter()

返回满足指定条件的所有元素组成的新数组。

16. reduce()

对数组中的所有元素执行指定操作，并将结果累积到一个值。

17. reduceRight()

与 reduce() 方法类似，但是从数组的右边开始执行。

9、Promise

用于处理异步操作的对象，它代表了一个尚未完成、但最终会完成的操作（也可以是失败），避免了传统的回调地狱（callback hell）。

1. 三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。

只能由 pending 转向 fulfilled ，或 pending 转向 rejected

状态一旦改变，就不会再变。创造promise实例后，它会立即执行。

2. 可以通过链式调用的方式处理多个异步操作。

通过 `then()` 方法注册在 Promise 完成后要执行的回调函数，可以在一个 Promise 完成后继续执行下一个操作。

3. 错误处理
使用 `catch()` 方法捕获 Promise 中的错误。
在链式调用中，可以在任何一个 `then()` 方法中使用 `catch()` 捕获前面任何一个 Promise 中的错误。

const promise = new Promise((resolve, reject) => {// 异步操作，比如进行网络请求或者读取文件setTimeout(() => {const success = true; // 模拟异步操作成功if (success) {resolve("操作成功");} else {reject("操作失败");}}, 2000);
});promise.then((result) => {console.log("成功：", result);
}).catch((error) => {console.error("失败：", error);
});

Promise的缺点

1）无法取消
2）如果不设置回调函数，Promise内部抛出的错误，不会反映到外部
3）当处于pending（等待）状态时，无法得知目前进展到哪一个阶段，是刚刚开始还是即将完成

10、原型/原型链/（原型）继承

什么是原型：
任何对象实例都有一个原型，也叫原型对象，这个原型对象由对象的内置属性_proto_指向它的构造函数的prototype指向的对象，即任何对象都是由一个构造函数创建的，但是不是每一个对象都有prototype，只有方法才有prototype。
什么是原型链？
原型链基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。我们知道，每个构造函数都有一个原型对象，每个原型对象都有一个指向构造函数的指针，而实例又包涵一个指向原型对象的内部指针。
原型链的核心就是依赖对象的_proto_的指向，当自身不存在的属性时，就一层层的扒出创建对象的构造函数，直至到Object时，就没有_proto_指向了。
因为_proto_实质找的是prototype，所以我们只要找这个链条上的构造函数的prototype。其中Object.prototype是没有_proto_属性的，它==null。

每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含指向原型对象内部的指针。我们让原型对象（1）等于另一个原型对象的实例（2）,
此时原型对象（2）将包含一个指向原型对象（1）的指针，
再让原型对象（2）的实例等于原型对象（3），如此层层递进就构成了实例和原型的链条，这就是原型链的概念

每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数想指针(constructor)，而实例对象都包含一个指向原型对象的内部指针(proto)。如果让原型对象等于另一个原型对象的实例，此时的原型对象将包含一个指向另一个原型的指针(proto)，另一个原型也包含着一个指向另一个构造函数的指针(constructor)。假如另一个原型又是另一个类型的实例……这就构成了实例与原型的链条。也叫原型链
原型继承是js的一种继承方式，原型链作为实现继承的主要方法,其基本思路是利用原型让一个引用类型继承另一个引用类型的属性和方法,
原型继承：利用原型中的成员可以被和其相关的对象共享这一特性，可以实现继承，这种实现继承的方式，就叫做原型继承。

11、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL，浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器获得请求对应的 IP 地址。
浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，然后服务器响应并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源
4.此时，Web 服务器提供资源服务，客户端开始下载资源。
通俗的讲：解析你的dns，返回响应的数据，服务器解析数据，客服端显示数据。

12、CSS 预处理器 Sass，Less是什么？为什么使用他们

Sass 和 Less 都是 CSS 预处理器，是 CSS 上的一种抽象层，是一种特殊的语法，最终会编译成CSS，提供了诸如嵌套规则、变量、混合、继承等功能。

Sass 有两种语法：Sass 格式（使用缩进来表示层级）和 SCSS 格式（类似于常规的 CSS，使用大括号和分号）

Less 的语法类似于常规的 CSS，相对于 Sass 的语法更接近原生 CSS，易于学习和上手。

Less 和 Sass 都可以在客户端和服务端运行：

在客户端运行时，可以通过浏览器原生支持或者通过将 Less/Sass 文件编译成 CSS 文件来实现。
在服务端运行时，通常使用 Node.js 来执行 Less 或 Sass 的编译工作。

13、this 指向

1. 全局上下文

指向全局对象，在浏览器中通常是 window 对象。

2. 函数调用

当函数作为一个独立的函数调用时，`this` 指向全局对象。
但在严格模式下，函数作为独立调用时，`this` 是 `undefined`。

3. 对象方法调用

`this` 指向调用该方法的对象。

4. 构造函数调用（通过 new 关键字调用）

this 指向新创建的实例对象。

5. 显示绑定

使用 call()、apply() 、 bind() 方法可以显式地指定函数内部 this 的值。

call() 立即调用函数，并且可以指定函数内部的 this 值和参数，参数可以是任意类型。
apply() 立即调用函数，并且可以指定函数内部的 this 值和参数，但是参数以数组形式传递。
bind() 不会立即调用函数，而是创建一个新的函数，并且可以预先绑定执行上下文和参数。

例如：

B.call(A, args1,args2);即A对象调用B对象的方法
F.apply(G, arguments);即G对象应用F对象的方法

第一个参数（A 和 G）是 this 要指向的对象，当为null、undefined时，默认指向window.

call() 改过 this 的指向后，会再执行函数；

bind() 改过 this后，不执行函数，会返回一个绑定新 this 的函数。

function f() {console.log("看我怎么被调用");console.log(this) //指向this
}
var obj = {};
f.call(obj) // call()直接调用函数
var g = f.bind(obj); // bind()不能调用函数
g(); // 此时才调用函数

6. 箭头函数

数没有自己的 `this`，它会继承父级作用域中的 `this` 值。

7. DOM 事件处理函数

指向触发事件的元素。

8. 回调函数

指向取决于该回调函数是如何被调用的。

14、减少页面加载时间的方式

优化图片：图像格式，尺寸，懒加载
减少 HTTP 请求：合并和压缩文件、图像，压缩工具（如 UglifyJS、CSSNano 等）
使用缓存：使用浏览器缓存和服务器缓存，减少重复请求相同资源
非必要资源延迟加载、异步加载
优化代码：删除不必要的代码和注释
使用内容分发网络（CDN）来分发静态资源，加速资源加载速度。
预加载资源：preload 和 prefetch 标签。
使用响应式设计：优化网站在不同设备上的显示效果。

15、foreEach与map区别

1）相同点

1.都是循环遍历数组中的每一项。
2.forEach 和 map 每次执行匿名函数都支持3个参数，参数分别是 item（当前每一项）、index（索引值）、arr（原数组）
3.匿名函数中的 this 都是指向 window
4.只能遍历数组

2）不同点

1.forEach() 没有返回值，修改原数组。
2.map() 有返回值，会 return 一个新数组。

16、什么是进程，什么是线程

一个程序的运行到结束就是一个进程，运行的过程中有多个持续的或者断断续续的片段组成，这就是线程，线程是进程内部的执行单元，一个进程包含多个线程。

进程提供了隔离和保护，每个进程有自己的资源和执行环境；而线程则是在进程内部进行执行的，可以共享相同的资源。

JavaScript 是单线程的，但是通过异步编程模型，JavaScript 可以实现非阻塞的 I/O 操作和异步任务处理，例如通过事件循环、回调函数、Promise、async/await 等机制来处理异步任务。这样可以避免在等待 I/O 操作完成时阻塞整个应用程序，从而提高了应用程序的响应性和性能