meta charset必须放在head内最前位置，viewport需紧随其后且内容严格匹配，description须每页唯一并控制在120–155字符，lang属性必须写在html标签上且大小写敏感。
meta charset必须放在最前面，否则乱码不可逆
浏览器解析HTML是流式的，一旦遇到中文、emoji等非ASCII字符，而此时还没读到meta charset="UTF-8"，就会按默认编码（如ISO-8859-1）尝试解码——结果不是标题变问号，就是Uncaught SyntaxError: Invalid or unexpected token直接卡死JS执行。
常见错误包括：
-
meta charset写在<title>前面，导致title本身乱码 - 同时存在
meta charset="UTF-8"和meta http-equiv="Content-Type" content="text/html; charset=UTF-8"，部分浏览器会忽略全部 - 服务端已返回
Content-Type: text/html; charset=UTF-8就删掉该标签（规范要求双保险，必须保留） - 文件开头有BOM或注释（如
<!-- comment -->），把meta charset挤出前1024字节范围
正确顺序只有一种：<meta charset="UTF-8">必须是<head>内第一个或第二个标签（仅可排在<title>之后）。
viewport不写或写错，移动端页面等于没做
meta name="viewport"不是“锦上添花”，而是移动端渲染的开关。不加这行，iOS Safari和多数Android浏览器会强制以980px宽度渲染，再整体缩放——用户看到的是小得看不清的文字、点不准的按钮、意外出现的横向滚动条。
立即学习“前端免费学习笔记（深入）”；
标准写法只有这一行：<meta name="viewport" content="width=device-width, initial-scale=1.0">
必须避开的坑：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 写死
width=375或width=750：iPad、折叠屏、大屏安卓机全失效 - 加
maximum-scale=1.0或user-scalable=no：违反WCAG，iOS 16+和Chrome 2025+已部分忽略，且VoiceOver双指缩放直接失灵 - 用
initial-scale=1.5等非1值：导致字体/布局比例错乱，fixed元素定位漂移 - 靠后放置：SSR生成的HTML里若被CMS自动插入其他meta标签顶到后面，iOS Safari可能根本不用它
验证是否生效：打开DevTools → Elements → 查看meta[name="viewport"]是否存在且content值完全匹配；或用JS运行document.documentElement.clientWidth，iPhone 13模拟器应返回390而非980。
description每页必须唯一，空着比乱写强
meta name="description"不参与排名，但Google、Bing等引擎会直接把它当搜索结果摘要展示。写得空洞、堆砌、超长或与正文无关，用户一眼划走——这不是“效果差”，是把点击率主动让给竞品。
实操要点：
- 长度严格控制在120–155字符（含空格），超出部分会被截断，末尾不补省略号
- 开头嵌入页面核心关键词，例如商品页写
"无线蓝牙耳机|主动降噪|30h续航|XX品牌旗舰店"，别写"欢迎访问我们的网站" - 避免“本网站”“本页面”等无意义主语，直接说事实：“iPhone 15 Pro 钛金属机身，A17 Pro 芯片，支持 USB-C 传输与 ProRes 视频录制”
- 禁止包含电话、邮箱、URL（品牌官网域名除外），也别用标点堆砌
- CMS模板中必须动态注入，不能所有页面共用同一段文案
如果实在写不出精准描述，留空比套模板更安全——搜索引擎宁可不展示摘要，也不愿展示低质内容。
lang属性必须写在上，不是可选项
lang不是装饰，是可访问性硬性依赖。缺失或写错，屏幕阅读器会按默认语言（通常是英语）朗读中文内容，声调错乱、停顿失当，对视障用户构成实质性障碍。
关键规则：
- 必须出现在
<html>标签上，如<html lang="zh-CN">，大小写敏感，不能写成zh-cn或zh - 繁体站点用
zh-TW或zh-HK，不能混用 - 子元素若切换语言（如引一段英文文献），才局部加
lang="en"覆盖 - 多语言混合内容（如中英双语菜单）必须每个片段单独标注
lang
容易被忽略的是：很多团队只关注SEO和移动端，却忘了lang是WCAG 2.1 AA级合规的强制项，审计工具（如axe）会直接报错，且无法通过CSS或JS补救。
