必须放在最开头，因浏览器需在前1024字节内确定编码，否则按默认编码（如iso-8859-1）解码，导致中文变方块、表单乱码、ajax失败；旧版android webview更严格，要求其为首个标签。
为什么必须放在最开头
因为浏览器解析 HTML 时，前 1024 字节内若没遇到 <meta charset="UTF-8">，就会按默认编码（如 ISO-8859-1）解码——中文直接变方块，表单提交乱码，Ajax 响应解析失败。旧版 Android WebView 更严格：只认它作为第一个 <meta>，中间插个注释或 <title></title> 都会让它失效。
-
<title></title>和<meta charset="UTF-8">必须紧挨着放，顺序无所谓，但两者之间不能有任何其他标签、注释或空白行 - 别用过时写法
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">，HTML5 不保证兼容 - 构建工具（如 Vite/Webpack）生成的 HTML 模板里，有时会漏掉或错位这个标签，要手动检查输出后的实际 HTML 文件开头
viewport 设置错一个参数，移动端就废了
<meta name="viewport"> 不是可有可无的装饰，它是移动端渲染的开关。iOS Safari 默认以 980px 宽度渲染页面，不加或写错，文字小得看不清，点击区域全偏移。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 标准写法只有这一种：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 禁止写成
width=375或固定像素值，响应式布局立即失效 - 如果项目还要兼容 IE（比如内网系统），
<meta http-equiv="X-UA-Compatible" content="IE=edge">必须放在 viewport 前面，否则 IE11 会无视 viewport - 某些 CMS 或 SSR 框架会自动注入 viewport，你要确认没被重复插入——两个同名 meta 会导致行为不可预测
link 和 script 在 head 里的位置陷阱
CSS 和 JS 放在 里，不是“塞进去就行”，顺序和属性直接影响白屏时间和首屏渲染。
- CSS 必须用
<link rel="stylesheet">，别在 CSS 文件里用@import——它会触发额外 HTTP 请求，且阻塞更久 -
<script></script>默认同步执行，会中断 DOM 构建；必须加defer（推荐）或async；SPA 路由切换时动态更新<title></title>，得靠框架 API（如 React Helmet、Vue UseHead），纯 HTML 不生效 - 避免内联
<script></script>，尤其别把未包裹的 JS 代码直接写在里——它会立刻执行并阻塞解析 - 关键资源（如字体、首屏 CSS）可用
<link rel="preload">提前加载，但别滥用，预加载太多反而拖慢主资源
favicon 和结构化数据怎么放才不拖慢页面
favicon 看似小事，但写法不对会导致额外请求或兼容问题；JSON-LD 这类结构化数据放错位置，可能阻塞 HTML 解析。
- favicon 推荐写法：
<link rel="icon" href="/favicon.ico" sizes="any">，sizes="any"是为 Edge 兼容，别只写rel="shortcut icon"这种过时写法 - 结构化数据（如 JSON-LD）务必放在
末尾，紧贴，避免大段脚本提前阻塞解析 -
<base>标签虽不常用，但一旦使用，必须放在所有相对 URL 引用之前（比如<img src="logo.png">），否则路径解析全错 - SEO 相关 meta（如
description、keywords）不是越多越好，搜索引擎只取前 155–160 字符，超长会被截断，还可能被判定为堆砌
<meta charset> 的位置和 <script></script> 的加载策略——它们不出错时没人注意，一出就是首屏白屏或中文全乱码，排查起来往往要倒查三遍 HTML 输出流程。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
