【H5 前端开发笔记】第 07 期：HTML常用标签 (3) 内联框架标签、框架集标签、超链接标签详解

最新推荐文章于 2026-04-14 10:17:31 发布

原创最新推荐文章于 2026-04-14 10:17:31 发布 · 386 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#笔记 #html #前端

前端同时被 2 个专栏收录

464 篇文章

订阅专栏

html5

41 篇文章

订阅专栏

【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>