• 时间:
  • 分类:

HTML 文档只有两个核心区域：<body> 和 <head>。
<body> 放的是用户真正在屏幕上能看到的具体内容（比如文字、按钮和图片）；而 <head> 则是网页的“幕后配置区”。<head> 里的信息不会显示在页面的正文里，但它主要负责告诉浏览器这网页该怎么显示、告诉搜索引擎这网页讲了啥内容，以及规范在社交软件中转发链接时图文卡片长什么样。

别觉得看不见就不重要。如果 <head> 没配好，页面很容易出现中文乱码、加载卡白屏，或者在各大搜索引擎里压根搜不到你。

一、 <head> 应该写在哪？

<head> 标签必须放在 <html> 标签内部，并且一定要写在 <body> 前面。
因为浏览器读取代码的规则是死理，永远“从上到下”。它必须先拿到 <head> 里的各项前置配置和规则，才能正确去画后续 <body> 里的肉眼可视内容。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>基础页面定义</title>
  </head>
  <body>
    <!-- 页面正文内容 -->
  </body>
</html>

二、 <title>：网页的“大名”

1. <title> 和 <h1> 别搞混

  • <title> 是整个网页的名字。它不占页面里的排版空间，只显示在浏览器的最顶端标签页上、浏览器的收藏书签里，以及搜索结果的首行蓝字上。每个页面只能写一个 <title>。
  • <h1> 则是写在你的网页正文里、一眼就能看到排版大标题。

2. <title> 的三个实际用处

  • 找网页必备：大家上网时经常开十几个标签。标签页最上面那一小条字就是 <title>，写清楚了才能让用户一眼找到并切回你的网页。
  • 默认的收藏名字：用户点击收藏你的网页时，浏览器会自动抓取 <title> 里的字当做保存名字，不需要手打。
  • 搜索引擎的“命门”：百度、谷歌等搜索引擎把 <title> 看得极重。你的 <title> 里包含了什么词，直接决定了别人搜哪些词能找到你。

三、 <meta>：网页的“说明书”

<meta> 标签专门用来存各种“设置说明”和“摘要”，全靠它跟浏览器以及搜索引擎的爬虫沟通。

1. 字符编码：<meta charset="utf-8">

计算机底层只认识 0 和 1。想在屏幕上正常显示中文字，就需要指定一本“翻译字典”。早期错用了只包含英文字母的字典，大家在看中文网页时就会满屏乱码。

UTF-8 是现在全球通用的标准，支持世界上几乎所有的文字。加上这句，只要是现代浏览器就绝不会乱码。
注意：这行代码必须是 <head> 里的第一行！要确保浏览器在往下遇到任何中文字之前，已经被通知要用这本“最全字典”去解码。

<head>
  <meta charset="utf-8"> <!-- 必须放在其他所有标签之前 -->
  <title>基础页面</title>
</head>

2. 页面简介：<meta name="description">

这个标签是专门留给搜索引擎爬虫看的。你在这里写的一段话，会直接用来当作搜索结果里大标题下方的那段灰色摘要文字。

<meta name="description" content="本文为你拆解HTML头部的6大核心配置，帮你彻底解决页面乱码与搜索盲区大坑。">
  • 怎么写：字数建议控制在 50 到 160 字之间。太短讲不清重点，太长了在搜索页面会被截断显示成省略号。
  • 放关键词：把跟网页最相关的“干货名词”写成自然通顺的一句话，以此吸引别人点击。（提示：以前有一种专门罗列关键词的 <meta name="keywords"> 标签，现在已经被各大搜索引擎当做作弊废弃了，千万别再写。）

3. Open Graph (OG) 标签：社交图谱属性数据

Open Graph（开放图谱协议）旨在解决链接分享时的富媒体展示问题。

真实场景说明：
假设你写了一篇文章，把文章链接发到微信聊天框或朋友圈。

  • 没有配置 OG 标签时：微信只能识别出一个干巴巴的蓝色超链接，或者随机瞎抓取页面里的一张图（有可能抓成了毫不相干的微信付款码或者网站的 LOGO）作为配图，很难看。
  • 按规范配置 OG 标签后：当你发出链接时，微信会自动将这个链接渲染成一张“漂亮的卡片”——有你专门指定的高清封面图、加粗的独立标题，以及两行核心摘要。

常见的刚需级配置项包含这三条：

<meta property="og:title" content="社交卡片独立抓取的加粗标题">
<meta property="og:description" content="社交卡片下的描述区域文本">
<meta property="og:image" content="https://xxx.com/cover.jpg"> <!-- 建议采用 1200x630 的通用规则外链图 -->

四、 网站小图标：<link rel="icon">

也叫 favicon，就是日常打开网页时，显示在浏览器最顶端标签页最左边的那个微型图标，你把网页存到手机桌面时通常也是用它做图标。

现在不用死磕老旧的 .ico 格式了。建议直接拿一张你的 .png 或 .svg 图片放进去，主流终端现在全兼容：

<link rel="icon" href="/favicon.png" type="image/png">

五、 引入外部文件：CSS 和 JavaScript

为了后续修改方便并让多个页面能共用一套代码，我们一般不会把样式和交互全糊在一个文件里，而是把负责“长啥样”的 CSS 和负责“有什么动作”的 JS 单独存成文件，再通过头部把它们接进网页来。

1. 引入 CSS

<link rel="stylesheet" href="style.css">

当浏览器读到这句代码时，会故意停一下加载页面的手头工作，专门去等 style.css 文件下载完。这么干是为了保证用户第一眼看到的就是带颜色、带排版的工整网页，而不是先看到毫无样式的黑白丑文章，等 CSS 来了才突然“闪一下”大变样。

2. 引入 JS 与防卡顿神器 defer

如果不加防备直接引入 JS 文件（比如写成 <script src="script.js"></script>）极易出大事故：浏览器遇到这行代码，会立刻定住网页内容的读取进度，非去下载再运行这写 JS 代码不可。万一代码里写了“点击网页最下面的XX按钮”，但刚才浏览器因为被卡住还没画出这个按钮，整个网页就会当场报错崩溃死在那。

想解决这个问题，加上 defer 参量就行了：

<script src="script.js" defer></script>

加上 defer，其实就是给浏览器传了个话：“你去后台悄悄把这 JS 下载着，别耽误前面正常读代码铺网页。等到整个网页的内容全被你按顺序画完了，你再把下载好的 JS 拿出来运行”。完美做到画面秒开、零卡顿。

六、 声明当前网页的语言：<html lang="zh-CN">

写在代码最顶层的 <html> 标签上，用来向外界明确声明这个网页的主体是什么语言。看似是个没啥用的细节，但不写很容易踩三个暗坑：

  • 坑死搜索引擎排名：像谷歌这种面向全球的引擎，如果搞不清你这是什么语言的区域网，肯定不敢轻易把你推在中文搜索的高权重名次里。
  • 乱弹机器翻译报错：经常用 Chrome 浏览器的朋友可能会遇到，进了某个明明都是方块字的中文网，浏览器却抽风瞎弹出一个框问“需不需要把此页翻译成中文”。这就是因为没标语言导致它犯糊涂了。
  • 逼疯视障读屏用户：盲人上网用的是专门听网页念字的辅助系统。如果你没明确告知语言，有的老外系统的读屏软件，就会拿满嘴洋腔怪调硬念你的中文字，完全听不懂。

小结与下篇预告

<head> 的 7 个核心配置：

  1. <meta charset="utf-8">：防乱码。
  2. <title>：定页面大名、抢搜索排名。
  3. <meta name="description">：提供搜索页的灰色摘要。
  4. OG 标签：搞定微信转发卡片的图文展示。
  5. <link rel="icon">：挂载标签栏小图标。
  6. <link>：引入 CSS 铺样式；<script defer> 引入 JS 加动作且防卡顿加载。
  7. <html lang="zh-CN">：敲定网页所属语言。

配完<head>，终于要进入能在网页上写字的 <body> 区域了。
但很多人上来就会踩一个坑：为了让字变大，直接写一大堆 <span> 和 <div> 然后强行加粗变大。这种做法在机器眼里完全是无效信息。

在下一篇《05. HTML标题与段落》里，我们会讲讲机器是怎么“读”网页的，以及怎么用一套严丝合缝的标题（h1~h6）和段落（<p>）搭出清晰的页面骨架。

标签: none

添加新评论