【H5 前端开发笔记】第 07 期：HTML常用标签 (3) —— 内联框架标签、框架集标签、超链接标签 详解
（2026 最新版 · 实战笔记）
本期我们继续学习 HTML 常用标签的第 3 部分，主要讲解三大类标签：内联框架（iframe）、框架集（frameset，已废弃） 和 超链接（a 标签）。
一、内联框架标签 —— <iframe>
<iframe> 用于在当前页面中嵌入另一个网页，是实现“页面中嵌页面”的重要标签。
1. 基本语法
<iframe src="要嵌入的页面地址"
width="800"
height="600"
title="页面描述"></iframe>
2. 常用属性（2026 推荐写法）
| 属性 | 含义说明 | 推荐值 / 示例 |
|---|---|---|
src | 嵌入页面的地址（必需） | src="https://www.example.com" |
width / height | 宽高（像素或百分比） | width="100%" height="500" |
title | 无障碍描述（强烈推荐） | title="视频播放器" |
name | 框架名称（用于 target） | name="content" |
loading | 懒加载优化 | loading="lazy" |
sandbox | 安全沙箱（重要安全属性） | sandbox="allow-scripts" |
allow | 允许的功能（如摄像头、地理位置） | allow="autoplay; clipboard-write" |
frameborder | 是否显示边框（HTML5 已废弃，用 CSS） | frameborder="0"（推荐用 CSS） |
3. 实战示例
<!-- 1. 嵌入外部网页 -->
<iframe src="https://www.bilibili.com"
width="100%"
height="600"
title="B站首页"
loading="lazy"
frameborder="0"></iframe>
<!-- 2. 嵌入视频（推荐写法） -->
<iframe src="https://player.bilibili.com/player.html?bvid=BV1xx411c7mP"
width="800"
height="450"
title="视频标题"
frameborder="0"
allowfullscreen></iframe>
<!-- 3. 嵌入地图 -->
<iframe src="https://www.google.com/maps/embed?pb=..."
width="600"
height="450"
style="border:0;"
allowfullscreen
loading="lazy"></iframe>
注意事项：
- 现代浏览器对 iframe 有较多安全限制
- 尽量给 iframe 添加
title属性（无障碍要求） - 嵌入第三方页面时要注意对方是否允许被 iframe 嵌套（X-Frame-Options）
二、框架集标签 —— <frameset> 与 <frame>（已废弃）
重要提示（2026 年）：
<frameset>、<frame>、<noframes>已被 HTML5 完全废弃，不推荐在新项目中使用。- 现代前端开发已全面转向 单页应用（SPA） 或使用
<iframe>+ CSS Flex/Grid 布局替代。 - 学习目的：了解历史，面试偶尔会问“为什么废弃”。
历史写法（仅供了解）
<!-- 这是一种完全不同的文档结构，不再使用 -->
<frameset rows="20%,*">
<frame src="top.html" name="top">
<frameset cols="20%,*">
<frame src="left.html" name="left">
<frame src="main.html" name="main">
</frameset>
</frameset>
废弃原因：
- 对 SEO、移动端、辅助技术极不友好
- 破坏了浏览器前进后退功能
- 难以维护和响应式适配
结论：现在开发一律不使用 frameset 相关标签。
三、超链接标签 —— <a>（本期重中之重）
<a> 是 HTML 中最重要的交互标签之一，用于页面跳转、锚点定位、文件下载等。
1. 基本语法
<a href="目标地址">链接文字</a>
2. 常用属性详解（2026 推荐）
| 属性 | 含义说明 | 推荐示例 |
|---|---|---|
href | 跳转地址（核心属性） | href="https://www.baidu.com" |
target | 打开方式 | _blank（新标签页）_self（当前页，默认） |
title | 鼠标悬停提示文字 | title="打开百度首页" |
download | 下载文件（不跳转，直接下载） | download="产品手册.pdf" |
rel | 链接关系（SEO 和安全重要） | rel="noopener noreferrer"（配合 _blank 使用） |
hreflang | 目标页面语言 | hreflang="en" |
3. 实战分类示例
<!-- 1. 外部链接（推荐写法） -->
<a href="https://github.com"
target="_blank"
rel="noopener noreferrer"
title="去 GitHub 看看">GitHub</a>
<!-- 2. 内部页面跳转 -->
<a href="about.html">关于我们</a>
<a href="pages/contact.html">联系我们</a>
<!-- 3. 页面内锚点跳转（非常常用） -->
<a href="#section1">第一章</a>
<!-- 在页面中定义锚点 -->
<h2 id="section1">第一章标题</h2>
<!-- 4. 下载文件 -->
<a href="files/产品手册.pdf" download>下载 PDF 手册</a>
<!-- 5. 电话 / 邮箱 / 短信链接（移动端友好） -->
<a href="tel:13800138000">拨打电话</a>
<a href="mailto:hello@example.com">发送邮件</a>
<a href="sms:13800138000">发短信</a>
4. 最佳实践
- 外部链接一定要加
target="_blank" rel="noopener noreferrer" - 链接文字要有意义（不要只写“点击这里”）
- 图片链接时，图片必须加
alt属性 - 移动端建议给电话、邮箱加上对应协议
四、本期练习（建议全部完成）
- 创建一个页面，嵌入一个 B 站视频（使用 iframe）
- 写一个导航栏，包含至少 5 个
<a>标签（外部链接 + 内部页面 + 锚点） - 实现页面内平滑滚动到指定章节（配合
id） - 添加一个文件下载链接
五、笔记总结（重点记忆）
<iframe>用于在页面中嵌入其他网页，常用属性：src、title、loading="lazy"<frameset>和<frame>已被废弃，现代项目不要使用<a>标签是核心交互标签，href是必写属性- 外部链接推荐写法：
target="_blank" rel="noopener noreferrer" - 下载文件使用
download属性
第 08 期预告：《HTML 常用标签 (4) —— 列表标签（ul、ol、dl）与表格标签（table）详解》
需要我立即补充以下任意内容，请直接回复：
- 本期完整可运行的「导航 + iframe + 锚点」综合示例代码
- iframe 安全属性 sandbox 详细说明
- 第 01~07 期笔记合并版（完整前端基础笔记文档）
- 本期练习的标准参考答案
继续加油！第 07 期笔记到此结束，你的 HTML 标签体系正在逐步完善！✨
