HTML5 · 现代网页开发基础

构建你的第一个
网页世界

从零开始，系统学习 HTML 语言。理解标签结构、掌握语义化写法，为成为前端开发者打下坚实基础。

开始学习 → 查看代码演示
5
学习模块
23
系统课节
1991
年诞生
HTML5
现行标准
系统课程

完整学习路径

从零基础到能独立构建网页，五大模块按难度分级，每模块含实战项目，循序渐进。点击任意课程卡片进入详细教程。

LESSON 01
什么是 HTML？
了解 HTML 的定义、作用与在 Web 三要素中的角色。理解标记语言与编程语言的本质区别，认识浏览器如何解析并渲染 HTML。
#基础概念#必读
⏱ 20 分钟入门
LESSON 02
搭建开发环境
安装 VS Code 编辑器，配置 Live Server 插件实现实时预览，创建第一个 .html 文件并在浏览器中成功打开。
#VS Code#环境配置
⏱ 30 分钟入门
LESSON 03
HTML 文件基本骨架
掌握 <!DOCTYPE>、<html>、<head>、<body> 四大根标签，理解每个标签的用途与位置关系，建立文档结构意识。
#DOCTYPE#骨架
⏱ 25 分钟入门
LESSON 04
标签的语法规则
学习开标签与闭标签、自闭合标签（如 <br>、<img>）、标签嵌套规则，以及属性的书写格式 attr="value"。
#语法#属性#嵌套
⏱ 30 分钟入门
LESSON 05
注释与字符实体
学习 HTML 注释写法 <!-- -->，以及 &nbsp;、&lt;、&gt;、&amp; 等常用字符实体的使用场景与原理。
#注释#实体字符
⏱ 20 分钟入门
PROJECT 01
🎯 实战：个人简介页
综合运用所学知识，制作一个包含姓名、头像占位、自我介绍段落的个人简介静态页面。
#项目实战
⏱ 45 分钟入门
LESSON 06
标题标签 h1 ~ h6
理解六级标题的语义含义与 SEO 权重关系，掌握一页只用一个 h1 的最佳实践原则，以及标题层级对屏幕阅读器的影响。
#h1~h6#SEO
⏱ 20 分钟基础
LESSON 07
语义化结构标签
掌握 <header>、<nav>、<main>、<article>、<section>、<aside>、<footer> 的使用规范、适用场景与相互区别。
#语义化#HTML5#a11y
⏱ 40 分钟基础
LESSON 08
div 与 span 容器
理解块级元素与行内元素的本质区别，掌握 div 和 span 作为通用容器的正确用法，以及过度使用"div 汤"的规避技巧。
#div#span#块级#行内
⏱ 35 分钟基础
LESSON 09
head 标签深度解析
深入理解 <meta charset>、<meta viewport>、<title>、<link>、<style>、<script> 的各自作用、加载顺序与对性能的影响。
#meta#head#SEO
⏱ 40 分钟基础
PROJECT 02
🎯 实战：博客文章页
使用语义化标签搭建一篇完整的博客文章结构，包含 header、nav、main、article、aside、footer 等区域，并验证无障碍可访问性。
#项目实战#语义化
⏱ 60 分钟基础
LESSON 10
段落与文字标签
掌握 <p>、<br>、<strong>、<em>、<b>、<i>、<u>、<mark>、<del>、<ins>、<sup>、<sub> 等文字处理标签的语义差别与正确使用场景。
#p#strong#em
⏱ 30 分钟中级
LESSON 11
超链接标签 <a> 全解
掌握 href、target="_blank"、rel="noopener"、锚点跳转、下载链接 download 属性、电话 tel: 链接、邮件 mailto: 链接的完整用法。
#a#href#锚点
⏱ 35 分钟中级
LESSON 12
图片标签 <img> 精讲
深入学习 src 路径（相对/绝对/Data URL）、alt 属性的重要性、width/height 防抖动、loading="lazy" 懒加载及 srcset 响应式图片方案。
#img#alt#srcset#lazy
⏱ 40 分钟中级
LESSON 13
列表标签全面掌握
掌握无序列表 <ul><li>、有序列表 <ol> 的 start/reversed/type 属性，及描述列表 <dl><dt><dd> 的使用场景与嵌套列表写法。
#ul#ol#dl
⏱ 30 分钟中级
LESSON 14
表格标签 <table>
掌握 <table>、<thead>、<tbody>、<tfoot>、<tr>、<th>、<td>，以及 colspan/rowspan 合并单元格，以及 scope 属性提升表格可访问性。
#table#colspan#scope
⏱ 45 分钟中级
PROJECT 03
🎯 实战：产品展示页
综合使用图片、列表、链接、表格，构建一个产品介绍页面，包含商品图、规格参数表和购买入口链接。
#项目实战
⏱ 75 分钟中级
LESSON 15
表单基础 <form>
理解 action（提交地址）、method（GET/POST 区别）、enctype 属性的作用，掌握表单数据的提交流程与前后端传递原理。
#form#GET#POST
⏱ 35 分钟进阶
LESSON 16
<input> 全类型精讲
系统掌握 text、password、email、number、date、datetime-local、checkbox、radio、file、color、range、search 等 20+ 种 type 类型及常用属性。
#input#type#placeholder
⏱ 50 分钟进阶
LESSON 17
下拉框与文本域
掌握 <select><option><optgroup> 下拉菜单（含 multiple 多选）、<textarea> 多行文本域（rows/cols/resize），以及 <datalist> 自动补全组件。
#select#textarea#datalist
⏱ 35 分钟进阶
LESSON 18
表单验证与无障碍
使用 required、min/max、minlength/maxlength、pattern 正则进行 HTML5 原生验证，掌握 <label> for 属性、fieldset/legend 提升可访问性。
#required#pattern#label#a11y
⏱ 45 分钟进阶
PROJECT 04
🎯 实战：用户注册表单
构建包含用户名、邮箱、密码确认、性别单选、城市下拉、头像上传的完整注册表单，并添加原生验证逻辑与友好的错误提示。
#项目实战#表单
⏱ 90 分钟进阶
LESSON 19
多媒体标签
掌握 <video>、<audio> 的 controls、autoplay、loop、muted、poster、preload 属性，以及 <source> 多格式兼容写法（MP4/WebM/Ogg）。
#video#audio#source
⏱ 40 分钟进阶
LESSON 20
<canvas> 绘图基础
了解 canvas 元素概念，通过 JavaScript getContext('2d') API 绘制矩形、圆形、路径、文字与图像，感受动态图形编程的可能性。
#canvas#2d#绘图
⏱ 60 分钟进阶
LESSON 21
内嵌内容与 iframe
学习 <iframe> 嵌入外部页面（含安全属性 sandbox、allow、referrerpolicy）、<embed> 嵌入 PDF 等文件，以及跨域安全注意事项。
#iframe#embed#sandbox
⏱ 35 分钟进阶
LESSON 22
响应式图片与懒加载
掌握 <picture> 标签与 srcset/sizes 属性为不同分辨率屏幕提供最优图片，以及 loading="lazy" 实现原生懒加载的性能优化方案。
#picture#srcset#lazy
⏱ 45 分钟进阶
LESSON 23
SEO 与元数据优化
深入理解 <meta name="description">、Open Graph 协议（og:title/og:image/og:type）、Twitter Card、结构化数据 JSON-LD 对搜索引擎排名的实际影响。
#SEO#OpenGraph#JSON-LD
⏱ 50 分钟进阶
PROJECT 05
🎯 实战：个人作品集网站
综合运用所有知识，构建包含顶部导航、作品展示画廊、视频介绍、联系表单、响应式图片的完整个人网站 HTML 骨架，并完成 SEO 元信息配置。
#项目实战#毕业项目
⏱ 120 分钟进阶
标签速查

核心标签一览

按分类快速查找常用 HTML 标签，点击分类按钮筛选。

<html>
HTML 文档的根元素，所有其他元素都必须是它的后代，lang 属性声明页面语言。
结构
<head>
包含文档元数据：标题、字符集、样式表链接、SEO 信息等，不在页面中直接显示。
结构
<body>
文档的可见内容区域，所有需要在页面上显示的内容都放在这里。
结构
<header>
页面或区块的头部，通常包含 logo、导航、标题等介绍性内容，可多次使用。
结构
<nav>
导航链接区块，用于主导航、面包屑、目录等导航性链接集合，屏幕阅读器可识别跳过。
结构
<main>
页面主要内容区，每个文档只能有一个，帮助搜索引擎和辅助技术快速定位核心内容。
结构
<section>
文档中一个独立的章节或主题区块，通常包含标题，用于将内容分组。
结构
<article>
独立的可复用内容，如博客文章、新闻、论坛帖子，可单独分发或被 RSS 抓取。
结构
<aside>
与主内容相关但可独立存在的附属内容，如侧边栏、广告、作者简介、相关推荐。
结构
<footer>
页面或章节的尾部，通常包含版权信息、联系方式、底部导航链接等。
结构
<div>
通用块级容器，无语义含义，当没有合适语义标签时使用，常配合 CSS class 布局。
结构
<span>
通用行内容器，无语义，用于对文本片段应用样式或绑定 JavaScript 事件。
结构
<h1> ~ <h6>
六级标题，h1 权重最高，每页只用一个 h1，按层级顺序使用，不能跳级（h1→h3）。
文字
<p>
段落标签，浏览器会在段落前后自动添加间距，是最常用的文本块容器。
文字
<strong>
重要内容，默认加粗，具有语义"重要性"（区别于仅改变外观的 <b> 标签）。
文字
<em>
强调内容，默认斜体，具有语义"语气强调"（区别于仅改变外观的 <i> 标签）。
文字
<a>
超链接，href 指定目标地址，是构建万维网超链接结构的核心元素。支持锚点、tel:、mailto:。
文字
<code> / <pre>
<code> 为行内代码片段；<pre> 保留空格换行，两者常配合用于多行代码块展示。
文字
<mark>
高亮文本，默认黄色背景，表示内容与当前用户操作相关，如搜索关键词高亮。
文字
<del> / <ins>
<del> 表示已删除内容（删除线），<ins> 表示新插入内容（下划线），常见于文档修订。
文字
<img>
嵌入图片，src 指定路径，alt 提供替代文字，对无障碍和 SEO 至关重要，不可省略。
媒体
<video>
HTML5 视频，支持 controls/autoplay/loop/muted/poster/preload 属性，推荐用 <source> 多格式兼容。
媒体
<audio>
HTML5 音频，支持 controls/autoplay/loop 属性，可嵌入背景音乐、音效或播客内容。
媒体
<picture>
响应式图片容器，配合 <source media="..."> 为不同屏幕尺寸/分辨率提供最合适的图片资源。
媒体
<canvas>
画布元素，需配合 JavaScript API 使用，可绘制图形、动画、游戏画面、数据可视化。
媒体
<iframe>
内联框架，嵌入外部页面，常用于地图/视频/广告，sandbox 属性限制其权限保障安全。
媒体
<form>
表单容器，action 指定提交地址，method 指定 GET 或 POST，enctype 处理文件上传。
表单
<input>
多功能输入控件，通过 type 属性支持文本/密码/邮件/数字/日期/复选框/单选等 20+ 形态。
表单
<button>
可点击按钮，type 可为 submit（提交）、reset（重置）或 button（普通），支持内嵌 HTML 内容。
表单
<select>
下拉选择框，配合 <option> 提供选项，<optgroup> 分组，multiple 属性允许多选。
表单
<textarea>
多行文本输入框，rows/cols 控制初始尺寸，通过 CSS resize 属性控制用户缩放行为。
表单
<label>
输入控件的标签，for 属性值与 input 的 id 关联，点击标签即可聚焦输入框，提升易用性。
表单
<ul>
无序列表，子元素为 <li>，默认圆点符号，适合顺序无关的列表，如导航项、功能列表。
列表
<ol>
有序列表，子元素为 <li>，默认数字编号，start/reversed/type 属性控制编号形式。
列表
<li>
列表项，必须是 <ul> 或 <ol> 的直接子元素，可内嵌任意内容，包含子列表实现多级菜单。
列表
<dl> / <dt> / <dd>
描述列表：<dl> 为容器，<dt> 为术语名，<dd> 为描述，适合词汇表、FAQ、元数据展示。
列表
<table>
表格容器，仅用于展示二维关系型数据，不应用于页面布局（那是 CSS Flexbox/Grid 的工作）。
表格
<thead> / <tbody> / <tfoot>
表格的三个语义分区：头部、主体、脚部，有助于辅助技术理解表格结构，也便于 CSS 分区控制。
表格
<tr> / <th> / <td>
<tr> 为行，<th> 为语义表头单元格（默认加粗居中），<td> 为普通数据单元格。
表格
colspan / rowspan
td/th 的合并属性：colspan 合并横向多列，rowspan 合并纵向多行，实现复杂表格布局。
表格
发展历史

HTML 的进化之路

从 18 个标签到覆盖多媒体、离线存储、图形绘制的现代 Web 平台，HTML 用三十年重塑了人类获取信息的方式。

1991
HTML 1.0 诞生
蒂姆·伯纳斯-李在 CERN 发明 HTML，仅包含 18 个标签，目的是让科学家通过网络共享文档。同年，第一个网页上线。
18 个标签
1995 — 1997
HTML 2.0 / 3.2
W3C 接管标准化工作，引入表单、表格、图片支持。浏览器大战期间 Netscape 与 IE 私自扩展标签，兼容性问题严重。
W3C 接管
1999
HTML 4.01
Web 1.0 黄金时代标准，引入 CSS 样式分离的概念，规范了框架、国际化，成为此后十年最广泛使用的版本。
样式分离
2000 — 2008
XHTML 过渡期
W3C 推行严格的 XHTML 规范，要求标签小写、必须闭合，促进了代码规范化意识，但过于严苛导致开发者反弹。
规范化时代
2014
HTML5 正式发布 🚀
W3C 正式发布 HTML5，新增 <video>/<audio>/<canvas>、语义化标签、离线存储、WebSocket 等，彻底终结 Flash 插件时代。
现行标准
2019 — 今
Living Standard 活标准
WHATWG 推行"活标准"概念，HTML 不再有版本号，持续迭代更新。Dialog、Popover API、<search> 等新特性不断加入。
持续演进
学习资源

推荐学习平台

全球开发者公认的高质量资源，每一个都值得收藏。

📘
MDN Web Docs
Mozilla 维护的权威 Web 文档，每个 HTML 标签都有详细说明、浏览器兼容性表格与示例代码，是开发者的首选参考手册。
访问 MDN ↗
🐣
菜鸟教程
适合中文初学者的入门教程，每个知识点都有配套的在线编辑器，可以边学边改、即时看到效果，大幅降低学习门槛。
访问菜鸟 ↗
🌐
W3Schools
全球访问量最大的 Web 教程网站，提供完整 HTML 参考与 Try it Yourself 在线练习，内容简洁直观，覆盖面极广。
访问 W3Schools ↗
⚡
web.dev / Learn HTML
Google 出品的现代 Web 学习课程，从语义化、可访问性、SEO 角度系统讲解 HTML，内容专业、紧跟最新标准与最佳实践。
访问 web.dev ↗
✅
W3C HTML 验证器
W3C 官方验证工具，粘贴或上传 HTML 文件，自动检测语法错误、标签未闭合、属性缺失等问题，是代码质量保障利器。
检验代码 ↗
📋
WHATWG HTML 规范
HTML 语言的官方活标准文档，由浏览器厂商共同维护，适合深入研究某一特性的底层规范定义与浏览器行为描述。
查看规范 ↗
编写技巧

专业开发者的好习惯

这些技巧让你的 HTML 代码更规范、更易维护，也更受浏览器和搜索引擎的"喜爱"。

🔤

始终在 head 第一行声明字符集

写上 <meta charset="UTF-8">，否则中文、日文等多字节字符可能乱码。这必须是 <head> 内最先出现的标签。

📱

添加 viewport meta 标签

移动端页面必须加 <meta name="viewport" content="width=device-width, initial-scale=1.0">，否则手机上页面会以缩小的桌面模式显示。

🏷️

优先选择语义化标签，减少"div 汤"

能用 <nav> 就别用 <div class="nav">。语义标签提升可访问性（屏幕阅读器）、SEO 排名，代码也更自解释。

🖼️

img 标签必须填写 alt 属性

纯装饰图写 alt=""（空值），有意义的图填描述性文字。图片加载失败时 alt 内容会显示，SEO 蜘蛛也靠 alt 理解图片内容。

🔗

外链添加 rel="noopener noreferrer"

使用 target="_blank" 时务必同时添加 rel="noopener noreferrer"，防止新页面通过 window.opener 访问原页面，避免安全漏洞。

📐

保持统一的缩进风格

子标签相对父标签缩进 2 或 4 个空格（保持全文一致）。在 VS Code 中配置 editor.tabSize 与 editor.insertSpaces，并安装 Prettier 插件自动格式化。

🚀

script 标签放在 body 末尾或加 defer

将 <script> 放在 </body> 前，或添加 defer 属性，确保 HTML 内容先渲染完成再执行脚本，避免阻塞首屏加载。

🧪

定期用 W3C 验证器检查代码

使用 validator.w3.org 验证 HTML 合法性，捕获未闭合标签、属性重复、元素嵌套错误等问题。浏览器容错性很强，但不代表代码没有问题。