HTML（HyperText Markup Language，超文本标记语言）是构建网页的基石。本教程从零开始，系统讲解 HTML 的核心知识与实战技巧，助你打下扎实的前端基础。
HTML 使用"标签"（tag）来描述网页的结构和内容。浏览器读取 HTML 文件后，将其渲染为可视化的网页。
一个标准的 HTML5 文档结构如下：
<!DOCTYPE html> <!-- 声明文档类型为 HTML5 -->
<html lang="zh-CN"> <!-- 根元素，lang 属性指定语言 -->
<head>
<meta charset="UTF-8"> <!-- 字符编码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页标题</title> <!-- 浏览器标签页标题 -->
<link rel="stylesheet" href="style.css"> <!-- 引入外部 CSS -->
</head>
<body>
<!-- 页面上可见的所有内容都写在 body 里 -->
<h1>欢迎来到我的网站</h1>
<p>这是我的第一段文字。</p>
</body>
</html><p>。大多数标签成对出现：<p>内容</p><img>、<br>、<hr>属性名="属性值"
HTML 提供了丰富的标签来控制文本的呈现方式。
从 <h1>（最大）到 <h6>（最小），用于定义文档层级结构。每个页面建议只有一个 <h1>。
<h1>一级标题（最重要）</h1>
<h2>二级标题</h2>
<h3>三级标题</h3><p>这是一个段落。浏览器会自动在段落前后添加间距。</p>
<p>这是另一个段落。<br>这里插入了换行。</p>| 标签 | 效果 | 语义说明 |
|---|---|---|
<strong> | 加粗 | 表示重要内容（语义化） |
<b> | 加粗 | 纯视觉加粗（无语义） |
<em> | 斜体 | 表示强调内容（语义化） |
<i> | 斜体 | 纯视觉斜体（无语义） |
<u> | 下划线 | 表示拼写错误或专有名词 |
<s> / <del> | 表示不再准确或已删除的内容 | |
<mark> | 高亮 | 表示需要突出显示的文字 |
<small> | 小号字 | 附属细则、版权声明等 |
<sub> / <sup> | H2O / x2 | 下标 / 上标 |
strong、em）而非纯样式标签（b、i），这对 SEO 和无障碍访问更友好。
<hr> <!-- 水平分割线 -->
© 版权符号 ©
不换行空格
< 小于号 <
> 大于号 >
& 与符号 &
" 双引号 "超链接是互联网的基石，让页面之间可以互相跳转。
<!-- 跳转到外部页面（新标签页打开） -->
<a href="https://www.example.com" target="_blank">访问 Example</a>
<!-- 跳转到本站其他页面 -->
<a href="/about.html">关于我们</a>
<!-- 页面内锚点跳转 -->
<a href="#section2">跳转到第二节</a>
<h2 id="section2">第二节</h2>
<!-- 下载文件 -->
<a href="file.pdf" download>下载 PDF 文件</a>
<!-- 发送邮件 -->
<a href="mailto:hello@example.com">发送邮件</a>
<!-- 拨打电话 -->
<a href="tel:+8613800000000">拨打电话</a>target="_blank" 会让链接在新标签页打开。为了安全，建议同时添加 rel="noopener noreferrer" 防止钓鱼攻击。
<!-- 基本用法 -->
<img src="photo.jpg" alt="一张风景照片" width="400" height="300">
<!-- 响应式图片：根据屏幕宽度加载不同尺寸 -->
<img
src="small.jpg"
srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
alt="响应式图片示例">
<!-- 点击图片跳转 -->
<a href="https://example.com">
<img src="banner.jpg" alt="广告横幅">
</a>HTML 支持三种列表：无序列表、有序列表和定义列表。
<!-- 无序列表 -->
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>第一步：打开电脑</li>
<li>第二步：启动浏览器</li>
<li>第三步：输入网址</li>
</ol>
<!-- 定义列表（术语及其解释） -->
<dl>
<dt>HTML</dt>
<dd>超文本标记语言，用于构建网页结构</dd>
<dt>CSS</dt>
<dd>层叠样式表，用于美化网页外观</dd>
</dl>
<!-- 嵌套列表 -->
<ul>
<li>前端技术
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
</ul>表格用于展示结构化数据，由行（tr）、单元格（td/th）组成。
<table>
<caption>2025 年度销售报告</caption> <!-- 表格标题 -->
<thead>
<tr>
<th>产品</th>
<th>销量</th>
<th>单价</th>
<th>总金额</th>
</tr>
</thead>
<tbody>
<tr>
<td>商品 A</td>
<td>120</td>
<td>¥99</td>
<td>¥11,880</td>
</tr>
<tr>
<td>商品 B</td>
<td>85</td>
<td>¥199</td>
<td>¥16,915</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">合计</td>
<td>¥28,795</td>
</tr>
</tfoot>
</table>| 属性 | 说明 |
|---|---|
colspan="n" | 单元格横跨 n 列 |
rowspan="n" | 单元格竖跨 n 行 |
表单是用户与网页交互的核心通道，用于收集和提交用户数据。
<form action="/submit" method="POST">
<!-- action: 提交到的服务器地址 -->
<!-- method: GET（数据在URL中）/ POST（数据在请求体中） -->
<!-- 表单控件放在这里 -->
</form>| type 值 | 用途 | 示例 |
|---|---|---|
text | 单行文本输入 | <input type="text"> |
password | 密码输入（内容隐藏） | <input type="password"> |
email | 邮箱地址（自动校验） | <input type="email"> |
number | 数字输入（带增减按钮） | <input type="number" min="0" max="100"> |
tel | 电话号码（手机端弹出数字键盘） | <input type="tel"> |
url | 网址输入 | <input type="url"> |
date | 日期选择器 | <input type="date"> |
time | 时间选择器 | <input type="time"> |
color | 颜色拾取器 | <input type="color"> |
file | 文件上传 | <input type="file" accept="image/*" multiple> |
checkbox | 多选框 | <input type="checkbox"> |
radio | 单选框（同 name 互斥） | <input type="radio" name="gender"> |
range | 滑动条 | <input type="range" min="0" max="100"> |
search | 搜索框 | <input type="search"> |
hidden | 隐藏字段（用户不可见） | <input type="hidden" name="id"> |
<form action="/register" method="POST">
<fieldset>
<legend>用户注册</legend>
<label for="username">用户名：</label>
<input type="text" id="username" name="username"
placeholder="请输入用户名" required>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email"
placeholder="example@mail.com" required>
<label for="password">密码：</label>
<input type="password" id="password" name="password"
minlength="6" required>
<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>
<label for="city">城市：</label>
<select id="city" name="city">
<option value="">请选择城市</option>
<optgroup label="华北">
<option value="beijing">北京</option>
<option value="tianjin">天津</option>
</optgroup>
<optgroup label="华东">
<option value="shanghai">上海</option>
<option value="hangzhou">杭州</option>
</optgroup>
</select>
<label for="bio">个人简介：</label>
<textarea id="bio" name="bio" rows="4"
placeholder="请简单介绍自己..."></textarea>
<label>
<input type="checkbox" name="agree" required>
我已阅读并同意《用户协议》
</label>
<button type="submit">注册</button>
<button type="reset">重置</button>
</fieldset>
</form>| 属性 | 说明 |
|---|---|
required | 必填项，否则无法提交 |
placeholder | 输入框占位提示文字 |
disabled | 禁用控件，不可交互且不提交 |
readonly | 只读，可选中但不允许修改 |
min / max | 数字/日期的最小最大值 |
minlength / maxlength | 文本最小/最大长度 |
pattern | 正则表达式校验 |
autocomplete | 是否启用浏览器自动填充 |
autofocus | 页面加载后自动聚焦 |
语义化标签让代码结构更清晰，也帮助搜索引擎和屏幕阅读器理解页面内容。
<body>
<header>
<nav>导航菜单</nav>
</header>
<main>
<article>
<h2>文章标题</h2>
<section>
<h3>第一节</h3>
<p>内容...</p>
</section>
</article>
<aside>
<h3>侧边栏</h3>
<p>相关链接或广告</p>
</aside>
</main>
<footer>
<p>© 2025 我的网站</p>
</footer>
</body>| 标签 | 含义 |
|---|---|
<header> | 页面头部 / 区块头部 |
<nav> | 导航链接区域 |
<main> | 页面主体内容（整个页面唯一） |
<article> | 独立的、可复用的内容块 |
<section> | 文档中的节（通常带标题） |
<aside> | 侧边栏 / 附属内容 |
<footer> | 页面底部 / 区块底部 |
<figure> + <figcaption> | 插图及其标题 |
<time> | 日期/时间 |
<details> + <summary> | 可折叠内容块 |
<!-- 可折叠面板示例 -->
<details>
<summary>点击展开查看更多</summary>
<p>这里是隐藏的内容，点击上方箭头可收起。</p>
</details><!-- 音频播放 -->
<audio controls>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
您的浏览器不支持音频播放。
</audio>
<!-- 视频播放 -->
<video controls width="640" poster="cover.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<track src="subtitles.vtt" kind="subtitles" srclang="zh" label="中文">
您的浏览器不支持视频播放。
</video>| 属性 | 说明 |
|---|---|
controls | 显示播放控件（播放/暂停/音量） |
autoplay | 自动播放（通常需要 muted 配合） |
muted | 静音播放 |
loop | 循环播放 |
poster | 视频加载前的封面图 |
preload | 预加载策略（none / metadata / auto） |
iframe 用于在当前页面中嵌入另一个网页。
<!-- 嵌入 YouTube 视频 -->
<iframe width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="视频标题"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media"
allowfullscreen>
</iframe>
<!-- 嵌入地图 -->
<iframe src="https://www.google.com/maps/embed?..."
width="600" height="450" style="border:0;"
loading="lazy">
</iframe>sandbox 属性限制 iframe 的能力，并只嵌入可信来源的内容。
<head> 虽然不可见，但对 SEO、社交分享和浏览器行为至关重要。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="网页描述，搜索引擎会显示此内容">
<meta name="keywords" content="HTML, CSS, 前端教程">
<meta name="author" content="作者名">
<meta name="robots" content="index, follow">
<!-- Open Graph: 控制社交平台分享时的预览卡片 -->
<meta property="og:title" content="网页标题">
<meta property="og:description" content="分享描述">
<meta property="og:image" content="https://example.com/thumb.jpg">
<meta property="og:url" content="https://example.com">
<!-- 网站图标 -->
<link rel="icon" type="image/png" href="favicon.png">
</head>