<iframe>嵌入外部页面必须设置src（必需且为有效URL）、width和height（防默认300×150错乱），禁用边框需CSS border: none，跨域无法访问DOM，title属性为无障碍刚需，移动端需配合viewport与touch-action处理。
直接用 <iframe src="..."> 就能嵌入外部页面，但不加关键属性会导致样式错乱、边框残留、可访问性缺失，甚至被现代浏览器拦截加载。
src 属性必须写对，否则 iframe 什么也加载不出来
src 是唯一必需属性，值必须是有效 URL。相对路径（如 "./dashboard.html"）只在同源下可用；跨域地址（如 "https://maps.google.com"）能加载，但父页 JS 无法读取其 DOM —— 这不是 bug，是浏览器强制的同源策略保护。
- 空字符串、
"#"、"about:blank"会触发空白帧，部分浏览器可能报Failed to load resource - 本地开发时用
file://协议加载本地 HTML 文件，Chrome 等浏览器默认禁止，会看到net::ERR_FILE_NOT_FOUND或白屏 - 如果目标页返回 404 或重定向失败，iframe 区域通常静默留空，不会自动显示错误提示，得靠
onload/onerror手动监听
width 和 height 不设就用浏览器默认值（300×150），大概率不符合预期
不设尺寸时，所有主流浏览器都按 width="300" height="150" 渲染，窄又矮，尤其在响应式布局里极易被忽略。百分比值（如 width="100%"）依赖父容器有明确宽高，否则可能塌陷。
-
width和height值支持像素（"600"）、百分比（"90%"），但不支持"auto"或"fit-content" - CSS 设置
width: 100%+height: 0; padding-bottom: 56.25%（即 16:9 比例盒）比纯 HTML 属性更可控，尤其适配视频类 iframe - 移动端需配合
viewport元标签和 CSSmax-width，否则 100% 宽度可能横向溢出
frameborder 和 scrolling 已废弃，用 CSS 控制更可靠
frameborder="0" 和 scrolling="no" 在 HTML5 中已过时，W3C 推荐用 CSS 替代。现代写法是给 iframe 加 style="border: none; overflow: hidden;"，或统一用 class 控制。
立即学习“前端免费学习笔记（深入）”；
- 仅靠
frameborder="0"不能彻底隐藏边框，某些旧版 Safari 仍会渲染灰色细线，必须补 CSS -
scrolling="no"对跨域 iframe 无效，滚动行为最终由子页面自身body的overflow决定 - 若要禁用双指缩放或拖拽滚动，需额外在 iframe 外层容器上设
touch-action: none（慎用，影响可访问性）
title 属性不是可选装饰，而是无障碍刚需
屏幕阅读器依赖 title 描述 iframe 内容用途，比如 title="客户反馈表单" 比 title="iframe1" 有用得多。没有 title，WCAG 2.1 会判定为 A 级可访问性失败。
- 即使内容简单（如一个按钮），也要写有意义的
title，避免空值或纯标点 - 不要把
title当 tooltip 用 —— 它不响应鼠标悬停，只服务辅助技术 - 若 iframe 动态切换
src，记得同步更新title，否则阅读器仍播报旧描述
真正麻烦的从来不是怎么写第一行 <iframe>，而是当它加载慢、加载失败、被广告拦截器屏蔽、或在 iOS Safari 里突然不响应 touch 事件时，你有没有预留 fallback、监听机制和降级路径。
