HTML 不是“学”的，是“写出来再改”的
想靠看教程把 HTML 学明白，基本走不通。HTML 没有逻辑分支、没有运行时错误、不报错也能渲染出错——你写的标签嵌套错了、属性拼错了、语义用反了，浏览器照常显示，但结构一塌糊涂。真正卡人的不是语法，而是「写完之后不知道它到底对不对」。
- 别从
<html>标签开始背，直接打开编辑器，写一个<h1>和两个<p>，保存为index.html，双击用浏览器打开 - 每加一个新标签（比如
<ul>、<img>），立刻右键「查看页面源代码」，再按F12看开发者工具里的 Elements 面板，确认它真被解析成了你想要的树形结构 - 删掉所有 CSS 和 JS，只留 HTML，反复验证：内容是否可读？屏幕阅读器能否顺序读出标题和段落？搜索引擎能不能抓到
<h1>？
用 Chrome DevTools 实时验证语义和可访问性
很多人以为 HTML 写完能“看见”就完了，其实最常出问题的是看不见的部分：语义缺失、ARIA 属性乱加、跳过标题层级。Chrome 的 Elements 面板和 Accessibility 标签页，比任何教程都诚实。
- 在 Elements 面板里选中一个
<div>，右边 Accessibility 面板会显示它被识别成什么角色（通常是generic），如果本该是按钮却没加role="button"或没用<button>，这里立刻暴露 - 按
Ctrl+Shift+P（Win）或Cmd+Shift+P（Mac），输入 “Accessibility” 打开「Accessibility audit」，它会指出<img>缺alt、<h2>前没<h1>等硬伤 - 不要信“用了
<section>就一定语义正确”——只有当它包裹一组有共同主题的内容时才该用；否则，一个孤立的<section>反而干扰辅助技术
form 表单是 HTML 里最容易写错也最值得深挖的部分
表单看着简单，但 <label> 绑定方式、name 和 id 匹配、required 触发时机、提交前校验逻辑，全在 HTML 层就决定了后续 JS 和后端怎么接。写错一个属性，用户可能根本点不了提交，或者提交了却收不到数据。
- 永远用显式绑定：
<label for="email">邮箱</label><input id="email" name="email">，别用包裹式写法（<label>邮箱<input></label>）——它在某些屏幕阅读器下不可靠 -
name属性决定后端收到的字段名，id仅用于 CSS 和 JS 定位，两者可以不同，但千万别漏name - 原生校验（
required、type="email"、pattern）只在表单提交时触发，不会实时响应；想做实时提示，必须配合 JS 的addEventListener('input', ...)
别碰「HTML 教程网站」，直接查 MDN Web Docs
网上大量 HTML 教程还在教 <font>、<center>、把 <div> 当万能容器用，甚至把 Bootstrap 的 class 当成 HTML 一部分讲。MDN 页面可能枯燥，但它每一页底部都写着「此特性已废弃」或「仅在部分浏览器支持」，这才是真实世界。
立即学习“前端免费学习笔记（深入）”；
- 搜索「MDN
article」、「MDNtime」、「MDNdialog」，看它的「使用说明」「可访问性关注点」「浏览器兼容性」三栏——尤其注意红色叉号出现在哪些版本 - 遇到不确定的标签（比如
<aside>），别查“有什么用”，直接查「Should I use <aside>?」——MDN 的「Usage notes」里往往有一句大实话：“Only use it if the content is tangentially related to the main content.” - MDN 示例代码默认不带 CSS，正好逼你专注 HTML 结构本身；复制过去跑不通？大概率是你漏了
<body>或忘了文件后缀是.html
HTML 的复杂点从来不在标签数量，而在每个标签背后隐含的文档结构责任和人机交互契约。写完一个页面，别急着加样式，先关掉 CSS，用键盘 Tab 键走一遍焦点顺序，听一遍屏幕阅读器朗读——那里藏着最多被忽略的细节。
