必须将置于内最前位置（注释和空格除外），确保浏览器在解析前1024字节内即识别编码，避免中文乱码、SEO失败及读屏异常；文件须保存为UTF-8 without BOM，且不可省略。
直接改 HTML 文件本身没问题，但“规范”不是指格式漂亮，而是让浏览器、搜索引擎、屏幕阅读器都能按你预期的方式解析和渲染——很多看似无害的修改，一上线就导致中文乱码、SEO 掉量、读屏软件念错内容。
charset 必须是 里的第一个元标签
浏览器在解析 HTML 时，前 1024 字节内如果没看到 <meta charset="UTF-8">，就会用默认编码（比如 ISO-8859-1）去读后续内容。一旦页面含中文，<title></title> 或 <meta name="description"> 里的汉字立刻变乱码，爬虫可能直接放弃抓取。
- 错误写法：
<title>我的网站</title> <meta charset="UTF-8">（charset在title后） - 正确顺序：
<meta charset="UTF-8">紧跟在开始之后，前面不能有任何其他标签（注释除外） - 额外检查：确保文件本身保存为
UTF-8 without BOM，VS Code 右下角状态栏点编码名可切换
lang 属性不能省，也不能瞎写
不是装饰，它直接影响三件事：屏幕阅读器发音、浏览器翻译触发逻辑、搜索引擎地域语言识别。写错或不写，等于主动屏蔽视障用户和本地化流量。
- 中文网站必须用
zh-CN（简体）、zh-TW（繁体）等具体子标签，别只写zh - 多语言站点需动态输出：
，不能硬编码成固定值 - 如果用了 i18n 框架（如 Vue I18n），确保
lang值与当前激活语言一致，否则 Chrome 可能拒绝翻译整页
字体声明要兜底，别只写“微软雅黑”
只写 font-family: "Microsoft YaHei" 是高危操作：Mac、Linux、iOS 上根本不存在这个字体，浏览器会 fallback 到系统默认（可能是 Times New Roman），排版瞬间崩坏。
- 必须用字体栈，从高优先级到通用族：例如
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif - 衬线体正文慎用：除非是印刷感强的杂志页，否则
"Noto Serif"这类在小字号、低 DPI 屏幕上易发虚 - 避免用系统字体名拼接中文名，如
"微软雅黑", "PingFang SC"—— 中文逗号在某些编辑器里会变成全角，导致解析失败
表格结构别靠“看着对”，rowspan 是空间锁定不是拉伸
rowspan 的本质是告诉浏览器：“这个 <td> 占据接下来 N 行同一列的位置”，后续 N−1 行中该列必须留空。很多人手动删行或复制粘贴时，忘了删掉对应列的 <code><td>，结果表格列数错位、JS 读取 <code>row.cells 时返回 undefined。
- 检查方法：打开 DevTools → Elements → 选中
<table>，看右侧“Layout”面板是否显示网格对齐 <li>编辑原则：每行 <code><tr> 必须独立，禁止嵌套 <code><tr>；<code>rowspan="3"后，接下来两行同一列不能出现<td> <li>无障碍补救：给跨行单元格加 <code>scope="row"或headers属性，否则读屏软件无法关联数据行与标题
最常被忽略的其实是“改完要不要验证”。哪怕只是换了个 lang 值，也建议用 W3C Markup Validator 扫一遍，或者至少在 Chrome 里打开开发者工具，看 Console 有没有 Failed to decode data 类报错——那往往就是 charset 和文件编码不匹配的信号。
