HTML中标签须置于最前，核心是规范字符编码（）、响应式视口（）及SEO/社交分享元信息（name/property），错位、遗漏或误用将导致乱码、重排、分享卡片异常等问题。
HTML 中添加 标签，核心就两件事：告诉浏览器“怎么解析页面”，以及告诉外部系统“页面是什么”。加错位置、写错属性、漏掉必要字段，都会让 SEO、分享、响应式或字符显示出问题。
meta 标签必须放在
浏览器从上到下解析 HTML， 和 这类基础元信息一旦延迟加载，可能触发重排或导致乱码。比如把 放在
- 所有
必须嵌套在内，不能出现在里（即使浏览器能容错，也不代表语义正确） -
应是中第一个标签，紧随开始标签之后 -
建议紧跟在后面，避免移动端初始缩放异常
charset 和 http-equiv 的区别：一个管解码，一个管模拟 HTTP 头
是 HTML5 简写，等价于旧写法 ，但前者更简洁、更被现代工具链支持；而 http-equiv 还能模拟其他响应头，比如缓存控制或刷新跳转，但多数已被现代标准淘汰或不推荐。
- 只用
—— 不要混用两种写法，否则可能被重复解析 -
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。
-
—— 每页唯一，建议 50–160 字，别堆砌关键词 -
—— 不必和 -
—— 必须是绝对路径，且图片需允许被爬虫访问（检查 robots.txt 和 CORS） - Twitter Card 需额外加
，否则只显示基础文本
移动端适配最常漏掉的 viewport 参数细节
是起点，但实际项目中经常因交互需求微调。比如防止用户缩放的 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"这类固定像素值，会导致横屏时内容被裁剪
真正难的不是加几个 标签，而是理解每条元信息背后被谁消费、在什么时机起效、以及当它缺失或错误时，具体哪个环节会崩——比如分享图挂了，先查 og:image 路径是否 200，再确认 CDN 是否屏蔽了爬虫 UA，最后看图片尺寸是否满足平台最小要求。这些细节，不跑一遍真实分享链路根本发现不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
