 内联框架标签、框架集标签、超链接标签 详解)
【H5 前端开发笔记】第 07 期HTML常用标签 (3) —— 内联框架标签、框架集标签、超链接标签 详解2026 最新版 · 实战笔记本期我们继续学习 HTML 常用标签的第 3 部分主要讲解三大类标签内联框架iframe、框架集frameset已废弃和超链接a 标签。一、内联框架标签 ——iframeiframe用于在当前页面中嵌入另一个网页是实现“页面中嵌页面”的重要标签。1. 基本语法iframesrc要嵌入的页面地址width800height600title页面描述/iframe2. 常用属性2026 推荐写法属性含义说明推荐值 / 示例src嵌入页面的地址必需srchttps://www.example.comwidth/height宽高像素或百分比width100%height500title无障碍描述强烈推荐title视频播放器name框架名称用于 targetnamecontentloading懒加载优化loadinglazysandbox安全沙箱重要安全属性sandboxallow-scriptsallow允许的功能如摄像头、地理位置allowautoplay; clipboard-writeframeborder是否显示边框HTML5 已废弃用 CSSframeborder0推荐用 CSS3. 实战示例!-- 1. 嵌入外部网页 --iframesrchttps://www.bilibili.comwidth100%height600titleB站首页loadinglazyframeborder0/iframe!-- 2. 嵌入视频推荐写法 --iframesrchttps://player.bilibili.com/player.html?bvidBV1xx411c7mPwidth800height450title视频标题frameborder0allowfullscreen/iframe!-- 3. 嵌入地图 --iframesrchttps://www.google.com/maps/embed?pb...width600height450styleborder:0;allowfullscreenloadinglazy/iframe注意事项现代浏览器对 iframe 有较多安全限制尽量给 iframe 添加title属性无障碍要求嵌入第三方页面时要注意对方是否允许被 iframe 嵌套X-Frame-Options二、框架集标签 ——frameset与frame已废弃重要提示2026 年frameset、frame、noframes已被 HTML5 完全废弃不推荐在新项目中使用。现代前端开发已全面转向单页应用SPA或使用iframe CSS Flex/Grid 布局替代。学习目的了解历史面试偶尔会问“为什么废弃”。历史写法仅供了解!-- 这是一种完全不同的文档结构不再使用 --framesetrows20%,*framesrctop.htmlnametopframesetcols20%,*framesrcleft.htmlnameleftframesrcmain.htmlnamemain/frameset/frameset废弃原因对 SEO、移动端、辅助技术极不友好破坏了浏览器前进后退功能难以维护和响应式适配结论现在开发一律不使用 frameset 相关标签。三、超链接标签 ——a本期重中之重a是 HTML 中最重要的交互标签之一用于页面跳转、锚点定位、文件下载等。1. 基本语法ahref目标地址链接文字/a2. 常用属性详解2026 推荐属性含义说明推荐示例href跳转地址核心属性hrefhttps://www.baidu.comtarget打开方式_blank新标签页_self当前页默认title鼠标悬停提示文字title打开百度首页download下载文件不跳转直接下载download产品手册.pdfrel链接关系SEO 和安全重要relnoopener noreferrer配合_blank使用hreflang目标页面语言hreflangen3. 实战分类示例!-- 1. 外部链接推荐写法 --ahrefhttps://github.comtarget_blankrelnoopener noreferrertitle去 GitHub 看看GitHub/a!-- 2. 内部页面跳转 --ahrefabout.html关于我们/aahrefpages/contact.html联系我们/a!-- 3. 页面内锚点跳转非常常用 --ahref#section1第一章/a!-- 在页面中定义锚点 --h2idsection1第一章标题/h2!-- 4. 下载文件 --ahreffiles/产品手册.pdfdownload下载 PDF 手册/a!-- 5. 电话 / 邮箱 / 短信链接移动端友好 --ahreftel:13800138000拨打电话/aahrefmailto:helloexample.com发送邮件/aahrefsms:13800138000发短信/a4. 最佳实践外部链接一定要加target_blank relnoopener noreferrer链接文字要有意义不要只写“点击这里”图片链接时图片必须加alt属性移动端建议给电话、邮箱加上对应协议四、本期练习建议全部完成创建一个页面嵌入一个 B 站视频使用 iframe写一个导航栏包含至少 5 个a标签外部链接 内部页面 锚点实现页面内平滑滚动到指定章节配合id添加一个文件下载链接五、笔记总结重点记忆iframe用于在页面中嵌入其他网页常用属性src、title、loadinglazyframeset和frame已被废弃现代项目不要使用a标签是核心交互标签href是必写属性外部链接推荐写法target_blank relnoopener noreferrer下载文件使用download属性第 08 期预告《HTML 常用标签 (4) —— 列表标签ul、ol、dl与表格标签table详解》需要我立即补充以下任意内容请直接回复本期完整可运行的「导航 iframe 锚点」综合示例代码iframe 安全属性 sandbox 详细说明第 01~07 期笔记合并版完整前端基础笔记文档本期练习的标准参考答案继续加油第 07 期笔记到此结束你的 HTML 标签体系正在逐步完善✨
【H5 前端开发笔记】第 07 期：HTML常用标签 (3) 内联框架标签、框架集标签、超链接标签 详解
发布时间：2026/7/31 10:04:49
【H5 前端开发笔记】第 07 期HTML常用标签 (3) —— 内联框架标签、框架集标签、超链接标签 详解2026 最新版 · 实战笔记本期我们继续学习 HTML 常用标签的第 3 部分主要讲解三大类标签内联框架iframe、框架集frameset已废弃和超链接a 标签。一、内联框架标签 ——iframeiframe用于在当前页面中嵌入另一个网页是实现“页面中嵌页面”的重要标签。1. 基本语法iframesrc要嵌入的页面地址width800height600title页面描述/iframe2. 常用属性2026 推荐写法属性含义说明推荐值 / 示例src嵌入页面的地址必需srchttps://www.example.comwidth/height宽高像素或百分比width100%height500title无障碍描述强烈推荐title视频播放器name框架名称用于 targetnamecontentloading懒加载优化loadinglazysandbox安全沙箱重要安全属性sandboxallow-scriptsallow允许的功能如摄像头、地理位置allowautoplay; clipboard-writeframeborder是否显示边框HTML5 已废弃用 CSSframeborder0推荐用 CSS3. 实战示例!-- 1. 嵌入外部网页 --iframesrchttps://www.bilibili.comwidth100%height600titleB站首页loadinglazyframeborder0/iframe!-- 2. 嵌入视频推荐写法 --iframesrchttps://player.bilibili.com/player.html?bvidBV1xx411c7mPwidth800height450title视频标题frameborder0allowfullscreen/iframe!-- 3. 嵌入地图 --iframesrchttps://www.google.com/maps/embed?pb...width600height450styleborder:0;allowfullscreenloadinglazy/iframe注意事项现代浏览器对 iframe 有较多安全限制尽量给 iframe 添加title属性无障碍要求嵌入第三方页面时要注意对方是否允许被 iframe 嵌套X-Frame-Options二、框架集标签 ——frameset与frame已废弃重要提示2026 年frameset、frame、noframes已被 HTML5 完全废弃不推荐在新项目中使用。现代前端开发已全面转向单页应用SPA或使用iframe CSS Flex/Grid 布局替代。学习目的了解历史面试偶尔会问“为什么废弃”。历史写法仅供了解!-- 这是一种完全不同的文档结构不再使用 --framesetrows20%,*framesrctop.htmlnametopframesetcols20%,*framesrcleft.htmlnameleftframesrcmain.htmlnamemain/frameset/frameset废弃原因对 SEO、移动端、辅助技术极不友好破坏了浏览器前进后退功能难以维护和响应式适配结论现在开发一律不使用 frameset 相关标签。三、超链接标签 ——a本期重中之重a是 HTML 中最重要的交互标签之一用于页面跳转、锚点定位、文件下载等。1. 基本语法ahref目标地址链接文字/a2. 常用属性详解2026 推荐属性含义说明推荐示例href跳转地址核心属性hrefhttps://www.baidu.comtarget打开方式_blank新标签页_self当前页默认title鼠标悬停提示文字title打开百度首页download下载文件不跳转直接下载download产品手册.pdfrel链接关系SEO 和安全重要relnoopener noreferrer配合_blank使用hreflang目标页面语言hreflangen3. 实战分类示例!-- 1. 外部链接推荐写法 --ahrefhttps://github.comtarget_blankrelnoopener noreferrertitle去 GitHub 看看GitHub/a!-- 2. 内部页面跳转 --ahrefabout.html关于我们/aahrefpages/contact.html联系我们/a!-- 3. 页面内锚点跳转非常常用 --ahref#section1第一章/a!-- 在页面中定义锚点 --h2idsection1第一章标题/h2!-- 4. 下载文件 --ahreffiles/产品手册.pdfdownload下载 PDF 手册/a!-- 5. 电话 / 邮箱 / 短信链接移动端友好 --ahreftel:13800138000拨打电话/aahrefmailto:helloexample.com发送邮件/aahrefsms:13800138000发短信/a4. 最佳实践外部链接一定要加target_blank relnoopener noreferrer链接文字要有意义不要只写“点击这里”图片链接时图片必须加alt属性移动端建议给电话、邮箱加上对应协议四、本期练习建议全部完成创建一个页面嵌入一个 B 站视频使用 iframe写一个导航栏包含至少 5 个a标签外部链接 内部页面 锚点实现页面内平滑滚动到指定章节配合id添加一个文件下载链接五、笔记总结重点记忆iframe用于在页面中嵌入其他网页常用属性src、title、loadinglazyframeset和frame已被废弃现代项目不要使用a标签是核心交互标签href是必写属性外部链接推荐写法target_blank relnoopener noreferrer下载文件使用download属性第 08 期预告《HTML 常用标签 (4) —— 列表标签ul、ol、dl与表格标签table详解》需要我立即补充以下任意内容请直接回复本期完整可运行的「导航 iframe 锚点」综合示例代码iframe 安全属性 sandbox 详细说明第 01~07 期笔记合并版完整前端基础笔记文档本期练习的标准参考答案继续加油第 07 期笔记到此结束你的 HTML 标签体系正在逐步完善✨
