<head> 仅允许元信息标签，禁止放置 <h1> 等可见内容标签，否则浏览器自动移至 <body>；<title> 是唯一有效的 SEO 标题标记，<meta name=”title”> 无效；CSS 不加载多因路径或 MIME 类型错误；脚本执行报错常因 DOM 未就绪，应使用 defer 或移至 </body> 前。
<head> 标签不是用来放“页面标题文字”的容器，它是浏览器和搜索引擎读取元信息的专用区域，内容不会渲染到页面上。
为什么 <head> 里放了 <h1> 或 div 就不生效
浏览器遇到非法嵌套会自动纠错：把错放进去的 <h1>、<div>、<p> 等块级或内容型标签直接移出 <head>，塞到 <body> 开头。你写的看似在 head 里，实际运行时已经不在了。
- 常见错误现象：
<head><h1> 我的网站 </h1></head>→ 浏览器控制台可能没报错，但检查 DOM 结构会发现<h1>出现在<body>下第一层 - 合法子元素只有：
<title>、<meta>、<link>、<style>、<script>、<base>（极少用） - HTML5 不允许任何“可见内容”标签进入
<head>，连<span>都不行
<title> 和 <meta name=”title”> 到底谁管 SEO
<title> 是唯一真正起效的页面标题标记；<meta name="title"> 是无效写法，所有主流搜索引擎都忽略它。
- 正确写法：
<title> 用户看到的标签页文字 </title>—— 这个文字会出现在浏览器 tab、历史记录、搜索结果标题栏 - 错误写法：
<meta name="title" content="xxx">—— 没有任何作用，纯属误导 - SEO 场景下，
<title>应该简洁（50 字符内）、含核心关键词、避免堆砌 - 如果用 JavaScript 动态改
document.title，只影响当前页面展示，不改变初始 HTML 中的<title>，对爬虫无意义
link rel=”stylesheet” 放 head 里却没加载 CSS
不是位置问题，是路径或 MIME 类型导致的静默失败。浏览器不会报错，但样式就是不生效。
立即学习 “ 前端免费学习笔记（深入）”；
- 检查
href路径是否相对正确：比如 HTML 在/blog/post.html，而<link href="css/style.css">会尝试加载/blog/css/style.css，不是根目录下的/css/style.css - 服务器返回非
text/css的 Content-Type（如text/plain）会导致 Chrome 等浏览器拒绝解析，控制台 Network 面板看响应头就能确认 - 不要把
<link>写成自闭合形式：<link rel="stylesheet" href="a.css"/>在某些旧环境可能出问题，老老实实用<link rel="stylesheet" href="a.css"> - 多个
<link>加载顺序很重要：后加载的 CSS 会覆盖前面同名选择器的样式
script 标签放 head 里执行报错：XXX is not defined
脚本在 DOM 还没生成时就执行了，试图访问 document.getElementById 或 querySelector 找不到元素。
- 最简单解法：加
defer属性 ——<script src="a.js" defer></script>，保证按顺序执行且等 DOM 解析完再运行 - 如果必须同步执行（比如埋点 SDK），就别放 head，挪到
</body>前；或者用DOMContentLoaded事件包装逻辑 -
async适合完全独立的脚本（如统计代码），但它不保证执行顺序，也不等 DOM 就跑，不能依赖页面结构 - 现代项目常用模块化打包，这时
defer是更安全的默认选择
最容易被忽略的是：head 里的资源加载失败往往没有明显提示，得靠 Network 面板逐个点开检查状态码和响应头。DOM 移动、MIME 错误、路径偏差，三者藏得都很深。
