HTML head 与元信息
学习 head 中的 title/meta/link/script 标签 · 难度：进阶 · +15XP
HTML head 与元信息
<head>元素包含页面的元数据——不显示在页面上，但对浏览器和搜索引擎至关重要。
完整head示例
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="description" content="页面描述(搜索引擎显示)">
<meta name="keywords" content="HTML,CSS,教程">
<meta name="author" content="作者名">
<title>页面标题 - 显示在浏览器标签上</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico">
</head>meta标签详解
| meta | 作用 |
|---|---|
charset | 字符编码（必须！避免乱码） |
viewport | 移动端适配（必须！让手机正确显示） |
description | SEO描述（搜索结果显示的摘要） |
keywords | 关键词（现在搜索引擎不太看重） |
robots | 控制搜索引擎抓取行为 |
Open Graph（社交分享）
<meta property="og:title" content="页面标题">
<meta property="og:description" content="描述">
<meta property="og:image" content="https://e.com/share.jpg">
<meta property="og:url" content="https://e.com/page">这些标签控制微信/QQ/Facebook分享时显示的标题、描述和缩略图。
???? 练习
- 补全head区域的所有meta标签
- 添加Open Graph分享标签
- 设置网站favicon图标