HTML 小总结：从骨架到枝叶，系统掌握网页结构

文章目录

[HTML 的小总结](#HTML 的小总结)
- [1 开发工具与环境准备](#1 开发工具与环境准备)
- - [1.1 常用编辑器](#1.1 常用编辑器)
  - [1.2 VS Code / Trae 标准配置](#1.2 VS Code / Trae 标准配置)
  - [1.3 Live Server 插件使用](#1.3 Live Server 插件使用)
  - [1.4 浏览器调试工具](#1.4 浏览器调试工具)
  - [1.5 项目目录规范](#1.5 项目目录规范)
- [2 HTML 基础概念](#2 HTML 基础概念)
- - [2.1 HTML 定义](#2.1 HTML 定义)
  - [2.2 标签分类](#2.2 标签分类)
  - [2.3 标签层级关系](#2.3 标签层级关系)
  - [2.4 HTML 注释](#2.4 HTML 注释)
  - [2.5 HTML5 标准骨架](#2.5 HTML5 标准骨架)
- [3 文本相关标签](#3 文本相关标签)
- - [3.1 六级标题 h1~h6](#3.1 六级标题 h1~h6)
  - [3.2 段落标签 `<p>`](#3.2 段落标签 <p>)
  - [3.3 换行、分割线](#3.3 换行、分割线)
  - [3.4 文字强调标签](#3.4 文字强调标签)
  - [3.5 容器标签](#3.5 容器标签)
- [4 列表标签](#4 列表标签)
- - [4.1 无序列表 ul li](#4.1 无序列表 ul li)
  - [4.2 有序列表 ol li](#4.2 有序列表 ol li)
  - [4.3 自定义列表 dl dt dd](#4.3 自定义列表 dl dt dd)
- [5. 表格标签](#5. 表格标签)
- - [5.1 表格基础标签](#5.1 表格基础标签)
  - [5.2 表格示例](#5.2 表格示例)
- [6. 图片标签 img](#6. 图片标签 img)
- - [6.1 基础语法](#6.1 基础语法)
  - [6.2 网络图片示例](#6.2 网络图片示例)
  - [6.3 资源地址详解：相对路径 vs 绝对路径](#6.3 资源地址详解：相对路径 vs 绝对路径)
  - - [1. 相对路径（推荐用于本地项目）](#1. 相对路径（推荐用于本地项目）)
    - [2. 绝对路径（推荐用于网络资源）](#2. 绝对路径（推荐用于网络资源）)
    - [3. 地址不正确或不存在会怎么样？](#3. 地址不正确或不存在会怎么样？)
  - [6.4 路径写法对比总结](#6.4 路径写法对比总结)
- [7. 音视频 & iframe](#7. 音视频 & iframe)
- - [7.1 video 视频](#7.1 video 视频)
  - [7.2 audio 音频](#7.2 audio 音频)
  - [7.3 iframe 内嵌页面](#7.3 iframe 内嵌页面)
- [8. 超链接 a](#8. 超链接 a)
- - [8.1 外部链接](#8.1 外部链接)
  - [8.2 锚点链接](#8.2 锚点链接)
  - [8.3 电子邮件与电话链接](#8.3 电子邮件与电话链接)
总结一下

HTML 的小总结

HTML 的语法可以看作是一棵树，有一个固定的骨架模版，然后向四周延伸出各种标签分支。下面按照这个树形结构，从根到叶，系统地总结 HTML 的各个知识点。

1 开发工具与环境准备

工欲善其事，必先利其器。在开始写 HTML 之前，先把开发环境搭好，后面写代码会顺手很多。

1.1 常用编辑器

VS Code：目前前端开发最主流的编辑器，免费、插件生态丰富。搭配 Live Server 插件可以实现「保存即刷新」，开发效率直接翻倍。
Trae AI：字节跳动推出的 AI 编辑器，内置代码补全、报错修复、注释生成甚至语音写代码功能，适合新手快速上手。
其他工具：WebStorm（功能强大但收费）、Sublime（轻量级）、HBuilder（国产，对小程序友好）、Cursor（AI 辅助编程）。

开发注意：不要同时装太多插件，容易导致编辑器卡顿。新手建议只装 Live Server、Prettier（代码格式化）、ESLint（代码检查）这三个就够了。

1.2 VS Code / Trae 标准配置

功能	操作方式
放大/缩小代码字体	Ctrl + / Ctrl -
打开设置面板	Ctrl + ,
调整代码字号	设置搜索 Editor: Font Size
Tab 缩进设为 2（适配 Vue/React）	设置搜索 Editor: Tab Size，值改为 2
保存自动格式化	文本编辑器 → 格式化 → 勾选 Format On Save

开发注意 ：缩进统一用 2 个空格，不要用 Tab。因为不同编辑器对 Tab 的解析宽度不一样，用空格可以保证在任何环境下代码对齐。团队协作时，建议在项目根目录放一个 .editorconfig 文件统一配置。

1.3 Live Server 插件使用

插件市场搜索安装 Live Server
右键 HTML 文件 → Open with Live Server
本地预览地址：http://127.0.0.1:5501

开发注意：Live Server 默认端口是 5501，如果被占用会自动递增。如果同时开多个项目，注意区分端口号。另外，Live Server 不支持 PHP 等后端语言，只适合纯前端页面调试。

1.4 浏览器调试工具

首选浏览器：Chrome（全球份额 66.16%，调试功能最全）
打开调试面板两种方式：
1. 页面空白处右键 → 检查
2. 快捷键 F12
常用面板：
- Elements：查看和修改 HTML 结构、CSS 样式（改完即时生效，但刷新就没了）
- Console：查看 JS 报错、打印日志，是调试的命根子
- Network：查看网络请求、图片加载、接口调用情况
- Sources：断点调试 JavaScript 代码

开发注意 ：调试面板里改的样式只是临时效果，刷新页面就没了。正确的做法是：在调试面板里调好效果后，把改动的代码复制回编辑器里保存。另外，Console 面板里的报错信息一定要看，它通常会告诉你哪一行代码出了问题。

1.5 项目目录规范

项目全部素材放在同一个根文件夹
图片统一新建 img 或 images 文件夹存放
音视频新建 media 文件夹
CSS 文件新建 css 文件夹，JS 文件新建 js 文件夹
路径优先使用相对路径，项目复制到其他电脑不会失效

开发注意 ：文件名不要用中文，不要用空格，统一用小写字母加连字符（如 my-page.html）。因为有些服务器对中文路径支持不好，空格会被转义成 %20，导致资源加载失败。另外，HTML 文件建议命名为 index.html，因为服务器默认会找这个文件作为首页。

2 HTML 基础概念

在写代码之前，先搞清楚 HTML 到底是什么、怎么用。这一节帮你打好地基。

2.1 HTML 定义

HTML 全称：HyperText Markup Language，超文本标记语言。

作用：只用标签搭建网页结构，不负责样式、逻辑。就像盖房子，HTML 是钢筋水泥的框架，CSS 是装修，JavaScript 是水电。
书写规范 ：标签大小写不区分，但开发统一用小写 。虽然 <DIV> 也能用，但团队协作时大小写混用会让人抓狂。

开发注意 ：HTML 不是编程语言，是标记语言。它没有变量、循环、条件判断这些概念。如果你在 HTML 里看到 if、for 之类的写法，那一定是模板引擎（如 Vue、React）的语法，不是原生 HTML。

2.2 标签分类

双标签：有开始、结束标签，可包裹内容

html 复制代码

<h2>二级标题</h2>
<p>段落文字</p>

单标签：无闭合，仅实现功能

html 复制代码

<br> 换行
<hr> 分割线
<img> 图片
<input> 输入框

开发注意 ：单标签在 XHTML 标准中需要自闭合（如 <br />），但在 HTML5 中写 <br> 就行，不用加斜杠。不过团队如果统一要求自闭合风格，那就保持一致。另外，<img> 和 <input> 虽然看起来像单标签，但它们其实可以有属性 ，比如 <img src="..." alt="...">。

2.3 标签层级关系

父子关系：一个标签完整包裹另一个
兄弟关系：同级标签，互不嵌套

开发注意 ：标签嵌套必须正确闭合，不能交叉。比如 <div><p>文字</div></p> 是错的，浏览器虽然会尝试帮你修复，但会导致布局混乱。写代码时养成「写完开始标签立刻写结束标签」的习惯，可以有效避免嵌套错误。

2.4 HTML 注释

html 复制代码

<!-- 注释内容，浏览器不会显示 -->

快捷键：Ctrl + /

开发注意 ：注释是给开发者看的，用户看不到。但不要在注释里写敏感信息（如密码、密钥），因为查看网页源代码就能看到注释内容。另外，生产环境的 HTML 建议去掉不必要的注释，可以减少文件体积。

2.5 HTML5 标准骨架

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 解决中文乱码，默认UTF-8 -->
    <meta charset="UTF-8">
    <!-- 移动端屏幕适配 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 浏览器标签标题 -->
    <title>我的第一个网页</title>
</head>
<body>
    <!-- 页面所有可见内容写在这里 -->
</body>
</html>

开发注意：

<!DOCTYPE html> 必须写在第一行，告诉浏览器用 HTML5 标准渲染。不写的话浏览器会进入「怪异模式」，导致页面布局错乱。

<meta charset="UTF-8"> 必须放在 <head> 的前面，因为浏览器需要先知道编码才能正确解析后面的内容。

<meta name="viewport"> 是移动端适配的关键，不写的话手机上看页面会缩成一团。

<title> 标签不能省略，它决定了浏览器标签页上显示的文字，也影响 SEO（搜索引擎优化）。

3 文本相关标签

网页里最多的就是文字。这一节教你如何用 HTML 标签来组织、强调和展示文本内容。

3.1 六级标题 h1~h6

html 复制代码

<h1>页面唯一主标题</h1>
<h2>二级小标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级最小标题</h6>

规范：

一个页面仅写 1 个 <h1>，通常放网站名称或文章标题
标题层级不超过 3 级，即 h1 → h2 → h3，不要跳级（比如 h1 直接跳到 h3）
标题要按层级使用，不要为了字体大小而滥用标题标签

开发注意 ：标题标签不只是让文字变大变粗，更重要的是语义化 。搜索引擎会根据标题层级来判断页面内容结构。比如 <h1> 是页面最重要的内容，<h2> 是次要内容。不要为了视觉效果用 <h1> 放广告语 ，会被搜索引擎判定为作弊。想控制字体大小，用 CSS 的 font-size 属性。

3.2 段落标签 `<p>`

html 复制代码

<p>刘德华1961年生于香港，是演员、歌手，1981年出道。</p>

开发注意 ：<p> 是块级元素，前后会自动换行并带上下边距。不要在 <p> 里面嵌套块级元素 （如 <div>、<h1> 等），虽然浏览器不报错，但不符合 HTML 规范。另外，多个 <p> 之间不要用 <br> 来增加间距 ，应该用 CSS 的 margin 属性。

3.3 换行、分割线

html 复制代码

<br> 强制换行
<hr> 水平分割线

开发注意 ：<br> 只用于文本内部的换行（如诗歌、地址），不要用它来给块级元素之间增加间距 。块级元素之间的间距应该用 CSS 的 margin 或 padding。<hr> 表示主题转换，不只是画一条线，它有语义含义。

3.4 文字强调标签

标签	效果	语义推荐
`<strong>`	加粗	推荐（重要内容）
`<em>`	斜体	推荐（轻度强调）
`<mark>`	黄色高亮	标记重点
`<del>`	删除线	作废文字
`<ins>`	下划线	新增文字
`<b>` / `<i>`	加粗 / 斜体	无语义，不推荐

html 复制代码

<mark>罗隆大神不要藏实力</mark><br>
<strong>夏周勤也是大佬</strong><br>
<em>柴桂伦技术很强</em><br>
原价<del>998</del>，现价<strong>0.98</strong>

开发注意 ：<b> 和 <i> 只是视觉效果，没有语义含义，搜索引擎和屏幕阅读器不会把它们当作重要内容 。所以推荐用 <strong> 代替 <b>，用 <em> 代替 <i>。另外，不要为了加粗而滥用 <strong>，只有真正重要的内容才用。

3.5 容器标签

html 复制代码

<div>块级容器，独占一行</div>
<span>行内容器，同行展示</span>

开发注意 ：<div> 是页面布局的基石，但它本身没有任何样式和语义。不要滥用 <div> ，能用语义化标签（如 <header>、<nav>、<main>）的地方尽量用语义化标签。<span> 是行内元素，常用于包裹一小段文字来单独设置样式。记住：<div> 里可以放 <span>，但 <span> 里不能放 <div>。

4 列表标签

列表用来展示一组有逻辑关系的内容，比如菜单项、步骤说明、名词解释等。HTML 提供了三种列表结构。

4.1 无序列表 ul li

html 复制代码

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

开发注意 ：<ul> 的子元素只能是 <li> ，不能直接放其他标签。如果要在列表里放图片或链接，也要放在 <li> 里面。另外，导航菜单通常用 <ul> + <li> + <a> 来实现，这是最语义化的写法。

4.2 有序列表 ol li

html 复制代码

<ol>
  <li>新建html文件</li>
  <li>写入基础骨架</li>
</ol>

开发注意 ：<ol> 默认显示数字序号。如果想用字母或罗马数字，可以用 CSS 的 list-style-type 属性。另外，<ol> 支持 start 属性设置起始序号（如 <ol start="3">），也支持 reversed 属性倒序排列。

4.3 自定义列表 dl dt dd

html 复制代码

<dl>
  <dt>姓名</dt>
  <dd>罗隆涛</dd>
</dl>

开发注意 ：<dl> 适合做名词解释、键值对展示。一个 <dt> 可以对应多个 <dd>，比如一个人有多个联系方式。不要用 <dl> 来做普通列表 ，那是 <ul> 和 <ol> 的活。

5. 表格标签

表格用来展示有行有列的结构化数据，比如通讯录、成绩单、价格表。但注意：表格只用来展示数据，不要用它做页面布局。

5.1 表格基础标签

标签	作用
`<table>`	表格整体，`border="1"` 加边框
`<caption>`	表格标题
`<tr>`	表格行
`<th>`	表头（默认加粗居中）
`<td>`	单元格
`rowspan`	跨行合并
`colspan`	跨列合并

5.2 表格示例

html 复制代码

<table border="1">
    <caption>班级通讯录</caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>罗隆涛</td>
        <td>19</td>
    </tr>
</table>

开发注意：

不要用表格做页面布局！这是很多新手容易犯的错误。表格的渲染机制是「全部内容加载完才显示」，用表格布局会导致页面加载慢。布局应该用 CSS 的 Flexbox 或 Grid。

<table> 的 border="1" 属性已经过时了，建议用 CSS 的 border 属性来控制边框样式。

表格在移动端显示效果很差，因为屏幕窄。如果要做响应式表格，可以用 CSS 让表格在小屏上变成卡片式布局。

表格的 <thead>、<tbody>、<tfoot> 结构有助于语义化和样式控制，建议加上。

下面再给出一个学生成绩表的完整示例，展示多行多列、带表头的实际应用：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生成绩表</title>
</head>
<body>
    <p><strong>学生成绩表</strong></p>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>高数成绩</th>
            <th>大学英语成绩</th>
            <th>线代成绩</th>
            <th>Java成绩</th>
            <th>大学物理成绩</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>19</td>
            <td>男</td>
            <td>77分</td>
            <td>77分</td>
            <td>87分</td>
            <td>82分</td>
            <td>90分</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>19</td>
            <td>男</td>
            <td>71分</td>
            <td>88分</td>
            <td>93分</td>
            <td>90分</td>
            <td>90分</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>19</td>
            <td>男</td>
            <td>60分</td>
            <td>86分</td>
            <td>73分</td>
            <td>77分</td>
            <td>73分</td>
        </tr>
        <tr>
            <td>狗蛋</td>
            <td>19</td>
            <td>男</td>
            <td>80分</td>
            <td>71分</td>
            <td>93分</td>
            <td>75分</td>
            <td>91分</td>
        </tr>
        <tr>
            <td>来财</td>
            <td>19</td>
            <td>男</td>
            <td>66分</td>
            <td>78分</td>
            <td>73分</td>
            <td>79分</td>
            <td>80分</td>
        </tr>
    </table>
</body>
</html>

写法讲解 ：这个成绩表展示了表格的典型用法------多行多列的结构化数据展示。<th> 定义表头（加粗居中），<td> 定义普通单元格。每一行用 <tr> 包裹，列数必须一致，否则表格会错位。实际开发中建议用 CSS 替代 border="1"，并加上 <thead>、<tbody> 结构来增强语义。

6. 图片标签 img

6.1 基础语法

语法模板：

html 复制代码

<img src="图片路径" alt="替代文字" title="悬停提示文字">

写法讲解：

src 是必填属性 ，告诉浏览器图片在哪里。可以是本地路径（如 img/logo.png）或网络 URL（如 https://xxx.com/logo.png）。
alt 是替代文字 ，当图片加载失败时显示这段文字，也方便屏幕阅读器读给视障用户听。建议每张图片都写上，这是 SEO 友好的做法。
title 是可选属性，鼠标悬停在图片上时显示的小提示。

开发注意 ：<img> 是行内替换元素，可以设置宽高。如果不设置宽高，图片会以原始尺寸显示。建议在 CSS 中统一控制图片最大宽度，避免图片超出容器。

6.2 网络图片示例

html 复制代码

<img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo">

写法讲解 ：网络图片直接引用完整的 URL 地址。注意：不要盗用别人的图片链接，因为对方随时可能删除或更换图片，导致你的页面出现裂图。生产环境建议把图片下载到自己的服务器或使用图床。

6.3 资源地址详解：相对路径 vs 绝对路径

在 HTML 中，图片、视频、音频等资源的 src 属性支持两种路径写法，理解它们的区别是避免资源加载失败的关键。

1. 相对路径（推荐用于本地项目）

相对路径是相对于当前 HTML 文件所在位置的路径。项目复制到其他电脑或服务器时，只要目录结构不变，路径就依然有效。

写法	含义	示例
`src="图片.jpg"`	图片和 HTML 文件在同一目录	`<img src="logo.png">`
`src="img/图片.jpg"`	图片在 HTML 所在目录的 img 子文件夹中	`<img src="img/photo.jpg">`
`src="../图片.jpg"`	`../` 表示上一级目录	`<img src="../images/banner.jpg">`
`src="../../图片.jpg"`	`../../` 表示上两级目录	`<img src="../../assets/icon.png">`

存放建议：

图片统一放在 img/ 或 images/ 文件夹
视频放在 media/ 或 video/ 文件夹
音频放在 audio/ 或 media/ 文件夹
所有资源文件放在项目根目录下，不要散落在桌面或系统其他位置

示例：假设项目结构如下：

复制代码

my-project/
├── index.html
├── img/
│   └── logo.png
├── media/
│   ├── video.mp4
│   └── music.mp3
└── pages/
    └── about.html

在 index.html 中引用 logo：<img src="img/logo.png">
在 about.html 中引用 logo：<img src="../img/logo.png">（因为 about.html 在 pages 文件夹里，需要先 ../ 回到根目录）

2. 绝对路径（推荐用于网络资源）

绝对路径是完整的地址，从根目录或协议开始写。

类型	写法	示例
网络绝对路径	以 `http://` 或 `https://` 开头	`<img src="https://example.com/logo.png">`
本地绝对路径	以盘符或 `/` 开头（不推荐）	`<img src="C:/Users/xxx/Desktop/图片.jpg">`

存放建议：

网络资源：上传到自己的服务器、OSS（对象存储服务，如阿里云OSS、腾讯云COS）或图床
本地绝对路径：永远不要用，因为换一台电脑路径就失效了

3. 地址不正确或不存在会怎么样？

当 src 指向的资源不存在时，浏览器不会报错中断页面，而是：

显示裂图（broken image）：图片位置显示一个破碎的图标
显示 alt 文字 ：如果写了 alt 属性，裂图旁边会显示替代文字
控制台报 404 错误 ：打开浏览器调试工具的 Console 面板，会看到类似 GET http://127.0.0.1:5501/img/不存在的图片.png 404 (Not Found) 的提示
视频/音频静默失败 ：<video> 和 <audio> 不会显示任何内容，也不报错，但控制台会有 404 记录

常见错误场景：

文件名写错大小写：Logo.png vs logo.png（Linux 服务器严格区分大小写）
路径层级写错：img/logo.png 写成 imgs/logo.png
文件移动后忘记更新路径：把图片从 img/ 移到 images/，但 HTML 里还是旧的 img/
网络图片被删除或域名过期：引用的外部图片链接失效

调试技巧：

在浏览器中右键裂图 → 在新标签页中打开，看能否直接访问
打开 F12 的 Network 面板 ，筛选 img 类型，查看哪些请求返回了 404
检查路径是否以 / 开头（绝对路径）还是直接写文件名（相对路径），确认当前 HTML 文件的位置

6.4 路径写法对比总结

对比项	相对路径	网络绝对路径	本地绝对路径
可移植性	✅ 项目复制到任何地方都有效	✅ 只要 URL 有效就能访问	❌ 换电脑就失效
适用场景	本地开发、项目内资源	CDN、外部图片、图床	❌ 永远不要用
部署后是否有效	✅ 是（目录结构不变）	✅ 是	❌ 否
推荐程度	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐（不推荐）

开发注意 ：团队协作时，所有资源路径必须使用相对路径 ，并且统一约定文件夹命名（如 img/、media/、css/、js/）。不要出现 C:\\Users\\xxx\\Desktop\\图片.jpg 这样的本地绝对路径，否则代码提交到 Git 后其他人拉下来全是裂图。

7. 音视频 & iframe

7.1 video 视频

语法模板：

html 复制代码

<video width="宽度" controls poster="封面图路径">
    <source src="视频文件路径" type="video/mp4">
    您的浏览器不支持视频播放（降级提示文字）
</video>

写法讲解：

controls 属性让浏览器显示播放控件（播放/暂停、音量、进度条等）。如果不加，视频默认是隐藏的，用户无法播放。
poster 是视频未播放时的封面图，不设置的话显示视频第一帧（通常是黑屏）。
<source> 可以写多个，浏览器会按顺序尝试播放，第一个能播放的格式就使用。常见格式：mp4（最通用）、webm、ogg。
标签之间的文字是降级提示 ，当浏览器完全不支持 <video> 标签时才会显示。

开发注意：视频文件通常很大，建议压缩后再上传。移动端注意流量消耗，可以考虑在 Wi-Fi 下才自动加载视频。

路径说明 ：src 同样支持相对路径和绝对路径，规则与图片完全一致。推荐将视频文件放在 media/ 或 video/ 文件夹中，使用相对路径引用。如果视频文件不存在或路径错误，浏览器会显示一个空的播放器区域，控制台报 404 错误。

7.2 audio 音频

语法模板：

html 复制代码

<audio controls>
    <source src="音频文件路径" type="audio/mpeg">
    您的浏览器不支持音频播放
</audio>

写法讲解 ：和 <video> 类似，controls 也是必加的，否则用户看不到播放器。常见音频格式：mp3（最通用）、ogg、wav。

开发注意 ：不要设置音频自动播放（autoplay），大部分浏览器会阻止带声音的自动播放，用户体验也很差。

路径说明 ：音频文件推荐放在 audio/ 或 media/ 文件夹中。如果音频文件不存在，播放器控件仍然会显示，但点击播放无效，控制台会报 404。建议在 <source> 中提供多个格式的音频文件作为降级方案。

7.3 iframe 内嵌页面

语法模板：

html 复制代码

<iframe src="目标页面URL" width="宽度" height="高度" frameborder="边框宽度"></iframe>

写法讲解 ：<iframe> 可以在当前页面中嵌入另一个完整的网页。常用于嵌入地图、视频（如 B站、YouTube）、第三方支付页面等。

开发注意：

很多网站设置了 X-Frame-Options: DENY 或 SAMEORIGIN，禁止被 iframe 嵌入，这时候会显示空白。
frameborder="0" 去掉边框更美观。
移动端要注意 iframe 的宽高适配，可以用 CSS 做响应式 iframe。

路径说明 ：<iframe> 的 src 通常使用网络绝对路径（如 https://player.bilibili.com/...）。如果目标页面地址错误或无法访问，iframe 区域会显示空白或浏览器的默认错误页面。

综合示例：将图片、视频、音频整合到一个页面中

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网页</title>
</head>
<body>
    <p>再插入一个图片</p>
    <img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo"><br>
    <p>下面插入B站视频(左神树状数组)</p><br>
    <iframe
        src="//player.bilibili.com/player.html?bvid=BV1ZZ421a7uH&page=1&danmaku=0"
        width="640"
        height="360"
        frameborder="0"
        allowfullscreen="true">
    </iframe>
    <br>
    <img src="img/日出3.jpg"
       title="更美丽的图片"
       width="600"
      height="350"
         alt="更美丽的图片"><br>
    <hr>
    <p>下面插入一个音频</p>
    <audio controls preload="auto">
            <source src="2026年6月英语四级听力音频(2).mp3" type="audio/mpeg">
            你的浏览器不支持HTML5音频播放,请更换浏览器
    </audio>
    <hr>
</body>
</html>

8. 超链接 a

8.1 外部链接

语法模板：

html 复制代码

<a href="目标URL" target="打开方式">链接文字</a>

写法讲解：

href 是必填属性，指定链接跳转的目标地址。
target 控制链接的打开方式：
- _self（默认）：在当前窗口打开
- _blank：在新标签页打开（外部链接推荐使用，避免覆盖用户当前页面）
链接文字可以是普通文本，也可以包裹图片、按钮等其他元素。

开发注意 ：使用 target="_blank" 时，建议加上 rel="noopener noreferrer" 以提高安全性，防止新页面通过 window.opener 操控原页面。

8.2 锚点链接

语法模板：

html 复制代码

<!-- 跳转到页面内某个位置 -->
<a href="#目标id">点击跳转</a>

<!-- 目标位置 -->
<h1 id="目标id">目标内容</h1>

写法讲解 ：锚点链接用于在同一个页面内 跳转。href 的值以 # 开头，后面跟目标元素的 id 属性值。点击后页面会滚动到该元素位置。

开发注意 ：目标元素的 id 在页面中必须唯一，不能重复。常用于「回到顶部」「目录跳转」「长文章分段导航」。

8.3 电子邮件与电话链接

语法模板：

html 复制代码

<a href="mailto:邮箱地址">发送邮件</a>
<a href="tel:电话号码">拨打电话</a>

写法讲解：

mailto: 点击后调用系统默认邮件客户端（如 Outlook、网易邮箱大师），自动填入收件人地址。
tel: 点击后在手机上直接拨号，在电脑上可能打开通话软件。

开发注意 ：mailto: 链接在手机上体验较好，在电脑上需要用户配置了邮件客户端才能用。tel: 链接主要用于移动端网页，PC 端点击通常无反应。

综合示例：超链接的完整用法演示

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>什么是超级链接？</h1>
    <p>超链接是互联网提供的最令人兴奋的创新之一，它们从一开始就一直是互联网的一个特性，使互联网成为互联的网络。</p>
    超链接主要包含：
    <p>
        1. 内部链接 <br>
        <a href="#2"> 2. 外部链接</a> <br>
        <a href="#3">3. 空链接</a> <br>
        4. 下载链接 <br>
        5. 邮件链接 <br>
    </p>

    <h2 id="1">1. 内部链接</h2>
    <p>超链接使我们能够将我们的文档链接到任何其他文档（或其他资源），也可以链接到文档的指定部分，我们可以在一个简单的网址上提供应用程序。几乎任何网络内容都可以转换为链接，点击（或激活）超链接将使网络浏览器转到另一个网址（URL）。</p>
    例如：
    <a href="./11-音视频标签.html">音视频</a>
    如果有需要作为链接的图片，使用 a元素来包裹要引用图片的 img 元素。下面的示例使用相对路径来引用本地存储的 SVG 图像文件。

    <h2 id="2">2. 外部链接</h2>
    例如：
    <a href="https://www.deepseek.com/" title="deepseek" target="_blank">deepseek</a>
    你可能要添加到你的链接的另一个属性是 title。这旨在包含关于链接的补充信息，例如页面包含什么样的信息或需要注意的事情。

    <h2 id="3">3. 空连接 </h2>
    <p>在 HTML 中，空连接（Empty Link）通常指的是没有指定 href 属性或 href 属性值为空的 a标签。空连接的 href 属性值为空字符串（""）或 # 字符。</p>
    例如：
    <a href="#top">点击跳转到顶部</a>
    <p>空链接点击默认会跳到当前页面的顶部。</p>
    <p>空连接的作用是为了提供一个占位符，用于在页面的特定位置创建一个目标，以便其他链接或脚本可以跳转到该位置。这在页面布局中非常有用，尤其是当你需要在页面的不同部分之间创建导航链接时。</p>

    <h2 id="4">4. 下载链接 </h2>
    <a href="./download.zip">下载软件</a>
    <p>下载链接是一种特殊类型的链接，用于将文件从服务器下载到用户的计算机上。当用户点击下载链接时，它会触发浏览器的下载功能，将文件保存到用户的本地存储中，而不是直接在浏览器中显示文件内容。</p>
    <p>下载链接通常用于提供软件、文档、图片或视频等可下载资源，以便用户可以离线使用或分享给他人。</p>

    <h2 id="5">5. 邮件链接 </h2>
    <p>当点击一个链接或按钮时，可能会开启新的邮件的发送而不是连接到一个资源或页面。这种场景可以使用 <a> 元素和 mailto: URL 协议实现。</p>
    <p>其最基本和最常用的使用形式为一个指明收件人电子邮件地址的 mailto: 链接。例如：</p>
    <a href="mailto:123@qq.com">联系我们</a>
</body>
</html>

总结一下

总结图如下：

HTML 小总结：从骨架到枝叶，系统掌握网页结构

文章目录

HTML 的小总结

1 开发工具与环境准备

1.1 常用编辑器

1.2 VS Code / Trae 标准配置

1.3 Live Server 插件使用

1.4 浏览器调试工具

1.5 项目目录规范

2 HTML 基础概念

2.1 HTML 定义

2.2 标签分类

2.3 标签层级关系

2.4 HTML 注释

2.5 HTML5 标准骨架

3 文本相关标签

3.1 六级标题 h1~h6

3.2 段落标签 <p>

3.3 换行、分割线

3.4 文字强调标签

3.5 容器标签

4 列表标签

4.1 无序列表 ul li

4.2 有序列表 ol li

4.3 自定义列表 dl dt dd

5. 表格标签

5.1 表格基础标签

5.2 表格示例

6. 图片标签 img

6.1 基础语法

6.2 网络图片示例

6.3 资源地址详解：相对路径 vs 绝对路径

1. 相对路径（推荐用于本地项目）

2. 绝对路径（推荐用于网络资源）

3. 地址不正确或不存在会怎么样？

6.4 路径写法对比总结

7. 音视频 & iframe

7.1 video 视频

7.2 audio 音频

7.3 iframe 内嵌页面

8. 超链接 a

8.1 外部链接

8.2 锚点链接

8.3 电子邮件与电话链接

总结一下

3.2 段落标签 `<p>`