link 标签的主要属性及其作用
| 属性 | 是否必填 | 作用描述 | 示例值 |
|---|---|---|---|
rel | 是 | 定义当前文档与链接资源的关系（必须属性）。常见值：stylesheet, icon, preload, preconnect 等。 | rel="stylesheet"rel="icon" |
href | 是 | 指定链接资源的URL。 | href="styles.css"href="https://example.com/icon.png" |
type | 否 | 指定链接资源的MIME类型。浏览器可能根据资源自动推断，但建议明确指定。 | type="text/css"type="image/png" |
media | 否 | 规定资源适用的设备/媒体类型（如屏幕、打印等）。 | media="screen"media="print and (max-width: 600px)" |
sizes | 否 | 当 rel="icon" 时，指定图标尺寸（格式：高度x宽度 或 any）。 | sizes="32x32"sizes="any" |
crossorigin | 否 | 定义请求资源的跨域模式（CORS）。可选值：anonymous（默认）、use-credentials。 | crossorigin="anonymous" |
integrity | 否 | 提供资源的哈希值，用于验证资源完整性（防止篡改）。格式：sha384-...。 | integrity="sha384-oqVu...3Vg" |
referrerpolicy | 否 | 控制请求资源时发送的Referer信息。可选值：no-referrer, origin, unsafe-url 等。 | referrerpolicy="no-referrer" |
hreflang | 否 | 指定链接资源的语言（如 en, zh-CN）。 | hreflang="en" |
title | 否 | 为链接资源提供额外信息，常用于定义可选的样式表（如 rel="alternate stylesheet"）。 | title="Dark Theme" |
核心属性
1.rel
-
作用：定义当前文档与链接资源的关系（必填属性）。
-
常见值：
-
stylesheet：链接 CSS 样式表（最常用） -
icon：链接网站图标（如 Favicon） -
preload：预加载关键资源（需配合as属性） -
preconnect：提前与目标服务器建立连接（优化性能） -
alternate：链接到页面的替代版本（如 RSS 订阅、多语言页面） -
canonical：指定页面的规范 URL（SEO 优化） -
manifest：链接 Web 应用清单（PWA 配置）
-
-
示例：
<link rel="stylesheet" href="styles.css"> <link rel="icon" href="favicon.ico">
rel 属性值分类表格
| 分类 | rel 值 | 作用描述 | 示例 |
|---|---|---|---|
| 资源加载 | stylesheet | 链接外部CSS样式表。 | <link rel="stylesheet" href="styles.css"> |
preload | 预加载关键资源（需配合 as 属性指定类型）。 | <link rel="preload" href="font.woff2" as="font"> | |
prefetch | 预取未来可能需要的资源（如下一页内容）。 | <link rel="prefetch" href="next-page.html"> | |
preconnect | 提前与目标服务器建立连接（DNS解析、TCP握手等）。 | <link rel="preconnect" href="https://fonts.googleapis.com"> | |
dns-prefetch | 提前解析目标域名的DNS（性能优化）。 | <link rel="dns-prefetch" href="//cdn.example.com"> | |
modulepreload | 预加载ES模块脚本。 | <link rel="modulepreload" href="app.js"> | |
| 图标与图片 | icon | 定义页面图标（如Favicon）。 | <link rel="icon" href="favicon.ico" type="image/x-icon"> |
apple-touch-icon | 为iOS设备定义主屏幕图标。 | <link rel="apple-touch-icon" href="apple-icon.png" sizes="180x180"> | |
manifest | 链接Web应用清单（PWA配置）。 | <link rel="manifest" href="/site.webmanifest"> | |
| SEO与导航 | canonical | 指定页面的规范URL（防止重复内容SEO问题）。 | <link rel="canonical" href="https://example.com/main-page"> |
alternate | 链接到页面的其他语言版本或其他格式（如PDF）。 | <link rel="alternate" hreflang="es" href="https://example.com/es/"> | |
prev / next | 定义分页导航的前一页或下一页。 | <link rel="prev" href="page1.html"> | |
| 文档关系 | author | 链接到页面作者的介绍页面。 | <link rel="author" href="https://example.com/about"> |
license | 链接到页面内容的许可证信息。 | <link rel="license" href="https://creativecommons.org/licenses/by/4.0/"> | |
help | 链接到帮助文档。 | <link rel="help" href="/help.html"> | |
| 交互与功能 | search | 链接到页面的搜索接口（用于浏览器或插件集成）。 | <link rel="search" href="/search.xml" type="application/opensearchdescription+xml"> |
nofollow | 告知搜索引擎不要追踪此链接（通常用于用户生成内容）。 | <a href="..." rel="nofollow">...</a>（注：更多用于 <a> 标签） | |
| 安全与权限 | noopener | 防止通过 target="_blank" 打开的页面访问原页面的window.opener（安全防护）。 | <a href="..." rel="noopener">...</a>（注：更多用于 <a> 标签） |
noreferrer | 请求资源时不发送Referer头（隐私保护）。 | <a href="..." rel="noreferrer">...</a>（同上） | |
| 特殊用途 | pingback | 定义接收Pingback通知的服务器地址（博客评论跟踪）。 | <link rel="pingback" href="https://example.com/xmlrpc.php"> |
serviceworker | 注册Service Worker（PWA核心功能）。 | <link rel="serviceworker" href="/sw.js" scope="/"> |
2.href
-
作用：指定链接资源的 URL（必填属性）。
-
示例：
<link href="print.css" rel="stylesheet" media="print">
资源类型与适配
3.type
-
作用：指定资源的 MIME 类型（非必需，但建议显式声明）。
-
常见值：
-
text/css：CSS 文件。 -
image/x-icon：ICO 格式图标。 -
image/png：PNG 格式图标。
-
-
示例：
<link rel="stylesheet" href="theme.css" type="text/css">
4.media
-
作用：指定资源适用的媒体/设备类型（如屏幕、打印）。
-
常用值：
-
screen：默认屏幕设备。 -
print：打印预览模式。 -
媒体查询表达式（如
(max-width: 600px)）。
-
-
示例：
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 480px)">
5.sizes
-
作用：指定图标尺寸（仅当
rel="icon"时有效）。 -
格式：
-
高度x宽度（如32x32）。 -
any：适配任意尺寸。
-
-
示例
<link rel="icon" href="icon-32.png" sizes="32x32">
性能与安全
6.as
-
作用：配合
rel="preload"使用，声明预加载资源的类型（必需） -
常见值：
-
script：JavaScript 文件。 -
style：CSS 文件。 -
font：字体文件。 -
image：图片文件。
-
-
示例：
<link rel="preload" href="font.woff2" as="font" crossorigin>
7.crossorigin
-
作用：控制跨域请求的 CORS 配置。
-
值：
-
anonymous：不带凭据的请求（默认）。 -
use-credentials：带凭据的请求（如 Cookies）。
-
-
示例：
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
8.integrity
-
作用：提供资源的哈希值，用于验证完整性（防止篡改）。
-
格式：
sha256-...、sha384-...、sha512-...。 -
示例：
<link rel="stylesheet" href="https://cdn.example.com/lib.css" integrity="sha384-oqVuAfXRKap...">
9.referrerpolicy控制请求资源时发送的 Referer 头信息（隐私保护）。
-
作用：
-
值：
no-referrer、origin、unsafe-url等。 -
示例：
<link rel="stylesheet" href="third-party.css" referrerpolicy="no-referrer">
其他属性
10.hreflang
-
作用：指定链接资源的语言（如多语言页面）。
-
示例：
<link rel="alternate" hreflang="es" href="https://example.com/es/">
11.title
-
作用：为链接资源提供额外描述（如可切换的备用样式表）。
-
示例：
<link rel="alternate stylesheet" href="dark.css" title="Dark Mode">
12.disabled
-
作用：禁用当前样式表（需通过 JavaScript 动态操作）。
-
示例：
<link rel="stylesheet" href="theme.css" disabled>
link 常见用途示例
1. 引入 CSS 样式表
<link rel="stylesheet" href="styles.css" type="text/css" media="screen">2. 设置网站图标
<link rel="icon" href="favicon.ico" type="image/x-icon" sizes="32x32">3. 预加载关键资源
<link rel="preload" href="hero-image.jpg" as="image" media="(min-width: 800px)">4. SEO 规范链接
<link rel="canonical" href="https://example.com/main-page">link 注意事项
-
必填属性：
rel和href必须同时存在。 -
性能优化：
-
使用
preload预加载关键资源，但避免过度预加载。 -
结合
media属性按需加载响应式样式。
-
-
安全性：
-
对第三方资源使用
integrity+crossorigin防止篡改。
-
-
兼容性：
-
preload和modulepreload需现代浏览器支持（IE 不支持）。
-
link中referrerpolicy关于Referer补充
Referer（来源信息） 是 HTTP 请求头中的一个字段，用于表示当前请求是从哪个页面或资源链接过来的。它是浏览器自动发送给服务器的一个信息，帮助服务器了解用户的访问路径
核心概念
-
拼写问题：
-
正确英文应为 "Referrer"，但在 HTTP 标准中因历史错误拼写为 "Referer"（少一个
r），并沿用至今。
-
-
作用：
-
告诉服务器用户是从哪个页面跳转过来的，例如：
-
用户点击网页 A 的链接打开网页 B，则访问 B 的请求头中会包含
Referer: A的URL。
-
-
服务器可根据此信息进行流量分析、防盗链、安全验证等。
-
常见用途
| 场景 | 说明 |
|---|---|
| 流量统计 | 分析用户来源（如广告点击、外部引荐），帮助优化营销策略。 |
| 防盗链（Hotlink） | 阻止其他网站直接引用你的资源（如图片、文件），仅允许特定来源访问。 |
| 安全验证 | 检查请求是否来自合法页面（如防止跨站请求伪造攻击）。 |
| 调试与日志 | 记录用户行为路径，辅助排查问题。 |
隐私与安全
1.隐私风险：
-
Referer 可能泄露用户的浏览历史（如 URL 中包含敏感信息）。
-
例如：从
https://example.com/user-profile跳转的请求，会暴露用户个人页面的 URL。
2.浏览器保护机制：
Referrer-Policy：通过 HTTP 头或 HTML 属性控制 Referer 的发送范围。
<!-- 完全禁止发送 Referer -->
<meta name="referrer" content="no-referrer">
<!-- 仅发送来源域名（不包含路径） -->
<meta name="referrer" content="origin">3.安全场景限制：从 HTTPS 页面跳转到 HTTP 页面时，浏览器默认不发送 Referer（防止敏感信息泄露）
Referer 的发送规则
| 策略（Referrer-Policy） | 行为 |
|---|---|
no-referrer | 完全不发送 Referer 信息。 |
origin | 仅发送来源页面的域名（如 https://example.com）。 |
strict-origin | 仅在 HTTPS→HTTPS 请求中发送来源域名。 |
unsafe-url | 发送完整 URL（包含路径和参数），可能导致隐私泄露。 |
开发者注意事项
1.防盗链配置：
在服务器（如 Nginx）中检查 Referer 头，阻止非法来源访问资源：
location /images/ {valid_referers none blocked example.com *.example.org;if ($invalid_referer) {return 403;}
}2.控制 Referer 发送：通过 HTML 或 HTTP 头设置策略：
<!-- 在 HTML 中设置 -->
<meta name="referrer" content="origin">3.调试工具查看：使用浏览器开发者工具的 Network 面板，查看请求头中的 Referer 字段
script 标签的主要属性及其作用
| 属性 | 是否必需 | 作用描述 | 示例值 | 注意事项 |
|---|---|---|---|---|
src | 否 | 指定外部 JavaScript 文件的 URL。 | src="app.js"src="https://example.com/script.js" | 与内联脚本互斥，若同时存在，内联代码会被忽略。 |
type | 否 | 定义脚本类型（默认 text/javascript）。支持 module、importmap 等现代类型。 | type="module"type="application/json" | type="module" 表示 ES6 模块，需浏览器支持；非标准类型需配合工具使用。 |
async | 否 | 异步加载脚本，下载完成后立即执行（不阻塞 HTML 解析）。 | async | 仅对外部脚本有效；多个 async 脚本执行顺序不确定。 |
defer | 否 | 延迟脚本执行，直到 HTML 解析完成后按声明顺序执行。 | defer | 仅对外部脚本有效；与 async 同时存在时，async 优先。 |
crossorigin | 否 | 控制跨域请求的 CORS 配置，可选 anonymous 或 use-credentials。 | crossorigin="anonymous" | 需与 integrity 配合使用以验证资源完整性。 |
integrity | 否 | 提供脚本的哈希值，用于验证资源完整性（格式如 sha384-...）。 | integrity="sha384-oqVuAfXRKap..." | 哈希不匹配时浏览器会拒绝执行；需启用 CORS（通过 crossorigin）。 |
nomodule | 否 | 仅在不支持 ES6 模块的浏览器中执行，用于回退兼容。 | nomodule | 现代浏览器会忽略此脚本；需配合 type="module" 使用。 |
referrerpolicy | 否 | 控制请求时发送的 Referer 头信息，可选 no-referrer、origin 等。 | referrerpolicy="no-referrer" | 适用于隐私保护场景（如第三方脚本）。 |
charset | 否（已废弃） | 指定外部脚本的字符编码（如 UTF-8）。 | charset="UTF-8" | 现代浏览器通常忽略此属性，推荐通过 HTTP 头或 <meta> 标签设置编码。 |
language | 否（已废弃） | 早期用于声明脚本语言（如 JavaScript）。 | language="JavaScript" | HTML5 已废弃，由 type 属性替代。 |
script 关键属性对比
| 属性组合 | 加载行为 | 执行顺序 | 适用场景 |
|---|---|---|---|
无 async/defer | 立即加载并执行，阻塞 HTML 解析。 | 按文档顺序立即执行。 | 需立即操作的脚本（如 DOM 操作）。 |
async | 异步加载，加载完成后立即执行。 | 执行顺序不确定。 | 独立无依赖脚本（如统计代码）。 |
defer | 异步加载，HTML 解析完成后按声明顺序执行。 | 按文档顺序延迟执行。 | 依赖 DOM 或有严格顺序要求的脚本。 |
type="module" | 默认启用 defer，可显式添加 async。 | 类似 defer 或 async。 | ES6 模块化开发。 |
1.src
-
作用：指定外部 JavaScript 文件的 URL。
-
是否必需：可选（如果省略，需在标签内直接编写代码）。
-
示例：
<script src="app.js"></script> -
注意：
-
如果同时使用
src和标签内代码，内联代码会被忽略。 -
可以是绝对路径或相对路径。
-
2.type
-
作用：定义脚本的 MIME 类型或模块类型。
-
常见值：
-
text/javascript（默认值，可省略）。 -
module：表示脚本为 ES6 模块（支持import/export）。 -
importmap：定义模块导入映射（需现代浏览器支持）。 -
application/json：内联 JSON 数据（非可执行脚本）。
-
-
示例：
<script type="module" src="module.js"></script> -
注意：
-
旧浏览器可能不支持
module类型，需结合nomodule回退。 -
非标准类型（如
text/coffeescript）需配合解析工具使用。
-
3.async
-
作用：异步加载并执行脚本（不阻塞 HTML 解析）。
-
值：布尔属性（存在即生效）。
-
示例：
<script async src="analytics.js"></script> -
注意：
-
仅对
src引入的外部脚本有效。 -
执行顺序不确定，适用于无依赖的脚本（如统计代码）。
-
4.defer
-
作用：延迟脚本执行，直到 HTML 解析完成后、DOMContentLoaded 事件前执行。
-
值：布尔属性（存在即生效）。
-
示例：
<script defer src="main.js"></script>注意：
-
仅对
src引入的外部脚本有效。 -
多个
defer脚本按声明顺序执行。 -
与
async不可同时使用（若同时存在，async优先）
5.crossorigin
-
作用：控制跨域请求的 CORS 设置。
-
值：
-
anonymous：请求不带凭据（默认）。 -
use-credentials：请求带凭据（如 Cookie）。
-
-
示例：
<script crossorigin="anonymous" src="https://cdn.example.com/lib.js"></script> -
注意：
-
需配合
integrity属性验证资源完整性时使用。 -
若跨域脚本未启用 CORS，可能无法捕获错误详情。
-
6.integrity
-
作用：提供脚本的哈希值，验证资源完整性（防止篡改）。
-
格式：
sha256-...、sha384-...、sha512-...。 -
示例：
<script integrity="sha384-oqVuAfXRKap..." src="https://cdn.example.com/lib.js"></script> -
注意：
-
需与
crossorigin属性一起使用。 -
若哈希不匹配，浏览器会拒绝执行脚本。
-
7.nomodule
-
作用：在支持 ES6 模块的浏览器中跳过此脚本（用于旧浏览器回退）。
-
值：布尔属性（存在即生效）。
-
示例：
<script nomodule src="legacy.js"></script> <script type="module" src="modern.js"></script> -
注意：
-
现代浏览器会忽略带有
nomodule的脚本。 -
用于为旧浏览器提供兼容代码。
-
8.referrerpolicy
-
作用：控制请求脚本时发送的 Referer 头信息。
-
值：
no-referrer、origin、unsafe-url等。 -
示例：
<script referrerpolicy="no-referrer" src="https://third-party.com/script.js"></script> -
注意：
-
适用于需要保护用户隐私的场景（如第三方脚本）。
-
9.script 补充说明
9.1 执行顺序控制：
-
无
async/defer：立即加载并执行，阻塞 HTML 解析。 -
async：异步加载，加载完成后立即执行（执行顺序不确定）。 -
defer：异步加载，按声明顺序在 DOM 就绪后执行。
9.2 模块化开发：
<!-- 现代浏览器执行此脚本 -->
<script type="module" src="app.js"></script>
<!-- 旧浏览器执行此脚本 -->
<script nomodule src="legacy.js"></script>9.3 安全性建议：
-
使用
integrity+crossorigin增强第三方脚本的安全性。 -
避免内联脚本中的敏感数据（如 API 密钥）。
9.4 性能优化：
-
将脚本放在
<body>底部或使用defer/async减少阻塞。 -
预加载关键脚本：
<link rel="preload" href="critical.js" as="script">
meta标签的作用
<meta> 标签用于定义 HTML 文档的元数据（metadata），不会直接显示在页面上，但为浏览器、搜索引擎和其他服务提供关键信息，例如字符编码、视口设置、SEO 优化等;
核心属性总表
| 属性 | 作用 | 值类型 | 示例 | 注意事项 |
|---|---|---|---|---|
charset | 定义文档的字符编码 | 字符编码名称（如 UTF-8、ISO-8859-1） | <meta charset="UTF-8"> | 必须放在文档头部，且一个文档只能有一个 charset。 |
name | 定义元数据的名称（与 content 配合使用） | 预定义或自定义的元数据名称（如 viewport, description） | <meta name="viewport" content="width=device-width"> | 常见名称见下方详细表格。 |
content | 定义元数据的具体内容（与 name 或 http-equiv 配合使用） | 根据 name 或 http-equiv 的值决定内容格式 | <meta name="description" content="这是一个示例页面"> | 必须与 name 或 http-equiv 同时使用。 |
http-equiv | 模拟 HTTP 响应头的功能（如刷新页面、兼容性设置） | 预定义的 HTTP 头名称（如 refresh, X-UA-Compatible） | <meta http-equiv="refresh" content="5"> | 部分功能已被现代浏览器废弃（如 set-cookie）。 |
charset 属性（HTML5+ 推荐方式）
| 属性 | 值 | 说明 |
|---|---|---|
charset | UTF-8 | 现代标准编码，支持所有语言和符号（推荐使用）。 |
charset | ISO-8859-1 | 拉丁字母编码（如英文、西欧语言），逐渐被 UTF-8 取代。 |
charset | GBK | 汉字扩展编码，支持简体中文和部分繁体中文。 |
charset | GB2312 | 早期简体中文字符集（GBK 的子集）。 |
charset | BIG5 | 繁体中文字符集（用于台湾、香港地区）。 |
charset | UTF-16 | 16 位编码，存在大小端问题，兼容性较差（不推荐）。 |
name 属性详细值表
name 值 | 作用 | content 值格式 | 示例 |
|---|---|---|---|
viewport | 控制移动端视口行为 | width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
description | 页面描述（SEO 优化） | 文本（建议 150 字符以内） | <meta name="description" content="学习前端开发的教程"> |
keywords | 页面关键词（SEO 优化） | 逗号分隔的关键词列表 | <meta name="keywords" content="HTML, CSS, JavaScript"> |
robots | 控制搜索引擎爬虫行为 | index/noindex, follow/nofollow, noarchive 等组合 | <meta name="robots" content="index, follow"> |
author | 声明页面作者 | 作者姓名或联系方式 | <meta name="author" content="John Doe"> |
generator | 声明页面生成工具（如 CMS 系统） | 工具名称 | <meta name="generator" content="WordPress"> |
referrer | 控制 Referer 信息的发送 | no-referrer, origin, unsafe-url 等 | <meta name="referrer" content="no-referrer"> |
theme-color | 设置浏览器地址栏或 PWA 主题颜色 | 颜色值（十六进制或 CSS 颜色名） | <meta name="theme-color" content="#4285f4"> |
format-detection | 禁用移动端自动识别（如电话号码、邮箱） | telephone=no, email=no, date=no | <meta name="format-detection" content="telephone=no"> |
常见 name 属性与 content 值对照表
name 属性 | content 值示例 | 说明 |
|---|---|---|
description | content="页面描述内容" | 网页描述，用于SEO优化。 |
keywords | content="关键词1, 关键词2, 关键词3" | 网页关键词，逗号分隔（对SEO作用已减弱）。 |
author | content="作者名" | 声明页面作者。 |
viewport | content="width=device-width, initial-scale=1.0" | 控制移动端视口缩放（必填）。 |
robots | content="index, follow" | 控制搜索引擎爬虫行为（index/noindex, follow/nofollow等）。 |
theme-color | content="#ffffff" | 设置浏览器主题颜色（支持十六进制或RGB）。 |
generator | content="WordPress 6.0" | 声明页面生成工具。 |
og:title | content="社交媒体标题" | Open Graph协议，用于社交媒体分享标题（如Facebook）。 |
og:description | content="社交媒体描述" | Open Graph协议，用于社交媒体分享描述。 |
twitter:card | content="summary_large_image" | Twitter卡片类型（控制分享显示样式）。 |
常见 http-equiv 属性与 content 值对照表
http-equiv 属性 | content 值示例 | 说明 |
|---|---|---|
refresh | content="5; url=https://example.com" | 页面自动刷新或跳转（5为秒数，可省略URL仅刷新）。 |
Content-Type | content="text/html; charset=UTF-8" | 声明文档类型和字符编码（HTML5已推荐改用 <meta charset>）。 |
X-UA-Compatible | content="IE=edge" | 强制IE使用最新内核渲染页面。 |
Content-Security-Policy | content="default-src 'self'" | 内容安全策略（CSP），限制资源加载来源。 |
default-style | content="样式表标题" | 指定页面默认样式表（需配合 <link> 使用）。 |
http-equiv 属性详细值表
http-equiv 值 | 作用 | content 值格式 | 示例 |
|---|---|---|---|
refresh | 自动刷新或跳转页面 | 秒数;url=目标地址 | <meta http-equiv="refresh" content="5; url=https://example.com"> |
X-UA-Compatible | 强制 IE 使用指定渲染模式 | IE=edge（使用最新引擎） | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
Content-Security-Policy | 定义内容安全策略（CSP） | 策略指令（如 default-src 'self'） | <meta http-equiv="Content-Security-Policy" content="script-src 'self'"> |
Content-Type | 声明文档类型和字符编码（已废弃，推荐用 charset） | text/html; charset=UTF-8 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
set-cookie | 设置 Cookie（已废弃，推荐使用 HTTP 头） | name=value; expires=日期; path=/ | <meta http-equiv="set-cookie" content="user=John; expires=Thu, 01 Jan 2024 00:00:00 GMT"> |
其他特殊属性
| 属性 | 作用 | 值类型 | 示例 |
|---|---|---|---|
property | 用于 Open Graph / Twitter Cards 等社交媒体元数据（需配合 content） | og:title, twitter:card 等 | <meta property="og:title" content="页面标题"> |
itemprop | 微数据（Microdata）标记（需配合 Schema.org 词汇） | 自定义属性名 | <meta itemprop="name" content="示例产品"> |
scheme | 定义 content 值的格式（已废弃） | 格式名称（如 ISBN, date） | <meta scheme="ISBN" content="12345"> |
注意事项
-
必填属性：
-
charset或http-equiv="Content-Type"必须至少存在一个（推荐使用charset）。
-
-
优先级冲突：
-
若同时使用
http-equiv="Content-Security-Policy"和 HTTP 头，浏览器会优先采用 HTTP 头。
-
-
兼容性：
-
theme-color仅在部分浏览器中生效（Chrome、Firefox）。 -
X-UA-Compatible仅对 IE 有效。
-
-
废弃属性：
-
scheme、http-equiv="set-cookie"已废弃，不建议使用。
-
常用场景示例
1. 基础 SEO 优化
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="专业的编程教程网站">
<meta name="keywords" content="编程, 前端, HTML">
<meta name="robots" content="index, follow">2. 社交媒体分享
<meta property="og:title" content="示例页面">
<meta property="og:description" content="这是一个示例页面">
<meta property="og:image" content="https://example.com/image.png">
<meta name="twitter:card" content="summary_large_image">3. 安全策略
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<meta name="referrer" content="no-referrer">
