-
前端JS在浏览器运行，负责页面交互；后端JS在服务器运行，处理业务逻辑。前者操作DOM、响应用户行为，后者通过Node.js处理请求、数据库操作。两者通过HTTP协议通信，前端用fetch发送数据，后端用Express等框架接收并返回JSON，协同实现完整功能。
-
grid-template-areas必须每行引号内字符数相等、区域名不重复不遗漏、空白用"."占位；grid-template-columns/rows单位需按fr/px/auto语义合理搭配；grid-template简写顺序固定为行/列/区域，缺项需用/占位；其值不支持CSS变量或表达式。
-
递归适用于树形遍历、嵌套对象、分治问题，但需严控深度、避免重复计算、设明确终止条件；否则易栈溢出；应校验输入类型与范围，超深结构宜用栈模拟，DOM操作慎用递归，优先选用flat()、structuredClone()等内置方法。
-
使用CSSanimation与@keyframes可实现精确控制的透明度渐变，支持多阶段变化、自动播放、无限循环及复杂缓动效果，相比transition更适用于无需交互触发、需循环或组合的动画场景；通过animation-iteration-count和animation-direction可控制循环次数与播放方向，配合animation-fill-mode可决定动画结束后元素是否保持最终状态或恢复初始样式，从而创建流畅自然的视觉效果。
-
懒加载核心是按需加载，推荐使用IntersectionObserverAPI实现，辅以loading="lazy"渐进增强；老项目兼容IE可降级为节流滚动监听；框架中宜封装为Hook或指令，避免关键内容懒加载。
-
min-height:100vh不足因仅设最小高度而不强制子元素定位；需html/body设height:100%并用flex布局，main设flex:1才能可靠撑开页脚到底部。
-
font-variation-settings动画不平滑的关键在于插值方式：浏览器默认将其视为离散字符串，需显式声明animation-timing-function、确保轴值为统一格式数字、用@property注册可插值CSS变量，并避免font-weight干扰及字体加载导致的FOIT/FOUT。
-
固定导航栏不必强制使用position:fixed，但它是兼容性最佳的方案；position:sticky语义更优但兼容性差。需用padding-top预留空间防遮挡，滚动效果需JS监听scroll实现，移动端锚点跳转闪动需通过viewport保障和transform修复。
-
datalist标签的核心作用是为输入框提供可选的建议列表，允许用户在自由输入的同时获得预设选项的提示，提升输入效率并减少错误；它通过将input的list属性与datalist的id关联实现，无需JavaScript即可运行，适用于需要灵活性和智能提示的场景；与select标签不同，datalist不强制用户选择预设项，而select要求用户必须从固定选项中选择，适用于选项明确且不可自定义的场景；可通过JavaScript动态获取数据并生成option元素来实现根据用户输入实时更新建议列表，常配合防抖优
-
HTML5<progress>元素样式需用伪元素定制：Chrome/Edge/Safari用::-webkit-progress-bar和::-webkit-progress-value，Firefox用::progress-bar和::progress-value，IE需降级处理，并统一设置height、appearance及无障碍属性。
-
Symbol是ES6新增的唯一原始类型，每次调用返回独一无二值，不可复用、不参与隐式转换；用作对象属性键可防命名冲突，且默认不可枚举；Symbol.for()提供全局注册表，Symbol描述仅用于调试。
-
应先用工具验证对比度是否真不达标，再按WCAG标准调整：优先改文字色，用#000/#fff最稳妥，慎用浅灰；图片背景加半透层；增大字号、字重和行高可提升可读性。
-
@media查询通过检测设备特性应用不同样式实现响应式布局。2.它常用屏幕宽度、高度、方向、分辨率及颜色方案等特性调整样式。3.移动优先策略优先为小屏幕设计基础样式，再逐步增强大屏适配。4.使用CSS预处理器嵌套、断点变量、模块化文件管理复杂规则。5.避免过多断点并保持逻辑统一以提升维护性和性能。
-
Grunt中用grunt-contrib-sass编译Sass/SCSS（推荐DartSass），用grunt-contrib-cssmin压缩纯CSS，需显式注册串联任务如build:css，并注意配置sourceMap、compatibility、字符编码及插件顺序。
-
可通过border-width与@keyframes结合实现按钮边框动画。1.基础扩展动画：利用伪元素设置初始border-width为0，通过关键帧在0%、50%、100%改变宽度，实现边框闪现效果；2.描边动画：使用伪元素覆盖按钮，分阶段控制border-width和元素尺寸位置，在0%-25%-50%-75%-100%关键帧中模拟逆时针逐边绘制边框；3.呼吸效果：定义pulseBorder动画，使border-width在1px到3px间循环变化，配合hover触发，营造柔和动态感。注意使用伪元素、
