HTML 中 charset 必须是 内第一个标签，因浏览器仅扫描前512字节识别编码；若 超出该范围或前面存在 BOM、空格、注释等，将回退至 ISO-8859-1 导致中文乱码。
charset 必须是 里的第一个标签
浏览器在解析 HTML 时，只扫描
开头约 512 字节来识别编码；如果<meta charset="UTF-8"> 不在这范围内，就会 fallback 到 ISO-8859-1 或系统默认编码，导致中文 title、JS 字符串、CSS 注释全乱码（比如显示为 æ–‡）。常见错误包括：
-
<title></title>写在<meta charset>前面 - 文件开头存在 BOM（
EF BB BF），导致 DOCTYPE 前实际有不可见字节 - PHP 模板中
<?php标签前有空格或换行 - 服务器返回的 HTTP
Content-Type头带charset=GBK，覆盖了 HTML 中的声明
正确姿势：<meta charset="UTF-8"> 紧跟 ，前面不能有任何字符（包括注释、空行、BOM）。用 xxd index.html | head -c 20 检查文件开头是否为 3C 21 44 4F 43...（即 /code> 的 ASCII 十六进制）。
viewport 配置不能只写 width=device-width
只写 <meta name="viewport" content="width=device-width"> 会导致 iOS Safari 和部分 Android 浏览器初始缩放异常——页面渲染后自动缩小，文字小到无法阅读，用户必须双指放大才能操作。
立即学习“前端免费学习笔记（深入）”；
真正起效的最小安全配置是：
-
width=device-width：让布局宽度匹配设备物理宽度 -
initial-scale=1：强制以 1:1 比例初始渲染，禁用自动缩放 - 不加
user-scalable=no或maximum-scale=1：否则违反 WCAG 可访问性标准，iOS 16+ 已忽略该指令
完整写法：<meta name="viewport" content="width=device-width, initial-scale=1">。它不控制后续用户行为，只确保首次加载“所见即所得”。
lang 属性必须写在 根标签上，且格式要对
不是可选项，而是影响 SEO、屏幕阅读器发音、浏览器翻译、甚至 Google 多语言索引的核心信号。写错或缺失会直接导致英文页面不被 Google 收录，或中文页面被当成日文处理。
关键细节：
- 值必须符合 BCP 47 标准：简体中文用
zh-CN，繁体用zh-TW，英文用en-US，不能写成zh、cn或Chinese - 必须写在
开始标签内，不是<meta>，也不是 - 和
<meta charset>一样，标签前不能有任何内容（含 BOM），否则 IE 会触发怪异模式（Quirks Mode）
title 和 description 要按搜索引擎实际截断规则来写
Google 实际显示的 <title></title> 长度上限是 **53 个 UTF-8 字符**（非像素宽度），超过部分会被省略为 …；<meta name="description"> 在搜索结果中最多展示 **155–160 字符**，超长会被硬截断。
别信“60 字符”这种过时说法。实测发现：
- 含 emoji 或中文标点（如《》、【】）会更快占满字节数
- 同一站点多个页面共用相同
description，Google 会判定为低质内容，降权 -
<title></title>里堆砌关键词（如“SEO 工具|SEO 优化|SEO 教程|SEO 排名”）反而触发 spam 惩罚
建议写法：<title>核心关键词 - 页面功能 | 品牌名</title>，<meta name="description" content="用自然语句说明本页解决什么问题，含 1–2 个核心词，控制在 158 字符内">。
最常被忽略的一点：所有这些标签的有效性都依赖于一个前提—— 标签前 **零字节干扰**。哪怕一个空格、一个 BOM、一行注释，都可能让整个
