这是一门深入浅出、通俗易懂、逻辑清晰且示例精简的HTML基础课程，将从核心概念出发，逐步带你掌握HTML的核心用法，最终能搭建出结构完整的基础网页。
一、HTML 核心概念认知
1. 什么是HTML？
HTML 全称是 HyperText Markup Language（超文本标记语言） ，注意它不是编程语言（没有逻辑执行能力），而是标记语言 ，用于定义网页的结构和内容。
- 超文本：不仅能包含文本，还能包含图片、链接、视频等多种内容
- 标记语言：通过一系列预定义的「标签」来标记内容的含义（比如"这是标题""这是段落"）
2. HTML 文档的基本结构（必背）
所有HTML文件都遵循固定的基本结构，就像写作文要有开头、正文、结尾一样，缺一不可，示例如下（可直接复制运行）：
|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| HTML <!DOCTYPE html> <!-- 声明文档类型为HTML5，必须放在第一行 --> <html lang="zh-CN"> <!-- 根标签，整个网页的所有内容都包裹在其中，lang指定网页语言（zh-CN为中文） --> <head> <!-- 头部区域：存放网页的配置信息，不直接显示在页面上 --> <meta charset="UTF-8"> <!-- 声明字符编码为UTF-8，保证网页能正常显示中文等所有字符 --> <title>我的第一个HTML页面</title> <!-- 网页标题，显示在浏览器标签栏上 --> </head> <body> <!-- 主体区域：存放网页的可见内容，所有要展示给用户的内容都放在这里 --> 这是我的第一个HTML页面，Hello HTML！ </body> </html> |
关键说明：
- 后缀名：HTML文件的后缀名必须是 .html 或 .htm（推荐使用 .html）
- 运行方式：直接用任意浏览器（Chrome、Edge等）打开保存后的HTML文件即可预览效果
- 结构特点：标签通常成对出现 （开始标签 <标签名> + 结束标签 </标签名>），少数标签是自闭合标签
二、HTML 核心标签学习
HTML的核心是标签，以下是最常用的核心标签，按功能分类，每个标签都附精简示例。
1. 标题标签（ <h1> - <h6> ）
用于定义网页中的标题，从 <h1> 到 <h6> 字体大小依次递减，一个页面建议只使用一个 <h1>（提升搜索引擎优化效果）。
|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| HTML <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>标题标签示例</title> </head> <body> <h1>这是1级标题（最大）</h1> <h2>这是2级标题</h2> <h3>这是3级标题</h3> <h4>这是4级标题</h4> <h5>这是5级标题</h5> <h6>这是6级标题（最小）</h6> </body> </html> |
2. 段落标签（ <p> ）
用于定义网页中的正文段落，自动在段落前后添加空白行，实现段落分隔。
|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| HTML <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>段落标签示例</title> </head> <body> <h2>HTML 学习心得</h2> <p>HTML 是网页开发的基础，它负责搭建网页的结构。</p> <p>学习HTML的关键是记住核心标签的用法，多动手练习。</p> <p>通过简单的标签组合，就能实现基础的网页展示效果。</p> </body> </html> |
3. 链接标签（ <a> ，核心： href 属性）
用于创建跳转链接，可跳转到其他网页、本地文件、页面锚点等，href 属性是必须的，用于指定跳转目标地址。
|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| HTML <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>链接标签示例</title> </head> <body> <!-- 跳转到外部网页（新标签页打开，target="_blank"） --> <a href="https://www.baidu.com" target="_blank">打开百度（新标签页）</a> <br> <!-- 换行标签，自闭合，用于强制换行 --> <!-- 跳转到本地HTML文件（假设同目录下有other.html文件） --> <a href="other.html">打开本地其他页面</a> </body> </html> |
4. 图片标签（ <img> ，自闭合，核心属性： src 、 alt ）
用于在网页中插入图片，是自闭合标签（无结束标签），两个核心属性缺一不可：
- src：指定图片的地址（本地图片路径或网络图片URL）
- alt：图片加载失败时的替代文本，提升可访问性，搜索引擎也会依赖该属性
|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| HTML <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>图片标签示例</title> </head> <body> <!-- 插入网络图片，指定宽高（width/height，可选） --> <img src="https://img.bdimg.com/static/search/img/logo-20240516-1.png" alt="百度logo" width="200" height="80"> <br> <!-- 插入本地图片（假设同目录下有img文件夹，里面有test.jpg） --> <img src="img/test.jpg" alt="本地测试图片" width="300"> </body> </html> |
5. 列表标签（有序列表 <ol> + 无序列表 <ul> + 列表项 <li> ）
用于展示有规律的一组数据，分为有序列表（有顺序编号）和无序列表（无顺序，默认圆点标记），列表项必须放在 <li> 中。
|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| HTML <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>列表标签示例</title> </head> <body> <!-- 无序列表（常用，默认圆点，可通过CSS修改样式） --> <h3>HTML 核心标签</h3> <ul> <li>标题标签 h1-h6</li> <li>段落标签 p</li> <li>链接标签 a</li> <li>图片标签 img</li> </ul> <!-- 有序列表（默认数字编号） --> <h3>HTML 学习步骤</h3> <ol> <li>掌握基本结构</li> <li>学习核心标签</li> <li>动手编写示例</li> <li>整合搭建简单网页</li> </ol> </body> </html> |
三、HTML 标签的通用特性
1. 标签属性
几乎所有HTML标签都可以添加属性，属性放在开始标签中，格式为 属性名="属性值"（属性值建议用双引号包裹），用于补充标签的额外信息（比如 <a> 的 href、<img> 的 src）。
2. 注释语法
HTML注释用于标注代码说明，不会在页面上显示，语法为：<!-- 这里是注释内容 -->，便于自己和他人理解代码含义。
3. 自闭合标签
部分标签不需要包裹内容，称为自闭合标签，常见的有：<br>（换行）、<img>（图片）、<meta>（头部配置）、<hr>（水平线）。
四、实战：整合所有知识点，搭建一个简单网页
将上面学习的标签整合起来，实现一个结构完整的简单网页，示例如下：
|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| HTML <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的第一个实战网页</title> </head> <body> <!-- 标题 --> <h1>我的HTML学习笔记</h1> <hr> <!-- 水平线，分隔内容 --> <!-- 段落介绍 --> <p>这是我通过HTML基础课程搭建的第一个网页，包含了标题、段落、图片、链接和列表等核心内容。</p> <!-- 图片展示 --> <h3>HTML 标志</h3> <img src="https://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.svg" alt="HTML5标志" width="150"> <br> <!-- 学习链接 --> <h3>推荐学习资源</h3> <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML" target="_blank">MDN HTML 官方文档（权威）</a> <br> <!-- 学习清单 --> <h3>已掌握的核心标签</h3> <ul> <li>h1-h6：标题标签</li> <li>p：段落标签</li> <li>a：链接标签</li> <li>img：图片标签</li> <li>ul/ol/li：列表标签</li> </ul> <!-- 注释：后续将学习CSS来美化网页 --> <!-- <p>后续计划：学习CSS美化网页结构，添加样式效果</p> --> </body> </html> |
五、学习总结与下一步
- HTML 的核心是「结构」，通过预定义标签标记内容的含义，不负责样式美化（样式由CSS负责）
- 掌握基本结构（html/head/body）和核心标签的用法，就能搭建基础网页
- 下一步建议：
- 多动手练习，修改示例中的内容、路径，观察页面变化
- 学习CSS，为网页添加颜色、布局、字体等美化效果
- 了解HTML5的新标签（如 <header>、<footer>、<section>），提升网页结构的语义化
运行提示
所有示例代码均可直接复制到记事本（或VS Code等编辑器），保存为 .html 后缀文件，用浏览器打开即可查看效果，建议边看边改，加深理解。