中必须且只能放一个，紧随其后是（首个meta），再是等，script/link/style需按加载特性合理安排。
里能放什么，不是“能放就放”，而是有明确规范和顺序陷阱。不按规则来，轻则中文乱码、脚本执行异常，重则 SEO 失效、移动端布局崩溃。
必须放且只能放一个：<title></title>
这是 HTML5 规范唯一强制要求的 子元素。没有它，文档结构就不合法。
-
<title></title>必须是纯文本，不能嵌套任何标签（比如<span></span>或<strong></strong>） - 一个页面只允许存在一个
<title></title>，重复会导致浏览器忽略后续所有 - 它影响浏览器标签页标题、收藏夹显示、搜索引擎结果页（SERP）标题，别用空格或占位符糊弄
<meta charset="UTF-8"> 要紧挨 <title></title> 放，且必须是第一个 <meta>
它不是可选优化项，而是解析基石。缺它或放错位置，会立刻引发中文乱码、表单提交失败、fetch 响应解析异常等问题。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 浏览器只在
前 1024 字节内、且是第一个<meta>时才可靠识别charset - 不能写成
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">—— 已被弃用，兼容性差 - 不要把它塞到一堆
<script></script>或<link>后面；理想顺序就是：<title></title>→<meta charset="UTF-8">
<meta name="viewport"> 和其他 <meta> 的位置很关键
<meta name="viewport"> 不影响字符解析，但决定移动端渲染行为。放得太晚（比如在 CSS 或 JS 加载之后），可能导致页面先闪现未缩放状态再重排。
- 建议放在
<meta charset>之后、<link rel="stylesheet">之前 -
<meta name="description">、<meta name="keywords">等 SEO 相关 meta 可随后放置，但无强制顺序 - 避免在
中混入非标准<meta>（如自定义data-属性），部分爬虫或工具会跳过整段解析
<script></script>、<link>、<style></style> 的加载时机差异
这些资源类标签放 本身没问题，但行为天差地别：
-
<link rel="stylesheet">会阻塞渲染，建议只放关键 CSS；非关键样式用media="print"或 JS 动态注入 -
<script></script>默认同步执行并阻塞 HTML 解析；如需放，必须加defer（保证执行顺序）或async（不保证顺序，适合统计脚本） -
<style></style>内联 CSS 没问题，但超过 1KB 建议外链，否则拖慢首字节时间（TTFB） -
<base href>如果使用，必须放在所有相对 URL 引用标签（<link>、<script></script>、<img>）之前，否则基准失效
真正容易被忽略的，是 <meta charset> 的位置刚性——它不像其他 meta 那样“写了就行”，而是一个字节级的硬约束。很多线上问题查半天，最后发现只是它被 <script></script> 标签挡在了第二行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
