Skip to content

HTML Head

HTML 元素

元素是元数据（关于 HTML 文档的信息）和资源链接的容器，这些内容不会直接显示在页面上。

元数据 (metadata) 为浏览器、搜索引擎和其他 Web 服务提供了关于 HTML 文档的详细信息。它包括文档标题、字符集 (character set)、样式 (styles)、脚本 (scripts) 和其他元 (meta) 信息。

中通常包含的关键元素包括：

</code>: 定义文档标题（必需）。
<code><meta></code>: 指定字符集 (character set)、视口设置 (viewport settings)、页面描述、关键词、作者等。


: 链接到外部资源，主要是 CSS 样式表 (CSS stylesheets) 和网站图标 (favicons)。

<code><script></code>: 嵌入或链接 JavaScript 文件。

: 指定页面中所有相对 URL 的基本 URL/目标（请谨慎使用）。


基本的 HTML 文档结构
Section titled “基本的 HTML 文档结构”
典型的 HTML 文档结构如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
  <link rel="stylesheet" href="styles.css">
  <!-- 其他 meta 标签、脚本等 -->
</head>
<body>

  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>

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

注意  标签上的 lang=“en” 属性，它声明了文档的主要语言，这对可访问性 (accessibility) 和搜索引擎 (search engines) 很重要。
应该省略 、 或  标签吗？
Section titled “应该省略 、 或  标签吗？”
虽然 HTML5 规范在特定条件下技术上允许省略 、 和  标签，但 强烈建议不要这样做。
你应该始终包含这些标签的原因：

清晰性和可读性： 明确定义这些核心元素使文档结构对读者和维护者来说更清晰。
兼容性： 一些旧的浏览器或 HTML 解析工具可能无法正确推断结构，可能导致渲染错误或功能损坏。
最佳实践： 包含这些标签是既定的惯例，被广泛认为是 Web 开发中的最佳实践。
属性放置：  标签是声明文档语言 (lang 属性) 的标准位置。

坚持包含 、 和  的标准结构，以构建健壮且易于维护的网页。
 元素Section titled “ 元素”
</code> 元素在所有 HTML 文档中都是必需的。它定义了显示在以下位置的标题：


浏览器的标题栏或标签页。
浏览器书签/收藏夹。
搜索引擎结果页 (SERPs)。

简洁且描述性的标题对于可用性 (usability) 和 SEO 至关重要。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Effective Web Page Titles | Best Practices</title>
  <!-- ... -->
</head>
<body>
  <!-- ... -->
</body>
</html>

Section titled “ 元素”

示例：

<head>
  <title>Internal Styles Example</title>
  <style>
    body {
      background-color: lightyellow;
    }
    p {
      color: darkblue;
      font-size: 16px;
    }
  </style>
</head>

虽然这对于小型演示或单页应用很有用，但最佳实践是使用通过  元素链接的外部样式表，以便更好地组织、缓存和维护。
 元素
Section titled “ 元素”
 元素定义了当前文档与外部资源之间的关系。它最常见的用途是链接外部 CSS 样式表。
链接外部样式表的示例：
<head>
  <title>External Stylesheet</title>
  <link rel="stylesheet" href="css/main.css">
</head>

其他用途包括链接到网站图标 (favicons)（浏览器标签页中显示的图标）：
<link rel="icon" href="/favicon.ico" sizes="any"> <!-- 基本网站图标 -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml"> <!-- SVG 网站图标 -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> <!-- Apple touch icon -->

 元素
Section titled “ 元素”
 元素提供了关于 HTML 文档的各种元数据 (metadata)。
必需的 Meta 标签：

字符集 (Character Set)： 声明文档的字符编码。UTF-8 是通用标准，应始终使用。

<!-- 设置字符编码为 UTF-8 (HTML5 语法) -->
<meta charset="UTF-8">


视口 (Viewport)： 配置响应式 Web 设计的视口 (viewport)，确保页面在不同设备上正确缩放。

<!-- 配置视口以实现响应式设计 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

常见的可选 Meta 标签：

描述 (Description)： 提供页面内容的简要摘要，常被搜索引擎用于搜索结果中。

<meta name="description" content="Learn the fundamentals of the HTML head element, including essential meta tags like charset and viewport.">


关键词 (Keywords)： 列出相关的关键词（对现代 SEO 不那么重要，但仍可包含）。

<meta name="keywords" content="HTML, head, meta, title, link, style, script">


作者 (Author)： 指定页面的作者。

<meta name="author" content="Your Name or Company">


Open Graph / 社交媒体： 定义内容在社交平台（如 Facebook, Twitter）上分享时的显示方式。

<!-- Open Graph 标签示例 -->
<meta property="og:title" content="Page Title for Social Media">
<meta property="og:description" content="Description for social sharing.">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page.html">

注意：用于自动刷新页面的 http-equiv=“refresh” meta 标签通常不推荐使用，因为它存在可用性 (usability) 和可访问性 (accessibility) 问题。如果需要重定向 (redirection)，请使用 JavaScript 或服务器端 (server-side) 方法。
Section titled “ 元素”

它可以包含内联脚本：

<script>
  function showMessage() {
    alert('Hello from inline JavaScript!');
  }
  // 你可以在这里调用函数或添加事件监听器
</script>

或者链接到外部脚本文件（推荐方法）：
<script src="js/main.js"></script>

性能最佳实践 (Best Practice)：尽可能将引用外部文件的  结束标签之前。这使得浏览器 (browser) 在下载和执行脚本 (script) 之前能够先解析和渲染 HTML 内容，从而提高感知的页面加载速度。
现代属性 (Attributes)：对于外部脚本 (script)，使用 defer 属性确保它们在文档解析 (document parsing) 后但在 DOMContentLoaded 事件触发前执行。如果脚本可以独立运行而不会阻塞文档解析，则使用 async。
<script src="js/main.js" defer></script>

 元素
Section titled “ 元素”
 元素指定文档中所有相对 URL 的基本 URL 和/或目标。
示例：
<head>
  <base href="https://www.example.com/ K" target="_blank">
</head>
<body>
  <!-- 所有相对链接，例如 <a href="page.html">，现在将指向 -->
  <!-- https://www.example.com/ K/page.html 并在新标签页中打开 -->
</body>

注意： 标签可能令人困惑，并使维护更加困难，因为它改变了页面上所有相对链接的上下文。请谨慎使用，并且只有在你完全理解其影响时才使用。每个文档只能有一个  元素，并且必须放在  中。
HTML  元素总结
Section titled “HTML  元素总结”


































标签 描述
元数据 (metadata) 和资源链接的容器（非显示内容）。
</code>
必需元素，定义文档标题。
定义各种元数据 (metadata)（字符集、视口、描述等）。
链接到外部资源，主要是 CSS 和网站图标 (favicons)。

包含内部 CSS 样式（外部样式更推荐）。

嵌入或链接到 JavaScript 代码。
指定相对链接的基本 URL/目标（请谨慎使用）。