html是前端基础，需理解浏览器解析、dom生成、语义化及兼容性；验证用w3c工具和devtools elements面板；动手测试特性支持，关注运行时表现与无障碍影响。
HTML 不是单独学的，它是前端所有工作的起点和上下文——不先搞懂浏览器怎么解析它、开发者工具怎么调试它、哪些写法会直接卡死渲染，后面学 CSS 和 JS 全是空中楼阁。
怎么验证自己写的 HTML 是有效的
很多人写完 <div> 就去查样式，但浏览器根本没按你想象的方式解析结构。真实问题是：标签嵌套错、属性拼错、自闭合漏斜杠，都会让 DOM 树变形，后续 JS 拿不到元素、CSS 选不对节点。
<ul>
<li>用浏览器开发者工具的 <code>Elements 面板看最终生成的 DOM 树，不是源码——<li> 写在 <ul></ul> 外面会被自动修正，但逻辑已乱
Warning：比如 Section lacks heading. Consider using <h2>-<h6></h6>
</h2> 不是建议，是语义缺失，影响可访问性和 SEO<div class="btn">Submit</div> 和 <button type="submit">Submit</button> 在键盘焦点、屏幕阅读器、表单提交行为上完全不同哪些 HTML 特性必须动手试，不能只看文档
文档里写“支持”，不代表你当前项目能用；写“已废弃”，也不代表旧代码立刻崩。关键在运行时表现和兼容边界。
-
<dialog></dialog>在 Safari 15.4+ 才有原生showModal()，之前只能靠open属性 + 手动控制 backdrop，且无法阻止 Esc 关闭 -
<input type="date">在 iOS 上触发原生日历，但在 Android 厂商定制系统里可能退化成文本框，必须配pattern和 JS 校验 -
loading="lazy"对<img alt="html前端怎么学_html前端学习路线【干货】" >有效，但对<iframe></iframe>的支持晚一年，且 Chrome 早期版本会误加载首屏外 iframe
为什么改一行 HTML，CSS 或 JS 就失效了
表面改的是结构，实际动的是选择器匹配路径、事件冒泡链、CSS 继承源头。不看 DevTools 的 computed styles 和 event listeners，很容易以为是样式或脚本的问题。
立即学习“前端免费学习笔记（深入）”；
- 加了个
<span></span>包住文字，button:hover .text就失效——因为.text不再是button的直接子元素 - 把
<ul></ul>换成<div role="list">，CSS 的 <code>ul li::marker自动消失，且 screen reader 不再播报列表项数量 - 给父容器加
display: contents，它就从渲染树中消失，但子元素仍保留，这时 JS 用parentElement可能拿到意外的节点
真正卡人的从来不是标签怎么写，而是你改的那行 HTML，在当前浏览器、当前框架、当前无障碍设置下，到底触发了哪一层隐式规则。多开几个 DevTools 面板，盯着 Elements、Console、Accessibility 看三秒，比查十篇教程更快定位问题。
