使用autofocus属性时需注意以下陷阱：1.影响无障碍体验，屏幕阅读器用户可能错过页面信息；2.页面加载慢时，输入框聚焦后内容突然跳动影响体验；3.同一页面多个autofocus行为不可预测，建议只用一个；4.移动设备上可能过早弹出软键盘，干扰用户浏览。

使用CSS@keyframes可实现导航栏背景色动态变化，通过定义关键帧动画使颜色在蓝、红、绿间循环过渡，结合animation属性设置时长与重复模式，并可利用:hover控制动画触发时机，提升视觉体验且兼容现代浏览器。

必须同时设置playsinline和webkit-playsinline属性，且在HTML中硬编码；需配合controls或用户手势触发requestFullscreen()；autoplay必须搭配muted才能生效。

在CSS中，normal值的含义因属性而异，但总体上代表浏览器默认或常见的样式设置。1.在font-weight中，normal代表标准字体粗细（400）。2.在font-style中，normal表示正常字体样式（非斜体）。3.在line-height中，normal是浏览器默认行高（约1.2）。4.在font-variant中，normal使用常规字体变体。5.在white-space中，normal合并空格和换行符。6.在list-style-type中，normal等同于disc（实心圆）。使用n

JavaScript对象属性是数据，方法是函数；最常用字面量创建，构造函数、class和Object.create()适用于不同场景；属性存状态，方法为可执行行为，通过this访问属性，注意get/set访问器和箭头函数的this陷阱。

TreeShaking是构建工具利用ES6模块静态结构实现的代码优化技术，通过标记、剔除、压缩三步移除未使用代码。其生效依赖于静态import/export、无副作用声明、命名导出及正确配置如babel的modules:false和生产模式打包，确保仅保留运行时真正需要的代码，从而减小包体积。

伪元素::before和::after必须设置content属性才能渲染，否则不显示；content值不能为normal，需为""、字符串或attr()等有效值；宿主元素不能是替换元素或display:none；还需检查样式覆盖、visibility、z-index及overflow影响。

可通过手机浏览器、代码编辑器、本地服务器或在线工具四种方式预览HTML文件：一、用文件管理器打开HTML并选择浏览器即可渲染页面；二、使用Acode等编辑器导入文件后点击预览功能实时查看；三、对复杂项目可用KSWEB搭建本地服务器，将文件放入指定目录后通过http://127.0.0.1:8080访问；四、无安装条件时可上传代码至JSFiddle等平台生成链接在线预览。

全栈JavaScript应用容器化需合理设计项目结构，编写前后端Dockerfile并用docker-compose统一管理服务。1.项目分为/client、/server和数据库服务；2.前后端分别基于node:18-alpine构建镜像，优化依赖与启动命令；3.docker-compose.yml定义三者服务联动，配置端口映射、依赖关系与环境变量；4.数据库使用PostgreSQL镜像并持久化数据；5.通过CORS或Nginx反向代理解决跨域，敏感信息由环境变量注入。最终实现环境一致、可移植的部署流程

animation-fill-mode:forwards是控制动画结束状态的核心，使元素保持100%关键帧样式；需显式声明0%/100%、避免样式冲突，并不可用transition替代。

HTML页面向服务器上报数据有五种方式：一、表单提交；二、XMLHttpRequest；三、FetchAPI；四、Image对象GET上报；五、WebSocket持续上报。

状态机通过定义状态、事件和转移规则来管理对象行为变化。在JavaScript中可用对象实现，如电灯开关有'off'和'on'状态，响应'push'事件切换；进一步可封装为工厂函数createStateMachine，支持初始化、转移和回调，用于订单流程等场景；还可扩展钩子函数onEnter/onExit，实现登录流程中的提示与副作用处理，提升可维护性与扩展性。

状态管理是前端应用中对数据存储、更新和分发的统一控制。1.它涵盖UI状态（如加载提示）、业务状态（如购物车）和服务器缓存状态。2.随着单页应用发展，组件间数据共享与视图同步成为挑战，需通过有效数据流提升可维护性和协作效率。3.小型项目可用组件内状态（如useState），大型项目倾向集中式管理。4.主流模式包括：单向数据流（如Redux），强调动作→状态→视图的可预测流程；响应式数据流（如Vuereactive、MobX），自动追踪依赖并更新；命令式方案（如Zustand、Jotai），API简洁适合轻量

figcaption必须嵌套在figure内才具语义和渲染效果，是figure的专属子元素，用于简洁、自包含地说明其内容；应置于figure首或尾（推荐结尾），仅限一个，需重置CSS以确保布局稳定，且不可替代img的alt属性。

::backdrop伪元素可自动为全屏元素或模态对话框创建样式化遮罩层，无需额外DOM。它能实现半透明模糊背景、自然动画效果，并避免z-index冲突，相比传统多节点遮罩更简洁高效。主流浏览器已支持，不兼容时可降级使用JavaScript方案。