目录
[一、HTML 基础认知](#一、HTML 基础认知)
[1. 什么是 HTML？](#1. 什么是 HTML？)
[2. 开发工具](#2. 开发工具)
[二、HTML 基本结构](#二、HTML 基本结构)
[三、核心 HTML 标签](#三、核心 HTML 标签)
[1. 文本标签（最常用）](#1. 文本标签（最常用）)
[2. 列表标签](#2. 列表标签)
[3. 链接标签（](#3. 链接标签（)）
[4. 图片标签（](#4. 图片标签（)单标签）
[5. 表格标签](#5. 表格标签)
[6. 表单标签](#6. 表单标签)
[四、HTML 属性](#四、HTML 属性)
[五、HTML 注释](#五、HTML 注释)
[七、HTML 学习要点](#七、HTML 学习要点)
HTML（HyperText Markup Language，超文本标记语言）是构建网页的基础，它不是编程语言，而是标记语言，通过一系列标签描述网页的结构和内容。本教程从零基础开始，带你掌握 HTML 核心知识。
一、HTML 基础认知
1. 什么是 HTML？
HTML 由一系列标签（Tag） 组成，标签通常成对出现（如<div></div>），少数为单标签（如<img>）。浏览器会解析这些标签，渲染出可视化的网页。
2. 开发工具
- 入门首选 ：记事本、Notepad++、VS Code（推荐，轻量且有语法高亮、自动补全）
- 浏览器：Chrome/Firefox/Edge（用于预览和调试）
二、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！ <!-- 页面显示的文本 -->
</body>
</html>结构说明：
<!DOCTYPE html>：必须放在第一行，告诉浏览器这是 HTML5 文档（HTML4 需要更复杂的声明，HTML5 简化）。<html>：根标签，所有内容都包裹在其中。<head>：包含页面元数据（编码、标题、引入样式 / 脚本等），不展示在页面里。<body>：页面的可视区域，文本、图片、按钮等都写在这里。
三、核心 HTML 标签
1. 文本标签（最常用）
| 标签 | 作用 | 示例 |
|---|---|---|
<h1>-<h6> |
标题（h1 最大，h6 最小） | <h1>一级标题</h1> |
<p> |
段落 | <p>这是一个段落</p> |
<br> |
换行（单标签） | <p>第一行<br>第二行</p> |
<hr> |
水平线（单标签） | <hr> |
<strong> |
加粗（语义化） | <strong>重要内容</strong> |
<em> |
斜体（语义化） | <em>强调内容</em> |
<span> |
行内通用容器 | <span>行内文本</span> |
<div> |
块级通用容器 | <div>一块内容</div> |
示例：
html
<body>
<h1>我的博客</h1>
<h2>HTML入门</h2>
<p>HTML是<span style="color:red">网页的基础</span>，<strong>必须掌握</strong>！</p>
<p>学习步骤：<br>1. 掌握基本结构<br>2. 熟悉常用标签<br>3. 实战练习</p>
<hr>
<em>持续学习，每天进步一点点～</em>
</body>2. 列表标签
（1）无序列表（<ul>+<li>）
html
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>默认显示圆点，可通过 CSS 修改样式。
（2）有序列表（<ol>+<li>）
html
<ol>
<li>打开浏览器</li>
<li>输入网址</li>
<li>按下回车</li>
</ol>默认显示数字，可通过type属性修改（如type="A"显示字母）。
（3）定义列表（<dl>+<dt>+<dd>）
html
<dl>
<dt>HTML</dt>
<dd>超文本标记语言，用于构建网页结构</dd>
<dt>CSS</dt>
<dd>层叠样式表，用于美化网页</dd>
</dl>3. 链接标签（<a>）
用于跳转到其他页面 / 锚点 / 邮箱等，核心属性：
href：跳转目标（网址、本地路径、锚点 ID、邮箱mailto:xxx@xxx.com）target：打开方式（_self默认当前窗口，_blank新窗口）
示例：
html
<!-- 跳转到百度 -->
<a href="https://www.baidu.com" target="_blank">访问百度</a>
<!-- 跳转到本地页面 -->
<a href="about.html">关于我们</a>
<!-- 锚点跳转（跳转到页面内id为"top"的位置） -->
<a href="#top">回到顶部</a>
<div id="top">顶部内容</div>
<!-- 邮件链接 -->
<a href="mailto:test@163.com">联系我们</a>4. 图片标签（<img>，单标签）
用于插入图片，核心属性：
src：图片路径（本地路径 / 网络图片 URL）alt：图片加载失败时的替代文本（重要，提升可访问性）width/height：图片尺寸（可只设一个，另一个自动等比缩放）
示例：
html
<!-- 网络图片 -->
<img src="https://img.xxx.com/logo.png" alt="网站logo" width="200">
<!-- 本地图片（同级目录） -->
<img src="photo.jpg" alt="我的照片" height="300">5. 表格标签
用于展示结构化数据，核心标签：
<table>：表格容器<tr>：表格行<th>：表头单元格（默认加粗居中）<td>：普通单元格<caption>：表格标题
示例：
html
<table border="1"> <!-- border设置边框宽度 -->
<caption>学生成绩表</caption>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
</tr>
<tr>
<td>小明</td>
<td>90</td>
<td>95</td>
</tr>
<tr>
<td>小红</td>
<td>98</td>
<td>92</td>
</tr>
</table>6. 表单标签（<form>）
用于收集用户输入，核心属性 / 标签：
<form>：表单容器，action指定提交地址，method指定提交方式（get/post）<input>：单行输入框（核心，通过type属性切换类型）<textarea>：多行文本框<select>+<option>：下拉选择框<button>：提交按钮
常用<input>类型：
| type 值 | 作用 |
|---|---|
| text | 普通文本框 |
| password | 密码框（输入隐藏） |
| radio | 单选按钮（name 需相同） |
| checkbox | 复选框 |
| file | 文件上传 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| button | 普通按钮 |
| hidden | 隐藏标签 |
示例：
html
<form action="submit.php" method="post">
<div>
<label for="username">用户名：</label> <!-- for绑定input的id -->
<input type="text" id="username" name="username" placeholder="请输入用户名">
</div>
<div>
<label for="pwd">密码：</label>
<input type="password" id="pwd" name="pwd" placeholder="请输入密码">
</div>
<div>
<label>性别：</label>
<input type="radio" name="gender" value="male" id="male">
<label for="male">男</label>
<input type="radio" name="gender" value="female" id="female">
<label for="female">女</label>
</div>
<div>
<label>爱好：</label>
<input type="checkbox" name="hobby" value="read">阅读
<input type="checkbox" name="hobby" value="sport">运动
</div>
<div>
<label for="city">城市：</label>
<select id="city" name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="tianjin">天津</option>
</select>
</div>
<div>
<label for="intro">自我介绍：</label>
<textarea id="intro" name="intro" rows="5" cols="30"></textarea>
</div>
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>四、HTML 属性
所有 HTML 标签都可以添加属性，格式：<标签 属性名="属性值">
- 属性必须写在开始标签中
- 属性值必须用引号包裹（单引号 / 双引号均可）
- 核心通用属性：
id：唯一标识（页面内不能重复）class：类名（可重复，用于 CSS 样式绑定）style：行内样式（直接写 CSS，如style="color:red;font-size:16px"）
五、HTML 注释
注释不会被浏览器渲染，用于标注代码含义，格式：
html
<!-- 这是一行注释 -->
<!--
多行注释
可以写很多内容
-->六、实战练习：制作一个简单的个人主页
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的个人主页</title>
</head>
<body>
<!-- 头部 -->
<div id="header">
<h1>张三的个人主页</h1>
<hr>
</div>
<!-- 个人信息 -->
<div id="info">
<h2>基本信息</h2>
<img src="avatar.jpg" alt="头像" width="150">
<p>姓名：张三 | 年龄：20 | 职业：前端学习者</p>
<p>座右铭：<em>学无止境，知行合一</em></p>
</div>
<!-- 我的爱好 -->
<div id="hobby">
<h2>我的爱好</h2>
<ul>
<li>编程（HTML/CSS/JavaScript）</li>
<li>阅读（技术书籍/小说）</li>
<li>运动（篮球/跑步）</li>
</ul>
</div>
<!-- 联系方式 -->
<div id="contact">
<h2>联系方式</h2>
<p>邮箱：<a href="mailto:zhangsan@163.com">zhangsan@163.com</a></p>
<p>GitHub：<a href="https://github.com/zhangsan" target="_blank">github.com/zhangsan</a></p>
</div>
<!-- 底部 -->
<div id="footer">
<hr>
<p>© 2025 张三的个人主页 | 所有权利保留</p>
</div>
</body>
</html>七、HTML 学习要点
- 语义化 ：优先使用有语义的标签（如
<h1>/<p>/<nav>/<article>），而非纯<div>，提升可读性和 SEO。 - 规范书写：标签小写、属性值加引号、标签闭合（单标签除外）。
- 调试技巧：在浏览器中右键→"检查"（开发者工具），可实时查看 / 修改 HTML 结构。
- 进阶学习 ：HTML5 新增标签（
<nav>/<header>/<footer>/<video>/<canvas>）、响应式布局基础。
八、常见问题
- 页面乱码 ：检查
<meta charset="UTF-8">是否存在，文件保存编码是否为 UTF-8。 - 图片不显示 ：检查
src路径是否正确（相对路径 / 绝对路径），文件名大小写（Linux 系统敏感）。 - 链接跳转失败 ：检查
href路径，本地文件路径避免中文 / 空格。
入门阶段重点掌握标签的语义和基本使用，配合浏览器调试工具多写多练，就能快速上手 HTML！