-
使用Flexbox或Grid可实现响应式按钮排列，Flexbox通过flex-wrap换行和flex属性控制伸缩，Grid利用grid-template-columns配合auto-fit与minmax自动调整列数，结合gap设置间距，再用媒体查询微调不同屏幕下的样式。
-
background-image受CORS影响，但仅在JS读取时暴露；它不发起请求且无控制台错误，仅静默降级；真正解法是后端配置Access-Control-Allow-Origin响应头或用带crossorigin的<img>替代。
-
首先确保HTML文件正确引用JS并保存在手机本地，使用浏览器打开时需检查路径与权限；若无法加载，应通过KSWEB等本地服务器部署，或使用Dcoder等支持运行的APP；同时避免使用不兼容的ES6+语法，推荐用相对路径引入JS文件，并通过console.log验证执行。
-
直接用color即可控制图标字体颜色，因其本质是特殊字符；需确保字体加载、类名正确及CSS优先级合理，推荐使用currentColor实现颜色同步，状态样式应结合伪类或属性选择器控制。
-
JavaScript常用设计模式包括单例、观察者、工厂、代理等，其中单例确保类唯一实例，适用于配置管理；观察者实现一对多依赖更新，Subject与Observer直接通信，区别于发布-订阅的事件总线解耦。
-
使用@media查询结合viewport设置可解决移动端样式错乱，通过移动优先策略和合理断点适配不同设备宽度，确保页面正常显示。
-
动态import()是返回Promise的运行时按需加载函数，静态import是顶层声明式编译期绑定；前者支持变量路径、触发代码分割，后者被提前打包进主包。
-
卡片悬停效果通过CSS的transition和box-shadow实现，先构建包含标题和描述的div结构，设置圆角、阴影及0.3秒缓动过渡，鼠标悬停时加深box-shadow并上移4px模拟立体感，配合will-change优化渲染，避免使用触发重排的属性，整体提升交互体验。
-
HTML5通过内联<svg>标签实现SVG动画，而非<img>引用；需用CSS/JS控制内联SVG的DOM元素，避免SMIL兼容性问题，注意内联、显示状态和容器溢出等上下文陷阱。
-
通过设置viewportmeta标签和CSS媒体查询实现页面缩小。首先在head中添加meta标签，使用initial-scale=0.8使页面默认缩小，并结合width=device-width适配屏幕；再利用@media设置断点，采用相对单位和弹性布局优化不同设备的显示效果；同时确保交互元素具备足够点击区域，避免字体过小影响可读性，从而实现良好的响应式体验。
-
JavaScript异步编程主要靠回调函数、Promise、async/await；回调函数易致“回调地狱”，Promise通过状态管理与链式调用提升可读性与错误处理，async/await则是其语法糖。
-
箭头函数是ES6引入的简写语法，无this/arguments/super/new.target，不能作构造函数，this静态绑定，不支持arguments需用...args替代，语法简洁但隐式返回有限制。
-
JavaScript模块化关键是匹配运行环境：浏览器需type="module"且路径为URL，Node需.mjs或"type":"module"，ESM与CommonJS互操作单向受限，环境不匹配是报错主因。
-
通过设置justify-items和align-items可解决CSS网格子元素对齐问题，前者控制水平对齐，后者控制垂直对齐，常用值有start、end、center和stretch，默认为stretch；需确保父容器设置了display:grid才生效；若需单独调整某个子元素，可使用justify-self或align-self覆盖全局设置。
-
HTML文件编码推荐使用UTF-8，因其支持全球多数语言字符并解决乱码问题；2.查看HTML文档可通过浏览器“查看页面源代码”或开发者工具InspectElement，亦可用文本编辑器如VSCode打开本地文件；3.确保编码正确需统一文本编辑器保存编码、HTML中添加<metacharset="UTF-8">标签、服务器配置Content-Type响应头为UTF-8；4.处理乱码问题应检查meta标签、服务器响应头、文件实际保存编码、数据库字符集一致性，并可借助浏览器手动切换编码调试；5.特殊
