概念笔记:HTML-元数据 (Metadata)
概念笔记:HTML-元数据 (Metadata)
基础
- 一句话定义:元数据是“关于数据的数据”。在 HTML 中,它们位于
标签内,通常不直接显示在页面上,而是提供给机器(浏览器、搜索引擎、社交软件)读取的信息。 - 三个必备元数据:
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>页面标题title> head> - 分类:
- Named Meta (
name): 描述文档内容 (如description,viewport). - Pragma Directives (
http-equiv): 模拟 HTTP 响应头 (如 CSP, Refresh). - Open Graph (
property): 社交媒体分享协议.
- Named Meta (
进阶
1. 为什么需要它? (Motivation)
网页不仅是给人看的,也是给机器读的。
- 解析器: 没
charset可能会乱码。- 移动端: 没
viewport会用桌面宽度 (980px) 渲染,字超级小。- 搜索引擎: 没
description,搜索结果可能就是一段毫无意义的文字。- 安全性: 没 CSP (Content Security Policy) 容易被 XSS 攻击。
2. 核心定义 (Definition)
-
标签的三种形态: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 分享时的“卡片”样式 (图、文、题).
- 使用
3. 常见场景
- SEO 优化:
<meta name="description" content="150字以内的精准摘要,搜索引擎不仅看,还会展示给用户。"> <meta name="robots" content="index, follow"> - 视觉体验:
<meta name="theme-color" content="#4285f4"> - 社交分享 (Open Graph):
<meta property="og:title" content="文章标题"> <meta property="og:image" content="https://example.com/cover.jpg"> -
4. 核心原理/底层逻辑 (How it works)
- 预解析 (Pre-parsing):
- 浏览器即时渲染引擎(Speculative parsing)在下载 HTML 时会快速扫描
。 - 1024 字节规则: 浏览器通常只在前 1024 个字节内寻找字符集声明。如果找不到,它可能会暂停并等待,或者尝试猜测(可能猜错)。这就是为什么
charset必须置顶的原因。
- 浏览器即时渲染引擎(Speculative parsing)在下载 HTML 时会快速扫描
5. 考题
- Q1:
为什么要写在前面?
- 答: 避免 XSS 和乱码。Title 可能包含非 ASCII 字符,如果浏览器读到 Title 时还不知道编码,可能会把后面的代码解析错。 - Q2: 移动端开发的 Viewport 标准写法是?
- 答:width=device-width, initial-scale=1.0。 - Q3:
http-equiv和name的区别?
- 答:name描述内容,http-equiv模拟 HTTP 头控制浏览器行为 (如缓存、安全策略)。









