HTML是网页不可替代的骨架，决定语义、可访问性、SEO及JS/CSS/框架运行基础；规范缺失会导致hydration失败、读屏失效、SEO下降等连锁问题。

HTML 是网页的骨架，没有它，浏览器连“这是个标题还是段落”都识别不了——不是“重要”，而是“不可替代”。

HTML 不是编程语言，但它是所有前端工作的起点

很多人误以为写 JS 或用 React 就能绕过 HTML，实际恰恰相反：document.getElementById 找不到元素，往往是因为 id 写错了或标签没闭合；aria-label 无法被读屏软件识别，常因父容器用了 div 而非语义化标签如 nav 或 main。

• JS 操作 DOM 的前提是 HTML 已加载并结构正确
• CSS 选择器（如 article > p:first-child）完全依赖 HTML 标签嵌套关系
• 搜索引擎和辅助技术直接解析 HTML，不关心你用了什么框架

常见错误：把 HTML 当成“随便写写”的标记

以下问题几乎都源于对 HTML 规范的忽视：

• 缺少 alt 属性 → 影响可访问性，SEO 权重下降
• 在 外写 或 → 浏览器可能忽略，甚至触发 quirks mode
• 用 代替 → 键盘无法聚焦、不支持空格/回车触发

• 里嵌套 → HTML5 允许，但语义混乱，CSS p > div 选择器失效（div 不是 p 的合法子元素）

  现代开发中，HTML 的“隐形负担”反而更重了

  框架（React/Vue）生成的 HTML 如果不符合规范，问题会更隐蔽：

  立即学习“前端免费学习笔记（深入）”；

  • 服务端渲染（SSR）返回的 HTML 若有未闭合标签，客户端 hydration 可能失败，报错如 Hydration failed because the initial UI does not match what was rendered on the server
  • 自定义元素（Web Components）必须用 - 连接符命名，如 ，写成 浏览器直接忽略
  • data-* 属性是唯一合法的自定义属性，写 会导致 HTML 验证失败，且部分工具链（如 Lighthouse）扣分

    
    
      
    
        
    如何正确使用 data-* 属性
        2025年4月10日
      
      
    这是正文...
    

    真正难的不是写出 HTML，而是写出“浏览器能懂、机器能读、人能维护”的 HTML——它不炫技，但每处空格、每个引号、每条嵌套规则，都在悄悄决定页面是否健壮。