HTML head元素完全指南 — meta、title、link、style、script
深入学习HTML head元素及其所有子元素：meta、title、link、style、script的用法与最佳实践 · 难度：入门 · +10XP
HTML head元素完全指南
<head> 元素是每个HTML页面的大脑——它不直接显示在页面上，却控制着页面的标题、编码、样式、SEO、社交分享等一切幕后工作。如果把网页比作一个人，<head> 就是他的身份证、简历和社交名片。
head元素里可以放什么？
<head> 是 <html> 的第一个子元素（在 <body> 之前），可以包含以下标签：
| 标签 | 用途 | 必需性 |
|---|---|---|
<title> | 定义浏览器标签页标题，也是搜索引擎结果中的标题 | 必需 |
<meta> | 定义页面的元信息：编码、描述、关键词、视口等 | 推荐 |
<link> | 链接外部资源：CSS样式表、网站图标、预加载资源 | 常用 |
<style> | 直接在页面内写CSS样式 | 可选 |
<script> | 嵌入或引用JavaScript代码（也可放在body底部） | 常用 |
<base> | 设定页面中所有相对链接的基础URL | 很少用 |
<noscript> | 当浏览器禁用JavaScript时显示的内容 | 可选 |
title — 页面的名字
<title> 是最重要的head元素。它出现在浏览器标签页、收藏夹、以及搜索引擎结果中。一个好的标题应该简洁明了，包含页面主题和网站名称。
<head>
<title>HTML入门教程 - 武鸣大学城编程实验室</title>
</head>最佳实践：标题控制在50-60个字符以内，把最重要的关键词放在前面，每个页面使用独一无二的标题。
meta — 元信息的工具箱
<meta> 标签是head中最灵活的元素，通过不同的 name 和 content 属性组合实现各种功能。
<head>
<!-- 1. 字符编码（必须在title之前） -->
<meta charset="UTF-8">
<!-- 2. 视口设置（移动端响应式必备） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 3. SEO：页面描述（搜索引擎结果中的摘要文字） -->
<meta name="description" content="从零开始学习HTML网页开发，包含标签、表单、多媒体等完整教程">
<!-- 4. SEO：关键词（现在搜索引擎权重较低，但仍建议设置） -->
<meta name="keywords" content="HTML教程, 网页开发, 前端入门">
<!-- 5. 作者信息 -->
<meta name="author" content="武鸣大学城">
<!-- 6. robots：控制搜索引擎抓取行为 -->
<meta name="robots" content="index, follow">
<!-- 7. Open Graph：社交分享（微信、QQ、Facebook等） -->
<meta property="og:title" content="HTML入门教程">
<meta property="og:description" content="从零开始学HTML">
<meta property="og:image" content="https://www.wmdxc.com/images/html-og.jpg">
<!-- 8. 主题颜色（浏览器地址栏颜色） -->
<meta name="theme-color" content="#4A90D9">
</head>
link — 外部资源的桥梁
<head>
<!-- 引入外部CSS样式表（最常用） -->
<link rel="stylesheet" href="styles/main.css">
<!-- 网站图标（显示在浏览器标签页上） -->
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- 预加载关键资源（提升页面加载速度） -->
<link rel="preload" href="fonts/main.woff2" as="font" crossorigin>
<!-- 提前建立连接（减少第三方资源请求延迟） -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<!-- Apple设备上的主屏图标 -->
<link rel="apple-touch-icon" href="icon-180.png">
</head>
动手练习
- 创建完整的head：新建一个HTML文件，写出包含title、字符编码、视口、描述、关键词、网站图标的完整head部分。
- 检查网页的head：打开浏览器开发者工具（按F12），在Elements面板中查看任意网页的head内容，找出至少5个meta标签并理解它们的作用。
- 社交分享优化：为你的网页添加完整的Open Graph标签（og:title、og:description、og:image、og:url、og:type），使其在微信或QQ中分享时有漂亮的卡片预览。