HTML文档元素与元数据详解

前端老石人2026-03-14 16:39

文档元素

<html> 元素

描述

<html> 元素是一个 HTML 文档的根（顶级元素），因此也被称为根元素。文档中所有其他元素都必须是该元素的后代。在一个文档中，只能存在一个 <html> 元素。

技术摘要
  • 类别：无。
  • 此元素可使用的上下文：作为文档的文档元素。
  • 内容模型 ：一个 <head> 元素，后跟一个 <body> 元素。
属性
  • lang：指定元素内容的主要语言。
    • 当 lang 属性应用在 <html> 元素上时，它为整个文档指定了主要语言，除非被文档中其他元素的 lang 属性覆盖。
    • 它的值必须是有效的语言标签。
    • 常见属性值：
      • lang="en"：英语（通用）
      • lang="en-US"：美国英语
      • lang="en-GB"：英国英语
      • lang="zh"：中文（通用）
      • lang="zh-CN"：中国大陆中文
      • lang="zh-TW"：中国台湾中文
      • lang="zh-Hans"：简体中文
      • lang="fr"：法语
      • lang="ja"：日语
      • lang="ar"：阿拉伯语
      • lang="es"：西班牙语
      • lang="de"：德语
    • 为 <html> 元素设置 lang 属性的三大核心价值：
      • 保障可访问性：屏幕阅读器据此切换正确语音库，是视障用户理解内容的根本前提。
      • 激活浏览器功能：触发浏览器的"自动翻译"提示，提升多语言用户的体验。
      • 利于搜索引擎：帮助搜索引擎准确识别页面语种，实现精准收录与展示。
使用示例

示例1：指定文档的主要语言

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>指定文档的主要语言</title>
    <link rel="stylesheet" href="./css/style.css">
  </head>

  <body>
    <h1>Hello World!</h1>
    <p>立即开启您的前端之旅吧！</p>
  </body>
</html>

文档元数据

<head> 元素

描述

<head> 元素包含关于文档的机器可读信息（元数据），例如文档的标题、脚本和样式表。在一个 HTML 文档中，只能存在一个 <head> 元素。

技术摘要
  • 类别：无。
  • 此元素可使用的上下文 ：作为 <html> 元素中的第一个元素。
  • 内容模型 ：必须包含一个或多个元数据内容元素，其中必须且只能有一个 <title> 元素，且最多只能有一个 <base> 元素。
使用示例

示例1：文档元数据

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <!-- 文档字符编码 -->
  <meta charset="UTF-8">

  <!-- 视口设置，确保移动端正确缩放 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 页面标题：显示在浏览器标签页和搜索引擎结果中 -->
  <title>前端开发入门指南 - 从零开始学编程</title>

  <!-- 搜索引擎关键词（多个关键词用逗号分隔） -->
  <meta name="keywords" content="前端开发,HTML教程,CSS入门,JavaScript学习,编程基础">

  <!-- 页面详细描述：搜索引擎通常在结果中显示这段文字 -->
  <meta name="description" content="这是一份专为初学者准备的前端开发指南，涵盖HTML、CSS、JavaScript基础知识，手把手带你进入编程世界。">

  <!-- 作者信息 -->
  <meta name="author" content="技术文档团队">

  <!-- 网站图标 -->
  <link rel="icon" href="favicon.ico" type="image/x-icon">

  <!-- 外链样式：定义页面外观 -->
  <link rel="stylesheet" href="./css/style.css">

  <!-- 外部脚本：定义页面行为 -->
  <script src="./js/index.js"></script>
</head>

<body>
  <div class="container">
    <h1>前端开发入门指南</h1>
    <p>欢迎来到前端开发的世界！本指南将帮助你从零开始学习HTML、CSS和JavaScript。</p>
    <button onclick="showMessage()">点击试试</button>
  </div>
</body>

</html>

<title> 元素

描述

<title> 元素定义文档的标题，该标题显示在浏览器的标题栏或页面标签页上。它仅包含文本；元素中的任何 HTML 标签（如果存在）也会被视为纯文本。

技术摘要
  • 类别：元数据内容。
  • 此元素可使用的上下文 ：位于一个不包含其他 <title> 元素的 <head> 元素中。
  • 内容模型：非元素间空白的文本。
使用示例

示例1：文档标题

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>HTML lang 属性详解 - 前端开发教程 | MDN Web Docs</title>
</head>

<body></body>

</html>
注意事项
  • 页面标题对 SEO 至关重要，能够影响页面在搜索结果中的排名，同时也能吸引读者点击。以下是编写优质标题的几个关键准则：
    • 避免简短标题：标题应具备描述性，尤其是术语表或参考类页面，采用"术语-定义"形式。
    • 控制标题长度：标题的前55-60个字符通常会被显示，超出部分可能会被截断。确保重要信息靠前。
    • 避免关键词堆砌：不要仅列出关键词，确保标题自然流畅，避免搜索引擎降权。
    • 确保标题唯一性：每个页面都应有独特的标题，避免重复或相似标题导致搜索结果不准确。
    • 考虑可访问性：确保标题清晰、简洁，便于屏幕阅读器等辅助技术用户理解页面内容。
  • 知名网站标题参考：
    • 百度：百度一下
    • 京东：京东(JD.COM)-正品低价、品质保障-综合网上购物商城
    • 淘宝：淘宝网 - 淘宝!我喜欢
    • 知乎：知乎 - 有问题，就会有答案
    • 抖音：抖音 - 记录美好生活
    • 小红书：小红书 - 你的生活指南
    • 网易云音乐：网易云音乐 - 听见好时光
    • Google：Google
    • YouTube：YouTube
    • GitHub：GitHub: Let's build from here
    • Stack Overflow：How to center a div - Stack Overflow

<link> 元素

描述

<link> 元素定义了当前文档与外部资源之间的关系。该元素最常用于链接样式表，但也用于建立网站图标等场景。

技术摘要
  • 类别 ：
    • 元数据内容。
    • 如果该元素允许出现在 <body> 中：流内容。
    • 如果该元素允许出现在 <body> 中：短语内容。
  • 此元素可使用的上下文 ：
    • 在需要元数据内容的地方。
    • 在作为 <head> 子元素的 <noscript> 元素内。
    • 如果该元素允许出现在< body> 中：在需要短语内容的地方。
  • 内容模型：不可包含任何内容。
属性

  • href：必选，指定所链接资源的 URL。

  • crossorigin：用于提供对 CORS（跨域资源共享）的支持。它定义了元素如何处理跨域请求，从而配置元素获取数据时的 CORS 请求策略。

    • crossorigin 属性适用于 <audio>、<img>、<link>、<script> 和 <video> 元素。

    • 默认情况下（即未指定该属性时），完全不使用 CORS。用户代理不会请求对资源的完全访问权限。对于跨域请求，将根据所涉元素类型施加某些限制：

      • img, audio, video：当资源被放置到 <canvas> 中时，该元素会被标记为被污染。
      • script：通过 window.onerror 访问错误日志的功能将受到限制。
      • link：没有合适 crossorigin 标头的请求可能会被丢弃。

    • 可选值：

      • anonymous：请求使用 CORS 标头，且凭据标志设置为 'same-origin'。除非目标地址是同源，否则不会通过 cookie、客户端 TLS 证书或 HTTP 认证交换用户凭据。
      • use-credentials：请求使用 CORS 标头，凭据标志设置为 'include'，并且始终包含用户凭据。
      • 无效关键字或空值：效果与 anonymous 相同。

  • rel：定义了链接资源与当前文档之间的关系。

    • 其值是一个包含空格分隔的链接类型的列表。
    • 一个 <link> 元素必须包含 rel 属性或 itemprop 属性，但两者不能同时存在。
    • 支持的关键字：
      • alternate：指示目标资源是当前文档的某种替代版本（例如不同语言或不同格式）；当和 stylesheet 一起使用时表示备用样式表。
      • dns-prefetch：向浏览器发出提示：提前对目标资源所在域名进行 DNS 解析以减少延迟。
      • expect：允许文档进入一种渲染阻塞状态（需配合 blocking="render"），使浏览器等待某些节点解析完再渲染。
      • icon：指定当前页面使用的图标（通常是 favicon）。
      • manifest：指向 Web 应用清单文件（Web App Manifest）。
      • modulepreload：提示浏览器预先加载 ES 模块脚本（及其依赖），提高性能。
      • next：表示当前文档属于一系列文档，链接指向该系列中的下一个文档。
      • pingback：指向 pingback 服务器，用于博客/站点之间的 pingback 通知机制。
      • preconnect：建议浏览器提前建立到目标资源源的连接（TCP/TLS 握手）。
      • prefetch：建议浏览器预获取资源并缓存，以便可能在后续导航中使用。
      • preload：强制浏览器为当前导航提前加载资源（需配合 as 指定资源类型）。
      • search：链接到搜索接口或搜索描述文件（如 OpenSearch）。
      • stylesheet：指定外部样式表资源。

  • media：指定链接资源适用的媒体环境。其值必须是有效的媒体类型或媒体查询。

    • 主要用于链接外部样式表时，它允许用户代理根据其运行的设备特性，选择最合适的样式表进行应用。

  • integrity：表示元素的完整性元数据，用于描述浏览器应如何校验通过该元素加载的资源内容是否在传输过程中没有被修改。它是子资源完整性机制（Subresource Integrity, SRI）的一部分。

    • 此属性可用于 <script> 元素或带有 rel="stylesheet"、rel="preload" 或 rel="modulepreload" 的 <link> 元素中。
    • 属性值是一个或多个散列表达式，格式：<hash-algo>-<base64-value>
      • hash-algo：散列算法名称，目前常见有 sha256、sha384、sha512。
      • <base64-value>：该算法对资源文件内容计算后得出的 Base64 编码结果。
    • 一个 integrity 值可以包含多个用空白分隔的哈希。只要资源匹配其中任意一个哈希，它就会被加载。
    • 浏览器处理子资源完整性的方式如下：
      • 当浏览器遇到带有 integrity 属性的 <script> 或 <link> 元素时，在执行脚本或应用 <link> 元素指定的任何样式表之前，浏览器必须首先将脚本或样式表与 integrity 值中给定的预期哈希值进行比较。
      • 对于从与嵌入文档不同来源提供的资源进行子资源完整性验证时，浏览器还会使用跨域资源共享额外检查该资源，以确保提供资源的来源允许与请求来源共享该资源。
      • 如果脚本或样式表与其关联的 integrity 值不匹配，浏览器必须拒绝执行脚本或应用样式表，并且必须返回网络错误，指示该脚本或样式表的获取失败。

  • hreflang：指示链接资源的语言。它纯粹是建议性的，不构成强制要求。

    • 属性值应为有效的 BCP 47 语言标签。仅在存在 href 属性时才能使用此属性。

  • type：定义链接内容的类型。其值应为 MIME 类型，例如 text/html、text/css 等。

    • 常见值：

      • image/png：PNG 图片；
      • image/x-icon：ICO 图标；
      • image/svg+xml：SVG 图片；
      • font/woff2：WOFF2字体；
      • text/javascript：JavaScript文件。

    • 该属性也用于 rel="preload" 链接类型，以确保浏览器仅下载其支持的文件类型。

  • referrerpolicy：控制浏览器在请求 <link> 指向的资源时发送哪种 Referer（引用来源）信息。它对应 HTTP 的 Referrer-Policy 机制，可以增强隐私控制和安全策略。

    • 可选值：

      • no-referrer：不会发送 Referer 头。请求中不包含任何引用来源信息。

      • no-referrer-when-downgrade：

        • 当协议的安全级别相同或更高时（如 HTTP → HTTP、HTTP → HTTPS、HTTPS → HTTPS），发送来源的域名、路径和查询字符串。
        • 当请求的目标安全级别较低时（如 HTTPS → HTTP、HTTPS → file），则不发送 Referer 头。

      • origin：仅在 Referer 头中发送来源的域名。

      • origin-when-cross-origin：使用较多

        • 对于同源请求，发送来源的域名、路径和查询字符串。
        • 对于跨源请求或降级请求（如 HTTPS → HTTP），仅发送来源的域名。

      • same-origin：

        • 仅在同源请求中发送来源的域名、路径和查询字符串。
        • 对于跨源请求，不发送 Referer 头。

      • strict-origin：

        • 当协议安全级别保持相同时（如 HTTPS → HTTPS），仅发送来源的域名。
        • 当目标为较低安全级别（如 HTTPS → HTTP）时，不发送 Referer 头。

      • strict-origin-when-cross-origin：默认值

        • 对于同源请求，发送来源的域名、路径和查询字符串。
        • 对于跨源请求：
          • 若协议安全级别相同（如 HTTPS → HTTPS），仅发送来源的域名；
          • 若目标为较低安全级别（如 HTTPS → HTTP），则不发送 Referer 头。

  • sizes：定义了资源中包含的视觉媒体图标（icon）的尺寸。

    • 只有当 rel 属性包含 icon 值或非标准类型（如 Apple 的 apple-touch-icon）时，才必须存在此属性。
    • 可选值：
      • any：表示图标可以缩放到任意大小，因为它采用矢量格式，例如 image/svg+xml。
      • 以空格分隔的大小列表：每个尺寸的格式为 <宽度像素>x<高度像素> 或 <宽度像素>X<高度像素>。这些尺寸必须都包含在该资源中。

  • as：指定了 <link> 加载的内容类型，这对于请求匹配、应用正确的内容安全策略以及设置正确的 Accept 请求头是必需的。

    • 当 <link> 元素设置了 rel="preload" 时，此属性为必需；当设置了 rel="modulepreload" 时为可选；其他情况下不应使用。
    • 此外，rel="preload" 使用此属性作为请求优先级排序的信号。
    • 有效值及其适用的元素或资源：
      • audio ：<audio> 元素
      • document：<iframe> 和 <frame> 元素
      • embed：<embed> 元素
      • fetch：fetch、XHR（此值还要求 <link> 包含 crossorigin 属性）
      • font：CSS @font-face（此值还要求 <link> 包含 crossorigin 属性）
      • image： 带有 srcset 或 imageset 属性的 <img> 和 <picture> 元素、SVG <image> 元素、CSS *-image 规则
      • json：modulepreload 目标
      • object：<object> 元素
      • script：<script> 元素、Worker 的 importScripts、以及 modulepreload 目标
      • style：<link rel=stylesheet> 元素、CSS @import 以及 modulepreload 目标
      • track：<track> 元素
      • video：<video> 元素
      • worker：Worker、SharedWorker

  • blocking：显式指示某些操作应被阻塞，直到满足特定条件。它必须仅在 rel 属性包含 expect 或 stylesheet 关键字时使用。

    • 当与 rel="expect" 一起使用时，它指示应阻塞操作，直到特定的 DOM 节点被解析完成。

    • 当与 rel="stylesheet" 一起使用时，它指示应阻塞操作，直到外部样式表及其关键子资源被获取并应用到文档。

    • 可选值：

      • render：屏幕上的内容渲染被阻塞。

    • 只有位于文档 <head> 中的 link 元素才可能阻塞渲染。默认情况下，当浏览器在解析过程中发现 <head> 中的 rel="stylesheet" 的 link 元素时，它会阻塞渲染。如果通过脚本动态添加此类 link 元素，则必须额外设置 blocking="render" 才能实现渲染阻塞。

  • disabled：布尔属性，指示所描述的样式表是否应被加载并应用于文档。

    • 仅适用于 rel="stylesheet"。

  • fetchpriority：提供关于获取特定类型资源时使用的相对优先级的提示。可选值：

    • high：相对于同类型其他资源，以高优先级获取该资源。
    • low：相对于同类型其他资源，以低优先级获取该资源。
    • auto：默认值，不设置获取优先级的首选项。

  • title：在此元素上具有特殊语义：

    • 链接的标题：作为链接的说明性文本。
    • CSS样式表集合名称：当用于 <link rel="stylesheet"> 时，用于定义默认样式表或备选样式表的名称。
使用示例

示例1：网站图标

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>网站图标-具体尺寸</title>
    <link rel="icon" href="./img/favicon-16.png" type="image/png" sizes="16x16">
    <link rel="icon" href="./img/favicon-32.png" type="image/png" sizes="32x32">
    <link rel="icon" href="./img/favicon-64.png" type="image/png" sizes="64x64">
    <link rel="icon" href="./img/favicon-128.png" type="image/png" sizes="128x128">
  </head>

  <body>
    
  </body>
</html>

示例2：响应式布局

html 复制代码 
<!doctype html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>响应式布局</title>
  <!-- 基础样式 -->
  <link rel="stylesheet" href="./css/base.css">
  <!-- 移动端样式 -->
  <link rel="stylesheet" href="./css/mobile.css" media="(max-width: 599px)">
  <!-- 平板样式 -->
  <link rel="stylesheet" href="./css/tablet.css" media="(min-width: 600px) and (max-width: 1023px)">
  <!-- 桌面端样式 -->
  <link rel="stylesheet" href="./css/desktop.css" media="(min-width: 1024px)">
</head>

<body>
  <p class="device-text"></p>
</body>

</html>

示例3：网站换肤

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>网站换肤效果实现</title>
  <link rel="stylesheet" href="font/iconfont.css">
  <!-- 持久样式表 -->
  <link rel="stylesheet" href="css/base.css">
  <!-- 首选的备用样式表 -->
  <link rel="stylesheet" href="css/theme-light.css" title="浅色">
  <!-- 其他备用样式表 -->
  <link rel="alternate stylesheet" href="css/theme-dark.css" title="深色">
  <link rel="alternate stylesheet" href="css/theme-ocean.css" title="海洋">
  <link rel="alternate stylesheet" href="css/theme-forest.css" title="森林">
</head>

<body>
  <header class="site-header">
    <hgroup>
      <h1 class="site-title">网站换肤示例</h1>
      <p class="site-subtitle">使用 alternate stylesheet + CSS 变量</p>
    </hgroup>
  </header>

  <main class="site-main">
    <section class="theme-switcher">
      <h2 class="section-title">选择主题</h2>
      <div class="theme-switcher-row">
        <label for="theme-select" class="theme-label">当前主题：</label>
        <select id="theme-select" class="theme-select">
          <option value="light.css">浅色</option>
          <option value="dark.css">深色</option>
          <option value="ocean.css">海洋</option>
          <option value="forest.css">森林</option>
        </select>
      </div>
    </section>

    <section class="content">
      <article class="card">
        <h3>前端小案例：网站换肤</h3>
        <p>
          这是一个使用 <code>&lt;link&gt;</code> 的
          <code>rel="alternate stylesheet"</code> 搭配 CSS 变量实现的网站换肤示例。
        </p>
        <p>
          页面结构和交互逻辑保持不变，只通过切换不同主题文件中定义的
          <code>--bg-color</code>、<code>--text-color</code> 等变量，来改变整体视觉风格。
        </p>
      </article>

      <article class="card">
        <h3>当前主题说明</h3>
        <p>
          你可以多切换几次主题，观察背景、文字、按钮、卡片等组件的颜色变化。
          这些颜色都不是写死的，而是从主题样式中的 CSS 变量读取的。
        </p>
      </article>
    </section>
  </main>

  <footer class="site-footer">
    <small>前端老实人 · 换肤小案例</small>
  </footer>

  <script src="./js/index.js"></script>
</body>

</html>

示例4：性能优化

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>性能优化</title>
  <!-- 网站将要使用第三方图片、脚本或字体 -->
  <link rel="dns-prefetch" href="//cdn.example.com">
  <link rel="dns-prefetch" href="//fonts.googleapis.com">

  <!-- 对关键第三方资源建立完整连接 -->
  <link rel="preconnect" href="//fonts.gstatic.com" crossorigin="anonymous">

  <!-- 预获取下一篇文章的内容 -->
  <link rel="prefetch" href="/articles/next-page.html">
  <link rel="prefetch" href="/images/hero-next.jpg">

  <!-- 提前加载关键 CSS -->
  <link rel="preload" href="/css/main.css" as="style">
  <!-- 提前加载关键字体 -->
  <link rel="preload" href="/fonts/iconfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  <!-- 提前加载关键 JS -->
  <link rel="preload" href="/js/main.js" as="script">
  <!-- 提前加载关键图片 -->
  <link rel="preload" href="/images/hero.jpg" as="image">

  <!-- 提前加载入口模块和依赖 -->
  <link rel="modulepreload" href="/js/main.js">
  <link rel="modulepreload" href="/js/utils.js">
  <link rel="modulepreload" href="/js/widget.js">

</head>

<body>
  <div id="app"></div>

  <!-- ES Module 入口 -->
  <script type="module" src="/js/main.js"></script>
</body>

</html>
注意事项
  • href 与 imagesrcset 属性中必须至少存在一个。如果 href 和 imagesrcset 都不存在，则该元素不定义任何链接。
  • 一个 <link> 元素必须具有 rel 属性或 itemprop 属性，但不能两者同时存在。

<meta> 元素

描述

<meta> 元素表示无法由其他与元数据相关的元素（如 <base>、<link>、<script>、<style> 或 <title>）表示的元数据。

<meta> 元素提供的元数据类型可以是以下之一：

  • 如果设置了 name 属性：<meta> 元素提供文档级元数据，适用于整个页面。
  • 如果设置了 http-equiv 属性：<meta> 元素充当编译器指令，模拟原本可以通过 HTTP 头部给出的指令。
  • 如果设置了 charset 属性：<meta> 元素是一个字符集声明，指定文档编码所使用的字符编码。
  • 如果设置了 itemprop 属性：<meta> 元素提供用户定义的元数据。
技术摘要
  • 类别 ：
    • 元数据内容。
    • 如果存在 itemprop 属性：流内容。
    • 如果存在 itemprop 属性：短语内容。
  • 此元素可使用的上下文 ：
    • 如果存在 charset 属性，或者元素的 http-equiv 属性处于编码声明状态：可以放在 head 元素中。
    • 如果存在 http-equiv 属性，但不处于编码声明状态：可以放在 head 元素中。
    • 如果存在 http-equiv 属性，但不处于编码声明状态：可以放在 head 元素的子元素 noscript 中。
    • 如果存在 name 属性：出现在期望元数据内容的位置。
    • 如果存在 itemprop 属性：出现在期望元数据内容的位置。
    • 如果存在 itemprop 属性：出现在期望短语内容的位置。
  • 内容模型：
    • 不可包含任何内容。
属性

  • name：定义文档级元数据。文档元数据以名称-值对的形式表示：

    • name 属性：指定元数据的名称，定义正在设置哪一方面的元数据。
      • 标准元数据名称包括：
        • application-name：文档所属的 Web 应用程序名称；
        • author：文档作者姓名；
        • description：文档的简要描述（常用于搜索引擎结果片段）；
        • generator：生成文档的软件标识符；
        • keywords：文档关键词，以逗号分隔；
        • referrer：控制从该文档发出的请求的 referrer 策略；
        • theme-color：建议的用户代理用于自定义页面或周边用户界面显示的主题色；
        • color-scheme：指定文档兼容的一种或多种配色方案。
      • 其他规范定义的元数据名称：
        • viewport：控制视口的大小和缩放行为，对移动端页面适配至关重要。
      • WHATWG MetaExtensions Wiki 定义的元数据名称：
        • creator：文档创建者的名称。如果有多个创建者，应使用多个 <meta> 元素；
        • googlebot：robots 的同义词，仅由 Googlebot（Google 的索引爬虫）遵循；
        • publisher：文档发布者的名称；
        • robots：逗号分隔的值列表，定义机器人应如何抓取页面。
    • content 属性：指定元数据的值。

  • http-equiv：定义编译器指令，它提供类似于 HTTP 标头的指令，告诉浏览器如何解析或处理当前文档。

    • 可选值：
      • refresh：指定页面刷新或重定向。content 属性通常包含"秒数;URL=目标地址"。
      • content-security-policy：设置页面的内容安全策略（CSP）

  • content：包含与 http-equiv 或 name 属性对应的值，具体取决于使用哪个属性。

  • charset：指定文档所使用的字符编码。

    • 如果存在该属性，其值必需是 UTF-8（不区分大小写）。
    • 声明字符编码的 <meta> 元素必须完全位于文档的前 1024 字节内。

  • media：定义 content 属性中定义的主题色应应用于哪些媒体环境。

    • 其值为媒体查询，如果该属性缺失，则默认为 all。
    • 此属性仅在元素的 name 属性设置为 theme-color 时相关。否则，它没有任何效果。
使用示例

示例1：页面重定向

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>页面重定向</title>
    <meta http-equiv="refresh" content="5; url=https://www.google.com/">
  </head>

  <body>
    <h1>页面重定向</h1>
  </body>
</html>

示例2：内容安全策略

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>内容安全策略</title>
    <meta http-equiv="Content-Security-Policy"
      content="
        default-src 'self';
        script-src 'self' https://cdn.jsdelivr.net https://cdnjs.cloudflare.com 'unsafe-inline';
        style-src 'self' https://fonts.googleapis.com 'unsafe-inline';
        img-src 'self' data: https:;
        font-src https://fonts.gstatic.com;
        connect-src 'self' https:;
      ">
  </head>

  <body>
    <h1>内容安全策略（CSP）</h1>
  </body>
</html>

示例3：标题、描述、关键字的使用

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>XX科技 - 提供专业的数字化解决方案</title>
    <!-- description：页面描述，搜索引擎使用，可影响 SEO -->
    <meta name="description" content="XX科技是一家专注企业数字化解决方案的技术服务公司，提供软件开发、系统集成、云服务等专业服务，帮助企业提升效率与竞争力。">
    <!-- keywords：页面关键词（现代搜索引擎影响有限） -->
    <meta name="keywords" content="数字化转型, 企业服务, 软件开发, XX科技">
  </head>

  <body>
    <h1>标题、描述、关键字的使用</h1>
  </body>
</html>

示例4：抓取与索引行为

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>抓取与索引行为</title>
    <!-- 商品/内容页暂时不希望被索引 -->
    <meta name="robots" content="noindex,follow">
    <!-- 隐私页面禁止索引 & 不跟随 -->
    <meta name="robots" content="noindex,nofollow">
    <!-- 控制搜索结果摘要 & 缩略图展示 -->
    <meta name="robots" content="index,follow,noarchive,nosnippet,max-image-preview:standard">
  </head>

  <body>
    <h1>抓取与索引行为</h1>
  </body>
</html>

示例5：视口相关行为

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <title>视口相关行为</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html, body {
      height: 100%;
    }

    /* 安全区内的内容 */
    .safe-area {
      padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
      box-sizing: border-box;
      height: 100%;
      background-color: #f0f0f0;
    }
  </style>
</head>

<body>
  <div class="safe-area">
    <h1>显示内容</h1>
  </div>
</body>

</html>

示例6：配色方案与主题色

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <!-- 基本视口设置 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

  <!-- 网站主题色：用于移动端状态栏/浏览器工具栏 -->
  <meta name="theme-color" content="#1e90ff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0b3d91" media="(prefers-color-scheme: dark)">

  <!-- 配色方案：让浏览器根据系统主题自动切换滚动条、表单等控件 -->
  <meta name="color-scheme" content="light dark">
  <title>配色方案与主题色</title>
  <style>
    /* 页面基础样式 */
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      font-family: sans-serif;
      transition: background-color 0.3s, color 0.3s;
    }

    /* 根据系统主题设置背景和文字颜色 */
    @media (prefers-color-scheme: light) {
      body {
        background-color: #f0f8ff;
        color: #000080;
      }
    }

    @media (prefers-color-scheme: dark) {
      body {
        background-color: #0b1a2a;
        color: #87cefa;
      }
    }
  </style>
</head>

<body>
  <h1>测试文字</h1>
  <form>
    <input type="search">
    <button>搜索</button>
  </form>
</body>

</html>

示例7：其他内容

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <!-- 1. application-name：应用或网站名称 -->
  <meta name="application-name" content="超市数据分析系统" lang="zh-CN">
  <meta name="application-name" content="Supermarket Data Analysis System" lang="en-US">

  <!-- 2. author：网页或内容作者 -->
  <meta name="author" content="张三">

  <!-- 3. generator：页面或内容生成工具 -->
  <meta name="generator" content="Visual Studio Code / Django 5.2">

  <!-- 4. referrer：控制链接跳转时的 Referer 行为 -->
  <meta name="referrer" content="strict-origin-when-cross-origin">

  <!-- 5. creator：创作者（可与 author 区分） -->
  <meta name="creator" content="张三，数据分析团队">

  <!-- 6. googlebot：搜索引擎爬虫控制 -->
  <meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">

  <!-- 7. publisher：发布者或公司信息 -->
  <meta name="publisher" content="电子科技大学计算语言学实验室">

  <title>其他内容</title>
</head>

<body>
  <p>&lt;meta&gt; 元素 name 属性的使用示例，具体请查看源码~</p>
</body>

</html>
注意事项
  • name、http-equiv、charset、itemprop 四个属性中必须且只能指定一个。
  • 如果指定了 name、http-equiv 或 itemprop 其中之一，则必须同时指定 content 属性；否则 content 属性必须被省略。
  • 每个文档中 最多只能出现一个带有 charset 属性的 <meta> 元素。

<style> 元素

描述

<style> 元素允许开发者在其文档中嵌入 CSS 样式表。它是样式处理模型的多个输入源之一。该元素不向用户呈现任何内容。

技术摘要
  • 类别 ：
    • 元数据内容。
  • 此元素可使用的上下文 ：
    • 出现在期望元数据内容的位置。
    • 在作为 <head> 子元素的 <noscript> 元素中。
  • 内容模型 ：
    • 提供符合规范的样式表的文本。
属性
  • media：定义样式应该应用于哪种媒体。其值是一个媒体查询。默认值为 all。
  • title：CSS 样式表集合名称。
  • nonce：定义加密随机数（只使用一次的数字）。内容安全策略（CSP）可利用它来判断某个元素的特定资源请求是否被允许继续执行。
    • 服务器必须在每次发送策略时生成一个唯一的 nonce 值。
使用示例

示例1：单个 style 元素的使用

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>单个 style 元素的使用</title>
    <style>
      h1 {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 2rem;
        color: #333;
      }

      p {
        margin: 10px 0;
        font-size: 20px;
        color: crimson;
      }
    </style>
  </head>

  <body>
    <h1>Welcome</h1>
    <p>This is a test.</p>
  </body>
</html>

示例2：多个 style 元素的使用

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>多个 style 元素的使用</title>
    <style>
      p {
        padding: 10px;
        background-color: yellow;
        color: blue;
        font-size: 20px;
      }
    </style>

    <style>
      p {
        background-color: skyblue;
        color: white;
      }
    </style>
  </head>

  <body>
    <p>This is a test.</p>
  </body>
</html>

示例3：style 元素中 media 属性的使用

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>style 元素中 media 属性的使用</title>

  <style>
    /* 通用样式 */
    .container {
      display: grid;
      gap: 20px;
      margin: 0 auto;
    }

    .item {
      padding: 20px;
      background-color: #f0f0f0;
      text-align: center;
      border-radius: 8px;
    }

    /* 电脑屏幕样式 */
    @media screen and (min-width: 1024px) {
      .container {
        grid-template-columns: repeat(3, 1fr);
        width: 960px;
      }
    }

    /* 平板样式 */
    @media screen and (min-width: 768px) and (max-width: 1023px) {
      .container {
        grid-template-columns: repeat(2, 1fr);
        width: 90%;
      }
    }

    /* 手机样式 */
    @media screen and (max-width: 767px) {
      .container {
        grid-template-columns: 1fr;
        width: 100%;
        padding: 10px;
      }

      .item {
        margin-bottom: 15px;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="item">内容1</div>
    <div class="item">内容2</div>
    <div class="item">内容3</div>
    <div class="item">内容4</div>
  </div>
</body>

</html>
注意事项
  • <style> 元素必须包含在文档的 <head> 中。通常，更好的做法是将样式放在外部样式表中，并通过 <link> 元素引入。
  • 如果在文档中包含了多个 <style> 和 <link> 元素，它们将按照在文档中出现的顺序依次应用到 DOM 上。请确保以正确的顺序引入它们，以避免意外的层叠问题。

<script> 元素

描述

<script> 元素用于嵌入可执行代码或数据，通常用于嵌入或引用 JavaScript 代码。该元素不向用户呈现任何内容。

技术摘要
  • 类别 ：
    • 元数据内容。
    • 流内容。
    • 短语内容。
    • 支持脚本的元素。
  • 此元素可使用的上下文 ：
    • 在需要元数据内容的地方。
    • 在需要短语内容的地方。
    • 在需要支持脚本的元素的地方。
  • 内容模型：
    • 如果没有 src 属性：取决于 type 属性的值，但必须符合脚本内容限制。
    • 如果有 src 属性：元素必须为空，或者只能包含符合脚本内容限制的脚本文档。
属性
  • type：指示所表示脚本的类型。该属性的值将是以下之一：
    • 属性未设置、空字符串或 JavaScript MIME 类型：该脚本是一个包含 JavaScript 代码的经典脚本。如果脚本引用的是 JavaScript 代码，建议直接省略该属性。
    • importmap：元素的内容体包含一个导入映射。导入映射是一个 JSON 对象，开发者可用其控制浏览器在导入 JavaScript 模块时如何解析模块标识符。
    • module：将使代码被视为 JavaScript 模块。脚本内容的处理将被延迟。charset 和 defer 属性对此无效。
    • speculationrules：元素的主体包含推测规则。推测规则采用 JSON 对象的形式，决定浏览器应预取或预渲染哪些资源。
    • 任何其他值：嵌入的内容被视为数据块，浏览器不会处理它。开发者必须使用有效的且不是 JavaScript MIME 类型的 MIME 类型来表示数据块。所有其他属性（包括 src 属性）都将被忽略。
  • src：指定外部脚本的 URI。
  • nomodule：布尔属性，指示脚本不应在支持 ES 模块的浏览器中执行。可用于向不支持模块化 JavaScript 代码的旧版浏览器提供降级脚本。
  • async：布尔属性，对于经典脚本，如果存在 async 属性，则经典脚本将在解析的同时并行获取，并在下载完成后立即执行；对于模块脚本，如果存在 async 属性，则脚本及其所有依赖项将在解析的同时并行获取，并在全部下载完成后立即执行。
    • 对于没有 src 属性的经典脚本，不能使用此属性，在这种情况下设置它将不起作用。
    • 此属性可以消除解析器阻塞的 JavaScript。没有此属性时，浏览器必须加载并执行脚本后才能继续解析。
    • 如果同时指定了 defer 属性，元素将表现为仅指定了 async 属性。
    • 适用场景：与页面渲染独立的脚本，即脚本不依赖 DOM，也不依赖其他脚本。
      • 第三方统计/分析脚本；
      • 广告脚本；
      • 独立的功能模块。
  • defer：布尔属性，告知浏览器，脚本应在文档解析完成后、触发 DOMContentLoaded 事件之前执行。
    • 带有 defer 属性的脚本会阻止 DOMContentLoaded 事件的触发，直至脚本加载并执行完毕。
    • 若 src 属性不存在，则不得使用此属性，此时该属性不会产生任何效果。
    • defer 属性对模块脚本无效，模块脚本默认即延迟执行。
    • 带有 defer 属性的脚本将按照其在文档中出现的顺序依次执行。
    • 该属性可消除阻塞解析器的 JavaScript，避免浏览器在继续解析之前必须先加载并执行脚本。
    • 如果同时指定了 async 属性，元素将表现为仅指定了 async 属性。
    • 适用场景：需要操作 DOM 或依赖其他脚本顺序的 JS。
      • 页面初始化脚本；
      • 大型框架或库；
      • DOM 操作类脚本。
  • blocking：明确指示某些操作应被阻塞，直至脚本执行完毕。
    • 可选值：
      • render：屏幕上的内容渲染被阻塞。
    • 只有位于文档 <head> 中的 script 元素才可能阻塞渲染。脚本默认不会阻塞渲染。
    • 如果 script 元素不包含 type="module"、async 或 defer，它会阻塞解析而非渲染。
    • 如果通过脚本动态添加此类 script 元素，则必须设置 blocking="render" 才能使其阻塞渲染。
  • referrerpolicy：指示获取脚本或脚本所获取资源时发送何种 referrer。
    • 具体的属性值，请参考 <link> 元素。
  • integrity：此属性包含内联元数据，用户代理可以使用这些元数据验证获取到的资源是否未被意外篡改。
    • 具体的使用，请参考 <link> 元素
    • 当没有 src 属性时，不得指定此属性。
  • fetchpriority：提供获取外部脚本时相对优先级的提示。可选值：
    • high：相对于其他外部脚本，以高优先级获取外部脚本。
    • low：相对于其他外部脚本，以低优先级获取外部脚本。
    • auto：默认值，不设置获取优先级偏好。
使用示例

示例1：经典脚本的默认行为

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>经典脚本的默认行为</title>
  </head>

  <body>
    <script src="./js/a_classic.js"></script>
    <script src="./js/b_classic.js"></script>
    <script>
      console.log("c") // 最终输出为：a、b、c
    </script>
  </body>
</html>

示例2：async 属性的使用

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>async 属性的使用</title>
    <script src="./js/a_async.js" async></script>
    <script src="./js/b_async.js" async></script>
  </head>

  <body>
    <script>
      console.log("c")
      // 最终输出：以下任意一种
      // c、a、b
      // c、b、a
      // a、b、c
      // a、c、b
      // b、a、c
      // b、c、a
    </script>
  </body>
</html>

示例3：defer 属性的使用

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>defer 属性的使用</title>
    <script src="./js/a_defer.js" defer></script>
    <script src="./js/b_defer.js" defer></script>
  </head>

  <body>
    <script>
      console.log("c") // 最终输出：c、a、b
    </script>
  </body>
</html>

示例4：module 类型的使用

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>module 类型的使用</title>
  </head>

  <body>
    <script type="module">
      import {add} from "./js/add_module.js"
      console.log(add(4, 6))
    </script>
  </body>
</html>

示例5：importmap 类型的使用-基本使用

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>importmap 类型的使用-基本使用</title>
    <script type="importmap">
      {
        "imports": {
          "vue": "https://cdn.jsdelivr.net/npm/vue@3.5.25/+esm"
        }
      }
    </script>
  </head>

  <body>
    <script type="module">
      import {version} from "vue"
      console.log(version)
    </script>
  </body>
</html>

示例6：importmap 类型的使用-scopes 参数的使用

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>importmap 类型的使用-scopes 参数的使用</title>
    <script type="importmap">
      {
        "imports": {
          "vue": "https://cdn.jsdelivr.net/npm/vue@3.5.25/+esm"
        },
        "scopes": {
          "js/assets/": {
            "vue": "./js/assets/vue.js"
          }
        }
      }
    </script>
  </head>

  <body>
    <script type="module">
      import {version} from "vue"
      console.log(version)
    </script>
    <script src="./js/assets/index.js" type="module"></script>
  </body>
</html>

示例7：integrity 属性的使用

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>integrity 属性的使用</title>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"
    integrity="sha384-1H217gwSVyLSIfaLxHbE7dRb3v4mYCKbpQvzx0cegeju1MVsGrX5xXxAvs/HgeFs"
    crossorigin="anonymous"></script>
  <script>
    console.log(jQuery.fn.jquery)
  </script>
</head>

<body>
  <p>最终效果请查看控制台~</p>
</body>

</html>
注意事项

  • 经典 <script>（非 module，且带 src）默认行为：

    • HTML 解析器遇到 <script>；
    • 停下解析 → 去下载对应的 JS 文件；
    • 下载完 → 立即执行脚本；
    • 执行完以后 → 继续往下解析 HTML。

  • 带有 async 属性的经典脚本执行流程：

    • 解析器遇到 <script src="xx" async>

      • 继续解析 HTML（不阻塞），同时发起脚本下载请求。

    • 当脚本下载完毕：

      • 暂停 HTML 解析 → 执行脚本 → 执行完继续解析 HTML。

    • 多个 async 脚本：谁先下载完谁先执行，互不等。

    • 对 DOMContentLoaded 的影响：

      • async 脚本执行时间不确定，可能在 DOMContentLoaded 之前或之后。

  • 带有 defer 属性的经典脚本执行流程：

    • 解析器遇到 <script src="xx" defer>

      • 继续解析 HTML，同时后台下载脚本。

    • 浏览器会等到：

      • HTML 全部解析完（DOM 构建完成）；
      • 所有 defer 脚本都下载好了；
      • 然后按文档中的定义顺序执行这些脚本。

    • 执行完成后，触发 DOMContentLoaded。

  • 如果已经使用了 defer，建议将脚本放在 <head> 中。浏览器可以尽早开始下载脚本（而不是等到解析到 <body> 底部才发起请求）。

相关推荐
wing982 小时前
用 AI 实现图片懒加载，这也太简单了！
前端·vue.js·图片资源
sigernet2 小时前
Claude Code 不再推荐 npm 安装：官方改为 Native Installer
前端·npm·node.js
lxh01132 小时前
函数防抖题解
前端·javascript·算法
我发现一个问题2 小时前
node+ts+koa全栈框架学习-1
前端
sure2822 小时前
React Native中自定义TabBar
前端·react native·react.js
bluceli2 小时前
CSS自定义属性与主题切换：构建动态UI的终极方案
前端·css
默默学前端2 小时前
HTML 高频面试题 5 道｜吃透基础，面试不慌（附详细解析）
前端·面试·职场和发展·html5
豆芽包2 小时前
前端性能优化-图片懒加载技术
前端·面试
bluceli2 小时前
JavaScript WeakMap与WeakSet：内存优化的秘密武器
前端·javascript
热门推荐
01GitHub 镜像站点02OpenClaw 使用和管理 MCP 完全指南03Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南04本地部署 OpenClaw + DeepSeek-R1 完全指南05OpenClaw macOS 完整安装与本地模型配置教程（实战版）06OpenClaw 飞书机器人不回复消息？3 小时踩坑总结07得物前端部门，没了08OpenClaw 连接飞书完整指南：插件安装、配置与踩坑记录09UV安装并设置国内源10Window 10部署openclaw报错node.exe : npm error code 128