零基础学HTML应优先组合MDN Web Docs查文档、菜鸟教程和W3Schools.cn练手，辅以B站视频与freeCodeCamp实战，重语义结构而非单纯显示效果。
直接说结论：零基础学 HTML，优先用 MDN Web Docs + 菜鸟教程 + W3Schools.cn 三者搭配，不花钱、不注册、不看广告，查得准、练得快、中文稳。
MDN Web Docs 是查文档的“字典”，不是入门课
很多人一上来就啃 MDN 的 HTML 入门页，结果卡在“语义化”“可访问性”这些词上。它本质是开发者参考手册，不是教学视频。
适合这样用：
- 写完一个
<article>不确定要不要包<section>？立刻搜 “MDN article section 区别” - 看到别人用
aria-label但自己加了没效果？去 MDN 查aria-label的支持范围和必填条件 - 浏览器表现不一致（比如 Safari 不渲染某个
input type="date"）？翻 MDN 对应标签页底部的 “Browser compatibility” 表格
菜鸟教程和 W3Schools.cn 是边写边跑的“练习场”
这两个站都提供在线编辑器，输完 HTML 点一下就能看到页面效果——这对新手建立反馈闭环最关键。
立即学习“前端免费学习笔记（深入）”；
区别在于：
-
菜鸟教程示例更贴近国内常见需求，比如表单提交到 PHP、配合iframe做简单后台框架，代码里常带中文注释 -
W3Schools.cn结构更紧凑，每个标签一页，<table>页直接列出colspan、rowspan、border（已废弃但你仍可能在老项目里见到）的兼容写法 - 两者都慎用其“完整网页示例”：有些例子还在用
<font>或内联style="color:red"，学的时候得有意识过滤
B站视频+freeCodeCamp 是练“手速”和“结构感”的组合
光看文档和改例子，容易写出一堆扁平的 <div> 堆砌。这时候需要真实任务逼你组织结构。
实操建议：
- 搜 B站 “HTML5 表单实战”，找带「从零写登录页」的视频（推荐黑马程序员2024版），跟着敲，重点观察他怎么用
<fieldset>分组、怎么加required和pattern - freeCodeCamp 的 “Responsive Web Design Certification” 第一关就是纯 HTML 任务：用
<header>、<nav>、<main>搭一个静态博客首页。它不教你怎么写，但会实时校验你是否漏了<alt>属性、是否嵌套错误 - 完成 freeCodeCamp 的前 3 个 HTML 项目后，回过头看自己写的第一个页面——90% 的人会立刻删掉至少两个无意义的
<div>
最容易被忽略的一点：HTML 不是“写完就能跑”，而是“写完要被其他东西读”。SEO 工具、屏幕阅读器、爬虫、甚至 Chrome 的 Lighthouse 审计，都依赖你写的标签是否符合语义逻辑。别只盯着能不能显示，多花 10 秒想“这个 <h2> 是不是真该是二级标题”。
