必须有且仅有一个，因为它是html规范唯一强制要求的子元素；必须为中第一个可执行标签，否则中文乱码；须紧随其后，否则移动端布局崩溃。
标签不是装饰性容器，它是浏览器和搜索引擎解析页面的起点。没有它，<title></title> 无法生效，UTF-8 编码可能乱码，viewport 失效导致移动端布局崩溃，连 favicon.ico 都不会加载。
为什么 <title></title>
<title></title> 是 中唯一强制要求的子元素。浏览器遇到缺失 <title></title> 的文档时，虽不报错，但标签页显示为空白或“无标题文档”，收藏夹、历史记录、SEO 摘要全失效。
- 内容只能是纯文本，不能嵌套
<span></span>、<em></em>等标签 - 长度建议控制在 50–60 字符内，超长会被截断（尤其移动端搜索结果）
- 多个
<title></title>会导致行为不可预测：Chrome 取第一个，Firefox 可能忽略后续，SSR 渲染时易被覆盖
<meta charset="UTF-8"> 必须放在最前面
这个 <meta> 声明必须是 中**第一个**可执行的标签（紧随 开始标签之后）。晚于它出现的任何非 ASCII 字符（比如中文标题、注释里的汉字）都可能被错误解析为 ISO-8859-1，造成乱码。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 不要写成
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">—— 已过时，且不如charset属性可靠 - 服务器响应头中若已设置
Content-Type: text/html; charset=utf-8，该<meta>仍需保留，作为 fallback - HTML5 不再支持
，别再用
<link rel="stylesheet"> 和 <script></script> 放
把 <link rel="stylesheet"> 放在 是常规操作，但默认会阻塞 HTML 解析；而 <script></script> 默认更是同步执行、完全阻塞。
- 关键 CSS 可以内联到
<style></style>中（避免额外请求），非关键 CSS 加media="print"或用loadCSS异步加载 -
<script></script>若必须放，务必加defer（保证执行顺序，不阻塞 HTML 解析）或async（无依赖脚本，不保证顺序） -
<link rel="preload">可提前获取字体、关键 JS，但仅作提示，不改变执行时机
<meta name="viewport"> 不只是给手机用的
这个 <meta> 不只影响 iPhone Safari，它还决定 Chrome 桌面版缩放行为、Windows Edge 的 DPI 适配、甚至 Electron 应用窗口的初始渲染比例。
- 最简安全写法是
<meta name="viewport" content="width=device-width, initial-scale=1"> - 禁用缩放（
user-scalable=no）已被 iOS 10+ 忽略，且违反 WCAG 可访问性标准 - 如果页面明确不需要响应式（如后台管理页固定宽度），也应显式设
width=1200，避免浏览器使用默认 980px 宽度触发缩放逻辑
最容易被忽略的是顺序问题：<meta charset> 第一，<meta viewport> 紧跟其后，<title></title> 再之后 —— 这个顺序直接影响首屏文字是否乱码、是否闪动、是否意外缩放。现代框架（如 React Helmet）能动态更新，但静态 HTML 里一旦写错，就只能靠用户刷新来补救。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
