性能优化关键:link、script和meta的正确打开方式

`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 配置）

示例：

javascript 复制代码

<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（必填属性）。

示例：

javascript 复制代码

<link href="print.css" rel="stylesheet" media="print">

资源类型与适配

`3.type`

作用：指定资源的 MIME 类型（非必需，但建议显式声明）。
常见值：
- text/css：CSS 文件。
- image/x-icon：ICO 格式图标。
- image/png：PNG 格式图标。

示例：

javascript 复制代码

<link rel="stylesheet" href="theme.css" type="text/css">

`4.media`

作用：指定资源适用的媒体/设备类型（如屏幕、打印）。
常用值：
- screen：默认屏幕设备。
- print：打印预览模式。
- 媒体查询表达式（如 (max-width: 600px)）。

示例：

javascript 复制代码

<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 480px)">

`5.sizes`

作用：指定图标尺寸（仅当 rel="icon" 时有效）。
格式：
- 高度x宽度（如 32x32）。
- any：适配任意尺寸。

示例

javascript 复制代码

<link rel="icon" href="icon-32.png" sizes="32x32">

性能与安全

`6.as`

作用：配合 rel="preload" 使用，声明预加载资源的类型（必需）
常见值：
- script：JavaScript 文件。
- style：CSS 文件。
- font：字体文件。
- image：图片文件。

示例：

javascript 复制代码

<link rel="preload" href="font.woff2" as="font" crossorigin>

`7.crossorigin`

作用：控制跨域请求的 CORS 配置。
值：
- anonymous：不带凭据的请求（默认）。
- use-credentials：带凭据的请求（如 Cookies）。

示例：

javascript 复制代码

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

`8.integrity`

作用：提供资源的哈希值，用于验证完整性（防止篡改）。
格式：sha256-...、sha384-...、sha512-...。

示例：

javascript 复制代码

<link rel="stylesheet" href="https://cdn.example.com/lib.css" integrity="sha384-oqVuAfXRKap...">

`9.referrerpolicy`控制请求资源时发送的 Referer 头信息（隐私保护）。

作用：
值：no-referrer、origin、unsafe-url 等。

示例：

javascript 复制代码

<link rel="stylesheet" href="third-party.css" referrerpolicy="no-referrer">

其他属性

`10.hreflang`

作用：指定链接资源的语言（如多语言页面）。

示例：

javascript 复制代码

<link rel="alternate" hreflang="es" href="https://example.com/es/">

`11.title`

作用：为链接资源提供额外描述（如可切换的备用样式表）。

示例：

javascript 复制代码

<link rel="alternate stylesheet" href="dark.css" title="Dark Mode">

`12.disabled`

作用：禁用当前样式表（需通过 JavaScript 动态操作）。

示例：

javascript 复制代码

<link rel="stylesheet" href="theme.css" disabled>

link 常见用途示例

1. 引入 CSS 样式表

javascript 复制代码

<link rel="stylesheet" href="styles.css" type="text/css" media="screen">

2. 设置网站图标

javascript 复制代码

<link rel="icon" href="favicon.ico" type="image/x-icon" sizes="32x32">

3. 预加载关键资源

javascript 复制代码

<link rel="preload" href="hero-image.jpg" as="image" media="(min-width: 800px)">

4. SEO 规范链接

javascript 复制代码

<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 的发送范围。

javascript 复制代码

<!-- 完全禁止发送 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 头，阻止非法来源访问资源：

javascript 复制代码

location /images/ {
    valid_referers none blocked example.com *.example.org;
    if ($invalid_referer) {
        return 403;
    }
}

2.控制 Referer 发送：通过 HTML 或 HTTP 头设置策略：

html 复制代码

<!-- 在 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。
是否必需：可选（如果省略，需在标签内直接编写代码）。
示例：
javascript 复制代码
```
<script src="app.js"></script>
```
注意：
- 如果同时使用 src 和标签内代码，内联代码会被忽略。
- 可以是绝对路径或相对路径。

`2.type`

作用：定义脚本的 MIME 类型或模块类型。
常见值：
- text/javascript（默认值，可省略）。
- module：表示脚本为 ES6 模块（支持 import/export）。
- importmap：定义模块导入映射（需现代浏览器支持）。
- application/json：内联 JSON 数据（非可执行脚本）。

示例：

javascript 复制代码

<script type="module" src="module.js"></script>

注意：
- 旧浏览器可能不支持 module 类型，需结合 nomodule 回退。
- 非标准类型（如 text/coffeescript）需配合解析工具使用。

`3.async`

作用：异步加载并执行脚本（不阻塞 HTML 解析）。
值：布尔属性（存在即生效）。

示例：

javascript 复制代码

<script async src="analytics.js"></script>

注意：
- 仅对 src 引入的外部脚本有效。
- 执行顺序不确定，适用于无依赖的脚本（如统计代码）。

`4.defer`

作用：延迟脚本执行，直到 HTML 解析完成后、DOMContentLoaded 事件前执行。
值：布尔属性（存在即生效）。
示例：
javascript 复制代码
```
<script defer src="main.js"></script>
```
注意：
仅对 src 引入的外部脚本有效。
多个 defer 脚本按声明顺序执行。
与 async 不可同时使用（若同时存在，async 优先）

`5.crossorigin`

作用：控制跨域请求的 CORS 设置。
值：
- anonymous：请求不带凭据（默认）。
- use-credentials：请求带凭据（如 Cookie）。

示例：

javascript 复制代码

<script crossorigin="anonymous" src="https://cdn.example.com/lib.js"></script>

注意：
- 需配合 integrity 属性验证资源完整性时使用。
- 若跨域脚本未启用 CORS，可能无法捕获错误详情。

`6.integrity`

作用：提供脚本的哈希值，验证资源完整性（防止篡改）。
格式：sha256-...、sha384-...、sha512-...。

示例：

javascript 复制代码

<script integrity="sha384-oqVuAfXRKap..." src="https://cdn.example.com/lib.js"></script>

注意：
- 需与 crossorigin 属性一起使用。
- 若哈希不匹配，浏览器会拒绝执行脚本。

`7.nomodule`

作用：在支持 ES6 模块的浏览器中跳过此脚本（用于旧浏览器回退）。
值：布尔属性（存在即生效）。

示例：

javascript 复制代码

<script nomodule src="legacy.js"></script>
<script type="module" src="modern.js"></script>

注意：
- 现代浏览器会忽略带有 nomodule 的脚本。
- 用于为旧浏览器提供兼容代码。

`8.referrerpolicy`

作用：控制请求脚本时发送的 Referer 头信息。
值：no-referrer、origin、unsafe-url 等。

示例：

javascript 复制代码

<script referrerpolicy="no-referrer" src="https://third-party.com/script.js"></script>

注意：
- 适用于需要保护用户隐私的场景（如第三方脚本）。

9.`script` 补充说明

9.1 执行顺序控制：

无 async/defer：立即加载并执行，阻塞 HTML 解析。
async：异步加载，加载完成后立即执行（执行顺序不确定）。
defer：异步加载，按声明顺序在 DOM 就绪后执行。

9.2 模块化开发：

javascript 复制代码

<!-- 现代浏览器执行此脚本 -->
<script type="module" src="app.js"></script>
<!-- 旧浏览器执行此脚本 -->
<script nomodule src="legacy.js"></script>

9.3 安全性建议：

使用 integrity + crossorigin 增强第三方脚本的安全性。
避免内联脚本中的敏感数据（如 API 密钥）。

9.4 性能优化：

将脚本放在 <body> 底部或使用 defer/async 减少阻塞。

预加载关键脚本：

javascript 复制代码

<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`）。

`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">`

`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 优化

javascript 复制代码

<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. 社交媒体分享

javascript 复制代码

<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. 安全策略

javascript 复制代码

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<meta name="referrer" content="no-referrer">

性能优化关键:link、script和meta的正确打开方式

link 标签的主要属性及其作用

核心属性

1.rel

2.href

资源类型与适配

3.type

4.media

5.sizes

性能与安全

6.as

7.crossorigin

8.integrity

9.referrerpolicy控制请求资源时发送的 Referer 头信息（隐私保护）。

其他属性

10.hreflang

11.title

12.disabled

link 常见用途示例

1. 引入 CSS 样式表

2. 设置网站图标

3. 预加载关键资源

4. SEO 规范链接

link 注意事项

link中referrerpolicy关于Referer补充

核心概念

常见用途

隐私与安全

Referer 的发送规则

开发者注意事项

**script**标签的主要属性及其作用

script 关键属性对比

1.src

2.type

3.async

4.defer

5.crossorigin

6.integrity

7.nomodule

8.referrerpolicy

9.script 补充说明

9.1 执行顺序控制：

9.2 模块化开发：

9.3 安全性建议：

9.4 性能优化：

meta标签的作用

核心属性总表

name 属性详细值表

http-equiv 属性详细值表

其他特殊属性

注意事项

必填属性：

优先级冲突：

兼容性：

废弃属性：

常用场景示例

1. 基础 SEO 优化

2. 社交媒体分享

3. 安全策略

`link` 标签的主要属性及其作用

`1.rel`

`2.href`

`3.type`

`4.media`

`5.sizes`

`6.as`

`7.crossorigin`

`8.integrity`

`9.referrerpolicy`控制请求资源时发送的 Referer 头信息（隐私保护）。

`10.hreflang`

`11.title`

`12.disabled`

`link中referrerpolicy关于`Referer补充

`script`标签的主要属性及其作用

`script` 关键属性对比

`1.src`

`2.type`

`3.async`

`4.defer`

`5.crossorigin`

`6.integrity`

`7.nomodule`

`8.referrerpolicy`

9.`script` 补充说明

`meta`标签的作用

`name` 属性详细值表

`http-equiv` 属性详细值表