概念笔记：HTML-元数据 (Metadata)

一句话定义：元数据是“关于数据的数据”。在 HTML 中，它们位于 <head> 标签内，通常不直接显示在页面上，而是提供给机器（浏览器、搜索引擎、社交软件）读取的信息。
三个必备元数据：<head>
<!– 1. 声明字符集 (防乱码，必须放在前1024字节内) –>
<meta charset="UTF-8">
<!– 2. 视口设置 (移动端适配核心) –>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!– 3. 页面标题 (SEO权重最高，浏览器标签页标题) –>
<title>页面标题</title>
</head>
分类：
Named Meta (name): 描述文档内容 (如 description, viewport).
Pragma Directives (http-equiv): 模拟 HTTP 响应头 (如 CSP, Refresh).
Open Graph (property): 社交媒体分享协议.

网页不仅是给人看的，也是给机器读的。

<meta> 标签的三种形态:
name 属性:
- 用于描述页面信息。
- 常用值: viewport, description, robots, theme-color.
- 废弃: keywords (被滥用，搜索引擎已忽略).
http-equiv 属性:
- 相当于 “My server headers sit right here”.
- 核心值: content-security-policy (CSP) – 防止 XSS 的最强防线。
- 慎用: refresh (因体验较差，一般不使用).
charset 属性:
- 历史遗留的特权分子，等同于 http-equiv="Content-Type". 这里只写 utf-8.
Open Graph (og:tags):
- 使用 property 而非 name (防止冲突).
- 决定链接在Twitter/Facebook 分享时的“卡片”样式 (图、文、题).

SEO 优化:<meta name="description" content="150字以内的精准摘要，搜索引擎不仅看，还会展示给用户。">
<meta name="robots" content="index, follow"> <!– 默认值，不写也行 –>
<!– 不想被收录? content="noindex, nofollow" –>
视觉体验:<!– 改变移动端浏览器顶栏颜色 –>
<meta name="theme-color" content="#4285f4">
社交分享 (Open Graph):<meta property="og:title" content="文章标题">
<meta property="og:image" content="https://example.com/cover.jpg">

预解析 (Pre-parsing):
- 浏览器即时渲染引擎（Speculative parsing）在下载 HTML 时会快速扫描 <head>。
- 1024 字节规则: 浏览器通常只在前 1024 个字节内寻找字符集声明。如果找不到，它可能会暂停并等待，或者尝试猜测（可能猜错）。这就是为什么 charset 必须置顶的原因。

Q1: <meta charset="UTF-8"> 为什么要写在 <title> 前面？
– 答: 避免 XSS 和乱码。Title 可能包含非 ASCII 字符，如果浏览器读到 Title 时还不知道编码，可能会把后面的代码解析错。
Q2: 移动端开发的 Viewport 标准写法是？
– 答: width=device-width, initial-scale=1.0。
Q3: http-equiv 和 name 的区别？
– 答: name 描述内容，http-equiv 模拟 HTTP 头控制浏览器行为 (如缓存、安全策略)。