和必须置于最开头，前者是html5唯一强制子元素，后者若不在前1024字节首个位置会导致中文乱码、爬虫抓取失败。
里不是塞几个 <meta> 就算完事，浏览器和爬虫靠它判断编码、缩放、资源加载顺序甚至是否该渲染页面。写错位置或漏掉关键项，轻则中文变方块、移动端缩放失灵，重则首屏白屏、SEO 全军覆没。
必须存在的两个标签：<title></title> 和 <meta charset>
<title></title> 是 HTML5 唯一强制要求的 子元素；没它，文档结构就不合法。<meta charset="UTF-8"> 虽非强制，但缺失会导致中文乱码、表单字段截断、Ajax 响应解析失败——尤其在旧版 Android WebView 中，它必须是 前 1024 字节内第一个 <meta>，否则直接被忽略。
-
<title></title>只能出现一次，内容不能含 HTML 标签（比如<span></span>），否则被完全忽略 - 两者建议始终放在
最开头，中间别被注释、<script></script>或其他<meta>挡住 - 不要用
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">—— 这是过时写法，部分浏览器不识别
<meta name="viewport"> 必须紧接 <meta charset> 后面
移动端不加这个，或 content 写错（比如漏掉 initial-scale=1.0），iOS Safari 会默认以 980px 宽度渲染，文字小得看不清、点击区域错位。标准写法是：<meta name="viewport" content="width=device-width, initial-scale=1.0">。
- 别写成
width=375或固定像素值，响应式布局直接失效 - 如果用了
<meta http-equiv="X-UA-Compatible" content="IE=edge">（仅 IE 场景），它得放在viewport前面，否则 IE11 可能无视viewport - 某些 CMS 或构建工具会自动注入
viewport，但若你手动写了，就得确保它没被重复或覆盖
<link rel="stylesheet"> 和 <script></script> 的属性与位置陷阱
<link rel="stylesheet"> 默认同步阻塞 HTML 解析和首屏渲染；<script></script> 放在 里且没加控制属性，会中断 DOM 构建，造成白屏延迟。
- CSS 必须用
<link rel="stylesheet">，别在 CSS 文件里用@import—— 后者触发额外 HTTP 请求，且阻塞更久 - JS 脚本必须加
defer（推荐）或async：defer保证执行顺序且不阻塞解析；async适合独立脚本（如统计代码） - 避免在
里写内联<script></script>，除非逻辑极小；更别放未包裹的 JS 代码，它会同步执行并中断 DOM 构建
单页应用（SPA）中动态更新
React/Vue 等框架默认只在首屏生成一次 ，路由切换后 <title></title> 或 <meta name="description"> 不会自动更新——搜索引擎爬虫看到的永远是首页的标题和描述。
- 纯前端项目必须用
react-helmet（React）或unhead（Vue/Nuxt）等专用库，否则 SEO 失效 - 不能只靠
document.title = 'xxx'—— 它只改标题，不更新<meta>、<link>等其他头部内容 - 服务端渲染（SSR）项目仍需注意：若
内容由客户端 JS 动态注入，爬虫可能抓不到，必须确保关键元数据在 HTML 初始响应中已存在
最常被跳过的其实是顺序和边界条件：比如 <meta charset> 被注释挡住、viewport 在 title 后隔了三个 <meta>、或者 SPA 里只改了 title 却忘了同步 description 和 og:title。这些地方不出错则已，一出就是静默失效——浏览器不报错，但用户和爬虫已经收不到正确信息了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
