mdn web docs 是最值得优先打开的 html 教程入口，因其提供权威、实时、兼容性明确的一手查证依据；freecodecamp 以项目驱动培养真实工作流意识；应避开罗列冷门废弃标签的教程，聚焦高频易错点；html 学习需与 css、js 协同实践。
MDN Web Docs 是目前最值得优先打开的 HTML 教程入口，它不是“适合初学者”的泛泛之谈，而是你遇到任何标签、属性、兼容性问题时，第一手查证的依据。
为什么别从 W3Schools 开始学 <details></details> 或 aria-expanded
W3Schools 的示例确实跑得通，但它常把“能用”和“该用”混为一谈。比如教 <details></details> 时只给一个开合示例，却不提 Safari 15.4 之前不支持 open 属性的 JS 控制；讲 aria-expanded 时也不强调它必须配合 role="button" 才算语义完整。这类疏漏在快速入门阶段不会暴露，但等你开始做无障碍测试或跨浏览器调试时，会卡在莫名其妙的读屏器跳过、焦点丢失上。
freeCodeCamp 的项目路径比语法列表更接近真实工作流
它不按标签分类，而是让你先做出一个“响应式个人简历页”，过程中自然用到 <header></header>、<section></section>、<figure></figure> 和 class 命名约定。这种设计暗合现代前端实际：没人单独写 HTML，它总和 CSS 选择器、JS 事件绑定、甚至构建工具链一起出现。
- 完成它的“Build a Tribute Page”项目后，你会本能地意识到：
<main></main>不是装饰，而是document.querySelector('main')的可靠锚点 - 写完“Survey Form”后，会记得
<fieldset></fieldset>和<legend></legend>是表单可访问性的基础，不是为了好看 - 它的测试用例强制你检查
required、type="email"是否真被浏览器原生校验触发，而不是只靠 JS 提示
避开“HTML 全标签手册”类教程的陷阱
有些资源罗列全部 120+ 个 HTML5 标签，包括早已废弃的 <acronym></acronym>、实验性的 <popup></popup>（Chrome 125+ 才刚进 Origin Trial）。结果是你花了两小时记 <rb></rb> 和 <rt></rt>，却在真实项目里一次都没用过——因为中文排版几乎不用 Ruby 注音，而团队也没人要求你适配日文阅读习惯。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
真正高频且易错的其实是这几类：
-
<img>的loading="lazy"在 Safari 15.6+ 才稳定，旧版本需降级为 JS 懒加载 -
<input type="date">在 iOS 上无法通过valueAsDate设置初始值，得用字符串格式 -
<dialog></dialog>必须手动调用showModal()，仅加open属性不会触发模态行为
最后提醒一句：别等“学完 HTML”再碰 CSS 或 JS
HTML 的语义价值只有在和 CSS 的 display: contents、JS 的 element.closest() 配合时才真正显现。比如你写了个 <nav></nav>，但没加 aria-label，CSS 又用了 flex-direction: column-reverse，那么屏幕阅读器顺序和视觉顺序就彻底错位了——这种问题，纯 HTML 教程根本不会覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
