HTML

1. 常用标签

（1）<source>

source元素是HTML5中用于指定多个媒体资源的标签,常用于audio和video元素内部,可以为同一个媒体内容提供多个不同格式的资源文件,浏览器会自动选择第一个可以支持的格式进行播放。这使得我们可以为不同浏览器提供最优的媒体格式支持。

（2）<param>

用于为object或applet元素传递参数

（3）<object>

用于嵌入外部资源(如图片，音频，视频，PDF等)

（4）<picture>

用于为不同的显示/设备场景提供对应的图片资源，可以包含多个图片资源。

CSS

1. 视觉格式化模型

（1）BFC

（2）IFC

（3）Float

（4）Flex

（5） Grid

2. 属性值的计算过程

（1）确定声明值

（2）层叠

  • 比较重要性
  • 比较特定性
  • 比较源代码次序

（3）继承

（4）使用默认值

（5）常用属性

  • position:

    • static：默认值，普通文档流，不进行偏移。包含块是**最近的祖先元素的content盒
    • relative：相对定位，相对于自身在文档流中的正常位置偏移，但仍然保留原来的位置占位。包含块是自身原来位置构成的矩形框。
    • absolute:绝对定位，完全脱离文档流，寻找第一个不为static的祖先元素，并且祖先元素不是display:contents。则包含块为该祖先元素的padding盒
    • fixed：固定定位，相对于视口定位，随屏幕滚动保持固定位置。大多数情况下，包含块是视口本身。但是在transform,filter,contain,perspective等触发新的定位上下文的祖先元素，则会以他们为包含块。
    • sticky：粘性定位，根据用户滚动位置切换relative和fixed。包含块是最近的滚动容器的块盒祖先元素的padding盒。

  • display和visibility

visibility:hidden和display:none是CSS中两个常用的隐藏元素的属性,它们有着本质的区别。

A选项正确:使用visibility:hidden时,元素虽然在视觉上不可见,但仍然占据着原来的空间位置。这意味着其他元素的布局不会受到影响,只是该元素变成透明了。

B选项正确:使用display:none时,元素会从文档流中完全移除,不会占据任何空间。这会导致其他元素的位置发生变化,就像这个元素完全不存在一样。

C选项错误:两者是有本质区别的。visibility:hidden只是视觉上的隐藏,保留空间;而display:none则完全移除元素,不保留空间。这种区别会对页面布局产生不同的影响。

D选项错误:visibility:hidden只会触发repaint(重绘),因为元素位置没有改变,不需要重新计算布局。而display:none会同时触发reflow(回流)和repaint(重绘),因为需要重新计算其他元素的位置。

默认值

CSS规范中规定了div元素一些CSS属性的默认值。padding-top和margin-top的默认值确实为0,这是正确答案。

详细分析各选项:
C. padding-top: 正确。div元素的内边距padding-top默认值为0,除非显式设置。
D. margin-top: 正确。div元素的外边距margin-top默认值也是0,这与大多数块级元素的默认样式一致。

其他选项分析:
A. border-top-width: 错误。div元素的border-top-width默认值是medium而不是0。medium通常等价于3px。
B. outline-width: 错误。div元素的outline-width默认值是medium,与border-width类似。

补充说明:
\1. div是块级元素,其盒模型中padding和margin的所有方向(top、right、bottom、left)默认值都是0。
\2. 而border和outline相关的width属性默认都是medium。
\3. 这些默认值可以通过CSS显式设置来改变。
\4. 了解元素的默认样式对于CSS布局和样式重置都很重要。

(6) 通用值

值 作用简述 常见使用场景
inherit 显式继承父元素该属性的值（哪怕该属性默认不继承） 强制继承，比如 border, position
initial 恢复属性的初始值（即规范中的默认值） 重置样式
unset 如果该属性可继承，则等同于 inherit；否则等同于 initial 通用性最强，常用于组件库重置样式
revert 恢复为用户代理样式表（浏览器默认样式或作者样式表）中的默认样式 在你重置过样式后想“撤销”重置

好的！CSS 中的通用值（Global values / 通用关键字）是所有属性都可以使用的一些特殊值，用于控制继承、初始化或还原行为。最常见的通用值有以下 4 个：

✅ 一览表：CSS 通用值（Global Values）

值 作用简述 常见使用场景
inherit 显式继承父元素该属性的值（哪怕该属性默认不继承） 强制继承，比如 border, position
initial 恢复属性的初始值（即规范中的默认值） 重置样式
unset 如果该属性可继承，则等同于 inherit；否则等同于 initial 通用性最强，常用于组件库重置样式
revert 恢复为用户代理样式表（浏览器默认样式或作者样式表）中的默认样式 在你重置过样式后想“撤销”重置

🔍 逐个详细说明

✅ 1. inherit

  • 含义：强制从父元素中继承该属性的值。
  • 默认继承的属性：如 color, font, line-height 等文本相关的属性会自动继承。

  • 用处：让本来不会继承的属性也继承，例如：

    1
    2
    3
    4
    button {
      position: inherit; /* 继承父元素的定位方式 */
      border: inherit;   /* 继承父元素的边框样式 */
    }

✅ 2. initial

  • 含义：将属性重置为其规范规定的初始值（default value defined in CSS spec）。

  • 注意：不是浏览器样式、不是父元素的值，是 CSS 标准规定的值。

    1
    2
    3
    4
    p {
      color: initial;    /* 通常是黑色 */
      display: initial;  /* 对 p 元素来说是 block */
    }

✅ 3. unset

  • 含义：
    • 如果该属性默认可继承 → 等价于 inherit
    • 如果该属性默认不可继承 → 等价于 initial

  • ✅ 优点：最灵活，适合用于组件库或 reset 样式中“全面清空”某个元素的状态。

    1
    2
    3
    div {
      all: unset; /* 清除所有继承和默认样式，非常常用于 reset */
    }

✅ 4. revert（需要现代浏览器支持）

  • 含义：撤销当前样式，恢复为用户代理（浏览器默认）或作者样式表中的默认样式。

  • 不同于 initial 是恢复 CSS 标准值，revert 恢复的是浏览器对该元素设置的默认值。

    1
    2
    3
    input {
      all: revert; /* 恢复浏览器默认的 input 样式 */
    }

✅ 所有值对比小结表格

值 从父继承 设为初始值 恢复浏览器默认 说明
inherit ✅ ❌ ❌ 强制继承父属性
initial ❌ ✅ ❌ 设置为规范定义的初始值
unset ✅ / ❌ ✅ / ❌ ❌ 可继承属性→继承，否则设为初始值
revert ❌ ❌ ✅ 回退到浏览器或作者默认样式

3. 选择器

:nth-child(odd/even/具体数字/递推公式：an+b,从n=0开始)

:nth-of-type(odd/even/具体数字/递推公式：an+b,从n=0开始)

你的用法是正确的！让我详细解释这两个伪类选择器：

:nth-child() 用法

:nth-child() 基于元素在父元素中的位置来选择：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 选择奇数位置的元素 */
li:nth-child(odd) { background: lightgray; }

/* 选择偶数位置的元素 */
li:nth-child(even) { background: white; }

/* 选择第3个元素 */
li:nth-child(3) { color: red; }

/* 选择第2n个元素（等同于even） */
li:nth-child(2n) { font-weight: bold; }

/* 选择第2n+1个元素（等同于odd） */
li:nth-child(2n+1) { text-decoration: underline; }

/* 从第3个开始，每隔2个选择一个 */
li:nth-child(2n+3) { color: blue; }

:nth-of-type() 用法

:nth-of-type() 基于相同标签类型在父元素中的位置来选择：

1
2
3
4
5
6
7
8
/* 选择奇数位置的p元素 */
p:nth-of-type(odd) { margin-left: 20px; }

/* 选择偶数位置的p元素 */
p:nth-of-type(even) { margin-right: 20px; }

/* 选择第2个p元素 */
p:nth-of-type(2) { font-size: 18px; }

两者的区别

1
2
3
4
5
6
7
8
9
10
11
12
<div>
    <h2>标题1</h2>     <!-- 第1个子元素，第1个h2 -->
    <p>段落1</p>       <!-- 第2个子元素，第1个p -->
    <h2>标题2</h2>     <!-- 第3个子元素，第2个h2 -->
    <p>段落2</p>       <!-- 第4个子元素，第2个p -->
    <p>段落3</p>       <!-- 第5个子元素，第3个p -->
</div>
/* 选择第2个子元素（段落1） */
p:nth-child(2) { color: red; }

/* 选择第2个p元素（段落2） */
p:nth-of-type(2) { color: blue; }

更多用法

负数和复杂表达式：

1
2
3
4
5
6
7
8
9
10
11
/* 选择倒数第2个元素 */
li:nth-child(-n+2) { }

/* 选择前3个元素 */
li:nth-child(-n+3) { }

/* 选择第4个以后的所有元素 */
li:nth-child(n+4) { }

/* 选择第3个到第7个元素 */
li:nth-child(n+3):nth-child(-n+7) { }

相关的伪类选择器：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 最后一个子元素 */
li:last-child { }

/* 最后一个同类型元素 */
p:last-of-type { }

/* 第一个子元素 */
li:first-child { }

/* 第一个同类型元素 */
p:first-of-type { }

/* 唯一的子元素 */
p:only-child { }

/* 唯一的同类型元素 */
p:only-of-type { }

实用示例：

1
2
3
4
5
6
7
8
/* 表格斑马纹效果 */
tr:nth-child(even) { background: #f2f2f2; }

/* 每3个元素一组的布局 */
.item:nth-child(3n+1) { clear: left; }

/* 除了最后一个元素都加下边距 */
.card:not(:last-child) { margin-bottom: 20px; }

这些选择器非常实用，特别是在创建表格样式、列表布局和响应式设计时。

4. 动画

JS

1. 正则表达式

  • 尖号(^)匹配字符串的开头位置，例如^A表示匹配以A开头的字符串
  • 美元符号($)匹配字符串的结尾位置，例如A$表示匹配以A结尾的字符串
  • 反斜杠(\)用于转移特殊字符，使其失去特殊含义成为普通字符，例如要匹配字符”.”需要写成\.
  • 问号(?)表示匹配前面的字符0次或1次
  • 加号(+)表示匹配前面的字符1次或多次
  • 星号(*)表示匹配前面的字符0次或多次
  • 中括号[]表示字符集合，比如[abc]匹配a或b或c中的任意一个
  • 花括号{}表示量词，用来指定前面那个元素（字符，字符集，分组）等重复出现的次数

2. 常用API

（1）数组：

原地修改的：

  • push
  • pop
  • shift
  • unshift
  • splice
  • sort

返回新值的

  • map
  • concat

（2）字符串

  • search(regExp): 匹配成功返回首次匹配索引，否则返回-1

3. 严格模式和非严格模式

分类 区别描述 非严格模式行为 严格模式行为 示例代码
1. 变量声明 未声明变量直接赋值 自动变为全局变量 报 ReferenceError x = 10; // 非严格：OK 严格：ReferenceError
2. this 指向 函数中默认 this 指向全局对象 (window) undefined function f() { console.log(this); }
f();
3. 函数参数 允许参数重名 允许 报 SyntaxError function sum(a, a, b) {}
4. with 语句 是否允许使用 with 允许 报 SyntaxError with (obj) { console.log(x); }
5. 删除变量 是否能删除变量 静默失败 报 SyntaxError var x = 1; delete x;
6. eval 作用域 定义的变量是否泄漏 泄漏到外部作用域 作用于自身作用域 eval("var x = 10;"); console.log(x);
7. 八进制字面量 0xx 形式是否合法 允许（但不推荐） 报 SyntaxError var x = 010;
8. 不可写属性赋值 修改只读属性 静默失败 报 TypeError Object.defineProperty(obj, "x", {value: 1, writable: false}); obj.x = 2;
9. arguments.callee 可否访问自身引用 允许 报 TypeError function f() { console.log(arguments.callee); }
10. 保留字命名 能否使用 ES6 保留字 允许 报 SyntaxError var let = 10;
11. 函数声明位置 可以在块级中声明函数 有兼容性问题（部分允许） 报 SyntaxError if (true) { function test() {} }
12. this 绑定 null this 传入 null 自动绑定为全局对象 保持为 null function f() { console.log(this); } f.call(null);
13. 设置只读属性失败 不可写属性赋值 静默失败 报 TypeError const obj = {}; Object.defineProperty(obj, "x", { value: 42, writable: false }); obj.x = 9;
14. 对象字面量中重复属性 允许重复键名 允许（后面的覆盖前面） 报 SyntaxError var obj = {x: 1, x: 2};（在 ES5 严格模式中非法）
15. arguments 与参数同步 arguments[i] 是否与形参联动更新 联动：修改参数会影响 arguments，反之亦然 解耦：修改不再同步 function f(a) { a = 99; console.log(arguments[0]); }
f(1); // 非严格：99，严格：1
function g(a) { arguments[0] = 77; console.log(a); }
g(1); // 非严格：77，严格：1

4. 解构赋值

5. 数据类型操作

（1）Symbol

20250726220412

  • Symbol的值是唯一的，用作对象属性的标识符
  • Symbol值不能与其他类型进行运算
  • Symbol属性不会出现在for...in循环中，但是可以通过Reflect.ownKeys()获取
  • Symbol.prototype.toString()可以显式地将Symbol转换为字符串。

（2）隐式转换规则

转换类型 undefined null
Boolean false false
Number NaN 0
String “undefined” “null”
Object 抛错（直接访问） 抛错（直接访问）
Object() {} (空对象) {} (空对象)

布尔值true和undefined在转换为字符串时会转换为"true"和"undefined"字符串。

（3）undefined和null

undefined 和 null 之间的宽松比较会被认为相等（undefined == null 为 true），这是特殊规则。

当 undefined 或 null 与其它非 undefined/null 类型进行宽松比较时，不会做类型转换，而是直接返回 false。

1
2
3
4
5
6
7
8
9
10

undefined == null    // true，特殊相等规则
undefined == 0       // false，不转换成数字
undefined == ''      // false，不转换成字符串
undefined == false   // false，不转换成布尔值

null == 0            // false，不转换成数字
null == ''           // false，不转换成字符串
null == false        // false，不转换成布尔值

（4）逻辑运算

  1. JavaScript 中的逻辑运算符返回的是最后一个计算的操作数的值，而不一定是布尔值
  2. && 运算符优先级高于 ||
  3. 逻辑运算采用短路运算规则
  4. 数字1在逻辑运算中被视为真值

（5）数字类型

20250727003247

6. 原型和原型链

（1）继承方式

  • 原型链继承
  • 构造函数继承
  • 组合继承

7. 代理与反射

Reflect.onwKeys(obj)可以获取到symbol属性。Object.keys(obj)和for...in都无法获取。

8. BOM和DOM API

（1）获取dom元素父节点

element.parentNode这是属性，不是方法。

（2）window.history对象

方法/属性 说明 示例代码
history.back() 等同于点击浏览器后退按钮，加载历史记录中的上一页。 history.back();
history.forward() 等同于点击浏览器前进按钮，加载历史记录中的下一页。 history.forward();
history.go(delta) 加载历史堆栈中相对于当前页面的某个偏移量的页面。delta为整数，负数后退，正数前进，0刷新当前页。 history.go(-1); 后退一页
history.go(2); 前进两页
history.length 返回历史堆栈中条目总数（包括当前页） console.log(history.length);
history.pushState(state, title, url) 向历史堆栈添加一个新的状态（不会刷新页面），允许修改当前 URL 显示，但不会真的跳转。state是与新历史记录关联的数据对象。 history.pushState({page:2}, "title 2", "/page2.html");
history.replaceState(state, title, url) 修改当前历史记录的状态（不会新增记录，也不会刷新页面），修改 URL 及关联数据。 history.replaceState({page:3}, "title 3", "/page3.html");

history.forward()相当于history.go(1)
history.back()相当于history.go(-1)，
forward和back本身都不能传参数

（3）阻止默认行为

event.preventDefault()

（4）触摸事件

事件类型 说明
touchstart 手指触摸屏幕时触发
touchmove 手指在屏幕上滑动时持续触发
touchend 手指从屏幕移开时触发
touchcancel 系统中断触摸事件时触发（如来电、切换应用）

（5） 冒泡和捕获

常见的时间都能冒泡，少数不能冒泡。

妈妈不让你浪费

mouseenter,mouseleave,blur,resize,unload,load,focus。

9.执行上下文和this绑定

10.词法环境和闭包

11. Node文件查找顺序

  1. 首先查找核心模块(CORE MODULES)
    Node.js会优先检查是否是内置的核心模块,如fs、http等。

  2. 其次查找当前目录下的模块文件(B选项路径)
    在当前目录下查找othermodule.js文件。

  3. 然后查找当前目录的node_modules目录(A选项路径)
    在当前目录的node_modules文件夹中查找othermodule模块。

  4. 最后逐级向上查找node_modules目录(D选项路径)
    如果在当前目录没找到,就会往上一级目录查找其node_modules。

12. 事件循环

13. 运算符优先级

+优先于?

20250728212928

14. 常用全局对象

Date

日期字符串如何转为毫秒数

20250729084615

15. Script标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    console.log('1 start');
    throw new Error('error 1');
    console.log('1 end');
  </script>
  <script>
    console.log('2 start');
    throw new Error('error 2');
    console.log('2 end');
  </script>
</body>
</html>

上述代码在浏览器中运行的输出是下面这样：

20250803210154

在浏览器中，如果抛出未捕获的错误，则会停止当前script标签内的脚本的执行。
其他script脚本不受影响。

常用API

数组

.unshift()方法如果有多个参数，会直接像数组一样加在最前面。比如[1,2,3].unshift(5, 6)的结果是[5, 6, 1, 2, 3]。

计算机网络

  • 如果不给cookie设置过期时间则默认是会话级别，会话结束时过期。

AJAX

XMLHttpRequest

20250728233530

HTTP报文

20250728234927

操作系统

数据结构与算法

设计模式

数据库

编译原理

数字规律

只有美团考这玩意。

思考顺序：

  1. 相邻项差值
  2. 差值的差值
  3. 每个数位求和(平方和)
  4. 循环模式
  5. 斐波那契

数学

1. P问题，NP问题，NP-hard问题，NPC问题

名称 全称 定义 举例 特点
P Polynomial Time 在多项式时间内能被确定性图灵机求解的问题。 排序、最短路径（Dijkstra）、最大流（Ford-Fulkerson） 解决和验证都很快。
NP Non-deterministic Polynomial Time 在多项式时间内能被非确定性图灵机解决（即猜测答案+快速验证），或者说可在多项式时间内验证的决策问题。 旅行商问题（TSP决策版）、数独是否有解、哈密顿回路 不一定能快速解决，但能快速验证答案。
NP-hard NP Hard（困难） 至少与NP中最难问题一样难。不一定是决策问题，也不一定在NP中。 TSP求最短路径、国际象棋求解、Halting Problem 无法验证是否为NP；解决很难、甚至不可判定。
NP-complete（NPC） NP Complete 同时满足：① 属于NP，② 比NP中任何问题都至少一样难（NP-hard）。 SAT（布尔可满足性问题）、3-SAT、哈密顿回路是否存在 是NP中最难的问题。若某个NPC问题能在P中解决，则P=NP。

20250727190503