DOCTYPE必须顶格写在第一行，lang和charset缺一不可；语义标签是结构硬约束而非可选装饰；标签名属性名全小写、属性值用双引号、块级标签显式闭合、自闭合标签不加斜杠；路径须用相对路径且区分大小写；img必须带alt属性。
DOCTYPE 必须顶格写在第一行，lang 和 charset 缺一不可——90% 的中文页面乱码、排版错位、input 类型不渲染，根源都在这里。
为什么浏览器会把你的页面“猜错”？
浏览器不是智能助手，它靠开头几行代码决定用哪种模式解析整页。漏掉 <!DOCTYPE html> 或者前面加了空格/注释，就会触发怪异模式（Quirks Mode），结果：box-sizing 失效、flex 布局错位、date 输入框直接不显示。更隐蔽的是：lang="zh-CN" 缺失时，屏幕阅读器发音不准，搜索引擎对关键词权重判断也会偏移。
-
<!DOCTYPE html>必须是文件最开头，前面不能有任何字符（包括空格、换行、<!-- -->） -
<html lang="zh-CN">中的值要匹配实际语言，别写成zh或en；多语言站点需用 JS 动态改document.documentElement.lang -
<meta charset="UTF-8">必须放在<head>最靠前位置，否则早期字节已按默认编码读取，再改也晚了
header、main、nav 不是“可选装饰”，是结构硬约束
通篇用 div 堆内容，短期能跑，上线后维护成本翻倍：SEO 掉权、无障碍测试失败、JS 定位元素反复出错。语义标签不是锦上添花，而是浏览器和辅助工具理解你页面逻辑的唯一依据。
-
<main>每页只能有一个，且不能嵌套在<article>、<aside>、<nav>内 -
<section>必须配标题（<h2>–<h6>），否则语义失效，W3C 验证器会报 warning -
<nav>只包裹导航链接集合，按钮、搜索框、登录入口别塞进去——它们属于<header>或独立功能区
标签大小写、引号、闭合，全是协作底线
这些细节不报错，但会让团队协作变慢、CI 流水线卡住、模板引擎生成异常。它们不是“风格偏好”，而是避免歧义的工程实践。
立即学习“前端免费学习笔记（深入）”；
- 所有标签名、属性名必须小写：
<img>✅，<IMG>❌；src✅，SRC❌ - 属性值统一用双引号：
class="user-card"✅，class='user-card'或class=user-card❌ - 块级标签（
<p>、<div>、<section>）显式闭合，哪怕 HTML5 允许省略——JS 操作parent.children时顺序可能意外变化 - 自闭合标签（
<img>、<input>）不加/：<img src="a.jpg" alt="">✅，<img src="a.jpg" alt="" />❌（HTML5 不需要，且某些服务端模板会误解析）
路径和资源引用，本地能跑 ≠ 上线能用
图片空白、CSS 不加载、JS 报 404，八成是路径写错了。相对路径不是“随便写写”，它依赖当前 HTML 文件所在位置，和服务器部署结构强绑定。
- 优先用相对路径：
./images/logo.png（同级images文件夹）、../css/style.css（上级css文件夹） - 避免
file:///或绝对路径（C:\project\...），这类路径只在本地双击打开时有效，HTTP 服务下必然失败 - 路径区分大小写：Linux 服务器上
Images/和images/是两个目录，本地 Windows 可能不报错，但上线就 404 -
<img>必须带alt属性，空值写alt=""，不是删掉它——这是无障碍和 SEO 基础要求
真正难的不是记住每条规范，而是在写第一个 <p> 标签时，就习惯性补上 </p>；在保存 index.html 前，下意识检查 <html lang="zh-CN"> 是否拼对。这些动作一开始慢半秒，三个月后就是肌肉记忆——而项目里最贵的 bug，往往就藏在那半秒的忽略里。
