MDN Web Docs 是最权威的 HTML 学习入口，覆盖HTML、CSS、JavaScript、Web API等全栈文档，提供语义规范、兼容性数据、实时示例及最佳实践，是开发者解决真实问题的首选参考。

MDN Web Docs

是当前最值得优先打开的 HTML 学习入口，没有之一。它不是“适合初学者”的泛泛之谈，而是你写错 语义、搞混 required 和 readonly、查不清 input[type="date"] 浏览器兼容性时，真正能救你的地方。

为什么别从 W3Schools 开始学 HTML

W3Schools 的示例看着简洁，但大量代码片段脱离上下文，比如直接写 却不提 alt 属性是强制可访问性要求；它的 HTML5 教程仍混用过时写法（如 标签残留说明）。更关键的是：它不标注哪些特性在 Safari iOS 上默认禁用，也不提示 formmethod 在旧版 Edge 中无效。初学者照着抄，调试时卡在“明明代码一样却不生效”，其实只是被误导了。

freeCodeCamp 的 HTML/CSS 路径怎么高效用

它的课程本质是“带反馈的练习集”，不是系统文档。重点用在以下三处：

• 遇到 fieldset + legend 不生效，立刻做它的“Build a Survey Form”项目——只有亲手拖拽表单控件，才能记住 legend 必须是 fieldset 的第一个子元素
• 学完 flexbox 布局后，不要跳过“Responsive Web Design Projects”里的“Tribute Page”，那里强制你处理 img 在小屏下的 max-width: 100% 和 height: auto
• 它的中文翻译偶尔滞后，遇到英文界面报错 Uncaught DOMException: Failed to execute 'querySelector' on 'Document'，直接切回英文版看控制台堆栈，比等翻译更新快

B站视频课该盯住哪类讲解

搜索时加关键词“HTML 语义化”或“HTML 表单验证”，避开标题党如“三天学会前端”。真正有用的视频有这些特征：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 演示用 VS Code 实时编辑，且开启 emerald 或 Prettier 插件——你能看清
  和
  的高亮差异
• 讲 input 类型时，会同时打开 Chrome、Safari、Firefox 的开发者工具，在 Elements 面板里点开每个 input，展示 type="email" 在不同浏览器中触发的原生校验 UI 差异
• 提到 accesskey 属性时，会当场按 Alt+Shift+字母（Windows）或 Ctrl+Option+字母（macOS）测试是否真能跳转，而不是只念属性名

html.com 和 MarkSheet 适合什么场景补漏

这两个网站不教“怎么开始”，专治“写了一半突然卡住”：

• 当你不确定 dl/dt/dd 的嵌套规则，html.com 的“HTML Tags”页会用缩进式结构图显示合法层级，比 MDN 的文字描述更直观
• 当你要快速对比 display: inline、inline-block、inline-flex 对 vertical-align 的影响，MarkSheet 的 CSS 章节旁直接附渲染结果截图，不用自己开 DevTools 切换
• 它们都不提供交互式编辑器，所以别指望边看边改——适合查完概念后，关掉页面，回到自己项目里实操

真正卡住人的从来不是“没学过”，而是“以为学会了，结果在真实项目里 label for 属性拼错 ID、textarea 忘写 cols 导致响应式崩塌、或者用 div 模拟按钮却没加 role="button" 和键盘事件”。资源再多，不对照真实错误信息去翻文档，就只是收藏夹吃灰。