-
卡片布局通过HTML结构与CSS样式实现，使用语义化标签构建内容，配合Flexbox排列和响应式设计，确保整洁、一致且适配多屏。
-
保存HTML文件最直接的方法是使用浏览器的“另存为”功能或在文本编辑器中编写后以.html为后缀保存；1.选择“网页，完整”可保留资源文件，2.选择“仅HTML”则更简洁适合学习；3.保存时需确保文件后缀正确、编码统一为UTF-8、资源路径使用相对路径以避免乱码或资源丢失；4.浏览器是查看HTML的首选工具，因其能完整解析并渲染网页内容，且自带开发者工具便于调试；5.专业代码编辑器如VSCode提供语法高亮和实时预览，6.IDE如WebStorm适合大型项目，7.在线编辑器如CodePen和JSFiddl
-
dfn元素用于标记术语首次被定义的位置，必须包裹被定义的术语本身，并与定义性描述邻近或显式关联；它不提供视觉样式，但影响无障碍、SEO和知识图谱提取。
-
CSS中通过cursor属性设置鼠标指针样式，常用值包括auto、pointer、text、wait、help、not-allowed、grab等，分别对应不同交互场景；选择时应确保直观准确，避免滥用；可使用url()引入SVG或图片自定义光标，需指定热点坐标与备用光标以保证兼容性与降级体验；现代浏览器对标准值支持良好，自定义光标需注意格式、尺寸（推荐32x32px内）、性能及用户偏好，优先使用SVG并设置fallback，确保跨浏览器一致性与可访问性。
-
BroadcastChannel是同步登出状态的合理选择，因其是浏览器原生轻量级跨标签通信机制，无需后端、不依赖localStorage轮询，且在beforeunload中可靠发送登出消息；但需注意Safari15.4+才完整支持，旧版可能丢弃最后消息。
-
gap在Flex布局中未生效是因为旧版浏览器不支持、子项脱离文档流或存在margin干扰；Grid中gap被“吃掉”是因容器剩余空间均分导致视觉误差；column-count布局完全不支持gap。
-
在HTML中插入表单的方法包括：1.使用<form>标签定义表单结构并设置action和method属性；2.添加文本框、密码框、单选按钮、复选框、下拉选择框及提交按钮等控件；3.通过name属性确保数据提交，并根据需求设置enctype属性及提交方式；4.利用HTML5验证属性或JavaScript进行表单验证，以保证输入数据的正确性。
-
BroadcastChannel不支持MessagePort，因其仅允许结构化克隆数据，而MessagePort无法被序列化，强行传递会抛出DATA_CLONE_ERR错误；正确方案是用BroadcastChannel广播任务信号，再通过SharedWorker或MessageChannel建立点对点通信通道。
-
HTML选区本质是DOM边界而非字符串，由anchorNode/focusNode及对应偏移量定义；selection.toString()会丢失结构和语义，应优先用getRangeAt(0)?.toString().trim()且需校验rangeCount>0。
-
根本原因是container响应式定宽而container-fluid需父容器无宽度限制；Bootstrap5中其默认12px内边距导致不贴边，须用自定义CSS清除，且需排查viewport、全局样式及嵌套逻辑。
-
纯HTML无法实现真正的SPA，因其是静态语言，不支持运行时状态管理、路由监听或局部刷新，点击链接必触发全量重载，而SPA需JS通过pushState、fetch和DOM操作模拟无刷新切换。
-
steps()是实现打字机效果的关键，因其能强制动画分步“卡帧”逐字符显示，配合width+overflow:hidden和white-space:nowrap可精准控制可见区域，而opacity/visibility无法实现逐字符显现。
-
HTML5Canvas本身不支持火焰滤镜，需用WebGL（如Three.js+ShaderMaterial）或PixiJS等库实现；Canvas2D仅能低效模拟粒子效果，且无真实光影层次。
-
JSP中使用HTML5语义化标签需声明<!DOCTYPEhtml>、设置UTF-8编码、正确嵌套标签、为旧IE引入HTML5Shiv并显式设display:block、用JSTL替代脚本片段动态生成结构、最后验证DOM与样式。
-
使用IntersectionObserverAPI实现图片懒加载，通过监听元素进入视口并动态加载真实图片，减少资源请求、提升性能；结合rootMargin提前加载、多阶段加载和错误处理可进一步优化体验，兼容性不足时可降级至scroll事件或引入polyfill。
