一、HTML：页面的骨架
核心作用：定义页面的结构和语义，告诉浏览器 “显示什么内容”。
- 基础语法
- 标签：分为双标签（
<div></div>、<p></p>）和单标签（<img/>、<input/>）。 - 属性：标签的附加信息，如
id、class、src、href。
- 标签：分为双标签（
- 核心标签分类
- 语义化标签：
header（页头）、nav（导航）、main（主体）、article（文章）、footer（页脚），替代无意义的div。 - 文本标签：
h1-h6（标题）、p（段落）、a（链接）、strong（加粗强调）。 - 表单标签：
form（表单容器）、input（输入框，type 含 text/radio/checkbox/submit）、select（下拉框）、textarea（多行文本）。 - 多媒体标签：
img（图片，必填src和alt）、audio（音频）、video（视频）。
- 语义化标签：
- 关键知识点
- 标签嵌套规则：块级标签可嵌套行内标签，行内标签不能嵌套块级标签。
- 字符实体：
（空格）、<（小于号<）、>（大于号>）。
二、CSS：页面的皮肤
核心作用：美化页面，控制元素的布局、颜色、大小等样式，告诉浏览器 “内容怎么显示”。
- 基础语法
- 选择器 {属性：值；}，例如
div { color: red; }。
- 选择器 {属性：值；}，例如
- 核心选择器
选择器类型 示例 作用 标签选择器 p { ... }选中所有对应标签元素 类选择器 .box { ... }选中所有 class 为 box 的元素（最常用） ID 选择器 #header { ... }选中唯一 ID 为 header 的元素 后代选择器 .parent .child { ... }选中 parent 下的 child 元素 伪类选择器 a:hover { ... }选中元素的特殊状态（如鼠标悬浮） - 核心布局与样式
- 盒模型：每个元素是一个盒子，包含
margin（外边距）、border（边框）、padding（内边距）、content（内容）。 - 现代布局：Flex 布局（一维布局，适合行 / 列排列）、Grid 布局（二维布局，适合复杂网格）。
- 定位：
relative（相对自身定位）、absolute（相对最近定位父级）、fixed（相对视口固定）。 - 响应式：
@media媒体查询，根据屏幕宽度适配样式。 - CSS3 特效：
transition（过渡动画）、animation（自定义动画）、border-radius（圆角）、box-shadow（阴影）。
- 盒模型：每个元素是一个盒子，包含
- 样式优先级
- 内联样式 > ID 选择器 > 类选择器 > 标签选择器 > 继承样式。
三、JavaScript：页面的大脑
核心作用：实现页面的动态交互和逻辑，告诉浏览器 “内容如何动、如何响应用户操作”。
- 基础语法
- 变量与数据类型：
let/const声明变量，基本类型（string/number/boolean/null/undefined）、引用类型（object/array/function）。 - 流程控制：
if-else、switch、for/while循环。 - 函数：函数声明 / 表达式、箭头函数、参数、返回值、作用域（全局 / 局部）、闭包。
- 变量与数据类型：
- DOM 操作（核心）
- 查找元素：
document.getElementById()、document.getElementsByClassName()、document.querySelector()。 - 增删改元素：
createElement()、appendChild()、removeChild()、innerHTML。 - 事件绑定：
onclick行内绑定、addEventListener()动态绑定、事件委托。
- 查找元素：
- 异步编程（重点）
- 回调函数：解决异步问题，但易产生回调地狱。
- Promise：三种状态（pending/fulfilled/rejected），
then/catch处理结果。 async/await：基于 Promise 的语法糖，使异步代码同步化。
- BOM 操作
window对象：alert()、setTimeout()、setInterval()。location对象：获取 / 修改 URL，location.href跳转页面。history对象：back()/forward()控制页面历史记录。
八股
一、HTML 篇
- 什么是 HTML 语义化？有什么好处？
- 定义：用具有特定含义的标签（如
header/nav/article）替代无意义的div，清晰描述内容结构。 - 好处：提升代码可读性；利于 SEO（搜索引擎抓取）；方便无障碍阅读（如屏幕阅读器）。
- 定义：用具有特定含义的标签（如
- HTML5 新增了哪些特性？
- 语义化标签：
header/nav/main/article/footer/section。 - 多媒体标签：
audio/video（无需插件直接播放音视频）。 - 表单新特性：新增
type类型（email/tel/number/date）、placeholder/required/autofocus属性。 - 其他：本地存储（
localStorage/sessionStorage）、Canvas 绘图、WebSocket 通信。
- 语义化标签：
src和href的区别？src：替换当前元素，会暂停其他资源加载，直到该资源加载完成（如img/script标签）。href：建立关联，不会阻塞页面渲染（如a/link标签）。
- HTML 中常用的 meta 标签有哪些？
- 字符编码：
<meta charset="UTF-8">。 - 视口适配（移动端）：
<meta name="viewport" content="width=device-width, initial-scale=1.0">。 - SEO 相关：
<meta name="keywords" content="关键词">、<meta name="description" content="页面描述">。
- 字符编码：
二、CSS 篇
- CSS 选择器优先级顺序？
- 优先级从高到低：内联样式（
style=""） >ID 选择器（#id） >类选择器 / 伪类 / 属性选择器（.class/:hover/[type]） >标签选择器 / 伪元素（div/::after） >通配符（*） >继承样式。 - 特殊：
!important会覆盖所有样式（慎用，会破坏样式层级）。
- 优先级从高到低：内联样式（
- CSS 盒模型的两种标准及区别？
- W3C 标准盒模型（默认）：
width/height = 内容区域（content），border和padding会撑开盒子。 - IE 怪异盒模型：
width/height = content + padding + border，不会撑开盒子。 - 切换方式：
box-sizing: content-box（标准）/border-box（怪异，开发常用）。
- W3C 标准盒模型（默认）：
- Flex 布局的核心属性（容器 + 项目）？
- 容器属性：
display: flex：开启 Flex 布局。justify-content：主轴方向对齐方式（flex-start/center/space-between/space-around）。align-items：交叉轴方向对齐方式（flex-start/center/stretch）。flex-direction：主轴方向（row水平 /column垂直）。
- 项目属性：
flex: 1：等价于flex-grow:1; flex-shrink:1; flex-basis:0%（项目占满剩余空间）。align-self：单个项目交叉轴对齐方式（覆盖容器align-items）。
- 容器属性：
- BFC 是什么？如何触发？有什么作用？
- 定义：块格式化上下文（Block Formatting Context），是一个独立的渲染区域，内部元素布局不受外部影响。
- 触发条件（满足其一即可）：
- 根元素（
html）。 float不为none。overflow为hidden/auto/scroll。display为flex/grid/inline-block。position为absolute/fixed。
- 根元素（
- 作用：清除浮动、防止 margin 重叠、实现两栏自适应布局。
- 响应式设计的实现方案？
- 媒体查询：
@media (max-width: 768px) { ... }（根据屏幕宽度适配样式）。 - 弹性单位：
rem（基于根元素字体大小）、vw/vh（基于视口宽高）。 - Flex/Grid 布局：天然支持弹性适配。
- 媒体查询：
position的几个取值及区别？static：默认值，正常文档流，不受top/left影响。relative：相对定位，相对于自身原位置偏移，不脱离文档流。absolute：绝对定位，相对于最近的定位父级偏移，脱离文档流。fixed：固定定位，相对于视口偏移，脱离文档流（如回到顶部按钮）。sticky：粘性定位，在top阈值内相对定位，超出后固定定位。
三、JavaScript 篇
（一）基础语法
let/const/var的区别？特性 varletconst作用域 函数作用域 / 全局作用域 块级作用域 块级作用域 变量提升 存在（可先使用后声明） 存在（暂时性死区） 存在（暂时性死区） 重复声明 允许 不允许 不允许 初始值 可省略 可省略 必须赋值 重新赋值 允许 允许 不允许（指向的引用不可变） - 数据类型及判断方法？
- 基本类型：
string/number/boolean/null/undefined/symbol/bigint。 - 引用类型：
object（包含array/function/date等）。 - 判断方法：
typeof：区分基本类型（但typeof null === 'object'是坑）。instanceof：判断引用类型的具体构造函数（如[] instanceof Array）。Object.prototype.toString.call()：万能方法（如Object.prototype.toString.call(null) === '[object Null]'）。
- 基本类型：
- 什么是闭包？闭包的作用及缺点？
- 定义：函数嵌套函数，内层函数可以访问外层函数的变量，即使外层函数执行完毕。
- 作用：延长变量生命周期、创建私有变量（避免全局污染）。
- 缺点：变量不会被垃圾回收机制回收，容易导致内存泄漏（解决：及时手动释放变量）。
（二）DOM/BOM 操作
- DOM 节点的增删改查方法？
- 查：
document.getElementById()、document.getElementsByClassName()、document.querySelector()（返回单个）、document.querySelectorAll()（返回集合）。 - 增：
document.createElement()（创建节点）、parent.appendChild(child)（添加节点）。 - 删：
parent.removeChild(child)、element.remove()。 - 改：
element.innerHTML（替换内容，有 XSS 风险）、element.textContent（纯文本，安全）。
- 查：
- 事件委托的原理及优势？
- 原理：利用事件冒泡，将子元素的事件绑定到父元素上，通过
event.target判断触发事件的子元素。 - 优势：减少事件绑定次数，提升性能；支持动态新增的子元素（无需重新绑定事件）。
- 示例：给
ul绑定点击事件，处理所有li的点击逻辑。
- 原理：利用事件冒泡，将子元素的事件绑定到父元素上，通过
（三）异步编程
- JavaScript 为什么是单线程？异步的实现原理？
- 单线程原因：避免 DOM 渲染冲突（如果同时操作 DOM 会导致混乱）。
- 异步原理：基于事件循环（Event Loop），分为同步任务和异步任务：
- 同步任务：在主线程执行栈中依次执行。
- 异步任务：分为宏任务（
setTimeout/setInterval/ajax）和微任务（Promise.then/async/await/MutationObserver），异步任务完成后进入任务队列，等待主线程空闲后执行。
- 执行顺序：同步任务 → 微任务 → 宏任务。
- Promise 的三种状态及常用方法？
- 三种状态：
pending（进行中）→fulfilled（成功）/rejected（失败）（状态一旦改变不可逆转）。 - 常用方法：
- 实例方法：
then()（成功回调）、catch()（失败回调）、finally()（无论成功失败都会执行）。 - 静态方法：
Promise.all()（所有 Promise 成功才返回，一个失败则整体失败）、Promise.race()（第一个完成的 Promise 决定结果）。
- 实例方法：
- 三种状态：
async/await和 Promise 的关系？优点？- 关系：
async/await是Promise 的语法糖，底层还是基于 Promise 实现。 - 优点：将异步代码写成同步代码的形式，可读性更高，解决了 Promise 的 “回调地狱” 问题。
- 关系：
