单元 2：理解 HTML 的功能

你好，未来的网页开发工程师！欢迎来到 HTML 的精彩世界。这一章非常关键，因为 HTML（超文本标记语言）是你所访问过的每一个网站的基石。

如果你起初觉得语法（即编写代码的具体方式）有点棘手，别担心。我们将把 HTML 拆解为简单且实用的组件。学完这一节，你将完全理解 HTML 是如何为互联网上的内容构建结构的。

第 1 节：HTML——网页的基石

什么是 HTML？

HTML 的全称是 HyperText Markup Language（超文本标记语言）。

  • HyperText（超文本）： 指的是将多个文档链接在一起的能力。这就是为什么你可以点击一个按钮或一段文字，然后跳转到不同的页面或部分（我们称之为超链接）。
  • Markup（标记）： 意味着我们使用特殊的代码（标签）来定义和标注文档的各个部分。HTML 并不指挥计算机如何执行任务，它只是简单地告诉浏览器内容是什么。
  • Language（语言）： 这是网页浏览器使用的一种沟通系统。

核心功能： HTML 的主要功能是为网页内容提供结构和语义（含义）。HTML 会向网页浏览器传达诸如“这段文字是主标题”、“这是一个列表”或“这是一张图片”等信息。

类比： 想象一下盖房子。HTML 就是结构蓝图——它是骨架、梁柱和墙壁。它决定了房间的位置，但并不决定墙漆的颜色或窗帘的样式（那是 CSS 的工作，我们稍后会学习）。

浏览器是如何解析 HTML 的？

你的网页浏览器（如 Chrome、Edge 或 Firefox）会从上到下读取 HTML 文件。当它遇到一个 HTML 标签时，它就知道该如何准确地呈现那部分内容。

  • 如果浏览器看到 <h1>，它就知道必须将包含的文字显示为最重要的标题。
  • 如果它看到 <img>，它就知道需要获取并显示一个图像文件。
快速回顾：

HTML 定义了结构并实现了导航（超文本）。

第 2 节：构建模块——元素、标签和属性

要理解 HTML 的功能，你必须掌握它的三个核心组件。

1. 标签与元素

标签（Tag） 是用尖括号（< >）包围的代码。标签通常成对出现：

  • 起始标签（Opening Tag）： 标记元素的开始（例如 <p>）。
  • 结束标签（Closing Tag）： 标记元素的结束，用正斜杠表示（例如 </p>）。

元素（Element） 是整个结构，包括起始标签、内容和结束标签。

示例：
<p>这是一个段落元素。</p>

自闭合（空）元素

有些元素不包含内容，因此不需要结束标签。它们的功能通常是在页面中插入某些东西。

示例：换行元素 <br />，或图像元素 <img />。

功能检查： 元素定义了内容是什么（段落、列表项等）。

2. 属性

属性（Attributes） 用于提供关于元素的额外信息。它们总是放置在起始标签内部，通常以 名称="值" 的形式出现。

功能检查： 属性用于修改或指定元素的行为或源信息。

类比： 如果 <a>（锚点/链接）标签是路标的结构，那么 href 属性就准确地告诉了你该路标指向哪里（目标地址）。

你必须掌握的关键属性：

  • href（超文本引用）： 用于 <a> 标签，指定目标的 URL 地址。
  • src（源）： 用于 <img> 标签，指定图像的文件路径。
  • alt（替代文本）： 用于 <img> 标签，为屏幕阅读器或图像无法加载时提供描述。

使用属性的示例：
<img src="photo.jpg" alt="一张日出的照片" />

记忆助手（元素 vs. 属性）：

元素 说的是“我是一个链接”（锚点标签：<a>）。

属性 说的是“我需要去这里”（href="目标地址"）。

第 3 节：基础文档结构

每个功能完善的 HTML 页面都遵循一套强制性的结构。该结构决定了哪些信息对用户可见，哪些是为了让浏览器进行处理。

第 1 步：声明

<!DOCTYPE html>

这不是 HTML 元素。它是一条对浏览器的强制性指令，告诉浏览器应该预期哪种版本的 HTML（在本例中是 HTML5）。它的功能是确保页面以“标准模式”正确渲染。

第 2 步：根元素

<html> ... </html>

这个根元素包含了页面上的所有其他内容。它通常包含一个语言属性（如 lang="zh-CN"），这对无障碍访问和搜索引擎非常重要。

第 3 节：头部区域（元数据）

<head> ... </head>

这里的内容不会直接显示在主页面上。它的功能是承载元数据——即关于 HTML 文档本身的数据。

  • 关键功能：
    • 设置在浏览器标签页中显示的页面标题（通过 <title>）。
    • 链接到外部文件，例如 CSS 样式表。
    • 指定字符集（如 UTF-8）。
第 4 步：主体区域（内容）

<body> ... </body>

这是对用户而言最重要的部分。它的功能是包含网页的所有可见内容、结构和媒体。

  • 包括： 标题、段落、图像、表格、列表和导航菜单。
你知道吗？

你在 <head> 区域放置的 <title> 是搜索引擎（如 Google）判断你页面主题最重要的因素之一！

第 4 节：构建内容的关键功能元素

这些元素定义了内容如何组织和呈现，从而赋予页面意义（语义）。

1. 标题（<h1> 到 <h6>）

功能： 标题为内容提供了层级结构，就像教科书中的章节一样。

  • <h1> 是最重要的标题（通常是页面的主主题）。
  • <h6> 是最不重要的标题（用于次要的小节）。

重要规则： 每个页面应该只有一个 <h1> 元素。按正确的顺序使用标题（例如，不要从 <h1> 直接跳到 <h4>）既能改善 SEO（搜索引擎优化），也能增强无障碍性。

2. 段落（<p>）

功能： 段落元素用于将相关的句子组合成独立的文本块。

常见错误： 学生有时会尝试重复使用 <br /> 标签来在文本块之间创建间距。创建内容块的正确方法始终是使用结构化的 <p> 元素。

3. 列表（<ul> 和 <ol>）

列表对于清晰的组织至关重要。

  • 无序列表（<ul>）： 创建一个顺序无关的列表（例如原料清单）。每个条目都使用 <li> 标签。
  • 有序列表（<ol>）： 创建一个顺序至关重要的列表（例如分步说明）。每个条目也使用 <li> 标签。

功能： 列表提供了有意义的分组和呈现，使内容更易于浏览和理解。

4. 超链接（锚点标签：<a>）

功能： <a> 标签是实现“超文本”的关键。它将当前文档链接到另一个文档或资源。

正如前面讨论的，其核心功能依赖于 href 属性，该属性存放了目标 URL。

示例：
<a href="https://www.edexcel.com">访问考试局网站</a>

5. 图像（<img />）

功能： 图像元素将外部媒体（如 JPEG 或 PNG 文件）嵌入到文档中。

<img /> 元素需要两个关键属性以实现完整功能并符合规范：

  1. src： 告诉浏览器到哪里找到图像文件。
  2. alt： 提供文本描述。这对于视障用户（无障碍性）以及 SEO 至关重要，它能帮助搜索引擎理解图像内容。

要点总结

HTML 是网页明确的结构语言。其功能完全专注于定义内容结构和实现文档间的导航。

记住，复杂的网站只不过是成百上千个 HTML 元素，在标签和属性规则的共同作用下协同工作的结果。你已经成功掌握了这些基础概念！

单元 2 核心功能检查清单
  • HTML 结构： <!DOCTYPE>, <html>, <head>（元数据）, <body>（可见内容）。
  • 标签： 定义内容的边界。
  • 属性： 修改或指定元素行为（例如 href, src, alt）。
  • 语义功能： 标题（<h1>）定义重要性；段落（<p>）定义文本块；列表（<ul>/<ol>）定义分组信息。