HTML中标签须置于最前，核心是规范字符编码（）、响应式视口（）及SEO/社交分享元信息（name/property），错位、遗漏或误用将导致乱码、重排、分享卡片异常等问题。
HTML 中添加 <meta> 标签，核心就两件事：告诉浏览器“怎么解析页面”，以及告诉外部系统“页面是什么”。加错位置、写错属性、漏掉必要字段，都会让 SEO、分享、响应式或字符显示出问题。
meta 标签必须放在
浏览器从上到下解析 HTML，<meta charset> 和 <meta name="viewport"> 这类基础元信息一旦延迟加载，可能触发重排或导致乱码。比如把 <meta charset="UTF-8"> 放在 <title></title> 后面，中文标题可能短暂显示为方块。
- 所有
<meta>必须嵌套在内，不能出现在里（即使浏览器能容错，也不代表语义正确） -
<meta charset>应是中第一个标签，紧随开始标签之后 -
<meta name="viewport">建议紧跟在<meta charset>后面，避免移动端初始缩放异常
charset 和 http-equiv 的区别：一个管解码，一个管模拟 HTTP 头
<meta charset="UTF-8"> 是 HTML5 简写，等价于旧写法 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">，但前者更简洁、更被现代工具链支持；而 http-equiv 还能模拟其他响应头，比如缓存控制或刷新跳转，但多数已被现代标准淘汰或不推荐。
- 只用
<meta charset="UTF-8">—— 不要混用两种写法，否则可能被重复解析 -
http-equiv="refresh"已基本废弃，JS 重定向或服务端 302 更可控 -
http-equiv="X-UA-Compatible"只对 IE 有效，现在可安全移除
SEO 和社交分享依赖的 name 与 property 元标签
搜索引擎读 name="description" 和 name="keywords"（后者已基本失效），而微信、微博、Facebook 等平台依赖 Open Graph（property="og:xxx"）或 Twitter Card（name="twitter:xxx"）来提取标题、图片和摘要。缺任意一项，分享卡片就可能变成纯链接或默认站标。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
-
<meta name="description" content="一句话说明页面内容">—— 每页唯一，建议 50–160 字，别堆砌关键词 -
<meta property="og:title" content="分享时显示的标题">—— 不必和<title></title>完全一致，可针对传播优化 -
<meta property="og:image" content="https://example.com/thumb.jpg">—— 必须是绝对路径，且图片需允许被爬虫访问（检查 robots.txt 和 CORS） - Twitter Card 需额外加
<meta name="twitter:card" content="summary_large_image">，否则只显示基础文本
移动端适配最常漏掉的 viewport 参数细节
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 是起点，但实际项目中经常因交互需求微调。比如防止用户缩放的 user-scalable=no 在 iOS 上已无效，而 maximum-scale=1.0 仍起作用但会损害可访问性。
- 基础必写：
width=device-width（匹配设备逻辑宽度）、initial-scale=1.0（避免双击缩放） - 慎用：
user-scalable=no—— WCAG 不合规，iOS 13+ 已忽略该值 - 注意：
minimum-scale和maximum-scale会影响辅助功能，部分屏幕阅读器会绕过限制 - 不要写成
content="width=375"这类固定像素值，会导致横屏时内容被裁剪
真正难的不是加几个 <meta> 标签，而是理解每条元信息背后被谁消费、在什么时机起效、以及当它缺失或错误时，具体哪个环节会崩——比如分享图挂了，先查 og:image 路径是否 200，再确认 CDN 是否屏蔽了爬虫 UA，最后看图片尺寸是否满足平台最小要求。这些细节，不跑一遍真实分享链路根本发现不了。
