前端面试题一（高频）一、HTML 基础（10 题） 1. DOCTYPE 的作用是什么？标准模式和怪异模式有什么区别？

一、HTML 基础（10 题）

1. DOCTYPE 的作用是什么？标准模式和怪异模式有什么区别？

文档类型声明，

告诉浏览器文档类型和 HTML 版本：明确告知浏览器当前页面遵循的 HTML 规范（如 HTML5、HTML4.01）。
决定浏览器的渲染模式：这是最关键的作用 —— 浏览器会根据是否存在合法的DOCTYPE，选择「标准模式」或「怪异模式」渲染页面。

维度	标准模式（Standards Mode）	怪异模式（Quirks Mode）
渲染规则	严格遵循 W3C 制定的 HTML/CSS 标准	模拟早期浏览器（如 IE5/6）的非标准渲染行为
盒模型计算	`width`仅包含内容区（W3C 标准盒模型）	`width`包含内容 + 内边距 + 边框（IE 盒模型）
元素对齐 / 布局	严格按 CSS 规则渲染（如`margin: 0 auto`居中有效）	布局混乱（如`margin: 0 auto`居中失效）
尺寸单位 / 溢出处理	遵循标准（如`em`/`px`计算准确）	非标准（如溢出内容可能被截断或异常显示）
兼容性	各浏览器渲染结果一致，符合预期	不同浏览器渲染差异大，布局易错乱

2. HTML5 新增了哪些语义化标签？语义化标签的优势是什么？

HTML5 抛弃了纯用 <div class="header/nav/footer"> 这种无意义的布局方式，新增了一批有明确含义的标签，核心可分为「页面结构类」和「表单 / 交互类」两大类

标签	含义	典型使用场景
`<header>`	页面 / 区块的头部	网站标题、导航栏、logo
`<nav>`	导航区域	主导航、侧边栏导航
`<main>`	页面的核心内容（唯一）	页面主体内容（只出现一次）
`<section>`	独立的内容区块	文章章节、产品模块、新闻板块
`<article>`	独立的、可复用的内容	博客文章、评论、新闻详情
`<aside>`	侧边栏 / 附属内容	相关推荐、作者信息、广告
`<footer>`	页面 / 区块的底部	版权信息、联系方式、备案号
`<figure>`	带说明的媒体内容	图片 + 图片描述
`<figcaption>`	`<figure>`的标题 / 说明	配合 `<figure>`使用

相比用 <div> 加 class 命名的方式，语义化标签的优势体现在开发、维护、兼容、SEO 四个维度

a. 1. 代码可读性 & 可维护性大幅提升

不用再靠 class="header"/class="nav" 来区分区块，直接看标签就知道作用，新人接手代码也能快速理解结构；
示例对比：html预览

<!-- 传统方式（无语义） -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="content">
  <div class="article">...</div>
  <div class="aside">...</div>
</div>

<!-- HTML5 语义化方式 -->
<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
  <aside>...</aside>
</main>

b. 2. 对搜索引擎（SEO）更友好

搜索引擎爬虫能通过语义化标签快速识别页面的核心内容（比如 <main>/<article>），提升页面在搜索结果中的权重，让网站更容易被搜到。

c. 3. 提升无障碍访问体验

屏幕阅读器（供视障用户使用）能识别语义化标签，比如读 <nav> 时会提示 “这是导航区域”，读 <article> 时提示 “这是文章内容”，大幅提升残障用户的使用体验。

d. 4. 减少冗余代码，符合 W3C 标准

不用额外写大量 class 来标识区块，代码更简洁；同时 HTML5 语义化标签是官方标准，各浏览器（IE9+）兼容性良好，避免自定义 class 命名不统一的问题。

<main> 标签一个页面只能有一个，代表页面核心内容，不要重复使用；
<section> 和 <article> 的区别：<article> 是 “独立可复用”（比如单篇文章），<section> 是 “普通区块”（比如文章的一个章节）；
语义化标签本质还是「块级元素」，样式上和 <div> 无区别，需要自己写 CSS 控制布局。

e. 总结

HTML5 新增的核心语义化标签以 <header>/<nav>/<main>/<article>/<footer> 为代表，聚焦页面结构的语义化表达；
语义化标签的核心优势：提升代码可读性、优化 SEO、改善无障碍体验、降低维护成本；
开发中应优先使用语义化标签替代无意义的 <div>，让 HTML 结构 “见名知意”。

3. `src` 和 `href` 的区别是什么？分别在哪些场景下使用？

ⅰ. src 和 href 的核心区别

src（source，源）和 href（hypertext reference，超文本引用）虽然都是用来指定资源路径，但浏览器处理它们的方式完全不同，核心差异如下：

维度	src (源)	href (超文本引用)
核心作用	将外部资源嵌入到当前文档的指定位置	建立当前文档与外部资源的关联 / 链接
浏览器处理方式	暂停当前文档解析，加载并执行资源后才继续	不会暂停当前文档解析，仅建立链接关系
本质行为	替换（replace）：用外部资源替换标签位置	引用（reference）：仅关联，不替换当前

ⅱ. 总结

核心区别：src 是 “嵌入替换”，阻塞文档解析；href 是 “关联引用”，不阻塞解析；
使用场景：

- src 用于 <script>/<img>/<iframe>/<video>/<audio> 等 “嵌入资源” 的标签；
- href 用于 <a>/<link>/<base>/<area> 等 “建立链接” 的标签；

关键原则：判断是否需要 “把外部资源放到当前标签位置”，是则用 src，否则用 href。

4. HTML5 中的 `localStorage`、`sessionStorage`、`cookie` 有什么区别？

特性	localStorage	sessionStorage	cookie
存储大小	约 5MB（不同浏览器略有差异）	约 5MB	最大 4KB
有效期	永久存储（除非手动删除）	会话级（页面关闭即清空）	可设置过期时间（Expires/Max-Age），默认会话结束失效
作用域	同源（协议 + 域名 + 端口）下所有标签页共享	仅当前标签页（即使同源，新标签页也不共享）	同源共享，可通过 Domain/Path 限制作用域
与服务器交互	不主动携带到服务器	不主动携带到服务器	每次请求同源接口时，自动携带在请求头中
访问方式	window.localStorage	window.sessionStorage	document.cookie（需手动解析）
数据持久化	关闭浏览器 / 电脑仍保留	关闭标签页即销毁	未设置过期时间则关闭浏览器销毁，设置则保留到过期

ⅰ. 1. localStorage：永久存储，跨会话共享

适合存储长期保留、同源共享的非敏感数据，比如用户偏好设置、本地缓存的静态数据等。

网站主题设置（深色 / 浅色模式）；
用户登录后记住 “自动登录” 状态（非核心敏感信息）；
缓存不常变动的静态数据（如省市区列表）。

ⅱ. 2. sessionStorage：会话级存储，仅当前标签页有效

适合存储临时、仅当前页面使用的数据，比如表单临时草稿、页面切换的临时状态等

多步骤表单的临时数据（防止误关页面丢失）；
页面内的临时状态（如滚动位置、筛选条件）；
敏感临时数据（无需长期保留，关闭标签即销毁）。

ⅲ. cookie：小体积、随请求携带

适合存储小体积、需要和服务器交互的标识类数据，比如用户会话 ID、登录态标识等。

服务器返回的会话标识（如 JSESSIONID、SESSION_TOKEN）；
记住登录状态（短期，比如 7 天）；
第三方统计 / 埋点的标识（小体积数据）。

5. 什么是 `<meta>` 标签？常用的 `meta` 属性有哪些（至少列举 3 个）？

<meta> 标签是 HTML 中用于提供页面元数据的标签（元数据：描述数据的数据），它不会在页面上显示，但会被浏览器、搜索引擎、爬虫等解析，用于配置页面行为、提供页面信息。

<meta> 标签必须放在 <head> 标签内，通常包含 name/http-equiv（定义元数据类型）和 content（定义元数据值）两个核心属性，

<meta> 标签是 HTML 的 “元数据配置入口”，用于提供页面的非可视化信息，影响浏览器渲染、SEO、移动端适配等；
最常用的<meta>属性：

- viewport：移动端视口适配（核心）；
- charset：字符编码（避免乱码）；
- description/keywords：SEO 优化；

配置原则：根据页面场景按需配置，优先保证charset和viewport（移动端），再补充 SEO 相关属性。

6. 简述 HTML 中的块级元素和行内元素的区别，各举 5 个常见例子。

块级（Block）和行内（Inline）元素是 HTML 元素的两大基础分类，核心差异体现在布局行为和可设置的样式属性上，具体对比如下：

特性	块级元素	行内元素
宽度与占行	独占一行，默认宽度撑满父容器	不独占一行，宽度仅包裹自身内容
高度 / 宽度设置	可通过 `width`/`height`设置	无法通过 `width`/`height`设置（宽高由内容决定）
内外边距（margin/padding）	上下左右都可设置，且生效	左右边距生效，上下边距不生效（无法撑开）
对齐方式	可通过 `margin: 0 auto`水平居中	需通过 `text-align`（父元素）或 `line-height`调整
嵌套规则	可嵌套块级 / 行内元素（部分例外，如 `<p>`不能嵌套 `<div>`）	只能嵌套行内元素，不能嵌套块级元素

ⅰ. 1. 块级元素（5 个核心）

标签	用途	示例
`<div>`	通用布局容器	`<div class="container">...</div>`
`<p>`	段落文本	`<p>这是一段正文内容</p>`
`<h1>-<h6>`	标题（h1 最大，h6 最小）	`<h1>页面主标题</h1>`
`<ul>/<ol>`	无序列表 / 有序列表	`<ul><li>列表项1</li></ul>`
`<section>`	HTML5 语义化区块	`<section class="content">...</section>`

补充：<footer>、<header>、<main>、<form> 也属于块级元素

ⅱ. 2. 行内元素（5 个核心）

标签	用途	示例
`<span>`	通用行内容器	`<p>这是<span style="color:red">红色</span>文字</p>`
`<a>`	超链接	`<a href="https://baidu.com">百度</a>`
`<img>`	图片（特殊行内元素，可设宽高）	`<img src="logo.png" alt="logo">`
`<strong>`	强调文本（加粗）	`<strong>重要提示</strong>`
`<em>`	强调文本（斜体）	`<em>重点内容</em>`

补充：<br>（换行）、<label>、<code>、<small> 也属于行内元素；

/* 行内转块级 */
span { display: block; }
/* 块级转行内 */
div { display: inline; }
/* 转为行内块 */
button { display: inline-block; }

7. HTML5 新增的表单控件有哪些？（如 `input` 的新类型）

ⅰ. 核心：`<input>` 新增类型（高频使用）

<input> 是表单最核心的控件，HTML5 为其新增了十余种类型，以下是开发中最常用的 8 种：

类型（type）	用途	示例代码	核心优势
`email`	邮箱输入框	`<input type="email" required>`	自带邮箱格式校验（如必须包含 `@`），移动端弹出邮箱键盘
`tel`	电话号码输入框	`<input type="tel" placeholder="手机号">`	移动端弹出数字键盘，适配电话输入场景
`url`	URL 地址输入框	`<input type="url" required>`	自带 URL 格式校验（如必须以 `http://`开头）
`number`	纯数字输入框	`<input type="number" min="1" max="100">`	只允许输入数字，自带增减按钮，可限制范围（min/max）
`date`	日期选择器（年 - 月 - 日）	`<input type="date">`	自带日期选择面板，无需手写日历组件
`time`	时间选择器（时：分）	`<input type="time">`	自带时间选择面板，支持 24 小时制
`datetime-local`	本地日期时间选择器	`<input type="datetime-local">`	选择「年 - 月 - 日时：分」，本地化显示
`range`	滑块控件	`<input type="range" min="0" max="100" value="50">`

除了 <input> 新类型，HTML5 还新增了 3 个独立的表单控件，进一步丰富交互：

ⅱ. 1. `<datalist>`：输入建议 / 下拉提示

配合 <input> 使用，提供输入联想 / 下拉选项，类似 “带输入提示的下拉框”：

<!-- 示例：城市选择，支持输入+下拉选择 -->
<input type="text" list="cityList" placeholder="请输入城市">
<datalist id="cityList">
  <option value="北京"></option>
  <option value="上海"></option>
  <option value="广州"></option>
  <option value="深圳"></option>
</datalist>

ⅲ. 2. `<progress>`：进度条

展示任务进度（如文件上传、加载进度），自带样式，无需手写进度条：

<!-- 示例：显示50%进度 -->
<progress value="50" max="100"></progress>

ⅳ. 3. `<meter>`：度量衡（范围值展示）

展示在已知范围内的数值（如评分、磁盘使用率），区别于 progress（progress 是 “动态进度”，meter 是 “静态度量”）：

<!-- 示例：磁盘使用率70%（警告色） -->
<meter value="70" min="0" max="100" low="60" high="80"></meter>

<!-- required：必填项 -->
<input type="email" required>

<!-- pattern：自定义正则校验（如手机号） -->
<input type="tel" pattern="^1[3-9]\d{9}$" title="请输入正确的手机号">

<!-- placeholder：输入提示 -->
<input type="text" placeholder="请输入姓名">

<!-- min/max/step：数值范围/步长（配合number/range） -->
<input type="number" min="1" max="10" step="2">

<!-- autocomplete：自动补全（on/off） -->
<input type="text" autocomplete="on">

8. 什么是 SVG 和 Canvas？两者的核心区别是什么？

ⅰ. 一、SVG 和 Canvas 的基础定义

1. 1. SVG（Scalable Vector Graphics，可缩放矢量图形）

SVG 是基于 XML 语法的矢量图形格式，它通过「描述图形的形状、路径、颜色等属性」来绘制图形（比如用 <circle> 画圆、<path> 画路径）。

核心特点：矢量图形，无论放大 / 缩小多少倍，清晰度都不会丢失；
本质：是DOM 元素，每个图形都是独立的节点，可通过 CSS/JS 直接操作。

ⅱ. 2. Canvas（画布）

Canvas 是 HTML5 新增的位图画布，它通过「JavaScript 脚本在画布上逐像素绘制图形」，绘制完成后，浏览器只记录像素信息，不记录图形本身。

核心特点：位图图形，放大后会出现锯齿（像素化）；
本质：是单一画布元素，绘制的图形不是 DOM 节点，无法直接操作单个图形（只能重绘整个画布）。

ⅲ. 二、SVG 和 Canvas 的核心区别（表格对比）

这是前端图形开发的核心考点，差异体现在渲染逻辑、交互性、性能等多个维度：

特性	SVG	Canvas
图形类型	矢量图形（基于形状描述）	位图图形（基于像素点）
渲染方式	声明式：用标签描述图形（如 `<circle>`）	命令式：用 JS 逐像素绘制（如 `ctx.fillRect()`）
DOM 关联	每个图形都是独立 DOM 节点	整体是一个 DOM 节点，内部图形无 DOM 关联
交互性	可直接给单个图形绑定事件（如点击圆）	无法给单个图形绑定事件，需手动计算鼠标位置判断点击目标
缩放性	无限缩放不失真	缩放后像素化（模糊 / 锯齿）
性能表现	少量图形（几十 / 几百个）性能好；大量图形（上千个）DOM 节点过多，性能下降	大量图形 / 动画（如游戏、数据可视化）性能好；逐像素绘制效率高
适用场景	静态图形、需交互的矢量图形、小量图形	动态动画、游戏、大数据量可视化、

ⅳ. 典型使用场景

1. 1. SVG 适合的场景

图标（如网站 Logo、iconfont 矢量图标）；
静态数据可视化（如简单的饼图、柱状图）；
需交互的矢量图形（如地图标注、流程图）；
印刷 / 大屏展示（需无限缩放不失真）。

2. 2. Canvas 适合的场景

游戏开发（如 2D 小游戏、弹幕）；
动态数据可视化（如实时更新的大数据图表）；
像素级操作（如涂鸦画板、图片编辑）；
视频 / 动画处理（如逐帧绘制动画）

9. `<iframe>` 标签的作用是什么？使用时可能存在哪些问题？

ⅰ. 一、`<iframe>` 标签的核心作用

<iframe>（Inline Frame，内联框架）是 HTML 中用于在当前页面中嵌入另一个独立 HTML 文档的标签，简单来说就是 “页面里嵌页面”。

1. 核心用途：

嵌入第三方内容：比如嵌入地图（百度 / 高德地图）、视频（B 站 / YouTube）、支付弹窗、广告等；
隔离独立功能模块：比如后台管理系统中嵌入独立的子系统（如报表、日志模块），避免样式 / JS 冲突；
加载异步 / 耗时内容：比如嵌入一个需要单独加载的大型表单，不阻塞主页面渲染。

2. 基础使用示例：

<!-- 嵌入百度首页，设置宽高和边框 -->
<iframe 
  src="https://www.baidu.com" 
  width="800" 
  height="600" 
  frameborder="0"  <!-- 去掉默认边框 -->
  title="百度首页"  <!-- 无障碍访问必备 -->
></iframe>

ⅱ. 二、使用 `<iframe>` 可能存在的问题（核心避坑点）

<iframe> 虽然实用，但因 “跨文档隔离” 特性，会带来一系列开发和体验问题，也是面试高频考点：

1. 1. 跨域问题（最核心）

浏览器的同源策略会限制 <iframe> 与父页面的交互：

父页面无法操作跨域 iframe 的 DOM/JS：比如父页面想获取 iframe 内的元素、调用 iframe 内的函数，会报 Cross-Origin Request Blocked 错误；
iframe 也无法操作跨域父页面：同理，嵌入的第三方页面（如百度）无法修改父页面内容（安全限制）。✅ 解决方式：仅当父页面和 iframe 页面同源（协议 + 域名 + 端口一致） 时可自由交互；跨域需通过 postMessage 实现通信：javascript运行

// 父页面向 iframe 发送消息
const iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage('Hello', 'https://iframe-domain.com');

// iframe 接收消息
window.addEventListener('message', (e) => {
  if (e.origin === 'https://parent-domain.com') {
    console.log(e.data); // 接收父页面消息
  }
});

2. 2. 性能与加载问题

阻塞主页面加载：<iframe> 的 src 会触发独立的网络请求，若放在页面顶部，可能阻塞主页面的渲染（建议放在页面底部，或动态加载）；
重复加载资源：iframe 内的页面会独立加载 CSS/JS，若与主页面重复（如都加载 jQuery），会增加资源体积和加载时间；
内存占用高：每个 iframe 都是独立的浏览器上下文，多个 iframe 会显著增加内存消耗。

3. 3. 样式与布局问题

样式隔离与冲突：虽然 iframe 有独立样式，但父页面的 z-index、定位可能导致 iframe 遮挡 / 被遮挡；iframe 内的样式无法影响父页面，反之亦然；
响应式适配难：iframe 的宽高固定时，在移动端易出现滚动条或内容溢出；需手动监听窗口大小调整 iframe 尺寸：javascript运行

// 自适应 iframe 高度（同源场景）
window.addEventListener('resize', () => {
  const iframe = document.querySelector('iframe');
  iframe.height = iframe.contentWindow.document.body.scrollHeight + 'px';
});

ⅲ. 4. 安全问题

点击劫持（Click Jacking） ：恶意网站可能用透明 iframe 覆盖在页面上，诱导用户点击 iframe 内的恶意链接；✅ 解决方式：后端设置 X-Frame-Options 响应头（DENY 禁止嵌入 /SAMEORIGIN 仅允许同源嵌入）；
第三方 iframe 风险：嵌入不可信的第三方 iframe 可能被注入恶意 JS（如窃取 cookie），需确保嵌入来源安全。

ⅳ. 5. 无障碍与 SEO 问题

SEO 不友好：搜索引擎爬虫通常不会解析 iframe 内的内容，嵌入的核心内容会被忽略，影响页面权重；
无障碍访问差：屏幕阅读器对 iframe 的支持有限，若未设置 title 属性，视障用户无法识别 iframe 内容。

ⅴ. 三、替代方案（减少 iframe 使用）

若不是必须嵌入第三方内容，可优先选择更优方案：

AJAX/Fetch 加载内容：同源场景下，用接口拉取内容后渲染到主页面，避免 iframe 隔离；
Web Components：封装独立组件，替代 iframe 隔离功能，且无跨域 / 性能问题；
静态资源嵌入：如视频用 <video> 直接嵌入，地图用官方 JS SDK 替代 iframe 嵌入。

a. 总结

核心作用：<iframe> 用于在当前页面嵌入独立的 HTML 文档，适合第三方内容嵌入、功能模块隔离；
核心问题：

- 跨域交互限制（需用 postMessage）；
- 性能 / 加载阻塞、样式适配难；
- 安全风险（点击劫持）、SEO / 无障碍差；

使用原则：非必要不使用，优先选择同源方案或第三方 SDK，使用时必须做跨域 / 安全防护。

简单来说，<iframe> 是 “页面嵌页面” 的工具，好用但坑多 —— 核心坑是跨域和安全，使用前一定要评估是否有更优替代方案。

10. HTML 中的 `data-*` 属性有什么用途？如何通过 JS 获取和设置？

a. 一、data-* 属性的核心用途

data-* 是 HTML5 新增的自定义数据属性规范，其中 * 可以替换为任意合法的名称（如 data-id、data-user-name），核心作用是：

在 HTML 元素上存储与该元素相关的自定义数据，无需借助 class/id 或隐藏元素，语义化更强；
实现 HTML 与 JS 之间的轻量数据传递，比如给列表项绑定 ID、给按钮绑定关联数据、存储元素的状态信息等；
不影响元素的样式和功能，浏览器不会解析 data-* 属性，仅作为数据载体，兼容性覆盖所有现代浏览器（IE11+ 也支持）。

b. 典型使用场景示例：

<!-- 1. 列表项绑定唯一ID -->
<li data-id="1001" data-user-name="张三" data-is-vip="true">张三</li>

<!-- 2. 按钮绑定跳转链接 -->
<button data-url="https://baidu.com" data-type="external">跳转百度</button>

<!-- 3. 存储元素状态 -->
<div data-status="loading" data-progress="80">加载中...</div>

c. 二、通过 JS 获取 / 设置 data-* 属性的两种方式

ⅰ. 方式 1：通用方式（getAttribute/setAttribute）

这是最基础的方式，适用于所有自定义属性（包括 data-*），语法简单，新手易理解：

<!-- 示例元素 -->
<div id="myDiv" data-age="25" data-user-info='{"name":"李四","id":2002}'>测试</div>

<script>
  const div = document.getElementById('myDiv');

  // 1. 获取 data-* 属性值（注意属性名要写完整）
  const age = div.getAttribute('data-age'); // "25"（返回字符串类型）
  const userInfo = div.getAttribute('data-user-info'); // '{"name":"李四","id":2002}'
  
  // 解析JSON格式的data属性
  const userInfoObj = JSON.parse(userInfo); 
  console.log(userInfoObj.name); // "李四"

  // 2. 设置 data-* 属性值
  div.setAttribute('data-age', 30); // 会自动转为字符串
  div.setAttribute('data-user-info', JSON.stringify({name:"李四", id:2003}));

  // 3. 移除 data-* 属性
  div.removeAttribute('data-age');
</script>

ⅱ. 方式 2：推荐方式（dataset 对象）

HTML5 提供了 element.dataset 对象，专门用于操作 data-* 属性，语法更简洁，无需写完整的 data- 前缀，且自动处理连字符命名：

ⅲ. 核心规则：

data-xxx → dataset.xxx（单单词）；
data-xxx-yyy → dataset.xxxYyy（连字符转驼峰）；
所有值均为字符串类型，布尔 / 数字 / JSON 需手动转换。

<!-- 示例元素 -->
<div id="myDiv" data-age="25" data-user-name="李四" data-is-vip="true">测试</div>

<script>
  const div = document.getElementById('myDiv');

  // 1. 获取 data-* 属性值
  console.log(div.dataset.age); // "25"（对应 data-age）
  console.log(div.dataset.userName); // "李四"（对应 data-user-name，驼峰转换）
  console.log(div.dataset.isVip); // "true"（布尔值需手动转）
  const isVip = div.dataset.isVip === 'true'; // 转为布尔值

  // 2. 设置 data-* 属性值
  div.dataset.age = 30; // 自动转为字符串，对应 data-age="30"
  div.dataset.userName = "王五"; // 对应 data-user-name="王五"
  div.dataset.gender = "男"; // 新增 data-gender="男"

  // 3. 删除 data-* 属性
  delete div.dataset.isVip; // 移除 data-is-vip 属性
</script>

ⅳ. 三、实用注意事项（新手避坑）

值类型问题：data-* 属性的所有值都是字符串，如果存储数字、布尔、对象，需手动转换：javascript运行

// 存储数字
div.dataset.score = 90; // 实际存储为 "90"
const score = Number(div.dataset.score); // 转为数字

// 存储对象
const info = {id: 1, name: "张三"};
div.dataset.info = JSON.stringify(info); // 序列化为字符串
const infoObj = JSON.parse(div.dataset.info); // 解析为对象

命名规范：data-* 的名称不能包含大写字母，建议用小写 + 连字符（如 data-user-name 而非 data-UserName）；
兼容性：dataset 支持 IE11+，如果需兼容 IE10 及以下，用 getAttribute/setAttribute；
数据量：data-* 适合存储轻量数据，大量 / 复杂数据建议用 localStorage 或后端接口。

d. 总结

核心用途：data-* 是 HTML 元素的 “轻量数据容器”，用于存储与元素关联的自定义数据，实现 HTML 和 JS 数据互通；
获取 / 设置方式：

- 通用方式：getAttribute('data-xxx') / setAttribute('data-xxx', 值)；
- 推荐方式：element.dataset.xxx（驼峰命名，更简洁）；

关键注意：所有值均为字符串，复杂类型（布尔 / 对象）需手动转换，适合存储轻量数据。

简单来说，data-* 就是给 HTML 元素 “贴标签存数据”，JS 用 dataset 操作最方便，是前端开发中传递轻量数据的最佳实践。

前端面试题一（高频）