-
有限状态机（FSM）是一种描述对象在有限状态间转换的模型，包含状态、事件、转移和动作。通过JavaScript实现状态模式可管理如播放器的状态流转：定义状态类封装行为，上下文委托操作，实现清晰解耦。示例中播放器有idle、playing、paused三种状态，支持play、pause、stop操作，状态切换逻辑隔离，符合开闭原则。还可扩展为通用FSM类，通过配置定义初始状态和转移规则，提升复用性与可维护性，适用于订单、登录等场景。
-
要让HTML适配移动端，核心是应用响应式设计，而媒体查询是实现的关键技术。1.首先在HTML头部设置正确的视口元标签：<metaname="viewport"content="width=device-width,initial-scale=1.0">，确保页面按设备宽度渲染且无初始缩放；2.采用“移动优先”策略，先为小屏幕编写基础样式，再通过媒体查询针对更大屏幕添加或覆盖样式；3.使用合理的断点（如768px、1024px），根据布局变化而非具体设备设
-
浮动布局在响应式设计中易出现错位、溢出等问题，需结合媒体查询动态调整宽度与排列方式。通过设置不同断点（如768px）改变元素宽度，实现桌面端并排（50%）、移动端堆叠（100%），并配合清除浮动与box-sizing优化布局；长期建议迁移到Flexbox或Grid等现代布局方案以提升适配性与维护性。
-
剩余参数和默认参数提升JavaScript函数灵活性：剩余参数（...args）收集多余参数为数组，必须位于参数列表末尾；默认参数为形参提供备用值，调用时未传参或为undefined则使用默认值，可依赖前置参数；二者可结合使用，适用于日志、配置等场景，减少冗余判断，增强代码可读性与健壮性。
-
需将旧版HTML升级为HTML5：一、用<!DOCTYPEhtml>替换旧DOCTYPE；二、根元素改为<htmllang="zh-CN">并移除xmlns；三、用<metacharset="UTF-8">声明编码；四、用<header><nav><main><footer><aside><article>等语义标签替代div；五、更新表单type和requi
-
答案：优化Canvas动画性能需减少重绘区域，采用分层绘制与clearRect局部清除；避免重复设置样式、简化路径并缓存高频内容以优化绘图操作；使用requestAnimationFrame控制帧率，按需更新与限帧；通过对象池、解除引用等方式合理管理内存，降低GC压力，从而提升整体渲染效率。
-
HTML项目打包是将网页文件整理压缩以便部署，需确保资源完整、路径正确。1.手动打包适用于简单项目，将文件放入dist等目录后用zip压缩；2.构建工具如Vite、Webpack可自动化处理，提升效率；3.优化资源包括压缩图片、CSS/JS，移除注释，合并小文件；4.部署可选Vercel、Netlify等静态托管或上传至服务器。关键在于路径管理与细节检查。
-
:nth-last-child伪类选择器用于从父元素最后一个子元素开始倒序选中指定位置的子元素，语法为:nth-last-child(an+b)，其中a为步长、b为偏移量；例如li:nth-last-child(1)选中最后一个li，li:nth-last-child(2n)选中倒数偶数位的li元素；该选择器常用于隐藏最后几个子元素（如li:nth-last-child(-n+3){display:none}隐藏最后三项）、为倒数几项添加特殊样式或表格中突出倒数行；与:nth-child不同，后者从前向后
-
使用opacity与transition实现渐隐渐显效果，通过设置透明度变化及过渡动画提升用户体验。例如.hover触发时opacity从0到1平滑过渡，适用于遮罩层、模态框等场景，注意避免重排并优化性能。
-
useEffect用于处理函数组件中的副作用，如数据请求、事件监听等，通过依赖项数组控制执行时机；2.依赖项遗漏会导致闭包捕获旧值，必须将所有用到的变量加入依赖数组或使用函数式更新；3.不稳定依赖（如每次渲染重建的函数）会引发无限循环或频繁执行，需用useCallback或useMemo固化引用；4.useEffect在DOM更新后异步执行不阻塞渲染，useLayoutEffect则同步执行适合需立即测量DOM的场景；5.拆分多个useEffect按不同依赖独立执行更高效，复杂逻辑应封装成自定义Hook提
-
背景图片不显示最常见的原因是background-image路径错误；CSS路径相对于CSS文件位置而非HTML文件，需确认相对路径正确、文件真实存在且命名严格匹配（含大小写），并用开发者工具Network标签检查请求状态码。
-
grid-template-columns和grid-template-rows用于定义网格的列宽和行高。前者设置列的宽度，支持固定单位、fr弹性单位、repeat()重复函数和minmax()最小最大值函数，如repeat(3,1fr)创建三等分列；后者设置行的高度，用法类似，如grid-template-rows:100px200px定义两行固定高度。两者结合可构建二维布局，如.container设为display:grid后，配合gap实现响应式网格。使用fr、repeat和minmax能提升布局灵
-
最直接方式是使用CSS的user-select属性设为none，需加-webkit-、-moz-、-ms-前缀以兼容旧浏览器，可组合实现整体禁用局部启用，但无法完全防止内容被复制。
-
JavaScript定时器用于延迟或重复执行代码，主要包含setTimeout（延迟执行一次）和setInterval（周期性重复执行），二者均可通过clearTimeout和clearInterval清除，需注意定时器延迟不精确、避免内存泄漏及合理封装使用。
-
Grid定骨架，Flex理细节。先用Grid划分整体结构，再在区域内用Flex布局子元素，结合嵌套与媒体查询实现响应式，分层构建清晰可控的复杂页面。
