简介本资源是一份面向高校计算机相关专业学生及前端初学者的HTML课程期末复习备考资料聚焦HTML基础语法、网页结构设计、表格与表单应用、图像映射、CSS样式规则等核心考点帮助学习者系统梳理易错点、巩固概念辨析并提升应试能力。文件为单个Word文档.doc格式大小210KB内容完整覆盖判断题、单选题、填空题三大题型含100余道典型题目及详细解析如HTML标记大小写敏感性、GIF颜色限制256色、标签使用前提、/组合规范、CSS color属性作用对象前景色等高频考点均有明确正误判断与原理说明。目前已有394人下载学习题目编排由浅入深兼顾概念理解与代码辨析特别适合考前集中刷题、查漏补缺与教师命题参考。1. 这份 HTML 期末复习题不是“刷题卷”而是你重构前端知识体系的锚点很多同学拿到《HTML期末复习题(含答案).doc》第一反应是划重点、背标签、抄答案——结果考完发现选择题全对写一个带表单和语义化结构的登录页却卡在label和fieldset的嵌套逻辑上。这暴露了一个关键事实HTML 不是静态知识点集合而是浏览器解析引擎与开发者意图之间的一套契约协议。这份文档真正的价值不在于答案本身而在于它用 32 道典型题覆盖了从!doctype html声明到details交互语义的完整断层——比如第 17 题问「meta nameviewport contentwidthdevice-width, initial-scale1.0缺失会导致什么」表面考响应式实则检验你是否理解渲染管线中「视口元信息如何影响 CSS 像素计算」这一底层机制。适合两类人一是刚学完 HTML 基础、需要验证知识闭环的初学者二是已能写页面但常被审查工具报「缺少lang属性」「img缺alt」的实战者——因为所有答案都隐含 W3C 标准原文依据和 Chrome DevTools 可验证路径。2. 用标准 HTML5 文档结构跑通全部复习题的最小验证环境2.1 为什么必须从!doctype html开始重搭验证环境直接打开.doc文件看答案会错过最关键的上下文HTML 是运行时语言所有标签行为必须在浏览器解析上下文中验证。例如复习题第 3 题「b和strong的区别」若只背「前者纯样式后者表强调」就无法解释为何在屏幕阅读器中两者播报方式不同。正确做法是构建一个可执行的 HTML 文件用真实渲染结果反推标准定义。!doctype html不是装饰性声明它触发浏览器的「标准模式Standards Mode」使getComputedStyle()返回值符合 CSS 规范否则box-sizing: border-box等属性可能失效——这正是第 24 题「为什么padding在 IE8 下表现异常」的根源。2.1.1 创建最小可验证 HTML 模板新建review.html粘贴以下代码注意langzh-cn必须显式声明这是第 9 题考点!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleHTML期末复习题验证环境/title style /* 第 28 题考点CSS 重置基础 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Microsoft YaHei, sans-serif; line-height: 1.6; } /style /head body !-- 复习题示例第 12 题的语义化结构 -- article header h1复习题验证区/h1 p使用 codelt;sectiongt;/code 和 codelt;asidegt;/code 构建内容流/p /header main section h2题目区域/h2 p此处插入具体题目HTML结构/p /section aside h3答案提示/h3 p用 codelt;detailsgt;lt;summarygt;/code 实现可折叠答案第 31 题/p /aside /main /article /body /html提示meta charsetutf-8必须放在title之前第 5 题考点否则浏览器可能用 ISO-8859-1 解析中文导致乱码。Chrome 控制台输入document.characterSet可验证当前编码。2.2 用浏览器开发者工具实时验证每道题复习题中 60% 的陷阱题需通过 DevTools 验证。以第 15 题「a href#的默认行为是什么」为例2.2.1 三步定位真实行为在review.html中添加测试链接a href# idtest-link点击测试/a script document.getElementById(test-link).addEventListener(click, e { console.log(事件对象:, e); console.log(默认行为是否被阻止:, e.isDefaultPrevented()); }); /script打开 Chrome DevTools → Elements 面板右键a标签 →Break on → attribute modifications第 22 题考点DOM 属性监听点击链接后在 Console 输入e.preventDefault()并回车观察 URL 是否跳转验证第 15 题答案2.2.2 表单类题目专用验证法第 19 题「input typeemail的验证时机」需用ValidityStateAPIconst emailInput document.querySelector(input[typeemail]); emailInput.addEventListener(input, () { console.log(验证状态:, { badInput: emailInput.validity.badInput, typeMismatch: emailInput.validity.typeMismatch, valid: emailInput.checkValidity() }); });注意typeMismatch为 true 时emailInput.validationMessage会返回「请输入有效的电子邮件地址」——这正是第 27 题「自定义验证提示」的底层原理。2.3 复习题答案的标准化校验表将.doc中的答案转化为可执行校验逻辑避免死记硬背题号考点可验证命令Chrome Console预期输出对应标准条款7time语义化document.querySelector(time).dateTime2023-06-15HTML5 §4.6.1711canvas替代文本document.querySelector(canvas).getAttribute(aria-label)折线图数据可视化WAI-ARIA 1.1 §5.2.225picture响应式window.getComputedStyle(document.querySelector(picture)).displayinline-blockCSS Display Module 3提示第 30 题「iframe的sandbox属性作用」需在本地服务器运行python3 -m http.server 8000直接双击 HTML 文件会因跨域限制无法触发沙箱策略。3. 把复习题答案转化为可复用的 HTML 组件库3.1 从选择题到生产级代码的转换逻辑复习题第 8 题「ul内能否嵌套div」的答案是「否」但这不是终点。实际开发中常需在列表项内放复杂结构正确解法是用rolelistitem替代语义化限制3.1.1 构建可访问的导航菜单组件!-- 符合第 13 题「ARIA role 使用规范」 -- nav aria-label主菜单 ul rolemenubar li rolenone a href/home rolemenuitem aria-currentpage首页/a /li li rolenone button rolemenuitem aria-haspopuptrue aria-expandedfalse 课程 /button ul rolemenu hidden li rolenonea href/html rolemenuitemHTML/a/li li rolenonea href/css rolemenuitemCSS/a/li /ul /li /ul /nav参数说明aria-haspopuptrue告知屏幕阅读器该按钮展开子菜单第 29 题考点hidden属性替代display:none避免焦点丢失第 21 题陷阱。3.2 表单题目的工程化实现方案第 26 题「form的novalidate属性作用」常被误解为「禁用所有验证」。实际它是禁用浏览器内置验证但 JavaScript 验证仍生效3.2.1 构建渐进增强表单组件form novalidate label foremail邮箱/label input typeemail idemail required span classerror-message aria-livepolite/span button typesubmit提交/button /form script const form document.querySelector(form); const emailInput document.getElementById(email); const errorSpan document.querySelector(.error-message); // 第 18 题考点事件委托替代重复绑定 form.addEventListener(submit, e { e.preventDefault(); if (!emailInput.checkValidity()) { errorSpan.textContent emailInput.validationMessage; emailInput.focus(); return; } // 此处调用 API 提交 }); // 实时验证第 27 题要求 emailInput.addEventListener(input, () { if (emailInput.value !emailInput.checkValidity()) { errorSpan.textContent 邮箱格式错误; } else { errorSpan.textContent ; } }); /script3.2.2 关键参数配置表属性/方法作用复习题关联注意事项aria-livepolite使错误消息被屏幕阅读器朗读第 20 题assertive会中断当前播报checkValidity()触发浏览器原生验证并返回布尔值第 27 题需配合setCustomValidity()使用novalidate移除 submit 时的自动验证拦截第 26 题不影响reportValidity()调用3.3 语义化结构题目的落地模板第 32 题「main元素的使用规则」要求「每个页面最多一个」但实际项目常需多区域内容。解决方案是用main包裹核心内容其他区域用sectionaria-labelledby!-- 符合第 32 题标准且支持多区域 -- main idprimary-content h1课程大纲/h1 pHTML5 核心语法详解.../p /main section aria-labelledbysidebar-title h2 idsidebar-title学习资源/h2 ul lia href#w3cW3C 官方文档/a/li /ul /section !-- 第 6 题考点section 与 article 的边界 -- article header h3复习题解析/h3 p发布于 time datetime2023-12-012023年12月1日/time/p /header p本篇涵盖全部32题的实践验证.../p /article注意main不能嵌套在article或section内第 32 题易错点但section可作为main的子元素——这正是语义化层级的本质。4. 用自动化脚本批量验证复习题中的 HTML 结构规范4.1 构建基于 Puppeteer 的结构校验器手动验证 32 道题效率低下用 Node.js 脚本自动扫描 HTML 文件中的结构错误。以下脚本验证第 4 题「head中必须包含的元素」// validate-structure.js const puppeteer require(puppeteer); async function validateHeadElements() { const browser await puppeteer.launch(); const page await browser.newPage(); await page.goto(file:// require(path).resolve(__dirname, review.html)); const result await page.evaluate(() { const head document.head; const missing []; // 第 4 题考点必需的 head 元素 if (!head.querySelector(meta[charset])) missing.push(charset meta); if (!head.querySelector(title)) missing.push(title); // 第 5 题考点meta charset 位置 const charsetMeta head.querySelector(meta[charset]); if (charsetMeta charsetMeta.compareDocumentPosition(head.firstChild) 2) { // compareDocumentPosition 返回 2 表示 charset meta 不是第一个子节点 missing.push(charset meta not first in head); } return { missing, title: head.querySelector(title)?.textContent || 空 }; }); console.log(Head 结构校验结果:, result); await browser.close(); } validateHeadElements();运行命令node validate-structure.js输出示例{ missing: [charset meta not first in head], title: HTML期末复习题验证环境 }—— 直接定位第 5 题错误点。4.2 复习题常见错误的正则检测规则针对.doc文件中易错的 HTML 片段编写可复用的检测正则表达式题号错误模式正则表达式修复建议10img缺alt属性img\s((?!alt)[^])*?添加alt描述性文字14table缺captiontable[^]*(?!(?:\s*caption))在table后立即添加caption23button缺type属性button\s((?!type)[^])*?显式设置typebutton或typesubmit4.2.1 批量修复脚本示例# 使用 sed 批量修复 img 标签Linux/macOS sed -i s/img\([^]*\)/img\1 alt/g review.html # Windows 用户可用 PowerShell # (Get-Content review.html) -replace img([^]*), img$1 alt | Set-Content review.html提示第 16 题「br与p的使用场景」需人工判断正则无法替代语义分析——br仅用于诗歌换行或地址格式正文段落必须用p。4.3 用 Lighthouse 验证可访问性考点复习题中 8 道题涉及 WCAG 2.1 标准如第 20、29 题用 Lighthouse 自动生成报告# 安装并运行 npm install -g lighthouse lighthouse http://localhost:8000 --view --quiet --chrome-flags--headless \ --outputjson --outputhtml --save-assets \ --only-categoriesaccessibility \ --config-pathlighthouse-config.jsonlighthouse-config.json关键配置{ ci: { collect: { url: [http://localhost:8000], settings: { onlyCategories: [accessibility] } } }, audits: [ color-contrast, heading-levels, link-name, image-alt ] }验证重点第 20 题「aria-label与aria-labelledby的区别」在报告中体现为「[aria-label]属性存在但未提供有意义的文本」——Lighthouse 会标记aria-label为失败项。5. 复习题中隐藏的现代 HTML 工程实践技巧5.1 用template标签管理题目动态渲染第 31 题「details的兼容性处理」在旧版 Safari 中失效用template预编译结构!-- 预加载题目模板 -- template idquestion-template div classquestion-card h3>!-- 在 head 中预加载时间数据文件 -- link relpreload hrefquestions-dates.json asfetch crossorigin script // 第 7 题数据驱动验证 async function loadDates() { try { const response await fetch(questions-dates.json); const dates await response.json(); // 将 dates 注入 time 元素 document.querySelectorAll(time[data-question-id]).forEach(el { const id el.dataset.questionId; el.dateTime dates[id] || new Date().toISOString().split(T)[0]; }); } catch (e) { console.warn(日期数据加载失败使用当前日期); } } loadDates(); /script5.3 用IntersectionObserver实现题目懒加载当复习题超过 50 道时用懒加载优化首屏性能第 32 题延伸实践// 第 32 题考点main 元素的可见性控制 const observer new IntersectionObserver((entries) { entries.forEach(entry { if (entry.isIntersecting) { const questionId entry.target.dataset.questionId; // 动态加载该题目详情避免初始加载全部 loadQuestionDetail(questionId); observer.unobserve(entry.target); } }); }, { threshold: 0.1 // 当 10% 区域可见时触发 }); // 为每个题目卡片绑定观察器 document.querySelectorAll([data-question-id]).forEach(card { observer.observe(card); });技巧threshold: 0.1比0更早触发加载避免用户滚动时出现空白第 25 题picture的加载时机同理。本文还有配套的精品资源点击获取 
长河君 · 2026/9/20 6:23:30 · 阅读 1.2k HTML期末复习题：从标准契约到工程实践
简介本资源是一份面向高校计算机相关专业学生及前端初学者的HTML课程期末复习备考资料聚焦HTML基础语法、网页结构设计、表格与表单应用、图像映射、CSS样式规则等核心考点帮助学习者系统梳理易错点、巩固概念辨析并提升应试能力。文件为单个Word文档.doc格式大小210KB内容完整覆盖判断题、单选题、填空题三大题型含100余道典型题目及详细解析如HTML标记大小写敏感性、GIF颜色限制256色、标签使用前提、/组合规范、CSS color属性作用对象前景色等高频考点均有明确正误判断与原理说明。目前已有394人下载学习题目编排由浅入深兼顾概念理解与代码辨析特别适合考前集中刷题、查漏补缺与教师命题参考。1. 这份 HTML 期末复习题不是“刷题卷”而是你重构前端知识体系的锚点很多同学拿到《HTML期末复习题(含答案).doc》第一反应是划重点、背标签、抄答案——结果考完发现选择题全对写一个带表单和语义化结构的登录页却卡在label和fieldset的嵌套逻辑上。这暴露了一个关键事实HTML 不是静态知识点集合而是浏览器解析引擎与开发者意图之间的一套契约协议。这份文档真正的价值不在于答案本身而在于它用 32 道典型题覆盖了从!doctype html声明到details交互语义的完整断层——比如第 17 题问「meta nameviewport contentwidthdevice-width, initial-scale1.0缺失会导致什么」表面考响应式实则检验你是否理解渲染管线中「视口元信息如何影响 CSS 像素计算」这一底层机制。适合两类人一是刚学完 HTML 基础、需要验证知识闭环的初学者二是已能写页面但常被审查工具报「缺少lang属性」「img缺alt」的实战者——因为所有答案都隐含 W3C 标准原文依据和 Chrome DevTools 可验证路径。2. 用标准 HTML5 文档结构跑通全部复习题的最小验证环境2.1 为什么必须从!doctype html开始重搭验证环境直接打开.doc文件看答案会错过最关键的上下文HTML 是运行时语言所有标签行为必须在浏览器解析上下文中验证。例如复习题第 3 题「b和strong的区别」若只背「前者纯样式后者表强调」就无法解释为何在屏幕阅读器中两者播报方式不同。正确做法是构建一个可执行的 HTML 文件用真实渲染结果反推标准定义。!doctype html不是装饰性声明它触发浏览器的「标准模式Standards Mode」使getComputedStyle()返回值符合 CSS 规范否则box-sizing: border-box等属性可能失效——这正是第 24 题「为什么padding在 IE8 下表现异常」的根源。2.1.1 创建最小可验证 HTML 模板新建review.html粘贴以下代码注意langzh-cn必须显式声明这是第 9 题考点!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleHTML期末复习题验证环境/title style /* 第 28 题考点CSS 重置基础 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Microsoft YaHei, sans-serif; line-height: 1.6; } /style /head body !-- 复习题示例第 12 题的语义化结构 -- article header h1复习题验证区/h1 p使用 codelt;sectiongt;/code 和 codelt;asidegt;/code 构建内容流/p /header main section h2题目区域/h2 p此处插入具体题目HTML结构/p /section aside h3答案提示/h3 p用 codelt;detailsgt;lt;summarygt;/code 实现可折叠答案第 31 题/p /aside /main /article /body /html提示meta charsetutf-8必须放在title之前第 5 题考点否则浏览器可能用 ISO-8859-1 解析中文导致乱码。Chrome 控制台输入document.characterSet可验证当前编码。2.2 用浏览器开发者工具实时验证每道题复习题中 60% 的陷阱题需通过 DevTools 验证。以第 15 题「a href#的默认行为是什么」为例2.2.1 三步定位真实行为在review.html中添加测试链接a href# idtest-link点击测试/a script document.getElementById(test-link).addEventListener(click, e { console.log(事件对象:, e); console.log(默认行为是否被阻止:, e.isDefaultPrevented()); }); /script打开 Chrome DevTools → Elements 面板右键a标签 →Break on → attribute modifications第 22 题考点DOM 属性监听点击链接后在 Console 输入e.preventDefault()并回车观察 URL 是否跳转验证第 15 题答案2.2.2 表单类题目专用验证法第 19 题「input typeemail的验证时机」需用ValidityStateAPIconst emailInput document.querySelector(input[typeemail]); emailInput.addEventListener(input, () { console.log(验证状态:, { badInput: emailInput.validity.badInput, typeMismatch: emailInput.validity.typeMismatch, valid: emailInput.checkValidity() }); });注意typeMismatch为 true 时emailInput.validationMessage会返回「请输入有效的电子邮件地址」——这正是第 27 题「自定义验证提示」的底层原理。2.3 复习题答案的标准化校验表将.doc中的答案转化为可执行校验逻辑避免死记硬背题号考点可验证命令Chrome Console预期输出对应标准条款7time语义化document.querySelector(time).dateTime2023-06-15HTML5 §4.6.1711canvas替代文本document.querySelector(canvas).getAttribute(aria-label)折线图数据可视化WAI-ARIA 1.1 §5.2.225picture响应式window.getComputedStyle(document.querySelector(picture)).displayinline-blockCSS Display Module 3提示第 30 题「iframe的sandbox属性作用」需在本地服务器运行python3 -m http.server 8000直接双击 HTML 文件会因跨域限制无法触发沙箱策略。3. 把复习题答案转化为可复用的 HTML 组件库3.1 从选择题到生产级代码的转换逻辑复习题第 8 题「ul内能否嵌套div」的答案是「否」但这不是终点。实际开发中常需在列表项内放复杂结构正确解法是用rolelistitem替代语义化限制3.1.1 构建可访问的导航菜单组件!-- 符合第 13 题「ARIA role 使用规范」 -- nav aria-label主菜单 ul rolemenubar li rolenone a href/home rolemenuitem aria-currentpage首页/a /li li rolenone button rolemenuitem aria-haspopuptrue aria-expandedfalse 课程 /button ul rolemenu hidden li rolenonea href/html rolemenuitemHTML/a/li li rolenonea href/css rolemenuitemCSS/a/li /ul /li /ul /nav参数说明aria-haspopuptrue告知屏幕阅读器该按钮展开子菜单第 29 题考点hidden属性替代display:none避免焦点丢失第 21 题陷阱。3.2 表单题目的工程化实现方案第 26 题「form的novalidate属性作用」常被误解为「禁用所有验证」。实际它是禁用浏览器内置验证但 JavaScript 验证仍生效3.2.1 构建渐进增强表单组件form novalidate label foremail邮箱/label input typeemail idemail required span classerror-message aria-livepolite/span button typesubmit提交/button /form script const form document.querySelector(form); const emailInput document.getElementById(email); const errorSpan document.querySelector(.error-message); // 第 18 题考点事件委托替代重复绑定 form.addEventListener(submit, e { e.preventDefault(); if (!emailInput.checkValidity()) { errorSpan.textContent emailInput.validationMessage; emailInput.focus(); return; } // 此处调用 API 提交 }); // 实时验证第 27 题要求 emailInput.addEventListener(input, () { if (emailInput.value !emailInput.checkValidity()) { errorSpan.textContent 邮箱格式错误; } else { errorSpan.textContent ; } }); /script3.2.2 关键参数配置表属性/方法作用复习题关联注意事项aria-livepolite使错误消息被屏幕阅读器朗读第 20 题assertive会中断当前播报checkValidity()触发浏览器原生验证并返回布尔值第 27 题需配合setCustomValidity()使用novalidate移除 submit 时的自动验证拦截第 26 题不影响reportValidity()调用3.3 语义化结构题目的落地模板第 32 题「main元素的使用规则」要求「每个页面最多一个」但实际项目常需多区域内容。解决方案是用main包裹核心内容其他区域用sectionaria-labelledby!-- 符合第 32 题标准且支持多区域 -- main idprimary-content h1课程大纲/h1 pHTML5 核心语法详解.../p /main section aria-labelledbysidebar-title h2 idsidebar-title学习资源/h2 ul lia href#w3cW3C 官方文档/a/li /ul /section !-- 第 6 题考点section 与 article 的边界 -- article header h3复习题解析/h3 p发布于 time datetime2023-12-012023年12月1日/time/p /header p本篇涵盖全部32题的实践验证.../p /article注意main不能嵌套在article或section内第 32 题易错点但section可作为main的子元素——这正是语义化层级的本质。4. 用自动化脚本批量验证复习题中的 HTML 结构规范4.1 构建基于 Puppeteer 的结构校验器手动验证 32 道题效率低下用 Node.js 脚本自动扫描 HTML 文件中的结构错误。以下脚本验证第 4 题「head中必须包含的元素」// validate-structure.js const puppeteer require(puppeteer); async function validateHeadElements() { const browser await puppeteer.launch(); const page await browser.newPage(); await page.goto(file:// require(path).resolve(__dirname, review.html)); const result await page.evaluate(() { const head document.head; const missing []; // 第 4 题考点必需的 head 元素 if (!head.querySelector(meta[charset])) missing.push(charset meta); if (!head.querySelector(title)) missing.push(title); // 第 5 题考点meta charset 位置 const charsetMeta head.querySelector(meta[charset]); if (charsetMeta charsetMeta.compareDocumentPosition(head.firstChild) 2) { // compareDocumentPosition 返回 2 表示 charset meta 不是第一个子节点 missing.push(charset meta not first in head); } return { missing, title: head.querySelector(title)?.textContent || 空 }; }); console.log(Head 结构校验结果:, result); await browser.close(); } validateHeadElements();运行命令node validate-structure.js输出示例{ missing: [charset meta not first in head], title: HTML期末复习题验证环境 }—— 直接定位第 5 题错误点。4.2 复习题常见错误的正则检测规则针对.doc文件中易错的 HTML 片段编写可复用的检测正则表达式题号错误模式正则表达式修复建议10img缺alt属性img\s((?!alt)[^])*?添加alt描述性文字14table缺captiontable[^]*(?!(?:\s*caption))在table后立即添加caption23button缺type属性button\s((?!type)[^])*?显式设置typebutton或typesubmit4.2.1 批量修复脚本示例# 使用 sed 批量修复 img 标签Linux/macOS sed -i s/img\([^]*\)/img\1 alt/g review.html # Windows 用户可用 PowerShell # (Get-Content review.html) -replace img([^]*), img$1 alt | Set-Content review.html提示第 16 题「br与p的使用场景」需人工判断正则无法替代语义分析——br仅用于诗歌换行或地址格式正文段落必须用p。4.3 用 Lighthouse 验证可访问性考点复习题中 8 道题涉及 WCAG 2.1 标准如第 20、29 题用 Lighthouse 自动生成报告# 安装并运行 npm install -g lighthouse lighthouse http://localhost:8000 --view --quiet --chrome-flags--headless \ --outputjson --outputhtml --save-assets \ --only-categoriesaccessibility \ --config-pathlighthouse-config.jsonlighthouse-config.json关键配置{ ci: { collect: { url: [http://localhost:8000], settings: { onlyCategories: [accessibility] } } }, audits: [ color-contrast, heading-levels, link-name, image-alt ] }验证重点第 20 题「aria-label与aria-labelledby的区别」在报告中体现为「[aria-label]属性存在但未提供有意义的文本」——Lighthouse 会标记aria-label为失败项。5. 复习题中隐藏的现代 HTML 工程实践技巧5.1 用template标签管理题目动态渲染第 31 题「details的兼容性处理」在旧版 Safari 中失效用template预编译结构!-- 预加载题目模板 -- template idquestion-template div classquestion-card h3>!-- 在 head 中预加载时间数据文件 -- link relpreload hrefquestions-dates.json asfetch crossorigin script // 第 7 题数据驱动验证 async function loadDates() { try { const response await fetch(questions-dates.json); const dates await response.json(); // 将 dates 注入 time 元素 document.querySelectorAll(time[data-question-id]).forEach(el { const id el.dataset.questionId; el.dateTime dates[id] || new Date().toISOString().split(T)[0]; }); } catch (e) { console.warn(日期数据加载失败使用当前日期); } } loadDates(); /script5.3 用IntersectionObserver实现题目懒加载当复习题超过 50 道时用懒加载优化首屏性能第 32 题延伸实践// 第 32 题考点main 元素的可见性控制 const observer new IntersectionObserver((entries) { entries.forEach(entry { if (entry.isIntersecting) { const questionId entry.target.dataset.questionId; // 动态加载该题目详情避免初始加载全部 loadQuestionDetail(questionId); observer.unobserve(entry.target); } }); }, { threshold: 0.1 // 当 10% 区域可见时触发 }); // 为每个题目卡片绑定观察器 document.querySelectorAll([data-question-id]).forEach(card { observer.observe(card); });技巧threshold: 0.1比0更早触发加载避免用户滚动时出现空白第 25 题picture的加载时机同理。本文还有配套的精品资源点击获取