HTML规范写作的核心是保障兼容性、可访问性与可维护性：DOCTYPE和lang必须顶格首行，meta charset须置于head最前，语义化标签不可替代，标签闭合、引号、大小写等细节直接影响运行。
HTML 文档写得规范，不是为了应付检查，而是让浏览器不猜、让同事不懵、让屏幕阅读器能读、让三个月后的你自己还能快速定位问题。
DOCTYPE 和 lang 必须顶格写在第一行
漏掉或错位会直接触发怪异模式（Quirks Mode），flex 布局失效、100vh 计算错误、getBoundingClientRect 返回异常值都是常见后果。IE、旧版 Safari 尤其敏感。
-
<!DOCTYPE html>必须全小写，前面不能有任何空格、BOM 或注释 -
<html lang="zh-CN">的lang值要精确匹配 BCP 47 标准：中文站点用zh-CN或zh-Hans，别写zh、cn或留空 - 多语言站点需用 JS 动态更新
document.documentElement.lang，静态值只管初始加载
meta charset 必须紧贴 head 开头
<meta charset="UTF-8"> 如果不在 <head> 最前面（前 1024 字节内），某些旧版 IE 和 Safari 可能按 ASCII 解析后续内容，导致中文标题乱码、CSS 文件路径解析失败。
- 它应该排在
<head>内第一个位置，比<title>还靠前 - 只写一次，禁用
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">这种冗余写法 - 确保保存文件时是 UTF-8 without BOM —— 有 BOM 的文件可能被 PHP、Node.js 等后端误判为非纯文本
语义化标签不是“加分项”，是结构底线
用一堆 <div class="header"> 替代 <header>，等于主动放弃可访问性、SEO 权重和 DOM 可维护性。浏览器和辅助技术不会因为你写了 class 就理解这是页眉。
立即学习“前端免费学习笔记（深入）”；
-
<main>在整个文档中只能出现一次，且不能嵌套在<article>或<aside>内 -
<nav>应包裹主导航链接，不是所有带链接的<div>都叫导航 -
<img>的alt属性不可省略：装饰图写alt=""，内容图写准确描述，别留空或填“图片” - 避免
<font>、<center>等已废弃标签，它们在 HTML5 中无语义，且部分浏览器已不支持渲染逻辑
闭合、引号、大小写这些细节真会影响运行
看似琐碎，但实际调试中，90% 的“页面突然错位”“JS 找不到元素”都源于标签未闭合或属性值没加引号。
- 所有可闭合标签（
<p>、<div>、<section>）建议显式写结束标签，哪怕 HTML5 允许省略 - 自闭合标签如
<img>、<input>不需要斜杠：<img src="a.jpg" alt="">即可，/>是 XML 风格，非必需 - 所有标签名、属性名必须小写；所有属性值必须用双引号包裹，
class=menu或class='menu'都是隐患 - 缩进统一用 2 或 4 个空格，不要混用 Tab 和空格 —— Git diff 和多人协作时极易引发无意义冲突
最常被忽略的一点：规范不是写完再检查，而是在敲下第一个 <html> 时就决定要不要加 lang，在插入第一张 <img> 时就决定 alt 写什么。习惯藏在每一次微小选择里，而不是某次“重构”。
