-
用article包裹展位，h3作标题，img带描述性alt，button或role="button"的a作点击区域；必含标题、展位图、动作按钮，可选≤80字问题导向描述。
-
响应式定位需用mediaquery手动重设absolute/fixed元素的偏移值，而非依赖定位属性自身响应；relative仅提供上下文，不自动适配；推荐flexbox、grid或sticky替代硬编码定位。
-
HTML中输入不换行空格应使用 （UnicodeU+00A0），它不可被浏览器合并或折行；其他空格实体如 、 、 、​适用于不同排版场景，CSS方案仅适合整段控制， 仍是局部精确控制的唯一可靠原生方法。
-
本文详解在JavaScript中动态创建换行符<br>元素的正确方法，重点解决“仅创建未插入导致页面无效果”的常见错误，并提供字符串批量处理与单字符逐次插入两种实用方案。
-
应使用本地HTTP服务器（如LiveServer或http-server）而非双击打开HTML文件，因file://协议会因安全限制导致fetch、JSON加载、模块导入等功能失效，而http://localhost可正常执行所有WebAPI。
-
Proxy和Reflect是JavaScript元编程的核心工具，Proxy用于拦截对象操作，Reflect用于安全执行默认行为，二者结合可实现数据校验、日志记录、响应式系统等高级功能，具有非侵入性、透明性强的优势，能有效避免猴子补丁带来的问题。通过set陷阱进行属性校验、get/set记录访问日志、set触发更新回调构建简易响应式系统，展示了其在实际开发中的强大能力。但使用时需注意this绑定、深度代理复杂性、性能开销、调试困难及代理不变量等问题，合理利用Reflect可确保操作合规，避免常见陷阱，是现
-
CSStransition和@keyframes无法实现真正抛物运动，因其仅支持一维时间缓动，不能独立控制x(t)和y(t)的加速度叠加；真抛物运动需JS结合requestAnimationFrame实时计算物理轨迹。
-
fr是CSSGrid的分数单位，表示剩余可用空间的一份，不同于固定像素（px）和相对父容器的百分比（%），仅在grid-template-columns/rows中生效，且受内容尺寸、minmax()等限制影响。
-
本文详解通过精确控制background-size与background-position的百分比关系，构建视觉上连续、无跳变的无限向左滑动背景动画，避免传统方案中因重置导致的闪烁或停顿。
-
:invalid未生效是因为它仅在字段已验证且失败时触发，初始加载时字段处于“未触碰”状态，即使值非法也不会匹配；需用户交互或手动校验才激活。
-
BEM能快速定位样式冲突，因其类名自带层级和职责信息（如button__icon--hover），解耦DOM结构依赖，避免全局类泄露覆盖，强制样式归属明确Block，杜绝嵌套选择器失效问题。
-
使用HTML属性和JavaScript可有效限制表单输入。首先通过maxlength、min/max、pattern、required和type等属性设置基础规则，如限制长度、数值范围和格式；再结合CSS的:valid/:invalid伪类实现视觉反馈；对于更复杂需求，利用JavaScript监听输入事件，实时过滤非法字符或自动格式化内容。最终建议前端限制与服务器端验证结合，确保数据安全与准确性。
-
嵌套超4层应警觉，因CSS从右往左匹配导致回溯性能损耗，且复用性差；应改用BEM等语义化类名，明确Block、Element、Modifier职责，避免深层后代选择器。
-
CSSGrid列宽错乱主因是grid-template-columns设置不一致，需统一列轨道定义、优先用auto-fit配合minmax()、设grid-auto-rows或item高度约束、响应式中每个断点完整重写列定义，并用CSS变量集中管理。
-
推荐使用link标签引入GoogleFonts，如Roboto和OpenSans，并通过CSS调用；也可在CSS中用@import方式引入，但性能较差；支持按需加载特定字重如wght@400;700以优化速度；建议设置&display=swap避免文字空白，提升加载体验。
