HTML head 元素
上一课聚焦文档 head 的一个子元素：title。现在把镜头拉远，看 head 元素本身——这个容器存放页面的元数据，供浏览器、搜索工具和链接资源使用。访问者不会像读主视图里的故事那样去“读”head。他们通过标签页标题、正确的字符、移动端缩放，以及在 body 内容绘制之前加载的样式表，来感受它的效果。
head 是做什么的
<head>...</head> 位于 <html> 内部，通常紧跟在开始的 html 标签之后、<body> 之前。它是文档的“控制室”，负责元数据和资源链接。它不是可见的横幅。你以后用 <header> 元素搭建的可见页面横幅，是另一种标签，承担另一种工作。
直接回答
把元数据放进 <head>...</head>：一个 title，通常还有 <meta charset="UTF-8">，移动端布局时常加 viewport 的 meta，使用外部 CSS 时再加上 <link rel="stylesheet" href="...">。可见的标题、段落、图片和交互界面放在 <body>。title 是 head 的一个重要子元素——它不能代替整个 head。
常见子元素一览
📊 常见 head 子元素
| 元素 | 作用 |
|---|---|
| title | 标签页 / 文档标签 |
| meta charset | 字符编码（UTF-8） |
| meta viewport | 移动端宽度与缩放提示 |
| link stylesheet | 外部 CSS 文件 |
| style | 可选的内部 CSS |
| script | 可选脚本（放置习惯各异；许多初学者在 body 末尾加载） |
实用的入门 head
第一天并不需要把所有可能的 meta 标签都写上。可靠的初学者 head 会覆盖编码、移动端 viewport、文档标题，并在 CSS 单独成文件时加上样式表链接。
实用的入门 head
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello</h1>
<p>Visible content lives in the body.</p>
</body>
</html>阅读示例
meta charset="UTF-8"告诉浏览器如何解码字符——包括表情符号以及前几课中的非拉丁文字viewport帮助移动浏览器使用设备宽度，而不是把桌面布局缩成一小块title给标签页贴上标签，正如你在 page-title 一课中练习的那样link rel="stylesheet"挂上styles.css，而不必把 CSS 规则塞进每一个 HTML 文件- 访问者在页面上读到的一切，都位于
body之下
charset 优先，尽早放在 head 里
把 charset 的 meta 放在 head 靠前的位置，这样浏览器在解释文档其余文本之前就知道编码。除非有罕见的旧约束另有要求，UTF-8 就是现代默认。缺少或过晚声明 charset，是字符“乱码”、看起来像随机损坏的经典原因。
Viewport 与移动浏览器
没有 viewport meta 时，许多手机会假定一块很宽的桌面画布，再把整页缩小。常见入门写法 width=device-width, initial-scale=1.0 告诉浏览器匹配设备宽度，并以正常缩放起步。你稍后会用 CSS 细化响应式设计；viewport 是 HTML 一侧的握手，让那些布局在手机上真正可用。
从 head 链接 CSS
外部样式表让呈现与结构分离。head 里带 rel="stylesheet" 和 href 路径的 link 元素，是初学者友好的挂接 CSS 方式。路径遵循你先前学过的文件路径思路。如果 CSS 文件缺失，HTML 仍然能工作——只是看起来没有样式。
head、body 与 header
head——元数据与资源链接；不是主要可读正文body——访问者阅读并交互的可见内容header——body内用于横幅或引言块的可见分区元素（你将在后续布局课中使用）
不要把head改名为header，指望它们是别名。它们是不同的元素。混淆会导致无效或无效用的标记。
脚本与 head（初学者说明）
脚本可以出现在 head 或 body 中。许多教学页面把简单脚本放在 body 末尾加载，好让 HTML 结构先存在。高级加载策略以后再学。对本课来说，要知道：script 可以作为 head 的子元素，但可见内容仍然不属于 head。
在编辑器中练习
- 从包含
html、head和body的基础 HTML 骨架开始。 - 在
head内加入 UTF-8 charset、viewport meta，以及清晰的title。 - 若有简单的
styles.css，用link挂上（或创建一个空文件，让路径真实存在）。 - 所有可见文字和标题只放在
body中。 - 用查看源代码或 DevTools 的 Elements，确认
head区段符合你的意图。 - 暂时去掉 viewport，在窄窗口或手机模拟器中重新加载（若可以），留意缩放感觉如何不同——然后再恢复它。
容易犯的错误
- 把段落、图片或主标题只放进
head，仿佛它是页面画布 - 忘记 charset，导致特殊字符和表情符号损坏
- 跳过 viewport，却奇怪移动端布局缩放怪异
- 把
head（元数据）与header（课程后面的可见分区）搞混 - 以为只要有
title就够了，在多语言页面上漏掉 charset - 用错误路径链接样式表，CSS 从不加载时却责怪 HTML
小结
head存放元数据与资源链接；body存放可见内容- 入门组件：charset、viewport、title，以及常常还有 CSS 的
link title是head的一个子元素，不能代替headhead与可见的header不是同一个元素- 尽早放置 charset，让浏览器正确解码文档
🧠 测试您的知识
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部