-
HTML不是编程语言而是语义化结构说明书，标签描述内容含义而非样式，应避免滥用无语义的<div>/<span>，注意属性写法规范（如width="200"而非"200px"，布尔属性无需赋值）。
-
不加async或defer的script标签会阻塞HTML解析：浏览器遇到时立即暂停解析，下载并执行脚本后才继续，导致白屏和DOM访问失败；内联与外链脚本均如此，且按文档顺序串行执行。
-
用position:absolute+top:0+left:0+width/height:100%使图片叠于父容器左上角，父容器需设position:relative和明确高度，配合z-index与opacity切换，预加载图片并用object-fit:cover防变形。
-
overflow-y:auto在Flex容器中失效，根本原因是父容器无明确高度约束导致无法触发溢出；必须设置height/max-height，并为滚动区域添加min-height:0及-webkit-overflow-scrolling:touch（iOS兼容）。
-
表单验证必须同时使用addEventListener('input')和submit事件：input实现实时反馈，submit作为防绕过兜底；正则需严格使用^和$锚定边界，并配合trim()处理空格，所有前端校验均不可替代服务端验证。
-
sanitize.css是现代项目必备基础样式库，它通过:where()保持低特异性、保障表单一致性、默认支持响应式与无障碍，比手动重置或使用reset.css更高效可靠。
-
CSS选择器与动画结合可提升交互体验。通过transition配合后代选择器实现悬停效果，如.card:hover.title改变颜色和位置；使用animation与直接子选择器（>）定义@keyframes滑入动画，结合自定义属性--i设置延迟，实现列表项逐项显示；应避免深层嵌套选择器以提升性能，推荐用transform、opacity和will-change优化渲染，保持结构清晰与控制精准。
-
推荐使用sepia(0.6)contrast(1.1)brightness(0.95)组合实现自然老照片效果，避免sepia(1)过重发黑；透明PNG需配合泛黄背景（如#f8f2e9）防止层次丢失；高保真褪色需Canvas或SVG方案，但性能开销大。
-
如果图片和 H">
图片不显示的四大原因：路径错误（相对HTML文件）、img标签不规范（未自闭合或缺alt）、CSS隐藏（如overflow:hidden或vertical-align问题）、格式兼容性差（如WebP不支持）。
-
推荐使用overflow-wrap:break-word解决长单词溢出，它优先保持单词完整，仅在必要时断行；而word-break:break-all会无差别切割，影响可读性。
-
外链的<img>或background-image引入的SVG无法用CSS控制内部<path>颜色，因其被当作位图处理；只有inlineSVG才能通过fill:currentColor或CSS变量动态换色。
-
cancelAnimationFrame必须传入requestAnimationFrame返回的有效帧ID才能取消未执行的帧请求，无法中断已进入回调队列的当前帧；动画函数内部须加状态守卫提前return，避免多余操作和内存泄漏。
-
屏幕录制无法通过HTML直接实现，必须依赖JavaScript调用WebAPI；2.核心技术是使用MediaDevices.getDisplayMedia()获取屏幕流，再通过MediaRecorder进行录制和保存；3.常见问题包括用户权限拒绝、浏览器兼容性差异、音频捕获限制、性能开销大、文件体积大以及隐私安全风险；4.录制完成后可通过Blob生成下载链接实现客户端保存，或使用FormData结合fetch上传至服务器；5.大文件应采用分块上传策略以提升稳定性，后端可进行存储、转码、元数据提取等处理；6
-
history.pushState()是浏览器原生支持的无刷新跳转核心方法，通过操作history对象新增历史记录、更新URL（同源相对或绝对路径），不触发重载；需配合popstate事件监听及手动内容加载实现完整SPA路由。
-
border-style默认为none，不显式指定如solid则边框不可见；表格需同时设border-collapse:collapse和各单元格border-style；box-sizing和overflow也会影响边框显示。
如果图片和 H