在网页html代码中head表示

你打开任何一个网页的源代码，第一眼看到的代码就是<head>。它夹在<html>和<body>之间，网页像一道窄门。代码门外是网页用户能看见的一切——文字、图片、代码按钮；门内是网页浏览器和搜索引擎读取的“后台信息”。我刚开始写HTML时，代码总把<head>当成一个放标题的网页盒子，后来才发现它管的代码事情远比标题多。

先看一个真实的网页例子。这是代码某新闻网站首页的<head>片段：

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>今日头条 - 全球要闻</title> <meta name="description" content="实时更新国内外重大新闻..."> <link rel="stylesheet" href="/css/main.css"> <script src="/js/analytics.js" defer></script> </head>

短短几行，信息量不小。网页<meta charset="UTF-8">决定了页面能不能正确显示中文，代码少了它，网页汉字可能变成乱码。我见过一个老网站忘记写这一句，用户打开全是“æ–°é—»”，像外星文。<meta name="viewport">是移动端的开关，没有它，手机浏览器会假装自己是桌面，把页面缩成蚂蚁大小。<title>不只是标签页上的文字，它还是收藏夹里的默认名称、搜索引擎结果里的蓝色标题。<meta name="description">更隐蔽——它不显示在页面上，但可能出现在搜索结果的摘要里。写得好，点击率差一倍。

还有<link>和<script>。它们把CSS和JavaScript引进来。CSS放在<head>里，浏览器会先下载样式再渲染页面，避免用户看到一闪而过的无样式内容。JavaScript放在<head>里就要小心，默认会阻塞渲染。现在很多人加defer或async属性，让脚本在后台下载。我调试过一个页面，因为把一个大脚本放在<head>里没加defer，白屏了整整三秒。用户早跑了。

搜索引擎爬虫抓取页面时，第一眼看的也是<head>。<title>和<meta description>直接决定排名和摘要。我对比过两个内容相似的页面，一个认真写了<meta name="description">，另一个没写。前者在搜索结果里显示两行摘要，后者只显示一段随机抓取的正文。点击率差了40%。这不是玄学，是爬虫的读取逻辑。

另外，<head>里还能放<base>、<style>、<noscript>。比如<base href="https://example.com/">可以统一所有相对链接的基准地址，但容易引起混乱，我很少用。<style>直接写内联CSS，适合首屏关键样式，减少一次请求。但别把所有样式都塞进去，否则HTML文件会变得臃肿。

有个细节容易被忽略：<head>里的元素顺序也有讲究。字符编码<meta charset>必须在前1024字节内出现，否则浏览器可能重新解析。视口标签紧随其后。然后是<title>，再是其他<meta>、<link>、<script>。我习惯把CSS放在JS前面，因为样式阻塞渲染，脚本阻塞解析，先让页面有样子，再让交互生效。

最后说一个真实教训。我曾经接手一个项目，页面在Chrome里正常，在Safari里字体全变成默认宋体。查了半天，发现<head>里漏了<meta charset="UTF-8">，而Safari对编码的猜测更保守。补上这一行，问题消失。你看，<head>里每一个标签都不是摆设，它们像舞台背后的工作人员，观众看不见，但演出能不能顺利进行，全靠他们。

所以下次写HTML，别急着写<body>。先想清楚：这个页面用什么编码？在手机上怎么显示？标题写什么？描述怎么写？样式和脚本怎么加载？把这些塞进<head>，再开始画界面。顺序对了，后面少踩很多坑。