入门阶段表现为：用替代、用替代；lighthouse可访问性得分低于80时优先加aria而非重构语义结构；忽略唯一性及嵌套限制；漏alt或混淆alt=""与省略alt的语义差异。
零基础学HTML，三个月内能写出语义清晰、结构合理、可访问性达标的静态页面；但要真正“精通”，关键不在标签数量，而在对文档结构意图的理解力、对浏览器渲染逻辑的直觉，以及对真实项目中边界条件的处理经验。
怎么判断自己还在入门阶段
如果你写一个产品介绍页时，下意识用 <div class="title"> 代替 <code><h2></h2>，或把导航栏塞进 <div id="nav"> 而不是 <code><nav></nav>，说明你还没越过“会写”和“懂为什么这么写”的分水岭。常见表现还有：
- 遇到屏幕阅读器报错或 Lighthouse 可访问性得分低于 80，第一反应是查“怎么加 aria-label”，而不是回看结构是否本就该用
<button></button>或<summary></summary> - 调试响应式问题时，习惯直接改 CSS 的
max-width，却没检查<meta name="viewport">是否缺失或写错 - 用
<img>时只填src，漏掉alt，也不理解空字符串alt=""和省略alt的语义差异
HTML5 语义化不是加新标签，而是重构思维
很多人以为学会 <article></article>、<section></section>、<aside></aside> 就算掌握语义化——其实错在把“标签名”当目标。真正要点是：每个标签都隐含一套默认的 ARIA role、焦点行为、嵌套规则和隐式含义。
-
<nav></nav>不只是“放链接的容器”，它暗示该区域包含主要导航链接，会被屏幕阅读器识别为“navigation”地标 -
<main></main>必须且只能出现一次，且不能嵌套在<article></article>或<aside></aside>内；否则会破坏辅助技术的主内容定位逻辑 -
<figure></figure>+<figcaption></figcaption>是独立内容单元，适合图文混排；而单纯配图说明用<img>+alt更合适
建议实操：打开 Chrome DevTools 的 Elements 面板，右键任意语义标签 → “Inspect ARIA attributes”，看浏览器自动补了哪些 role 和 property。
表单验证别只靠 required，得懂约束验证 API
写登录页时，光加 required 和 type="email" 远不够。用户提交失败后，如果只弹 alert 或刷新页面，等于放弃 HTML 原生的错误提示机制。
-
checkValidity()和reportValidity()是控制验证触发时机的核心方法 -
setCustomValidity("用户名已存在")可覆盖浏览器默认提示，但必须传空字符串""才能清除错误状态 -
:valid/:invalid伪类配合 CSS，比 JS 操作 class 更轻量、更可靠 - 注意
novalidate属性会禁用整个表单的原生验证，慎用
示例：<input type="text" id="username" required> 后接 JS：
document.getElementById('username').addEventListener('input', e => {<br> if (e.target.value.length e.target.setCustomValidity('至少3个字符');<br> } else {<br> e.target.setCustomValidity(''); // 关键：清空才能通过验证<br> }<br>});
本地开发环境里最容易被忽略的三件事
很多人卡在“明明代码没错，但页面就是不生效”，问题往往不出在 HTML 本身：
- 文件路径用相对路径时，
<img src="pic/logo.png">在 VS Code Live Server 下正常，但双击打开file://协议会因跨域限制加载失败 - HTML 文件保存编码不是 UTF-8 无 BOM，中文注释或属性值（如
placeholder="请输入"）可能乱码，尤其 Windows 记事本默认 ANSI - 漏写
，浏览器进入 Quirks 模式，盒模型、字体渲染、甚至 <code>flex行为都会退化到 IE5.5 级别
真正难的不是记住所有标签，而是每次写完都下意识问一句：这个结构在没有 CSS、没有 JS、只有屏幕阅读器的情况下，是否依然能准确传达信息层级和操作意图。
