-
实现HTML页面内容居中显示的核心方法有三种：margin:auto、Flexbox和CSSGrid；2.margin:auto适用于块级元素的水平居中，需设置元素宽度且仅支持水平方向；3.Flexbox通过在父容器设置display:flex、justify-content:center和align-items:center，可同时实现水平和垂直居中，适合一维布局；4.CSSGrid通过display:grid和place-items:center属性，简洁实现二维居中，更适合复杂多维布局；5.对于同时
-
BootstrapModal不居中通常因外部样式干扰、父容器限制或自定义类破坏flex布局；应确保结构规范、避免覆盖居中样式，优先使用modal-dialog-centered类，复杂场景可手动添加d-flex、align-items-center和justify-content-center。
-
indent-8不起作用是因为TailwindCSS默认不提供text-indent工具类，需通过自定义配置（如theme.extend.textIndent+插件）或内联样式等方式手动启用。
-
lang属性必须写在<html>标签上，如<htmllang="zh-CN">，其他位置无效；它决定页面级语言，影响屏幕阅读器、SEO和翻译工具，错误设置会导致语音误读、翻译出错和搜索降权。
-
自定义事件作为单向数据流的唯一出口，仅上报意图而不修改状态，需设bubbles/composed为true穿透ShadowDOM，由根节点统一拦截分发并审计，状态更新驱动视图重绘，禁止反向通信、嵌套派发与payload篡改。
-
禁用按钮后仍可能触发点击事件，根源在于浏览器事件机制与DOM状态更新的异步性；本文详解其成因，并提供基于运行标志位的可靠防重复执行方案。
-
将<link>放进<head>仍会FOUC，因media不匹配、@import串行加载、preload未配onload、Content-Type错误等会使阻塞失效；需用media="all"测试、内联关键CSS、加loading类并设超时兜底。
-
Checkbox控制抽屉显隐更轻量，因无需事件监听、不触发重排、无运行时依赖，纯CSS通过:checked伪类联动实现；需input与抽屉同DOM上下文，用~或+选择器；推荐transform替代margin实现滑入；移动端须用label显式关联并保障点击区域；抽屉滚动需设overflow-y:auto、明确高度及-webkit-overflow-scrolling:touch。
-
HTML应按业务模块拆分为pages/下的独立文件，共享组件用动态加载或服务端include复用；资源路径统一用根相对路径（如/js/main.js），避免相对路径解析错误导致404。
-
ChromeDevToolsPerformance面板打点分析CRP是定位SPA渲染瓶颈最高效方式，需聚焦用户操作触发的渲染链路，结合手动标记、阶段识别与WebVitals验证优化效果。
-
Intl.Segmenter不能直接实现搜索引擎关键词自动分词算法，因其仅按Unicode和locale规则切分语言感知边界，不理解语义、不消歧、不合并同义词，也不做停用词过滤或词干提取。
-
可通过iframe、fetch+pre、object标签或服务端预处理四种方式在HTML5中显示外部TXT文件，需重点处理字符编码（如UTF-8声明、BOM、响应头）并防范XSS风险。
-
断点应按内容最小可读宽度反推而非设备尺寸，优先用min-width从移动优先逐步增强；Grid三栏需分层mediaquery控制列数，避免auto-fit兼容问题；Flexgap兼容需用负margin方案；错位问题用align-items:start或显式grid-template-rows解决。
-
BackgroundSyncAPI不能在断网时自动重试，仅在网络恢复且ServiceWorker活跃时触发sync事件；需配合IndexedDB持久化请求数据，并在sync事件中重建并发送。
-
Promise.withResolvers用于提前创建可外部决议的Promise，天然适配状态机设计：预定义状态+可控跃迁，各状态独立持有resolvers，通过resolve/reject主动推进流程，支持取消、超时与多分支跳转。
