必须将置于内最前位置(注释和空格除外),确保浏览器在解析前1024字节内即识别编码,避免中文乱码、SEO失败及读屏异常;文件须保存为UTF-8 without BOM,且不可省略。

直接改 HTML 文件本身没问题,但“规范”不是指格式漂亮,而是让浏览器、搜索引擎、屏幕阅读器都能按你预期的方式解析和渲染——很多看似无害的修改,一上线就导致中文乱码、SEO 掉量、读屏软件念错内容。
charset 必须是
里的第一个元标签
浏览器在解析 HTML 时,前 1024 字节内如果没看到 ,就会用默认编码(比如 ISO-8859-1)去读后续内容。一旦页面含中文, 或 里的汉字立刻变乱码,爬虫可能直接放弃抓取。
- 错误写法:
(我的网站 charset在title后) - 正确顺序:
紧跟在开始之后,前面不能有任何其他标签(注释除外) - 额外检查:确保文件本身保存为
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 的本质是告诉浏览器:“这个 占据接下来 N 行同一列的位置”,后续 N−1 行中该列必须留空。很多人手动删行或复制粘贴时,忘了删掉对应列的 ,结果表格列数错位、JS 读取 row.cells 时返回 undefined。,看右侧“Layout”面板是否显示网格对齐
必须独立,禁止嵌套 ; rowspan="3" 后,接下来两行同一列不能出现
scope="row" 或 headers 属性,否则读屏软件无法关联数据行与标题lang 值,也建议用 W3C Markup Validator 扫一遍,或者至少在 Chrome 里打开开发者工具,看 Console 有没有 Failed to decode data 类报错——那往往就是 charset 和文件编码不匹配的信号。











