1. HTML 基础入门
HTML（HyperText Markup Language，超文本标记语言）是构建网页结构的骨架语言。它通过一系列标签（Tag） 来定义网页中的元素，浏览器负责解析这些标签并渲染成可视化页面。
1.1 基本文档结构
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>这是我的第一个 HTML 页面。</p>
</body>
</html><!DOCTYPE html>：声明文档类型，告诉浏览器使用 HTML5 标准解析。<html>：根元素，包裹整个页面。<head>：存放元数据（编码、标题、样式引用等），不直接显示在页面上。<body>：存放所有可见内容。
1.2 常用基础标签
| 标签 | 作用 | 示例 |
|---|---|---|
<h1>~<h6> |
标题，从大到小 | <h1>一级标题</h1> |
<p> |
段落 | <p>这是一个段落</p> |
<a> |
超链接 | <a href="https://example.com">访问链接</a> |
<img> |
图片 | <img src="logo.png" alt="Logo"> |
<ul> / <ol> |
无序/有序列表 | <ul><li>项目一</li></ul> |
<div> |
块级容器 | <div>内容块</div> |
<span> |
行内容器 | <span>行内文字</span> |
1.3 标签属性
标签通过属性 来补充信息，格式为 属性名="属性值"：
html
<a href="https://example.com" target="_blank">新窗口打开</a>
<img src="photo.jpg" alt="风景照" width="300" height="200">常见属性：
href：链接地址。src：资源路径（图片、音频、视频等）。alt：图片加载失败时的替代文本。width/height：宽高。target：链接打开方式（_blank新窗口）。
2. 音频标签 <audio>
音频标签是 HTML5 新增的多媒体标签，用于在网页中嵌入音频播放器，无需依赖 Flash 等第三方插件。
2.1 基本语法
html
<audio src="music.mp3" controls></audio>src：音频文件路径。controls：显示播放控件（播放/暂停、进度条、音量等）。
2.2 常用属性
| 属性 | 作用 |
|---|---|
controls |
显示播放控件 |
autoplay |
自动播放（部分浏览器会拦截） |
loop |
循环播放 |
muted |
静音播放 |
preload |
预加载策略：auto / metadata / none |
volume |
音量（0.0 ~ 1.0，需通过 JS 设置） |
示例：
html
<audio src="bgm.mp3" controls autoplay loop muted></audio>2.3 多源兼容写法
不同浏览器支持的音频格式不同（MP3、OGG、WAV 等），可以使用多个 <source> 提供备选格式：
html
<audio controls>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
您的浏览器不支持 audio 标签。
</audio>浏览器会从上到下依次尝试，找到第一个能播放的格式；若全部不支持，则显示兜底文字。
2.4 音频标签的注意事项
autoplay在多数现代浏览器中会被拦截，需配合用户交互（点击页面）才能触发。- 建议始终提供
controls，让用户自主控制播放。 - 音频文件体积较大时，合理使用
preload="metadata"减少首屏加载压力。 - 可通过 JavaScript 操作音频对象（播放、暂停、跳转、音量调节等），后续学习 JS 时会深入。
3. 小结
从 HTML 基础结构到音频标签，核心脉络是：
- 掌握文档骨架（
html/head/body）。 - 熟悉常用基础标签与属性。
- 理解多媒体标签
<audio>的语法、属性与多源兼容写法。
音频标签是 HTML5 多媒体能力的一部分，学完它之后，下一步可以继续学习视频标签 <video>，两者语法高度相似，掌握一个即可触类旁通。