标准html页面必须以开头，且三者缺一不可；须置于最前以防乱码；确保多端体验；保障移动端适配；须在内并精准概括页面核心。
标准 HTML 页面必须以 开头，且 <code>、、 三者缺一不可——漏掉 <meta charset="UTF-8"> 或把 <title></title> 放进 ，中文乱码和 SEO 失效几乎是立刻发生的。
为什么 <meta charset="UTF-8"> 必须放在
浏览器解析 HTML 是流式读取的。一旦遇到非 ASCII 字符（比如中文），而此时还没看到字符集声明，就会按默认编码（如 ISO-8859-1）尝试解码，导致乱码已成定局，后续再补声明也无效。
-
<meta charset="UTF-8">应紧贴开始，最好在第一行 - 不要写成
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">—— 冗长且 HTML5 中已不推荐 - VS Code 里输入
!+ Tab 自动生成的模板已包含它，但手动新建文件时极易遗漏
<lang></lang> 属性不是可选项，而是影响真实体验的关键
lang 不只是给搜索引擎看的。屏幕阅读器靠它切换发音规则，拼写检查器据此校验词汇，甚至 CSS 的 :lang() 伪类也会响应它。
- 中文页面务必写
，而非zh或留空 - 若页面含英文段落，可用
<span lang="en">English text</span>局部覆盖 - 设错语言（如
lang="ja"却放中文）会导致读屏软件用日语腔调朗读汉字，理解成本陡增
<viewport></viewport> 不加或写错，移动端页面直接“缩成一团”
没有 <meta name="viewport">，手机浏览器会按桌面宽度（通常 980px）渲染，然后整体缩小显示，用户必须双指放大才能看清文字——这等于放弃移动体验。
- 最简可用写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 禁用缩放（如金融类操作页）可加
user-scalable=no，但会损害可访问性，慎用 -
maximum-scale=1.0和minimum-scale=1.0组合实际等同于锁定缩放，iOS Safari 已部分忽略该行为，别依赖它做“防误触”
<title></title> 放错位置或内容空泛，等于主动放弃搜索排名
<title></title> 必须在 内，且内容需准确概括当前页核心信息。它出现在浏览器标签页、搜索结果标题、微信分享卡片首行——是用户决定点不点开你的第一眼依据。
- 绝对不能写在
里，即使浏览器能显示，W3C 验证会报错，SEO 工具直接丢弃该页权重 - 避免纯品牌名如
<title>MySite</title>；应为<title>注册账号 - MySite</title> - 长度控制在 50–60 字符内，超长会被搜索引擎截断，关键信息尽量靠前
真正容易被忽略的，是 <meta name="description"> 这一行——它不参与页面渲染，但决定了搜索结果摘要是否吸引点击；很多人写了却填成“本网站提供各种服务”，等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
