必须同时写死autoplay和muted布尔属性（无值），缺一不可；移动端还需加playsinline、webkit-playsinline和preload="metadata"，并配poster封面，否则易白屏或静音失败。
如何正确使用 audio 和 video 标签避免白屏或静音失败
浏览器对自动播放有严格限制，autoplay 单独使用大概率被静音拦截，尤其在 Chrome、Safari 等主流浏览器中。必须配合 muted 才能真正自动启动。
-
video必须带muted属性才能触发autoplay；audio同理，但部分移动端仍可能拒绝（如 iOS Safari） - 不写
controls时，用户无法手动操作——别指望靠 JS 播放就万事大吉，缺少控件会显著降低可访问性 -
poster只对video有效，且必须是图片 URL；若路径错误或跨域未配 CORS，封面不会显示，只留黑块 - 推荐用
<source></source>多格式兜底：mp4（H.264 + AAC）、webm（VP8/VP9 + Vorbis/Opus），避免只依赖单一格式导致某些浏览器直接不加载
input 类型选错会导致表单验证失效或体验断裂
HTML5 提供的语义化 input 类型不只是“看起来像”，它直接影响原生验证逻辑、软键盘弹出方式、甚至屏幕阅读器行为。
-
type="email"不仅校验格式，还会在 iOS 上唤起带 @ 符号的键盘；但若后端没做二次校验，仅靠前端正则很容易绕过 -
type="number"的step默认是 1，设为step="0.01"才支持小数输入；若min/max与value类型不一致（比如字符串 "5" 而非数字 5），部分浏览器会忽略约束 -
type="date"在 Safari 旧版本（≤16.6）和部分安卓 WebView 中完全不渲染控件，回退方案只能是type="text"+ JS 日历库，不能只靠属性硬扛 -
type="file"的accept属性（如accept="image/*"）只是提示，无法阻止用户手动修改文件类型，服务端必须重新校验 MIME 类型和扩展名
iframe 嵌入第三方媒体内容时常见的安全与加载问题
iframe 是嵌入外部视频（如 YouTube、Bilibili）、地图或文档最常用方式，但默认行为常埋雷。
- 缺少
sandbox属性时，嵌入页可能执行脚本、弹窗、跳转——尤其当 src 来自用户输入时，极易引发 XSS -
allow="fullscreen; clipboard-read"要按需开启，不是全开才好；比如不需要截图功能，就别加clipboard-write -
loading="lazy"对非首屏iframe有效，但 YouTube 等平台的 iframe 在懒加载下可能触发多次初始化，造成重复请求或播放异常 - 若嵌入页本身用了 CSP（如 Bilibili），而你的主站未配置对应
frame-ancestors，会出现“Refused to display”错误，页面空白且控制台报Blocked by Content-Security-Policy
表单提交前，多媒体字段（如 file）的值获取与校验容易被忽略的细节
input[type="file"] 的值不是字符串，而是 FileList 对象，直接取 .value 只能得到文件名（且不可靠），真要读取内容必须走 FileReader 或 FormData。
- 多文件上传必须设
multiple属性，否则event.target.files永远只有 1 个；即使用户 Ctrl+多选，没这个属性也只拿到最后一个 -
files[0].size单位是字节，前端校验大小要用> 5 * 1024 * 1024而不是> 5，否则永远不触发 - 表单用
submit提交时，file字段会自动进入FormData，但若用fetch手动发请求，必须显式构造new FormData(form)，不能直接传form.elements - 上传前预览图片？别直接用
URL.createObjectURL(file)后不 revoke——内存泄漏在长页面中会明显拖慢
实际项目里最麻烦的往往不是“怎么写出来”，而是“为什么在 A 浏览器正常，在 B 设备上卡住”——尤其是 video 的 autoplay 策略、input type="date" 的兼容断层、以及 iframe 的 CSP 冲突，这些点一旦漏测，上线后用户第一反应就是“网页坏了”，而不是“我换个浏览器试试”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
