5. head 标签：页面的隐藏信息

本节目标：理解 <head> 的作用，知道它和 <body> 的区别，了解头部能放哪些东西。

<head> 是 HTML 文档的第二个元素（第一个是 <html>），它里面放的内容不会显示在浏览器窗口里。

head 和 body 的区别

<!DOCTYPE html>
<html>
<head>
  <!-- 这里的内容不会直接显示 -->
</head>
<body>
  <!-- 这里的内容用户能看到 -->
</body>
</html>

部分	可见性	内容
`<head>`	不可见	元数据：标题、字符集、样式表链接
`<body>`	可见	页面内容：文字、图片、链接

打个比方：<head> 像书的封面和目录，<body> 是正文。你看书时不会把封面当成正文来读，但封面告诉你书名、作者。

head 里能放什么

<head> 里可以包含这些元素：

<title>：页面标题（必需）
<meta>：各种元数据
<link>：引入外部资源，比如 CSS
<style>：内联 CSS 样式
<script>：JavaScript 代码
<base>：设置页面所有链接的基础 URL
<noscript>：浏览器不支持脚本时显示的内容

title 是必需的

在 <head> 的所有子元素里，只有 <title> 是必须有的。不写的话，浏览器标签页会显示文件名，而且搜索引擎会认为你的页面不专业。

<head>
  <title>我的个人网站</title>
</head>

<title> 的内容会显示在：

浏览器标签页
搜索引擎结果
收藏夹/书签

一个典型的 head

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面标题</title>
  <link rel="stylesheet" href="style.css">
</head>

这些 meta、link 的具体用法，后面几节会详细讲。现在你只需要知道：它们都在 <head> 里，控制页面的”幕后信息”。

Note

虽然 <head> 的内容不直接显示，但它影响页面怎么显示。比如 CSS 样式、字符编码设置，都必须在 <head> 里声明才能正常工作。

小结

<head> 放页面的元数据，用户看不到
<body> 放页面内容，用户看得到
<title> 是 <head> 里唯一必需的元素
样式表、字符集、脚本都放在 <head> 里

下一节，我们详细讲 <meta> 标签。