HTML常考知识点

1. DOCTYPE 的作用是什么？

解答：

声明文档类型，告诉浏览器当前 HTML 文档遵循的 HTML/XHTML 规范版本。
核心作用：触发浏览器的「标准模式」（按规范解析 CSS/JS），避免「怪异模式」（兼容旧浏览器的非标准解析）。
HTML5 的 DOCTYPE 简化为 <DOCTYPE html>，无需指定版本（自动默认最新 HTML5 规范）。

2. 什么是 HTML 语义化标签？常用的语义化标签有哪些？语义化的好处是什么？

解答：

语义化标签：用具有明确含义的标签（如 <header>、<nav>）替代无意义的 <div>，使文档结构更清晰。
常用语义化标签：<header>（页头）、<nav>（导航）、<main>（主体内容）、<article>（独立文章）、<section>（章节 / 区块）、<aside>（侧边栏）、<footer>（页脚）、<figure>（图文组合）、<figcaption>（图注）。
好处：
1. 提升可读性（开发者和浏览器都能快速理解结构）；
2. 利于 SEO（搜索引擎更易抓取关键内容）；
3. 无障碍访问（屏幕阅读器可通过语义标签解析内容）；
4. 减少 CSS 代码（语义标签自带默认样式逻辑）。

3. 块级元素和行内元素的区别？常见的块级 / 行内元素有哪些？

解答：

特性	块级元素	行内元素
宽度	默认占满父容器宽度	宽度由内容决定
换行	自动换行	不自动换行，同行排列
嵌套	可嵌套块级 / 行内元素（除 `<p>` 外）	仅可嵌套行内元素
CSS 高度 / 宽度	可直接设置	不可直接设置（需转块级 / 行内块）

行内块元素：结合了二者特点，既能在同一行内排列，又能设置宽高和内外边距

空元素（void）：没有内容的HTML元素，无需包含闭合标签

常见块级元素：div、p、h1-h6、ul、ol、li、table、form、header、section。
常见行内元素：span、a、img、strong、em、i、b、label、input（行内替换元素）。
行内块元素：img、input、td
空元素：br、hr、img、input、link

4. src和href的区别

1、用途不同

src 用于引入外部资源，通常是图像<img>、视频<video>、JavaScript 文件等，它会加载并嵌入资源到页中。
href 用于指定超链接的目标地址，通常是网页的 URL 地址，用于页面间的跳转or外部资源的引用。

2、加载行为不同

src 会阻塞后续的页面渲染，直到资源加载完成。例如，浏览器在遇到script或img标签时，会等待对应资源加载完毕再继续执行后续操作。
href 不会阻塞页面渲染，它仅仅是提供了跳转的地址。当浏览器解析到带有 href 的链接时，它会异步加载目标资源，并在用户点击时进行跳转。

3、影响范围不同

src 影响的是元素本身，指定的资源会直接嵌入到该元素中。
href 影响的是页面间的跳转或外部资源的加载，点击链接后，页面或资源会加载到新的位置。

5. meta 标签的常用属性有哪些？各自的作用是什么？

解答：

charset：指定文档编码（如 <meta charset="UTF-8">，避免中文乱码）。
name="viewport"：控制移动端页面布局（核心用于响应式设计），常用配置：<meta name="viewport" content="width=device-width, initial-scale=1.0">
name="description"：页面描述（SEO 关键，搜索引擎展示在搜索结果中）。
name="keywords"：页面关键词（SEO 优化，逗号分隔多个关键词）。
name="robots"：控制搜索引擎抓取（如 index,follow 允许抓取索引，noindex,nofollow 禁止）。
http-equiv="X-UA-Compatible"：指定浏览器渲染模式（如 <meta http-equiv="X-UA-Compatible" content="IE=edge">，强制 IE 使用最新内核）。

6. link 标签和 @import 导入 CSS 的区别？

解答：

特性	link 标签	@import（CSS 语法）
加载时机	并行加载（不阻塞页面渲染）	串行加载（需等待 CSS 解析后加载）
兼容性	所有浏览器支持	IE8 及以下不支持
控制方式	可通过 JS 动态操作（如创建 link 标签）	无法通过 JS 动态修改
位置	只能放在 `<head>` 中	可放在 CSS 文件任意位置
优先级	高于 @import 导入的样式	低于 link 引入的样式

7. script 标签的 defer 和 async 属性有什么区别？

解答：

共同点：两者都让 JS 脚本「异步加载」（不阻塞 HTML 解析）。
区别：
- defer：脚本加载完成后，等待 HTML 解析完毕再执行（按脚本在页面中的顺序执行）。
- async：脚本加载完成后立即执行（不保证顺序，哪个先加载完哪个先执行）。
适用场景：
- 需按顺序执行的脚本（如依赖库 + 业务脚本）用 defer。
- 独立无依赖的脚本（如统计脚本）用 async。

8. 为什么要把 script 标签放在 body 底部？或使用 defer/async？

解答：

原因：浏览器解析 HTML 时，遇到 <script> 会暂停解析，优先下载并执行 JS（阻塞渲染）。因为JavaScript 可能会修改 DOM 结构，因此浏览器必须在执行 JS 代码之前暂停解析。
解决方案：
1. 放在 <body> 底部：HTML 解析完成后再执行 JS，避免阻塞页面渲染。
2. 使用 defer/async：异步加载 JS，不阻塞 HTML 解析（现代开发首选）。

9. Canvas 和 SVG 的区别？各自的适用场景是什么？

解答：

特性	Canvas	SVG
绘制方式	像素级绘制（位图）	矢量图形（基于数学公式）
缩放性	缩放后失真	无限缩放不失真
事件绑定	需手动计算坐标判断点击	支持元素级事件绑定（如点击某图形）
性能	绘制大量图形时性能更好	图形数量多时性能下降
适用场景	游戏、动画、数据可视化（大量点 / 线）	图标、Logo、地图、静态图

10. 什么是 Web Storage？localStorage 和 sessionStorage 的区别？

解答：

Web Storage：HTML5 新增的客户端存储方案，用于存储少量键值对数据（替代 Cookie 的部分场景）。

区别：

特性	localStorage	sessionStorage
生命周期	永久存储（除非手动删除）	会话级存储（页面关闭后消失）
作用域	同一浏览器所有同源页面共享	仅当前页面（标签页 / 窗口）共享
存储大小	约 5MB	约 5MB
数据持久化	支持（刷新页面不丢失）	不支持（页面关闭丢失）

解答：

特性	Web Storage（localStorage/session）	Cookie
存储大小	约 5MB	约 4KB（每个 Cookie 不超过 4KB）
发送方式	不随 HTTP 请求自动发送	随每个同源请求自动发送（增加带宽）
生命周期	localStorage 永久，session 会话级	可设置过期时间（默认会话级）
作用域	同源页面共享	可通过 `path`/`domain`限制作用域
数据类型	仅字符串（需手动序列化 JSON）	仅字符串
用途	存储本地状态（如用户偏好、缓存数据）	存储会话标识（如登录 Token）、跟踪用户

12. 什么是 IndexedDB？它的适用场景是什么？

解答：

IndexedDB：HTML5 新增的客户端「NoSQL 数据库」，用于存储大量结构化数据（支持复杂查询）。
核心特性：
- 键值对存储（键可是字符串、数字、日期等）。
- 支持事务（保证数据操作的原子性）。
- 异步操作（不阻塞主线程）。
- 同源限制（仅同一域名可访问）。
适用场景：
- 离线应用（如邮件客户端、文档编辑器，需本地存储大量数据）。
- 复杂数据缓存（如电商 APP 的商品列表、搜索结果）。
- 无需服务器的本地应用（如记事本、通讯录）。

13. HTML5 的离线存储（Application Cache）的原理是什么？有什么优缺点？

解答：

原理：通过 manifest 文件列出需要离线缓存的资源（HTML、CSS、JS、图片等），浏览器首次加载后缓存这些资源，后续无网络时可直接从缓存读取。
使用方式：在 HTML 标签中指定 manifest 文件：<html manifest="app.appcache">。
优点：
- 支持离线访问（无网络时可打开页面）。
- 减少服务器请求（缓存资源无需重复下载）。
缺点：
- 缓存更新机制复杂（需手动更新 manifest 文件或用户清除缓存）。
- 仅支持同源资源缓存。
- 现在已逐渐被「Service Worker + Cache API」替代（功能更强大）。

14. 如何优化 HTML 页面的加载性能？（至少列举 5 种方法）

解答：

减少 HTTP 请求：合并 CSS/JS 文件、使用 CSS Sprite 合并图片、 inline 小型资源（如小图标用 Data URI）。
优化资源加载：
- 用 link rel="preload" 预加载关键资源（如字体、核心 JS）。
- 用 defer/async 异步加载非关键 JS。
- 延迟加载非首屏图片（懒加载）。
优化 HTML 结构：
- 语义化标签（减少冗余 <div>）。
- 避免嵌套过深（影响浏览器解析效率）。
- 把 <script> 放在 <body> 底部或用 defer/async。
压缩资源：HTML/CSS/JS 代码压缩（去除空格、注释）、图片压缩（WebP 格式、适当压缩质量）。
利用缓存：设置 HTTP 缓存头（Cache-Control、ETag）、使用 localStorage 缓存不常变化的数据。
避免阻塞渲染：
- 避免 <link> 放在 <body> 中（阻塞渲染）。
- 用 media="print" 异步加载 CSS（如 <link rel="stylesheet" href="print.css" media="print" onload="this.media='all'">）。

15. 图片懒加载的原理是什么？原生 HTML5 是否支持？如何实现？

解答：

原理：图片默认不加载，当页面滚动到图片所在位置（图片进入视口）时，再动态设置 src 属性加载图片。
原生支持：HTML5 的 <img> 标签新增 loading="lazy" 属性，无需 JS 即可实现懒加载（主流浏览器支持）：<img src="image.jpg" loading="lazy" alt="懒加载图片">。
手动实现（兼容旧浏览器）：
1. 用 data-src 存储图片真实 URL，src 设为占位图（如 1px 透明图）。
2. 监听 scroll 事件或使用 Intersection Observer API，判断图片是否进入视口。
3. 进入视口后，将 data-src 赋值给 src 加载图片。

16. 如何实现图片预加载？有哪些方法？

解答：

预加载：提前加载后续可能需要的图片（如轮播图的下一张、hover 状态的图片），提升用户体验。
方法：
1. <link rel="preload" as="image" href="image.jpg">（HTML5 原生方法，优先级高）。
2. JS 创建 <img> 标签，设置 src 触发加载：
  javascript 复制代码
```
const img = new Image();
img.src = "image.jpg"; // 预加载
img.onload = () => console.log("图片预加载完成");
```
3. CSS 背景图预加载（适用于背景图）：
  javascript 复制代码
```
.preload-img { background: url("image.jpg") no-repeat -9999px -9999px; }
```

17. iframe 的优缺点是什么？如何限制 iframe 的权限？

解答：

优点：
- 嵌入外部页面（如地图、视频、第三方登录窗口）。
- 隔离页面上下文（避免样式 / JS 冲突）。
缺点：
- 阻塞页面加载（影响性能）。
- 安全风险（如被用于点击劫持）。
- 搜索引擎不易抓取（影响 SEO）。
权限限制：使用 sandbox 属性（限制 iframe 的操作权限）：<iframe src="https://example.com" sandbox="allow-scripts allow-same-origin"></iframe>常用 sandbox 值：
- allow-scripts：允许执行 JS。
- allow-same-origin：允许访问同源资源。
- allow-forms：允许提交表单。
- allow-top-navigation：允许跳转顶层窗口。

18.HTML5 的拖放 API 的核心步骤是什么？

解答：

使元素可拖拽：给元素添加 draggable="true" 属性（如 <div draggable="true">可拖拽</div>）。
监听拖拽事件：
- 拖拽开始：dragstart（记录拖拽数据）。
- 拖拽过程：drag（可选，实时更新位置）。
- 拖拽结束：dragend（清理拖拽状态）。

定义放置区域：

监听 dragover 事件（必须阻止默认行为，否则无法放置）。
监听 drop 事件（处理放置逻辑，如接收拖拽数据）。

示例：

javascript 复制代码

// 拖拽元素
const dragEl = document.getElementById("drag");
dragEl.addEventListener("dragstart", (e) => {
  e.dataTransfer.setData("text/plain", "拖拽的数据"); // 设置拖拽数据
});

// 放置区域
const dropEl = document.getElementById("drop");
dropEl.addEventListener("dragover", (e) => e.preventDefault()); // 允许放置
dropEl.addEventListener("drop", (e) => {
  const data = e.dataTransfer.getData("text/plain"); // 获取拖拽数据
  dropEl.textContent = data;
});

19.什么是 Server-Sent Events（SSE）？它的适用场景是什么？

解答：

SSE：服务器向客户端单向推送事件的技术（基于 HTTP 协议，客户端订阅服务器的事件流）。
核心特点：
- 单向通信：仅服务器向客户端推送数据（客户端无法向服务器发送数据，需配合 AJAX/WS）。
- 基于 HTTP：无需额外协议（WebSocket 基于 TCP），兼容性更好。
- 自动重连：连接断开时，浏览器会自动尝试重连。
适用场景：
- 实时通知（如消息提醒、系统通知）。
- 实时数据更新（如股票行情、体育比分）。
- 日志实时展示（如后台任务执行日志）。

使用方式（客户端）：

javascript 复制代码

const eventSource = new EventSource("/api/events"); // 订阅服务器事件流
eventSource.onmessage = (e) => {
  console.log("收到服务器数据：", e.data); // e.data 是服务器推送的字符串数据
};
eventSource.onerror = (err) => {
  console.error("连接错误：", err);
  eventSource.close(); // 关闭连接
};

20. 如何实现一个响应式页面？HTML 层面需要做哪些配合？

解答：

核心思路：页面布局随设备宽度自适应调整（移动端、平板、PC 端显示不同布局）。
HTML 层面配合：
1. 设置 viewport meta 标签（关键）：<meta name="viewport" content="width=device-width, initial-scale=1.0">
2. 使用相对单位（如 %、rem、em）替代固定像素（px）。
3. 采用流式布局（块级元素宽度随父容器自适应）。
4. 配合 CSS 媒体查询（@media）实现不同屏幕尺寸的布局切换。
5. 使用 <picture> 标签适配不同屏幕的图片（如移动端显示小图，PC 端显示大图）：
  html 复制代码
```
<picture>
  <source media="(max-width: 768px)" srcset="small.jpg">
  <source media="(min-width: 769px)" srcset="large.jpg">
  <img src="fallback.jpg" alt="响应式图片">
</picture>
```

21. 如何实现一个离线可用的 Web 应用？HTML5 提供了哪些技术支持？

解答：

核心思路：通过缓存关键资源（HTML、CSS、JS、图片），让应用在无网络时仍可访问。
HTML5 技术支持：
1. Application Cache（离线缓存）：通过 manifest 文件缓存资源（适用于简单应用）。
2. Service Worker + Cache API（现代方案）：
  - Service Worker：运行在后台的脚本，拦截网络请求，可实现缓存策略（如缓存优先、网络优先）。
  - Cache API：用于存储和管理缓存资源（比 Application Cache 更灵活）。
3. IndexedDB：存储离线所需的结构化数据（如用户数据、业务数据）。
实现步骤：
1. 注册 Service Worker。
2. 安装阶段缓存关键资源（install 事件）。
3. 激活阶段清理旧缓存（activate 事件）。
4. 拦截网络请求，从缓存读取资源（fetch 事件）。
5. 用 IndexedDB 存储离线数据。

22.HTML5 + CSS3 新增核心

一、HTML5 核心

语义化标签：<header> <nav> <article> <section> <aside> <footer>（清结构、助 SEO）
表单增强：email/date/range 类型；placeholder required pattern 属性
多媒体：<video>（controls autoplay muted）、<audio>（controls）
其他：<canvas>（绘图）、data-*（存数据）、localStorage/sessionStorage（本地存储）

二、CSS3 核心

选择器：input[type="text"] li:nth-child(even) div:not(.active) p::before
布局：display:flex（弹性居中）、display:grid（网格布局）、box-sizing:border-box（盒模型优化）
样式：border-radius（圆角）、box-shadow（阴影）、linear-gradient（渐变）
动画：transition（平滑过渡）、transform（旋转 / 缩放）、@keyframes（自定义动画）
响应式：@media (max-width:768px)（媒体查询）、vw/vh（视口单位）

前端本地存储面试核心总结

面试中本地存储是必问知识点，核心围绕 "各方案区别、适用场景、核心特性、安全问题" 展开。以下是精炼版总结，直接适配面试答题逻辑，建议结合实例记忆：

一、核心存储方案对比（面试必背表格）

特性	Cookie	localStorage	sessionStorage	IndexedDB
存储大小	~4KB（最小）	~5-10MB	~5-10MB	无固定限制（GB 级）
生命周期	可设置过期时间（expires/max-age），默认会话级	永久存储（手动清除）	会话级（标签页关闭即删，刷新不丢）	永久存储（手动清除）
是否随请求发送	是（自动携带在 HTTP 头）	否	否	否
作用域	同源（Domain+Path 控制）	同源（协议 + 域名 + 端口）	同源 + 同标签页（跨标签页不共享）	同源
数据类型	仅字符串	仅字符串（需 JSON 序列化对象）	仅字符串（需 JSON 序列化对象）	任意类型（对象、Blob、数组）
操作方式	同步（API 繁琐）	同步（API 简洁）	同步（API 简洁）	异步（不阻塞主线程）
核心特性	服务器可读写，支持安全配置	客户端本地存储，无过期时间	临时会话存储，隔离性强	事务、索引、大量结构化数据

二、各方案核心考点 + 答题模板

高频问题：

Cookie 的作用？为什么不适合存大量数据？
Cookie 的安全属性有哪些？作用是什么？

答题模板：

Cookie 是服务器发给浏览器的 4KB 级文本数据，核心用于 身份认证（存储 SessionID）、记住登录状态，因为会随每次 HTTP 请求自动携带，所以不能存大量数据（会增加带宽消耗）。安全属性必须掌握 3 个：

HttpOnly：禁止 JS 访问，防止 XSS 攻击窃取登录凭证；

Secure：仅 HTTPS 请求携带，避免 HTTP 传输中被拦截；

SameSite：限制跨站携带（Strict/Lax/None），防止 CSRF 攻击。

2. WebStorage（localStorage + sessionStorage）

高频问题：

localStorage 和 sessionStorage 的区别？
什么时候用 localStorage？什么时候用 sessionStorage？
WebStorage 的缺点是什么？

答题模板：

两者都是 HTML5 引入的 5-10MB 级本地存储，API 一致（setItem/getItem/removeItem/clear），核心区别在 生命周期和作用域：

localStorage：永久存储、同源共享，适合存 用户偏好（主题、语言）、不常变动的缓存数据（如首页列表）；

sessionStorage：会话级、同标签页隔离，适合存 临时表单数据（防止刷新丢失）、会话级状态（如步骤条进度）。缺点：仅支持字符串存储（对象需 JSON 序列化），无过期时间（需手动管理），敏感数据不建议存（同源 JS 可直接访问）。

3. IndexedDB

高频问题：

什么时候需要用 IndexedDB？
IndexedDB 的核心特性是什么？

答题模板：

IndexedDB 是浏览器端的 NoSQL 数据库，适合 存储大量结构化数据、离线应用（PWA）、二进制文件（图片 / 文档）。核心特性：① 异步操作（不阻塞 UI）；② 支持事务（保证数据一致性）；③ 可创建索引（高效查询）；④ 无存储上限，能存复杂数据类型（如 Blob）。注意：API 较复杂，实际开发常用封装库（如 Dexie.js）简化操作。

三、面试高频对比题（直接背答案）

存储大小：Cookie 4KB vs localStorage 5-10MB；
传输特性：Cookie 随请求发送 vs localStorage 不发送；
生命周期：Cookie 可设置过期 vs localStorage 永久；
作用场景：Cookie 侧重服务器交互（身份认证） vs localStorage 侧重客户端本地缓存（偏好设置）。

2. localStorage vs sessionStorage

生命周期：localStorage 永久 vs sessionStorage 会话级；
作用域：localStorage 同源共享 vs sessionStorage 同标签页隔离；
适用场景：localStorage 存长期数据 vs sessionStorage 存临时数据。

存储上限仅 4KB，无法满足大量数据需求；
每次 HTTP 请求都会自动携带，增加请求头体积，浪费带宽；
API 繁琐，操作不便（需手动解析字符串）。

四、实战场景题答题思路

问题："用户登录后，如何记住登录状态？退出登录怎么做？"

登录成功后，服务器返回 SessionID，前端通过 Cookie 存储（设置 HttpOnly+Secure+SameSite 属性，防止安全风险），实现身份认证；

同时用 localStorage 存储用户基本信息（如昵称、头像），用于页面展示（避免每次请求服务器获取）；

退出登录时，前端清除 localStorage 中的用户信息，同时调用服务器接口清除 Cookie 中的 SessionID（或设置 Cookie 过期时间为过去）。

问题："离线应用（如离线文档阅读器）如何实现本地数据存储？"

答题思路（IndexedDB）：

用 IndexedDB 存储文档内容、用户阅读进度等大量结构化数据：

优势：存储容量大，支持异步操作不卡顿，支持事务保证数据一致性；

实现：首次加载时将文档数据同步到 IndexedDB，离线时直接从 IndexedDB 读取，在线时同步更新数据。

五、易错点提醒（面试避坑）

不要混淆 sessionStorage 的作用域：同一浏览器的不同标签页，即使同源也不能共享 sessionStorage；
Cookie 的 HttpOnly 属性：设置后 JS 无法访问，只能通过服务器修改，是防止 XSS 窃取登录凭证的关键；
WebStorage 的存储限制：仅支持字符串，存储对象时必须用JSON.stringify()序列化，读取时用JSON.parse()解析；
IndexedDB 的异步特性：所有操作（增删改查）都是异步的，需要通过回调或 Promise 处理结果，不能同步调用。

HTML常考知识点

1. DOCTYPE 的作用是什么？

2. 什么是 HTML 语义化标签？常用的语义化标签有哪些？语义化的好处是什么？

3. 块级元素和行内元素的区别？常见的块级 / 行内元素有哪些？

4. src和href的区别

5. meta 标签的常用属性有哪些？各自的作用是什么？

6. link 标签和 @import 导入 CSS 的区别？

7. script 标签的 defer 和 async 属性有什么区别？

8. 为什么要把 script 标签放在 body 底部？或使用 defer/async？

9. Canvas 和 SVG 的区别？各自的适用场景是什么？

10. 什么是 Web Storage？localStorage 和 sessionStorage 的区别？

11. Web Storage 和 Cookie 的区别？

12. 什么是 IndexedDB？它的适用场景是什么？

13. HTML5 的离线存储（Application Cache）的原理是什么？有什么优缺点？

14. 如何优化 HTML 页面的加载性能？（至少列举 5 种方法）

15. 图片懒加载的原理是什么？原生 HTML5 是否支持？如何实现？

16. 如何实现图片预加载？有哪些方法？

17. iframe 的优缺点是什么？如何限制 iframe 的权限？

18.HTML5 的拖放 API 的核心步骤是什么？

19.什么是 Server-Sent Events（SSE）？它的适用场景是什么？

20. 如何实现一个响应式页面？HTML 层面需要做哪些配合？

21. 如何实现一个离线可用的 Web 应用？HTML5 提供了哪些技术支持？

22.HTML5 + CSS3 新增核心

一、HTML5 核心

二、CSS3 核心

前端本地存储面试核心总结

一、核心存储方案对比（面试必背表格）

二、各方案核心考点 + 答题模板

1. Cookie

高频问题：

答题模板：

2. WebStorage（localStorage + sessionStorage）

高频问题：

答题模板：

3. IndexedDB

高频问题：

答题模板：

三、面试高频对比题（直接背答案）

1. Cookie vs localStorage

2. localStorage vs sessionStorage

3. 为什么不用 Cookie 存大量数据？

四、实战场景题答题思路

问题："用户登录后，如何记住登录状态？退出登录怎么做？"

答题思路（结合 Cookie+localStorage）：

问题："离线应用（如离线文档阅读器）如何实现本地数据存储？"

答题思路（IndexedDB）：

五、易错点提醒（面试避坑）