HTML 标题

HTML 标题

标题对于构建网页内容结构和提高可访问性至关重要。

理解 HTML 标题

标题使用

到

标签定义。

表示最重要的标题（通常是页面的主标题），而

表示最不重要的标题。

标题使用示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"> <!-- 指定文档的字符编码 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 配置视口以实现响应式设计 -->
  <title>Headings Example</title> <!-- 设置浏览器标签页/窗口中显示的标题 -->
</head>
<body>

  <h1>Main Page Title (Most Important)</h1>
  <p>This paragraph introduces the main topic.</p>

  <h2>Section Title (Sub-heading)</h2>
  <p>This paragraph belongs to the first section.</p>

  <h3>Subsection Title (Less Important)</h3>
  <p>More specific details within the section.</p>

  <h2>Another Section Title</h2>
  <p>This paragraph starts a new major section.</p>

</body>
</html>

注意：浏览器通常会使用默认样式（如更大的字体大小和外边距）渲染标题，但你应该依靠 CSS 来精确控制视觉效果。

语义化标题的重要性

严格使用标题来命名章节和构建内容结构。避免仅仅为了让文本看起来更大或更粗而使用标题标签；应使用 CSS 进行样式设置。

为什么语义化标题很重要？

• SEO：搜索引擎使用标题来理解页面的结构和主要主题。
• 可访问性：屏幕阅读器使用标题来帮助用户快速浏览页面内容。一个逻辑化的标题结构（<h1> 后跟 <h2>，然后是 <h3> 等，不跳级）至关重要。
• 可读性：用户经常通过扫描标题来找到所需信息。清晰的标题能改善用户体验。

最佳实践：每页只使用一个 <h1> 作为主标题。使用 <h2> 到 <h6> 逻辑地构建其余内容，确保不跳过标题级别（例如，不要从 <h2> 直接跳到 <h4>）。

HTML 水平分割线（<hr>）

<hr> 标签表示段落级元素之间的主题分隔。它通常默认显示为一条水平线，但其语义含义是主题的转变。

使用 <hr> 表示同一章节内主题的变化，而不仅仅是为了装饰性的线条。仅用于视觉分隔时，应使用 CSS 边框。

主题分隔示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HR Example</title>
</head>
<body>
  <p>This paragraph discusses the first topic.</p>

  <hr>

  <p>This paragraph discusses a related but distinct second topic.</p>
</body>
</html>

HTML <head> 元素

<head> 元素是元数据（关于 HTML 文档的数据）的容器，它本身不直接显示在网页上。它包含浏览器和搜索引擎所需的重要信息。

它位于 <html> 标签和 <body> 标签之间。

<head> 中常见的元素：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"> <!-- 指定文档的字符编码 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 配置视口以实现响应式设计 -->
  <title>Document Title</title> <!-- 设置浏览器标签页/窗口中显示的标题 -->
  <link rel="stylesheet" href="styles.css"> <!-- 链接到外部 CSS 文件 -->
  <script src="script.js" defer></script> <!-- 链接到外部 JavaScript 文件 -->
  <!-- Other meta tags (description, keywords), favicons, etc. can go here --> <!-- 其他元标签（描述、关键词）、网站图标等可以放在这里 -->
</head>
<body>
  <!-- Visible page content goes here --> <!-- 可见的页面内容在此 -->
  <p>Hello World!</p>
</body>
</html>

关键元数据元素：

• <title>：定义文档的标题，显示在浏览器的标题栏或标签页中。对 SEO 和可访问性至关重要。
• <meta>：提供元数据，如字符集（charset）、视口设置、页面描述、关键词、作者。
• <link>：用于链接外部资源，最常见的是 CSS 样式表。
• <style>：包含内部 CSS 样式（对于大型项目较少使用，更推荐外部样式表）。
• <script>：链接到或包含 JavaScript 代码。

查看 HTML 源代码

曾经想知道网页是如何构建的吗？你可以查看任何页面的 HTML 源代码。

大多数现代浏览器允许你通过右键点击页面并选择“查看页面源代码”等选项，或使用浏览器的开发者工具（通常按 F12 键访问）来查看源代码。开发者工具提供了更交互式的方式来检查 HTML、CSS 和 JavaScript。

HTML 标签参考摘要

本节简要回顾了一些基本的 HTML 结构和元数据标签。

标签	描述
	HTML 页面的根元素。
	包含 HTML 文档的元信息。
	指定文档的标题（显示在浏览器标签页中）。
	提供元数据，如字符集、视口、描述。
	包含可见的页面内容。
to	定义 HTML 标题以建立结构和层级。
	表示内容之间的主题分隔。