盒模型默认为content-box，width仅控制content区域，加padding/border会导致总宽度超出预期；应优先检查box-sizing是否生效并统一设为border-box。

npminstall后import不生效的主因是模块解析环境不匹配：浏览器原生ESM不支持包名解析，Node.jsESM需.mjs或type:"module"，推荐用Vite等构建工具接管；React生态库如antd需注意编译配置、按需导入插件及CSS显式引入；CDN引入Vue须选对版本并显式解构API；Webpack的require.context行为特殊且不可跨工具迁移。

使用:checked与+结合可实现表单控件选中后样式化后续元素；2.常用于自定义复选框、展开内容、开关效果；3.需确保目标为直接相邻兄弟，否则可用~替代；4.适用于轻量交互，复杂逻辑仍需JavaScript。

HTML5不提供布局能力，真正起作用的是CSS伪类选择器配合Flexbox、Grid等布局机制实现动态样式控制；伪类仅匹配元素并应用样式，不能替代display/flex/grid等基础布局声明。

美化<iframe>需从两方面入手：1.对<iframe>元素本身应用CSS样式，如设置width、height、border、border-radius、box-shadow等属性以改变外观；2.若内容为同源，则可通过JavaScript注入CSS或修改DOM来调整内部样式，若为跨域内容则无法直接修改。应对跨域限制的策略包括：使用包裹层美化，通过外层div添加背景、边框、阴影等视觉效果；设置加载动画或占位符提升用户体验；在特定场景下叠加自定义交互层实现播放控制等功能。为确保响应式

直接用li:last-child:hover可精准匹配并样式化最后一个列表项，但需确保其为父元素的最后一个子节点；若存在其他类型节点，则改用li:last-of-type:hover更可靠。

flexbox多栏布局核心在flex-wrap与flex-basis配合：设flex-wrap:wrap触发换行，flex-basis设理想宽度（如250px），min-width防过度压缩，禁用width避免冲突。

使用LiveServer扩展可实现在浏览器中实时预览HTML文件，安装后右键选择“OpenwithLiveServer”即可自动打开页面并支持热重载。

HTML5Canvas无法直接实现真实折痕旧化效果，因其缺乏空间变形与条件像素计算能力；需通过getImageData手动处理明暗、位移、噪声等多步模拟，或用SVG滤镜实现简化版泛黄颗粒效果，真正几何折痕须依赖WebGL或离线预渲染。

最直接方案是用CSStransform：水平翻转用scaleX(-1)，垂直用scaleY(-1)，180°翻转用scale(-1,-1)；Canvas绘制需先translate再scale以避免越界；MediaStream视频默认镜像显示，仅需CSS控制即可。

最轻量可靠的HTML5新标签检测是用document.createElement创建标签并验证DOM行为；localStorage需try-catch读写测试；Modernizr适合多特性场景但需定制构建；doctype声明不等于功能支持。

可使用浏览器开发者工具复制HTML课程表代码：一、F12定位table元素→CopyouterHTML；二、禁用CSS/JS后在原始HTML中复制；三、Console执行document.querySelector("table").outerHTML命令提取；四、另存网页为HTML后手动查找复制table片段。

变量提升是JS编译阶段将var声明“记忆”到作用域顶部但保留赋值位置，let/const仅提升声明而不初始化并设TDZ；typeof访问TDZ中变量仍报错，函数声明完全提升而表达式受TDZ约束。

:hover本身不触发滑动，真正实现平滑滑动的是transition属性，需配合transform等可动画属性，并在默认状态定义transition才能生效。

应根据项目需求和团队习惯选择：小项目或学习优先用Fetch，中大型项目推荐Axios；两者均可封装统一请求层，避免裸写Fetch或滥用Axios。