-
用语义化HTML（section/article/figure）+CSSGrid（auto-fill/minmax）实现响应式商品列表，配合viewport、alt、aria属性保障可访问性与移动端适配。
-
Normalize.css必须在所有自定义CSS之前加载，否则其统一样式会被覆盖而失效；它不是兜底方案而是样式基线，错误顺序会导致button边框残留、h1大小不一、input对齐错位等问题。
-
WebLocksAPI通过资源维度唯一锁名协调多标签页对共享状态的原子访问，所有读-改-写操作须在锁回调内完成并返回Promise，不支持环境需服务端幂等或前端提示降级。
-
ESM循环引用触发TDZ报错，本质是实例化阶段导出绑定未激活时提前读取let/const变量；解析→实例化→执行三步中，循环发生在实例化期，此时顶层代码未执行，导出值仍为“未初始化”状态。
-
非贪婪量词+?无法解决嵌套括号提取，仅适用于单层或已知不嵌套场景；因其依赖线性匹配，不能识别括号层级或计数平衡；真正处理嵌套需用递归正则、栈解析或专用解析器。
-
按钮禁用样式失效需在Tailwind配置中启用disabled变体；加载中状态应结合disabled属性与条件渲染图标文案；务必设type="button"防重复提交，并在请求终了恢复按钮状态。
-
display:none彻底移除元素，不占空间、不响应事件；visibility:hidden仅透明化，仍占布局位置且子元素可能溢出；hidden属性轻量但无过渡、选择局限；无障碍需用sr-only等视觉隐藏技巧。
-
通过aria-label属性为表格单元格中的图标或符号提供可访问的文本标签，可确保屏幕阅读器准确朗读提示内容，替代不可靠的title属性。
-
minmax()定义网格轨道的弹性范围，仅在grid-template-columns/rows或repeat()中生效；常见用法如minmax(200px,1fr)、配合auto-fit实现响应式均分；禁用calc()嵌套和单位混用。
-
HTML5资源获取路径明确：一、用Zeal下载离线文档；二、从官网下载Notepad++、SublimeText或VSCode；三、GitHub搜索html5+template并下载ZIP；四、课程页找资料下载区或GitHub链接；五、浏览器Ctrl+U或F12提取源码。
-
页面加载完成即触发过滤器逻辑，需确保DOM就绪后再操作节点，推荐将JS置于</body>前或监听DOMContentLoaded事件，避免使用window.onload；过滤函数定义须晚于依赖数据声明、早于调用点；应防止重复执行，通过data属性标记并清空旧内容；性能优化需拆分逻辑、批量更新DOM，必要时采用虚拟滚动。
-
HTML表格标题必须使用<caption>标签实现语义化和可访问性，该标签需置于<table>内首位置；可通过CSS的caption-side等属性调整样式；禁用<th>或<div>模拟标题；多语言场景下应为<caption>添加符合BCP47标准的lang属性。
-
动态import()是返回Promise的运行时按需加载函数，静态import是顶层声明式编译期绑定；前者支持变量路径、触发代码分割，后者被提前打包进主包。
-
Sticky定位触发偏移本质是top值未相对于滚动容器内容区顶部正确设置；它依赖最近有滚动行为的祖先容器，top为0表示元素顶部与容器顶部对齐时吸附，正负值可调节吸附时机，需补偿fixed头部高度并避免用margin或transform干扰定位逻辑。
-
CSS引入失败需四步排查：路径是否正确（优先绝对路径）、Network中状态码与Content-Type是否为200/text/css、link是否在head中且未被JS移除、选择器是否匹配或被覆盖。
