HTML代码规范要求严格遵循结构、语义与格式标准：DOCTYPE和html标签必须配对且大小写一致；meta charset须为UTF-8且置于head最前；lang属性值需精确如zh-CN；语义标签须按角色使用；所有标签名属性名小写，属性值用双引号，元素独占一行并2空格缩进。
HTML代码规范不是写得“看起来整齐”就行，而是让浏览器、辅助工具、团队成员和你自己都能无歧义地读出结构意图。漏掉lang或把charset放错位置，轻则乱码、翻译失败，重则整页退到怪异模式。
DOCTYPE 和 html 标签必须严格配对
不写，或写成<code>（大小写混用）、<code>..>（XHTML 风格），IE 和旧 Safari 会触发怪异模式：flex 布局塌陷、box-sizing 行为异常、100vh 计算错误。
-
必须紧跟之后，中间不能有空行、注释或任何字符 -
lang属性必须写，且值要精确：简体中文用zh-CN，繁体用zh-TW；lang="cn"或lang="zh"是无效值，屏幕阅读器和爬虫会忽略 - 整个文档只能有一个
根元素，不能嵌套，不能重复
meta charset 必须在 <head> 最前面
如果<meta charset="UTF-8">没放在<head>第一行（比如前面插了<title>或注释），浏览器会先用 ASCII 或系统默认编码解析前几个字节，导致中文标题、内联脚本或样式中的中文变成乱码——这种问题在本地双击打开时不易复现，但部署到服务器后必现。
- 它必须是
<head>中第一个元素，顺序优先级高于<title>、<meta name="viewport"> - 值必须写全小写
UTF-8，不要写utf8、utf-8（部分老版本 IE 不识别） - 禁止用
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">替代，它已被废弃且兼容性差
语义标签不是“换汤不换药”，关键看内容角色
满屏<section>和满屏<div>没有本质区别。语义化失效的典型表现是：用<nav>包页脚友情链接、用<main>套多个新闻卡片、给按钮写<div role="button">却不用原生<button>。
立即学习“前端免费学习笔记（深入）”；
-
<main>只能出现一次，且不能出现在<article>、<aside>、<footer>内部；它代表页面核心内容，不是“主视觉区域” -
<nav>只用于主要导航区块（如顶部菜单、侧边栏目导航），页脚“关于我们”“联系方式”列表不算 - 图片必须带
alt属性：alt=""表示装饰图，alt="公司Logo"表示有意义图像；空alt不可省略，否则读屏器会朗读文件名 - 禁用
<font>、<center>等废弃标签，它们在 HTML5 中无语义，且被现代浏览器降级处理
格式细节决定协作效率和长期可维护性
团队里有人用 Tab 缩进、有人用 4 空格、还有人混用，合并代码时 Git diff 会疯狂报“仅空格变更”，掩盖真实逻辑修改。更隐蔽的是属性值不加引号或用单引号，某些构建工具或服务端模板引擎会直接报错。
- 所有标签名、属性名必须小写：
<Img src="">和<INPUT TYPE="text">都是不合规的 - 属性值一律用双引号：
class="header-nav"，禁止class='header-nav'或class=header-nav - 自闭合标签不加斜杠：
<img src="a.jpg" alt="a">，不是<img src="a.jpg" alt="a" />（HTML5 规范明确标记为可选，加了反而易引发混淆） - 每个元素独占一行，嵌套层级用 2 个空格缩进（非 Tab），避免
<p>文字<span>高亮</span></p>挤在一行
最容易被跳过的其实是注释规则：<!-- 这里有个 -- -->中间两个连续短横会提前关闭注释，后面所有 HTML 变成纯文本；更麻烦的是在 JS 字符串里写了-->，哪怕藏在<script>里，也会被 HTML 解析器截断。这些错误不会报 JS 错误，但会让页面结构彻底失效。
