你好，未来的网页设计师！

欢迎来到精彩的网页设计（Web Page Design）世界！本章将涵盖“核心概念”——这些是你在开始编写代码之前必须掌握的基本构建块和规则。

如果一开始觉得有点难，别担心！ 我们会将复杂的概念拆解为简单明了的步骤。把本章想象成学习一位建筑大师使用的基本工具——只要掌握了这些工具，建造任何东西都将成为可能！

快速回顾：什么是网页？

网页本质上是一个用特殊代码编写的文档，网络浏览器（如 Chrome 或 Safari）可以读取这些代码并将其可视化地显示出来。

1. 基础：HTML 与标记语言

什么是 HTML？

HTML 的全称是 HyperText Markup Language（超文本标记语言）。它是用于创建几乎所有你所见网页的结构和内容的语言。

  • 超文本（HyperText）： 意味着文本通过超链接（hyperlinks）相互连接，允许你从一个页面跳转到另一个页面。
  • 标记（Markup）： 这点很关键！HTML 是一种标记语言，而不是编程语言。它不会命令计算机执行计算，而是告诉浏览器内容应该如何组织（structured）和标注（labelled）。
类比时间！

想象一下人体：

  • HTML 是骨架（结构）： 它定义了头部（标题）、躯干（段落）和四肢（列表/图像）的位置。
  • CSS（我们稍后会讲到）是皮肤、毛发和衣服（外观）。

“标记”有什么作用？

标记使用特殊的代码（称为标签，tags）来包含和定义不同部分的内容。例如，将文本标记为标题、段落或列表项。

快速回顾： HTML 提供结构。它对内容进行标注，以便浏览器知道某一部分是标题还是普通文本。

2. 核心词汇：标签、元素和属性

为了流畅地使用网页设计语言，你必须理解以下三个核心术语的区别：

标签（Tags）

标签是用于定义元素起始和结束的标记。标签始终用尖括号（< 和 >）包围。

  • 起始标签： <p>（开始一个段落）
  • 结束标签： </p>（结束一个段落，注意正斜杠 /）

元素（Elements）

元素是一个完整的单元，由起始标签、内容和结束标签组成。

示例： <p>这是内容。</p>

以上整个部分就是一个段落元素。

你知道吗？ 有些元素，如图像标签（<img>）或换行标签（<br>），不包裹内容，因此不需要结束标签。这些被称为自闭合（self-closing）或空（void）元素。

属性（Attributes）

属性提供有关元素的额外信息。它们总是放在起始标签内，绝不会放在结束标签中。它们的书写格式为：name="value"。

示例： 如果你想显示一张图像（<img>），你需要一个属性来告诉浏览器去哪里找到图像文件。

<img src="photo.jpg" alt="一只猫的照片">

  • 名称是 src（来源），值是 "photo.jpg"。
  • 名称是 alt（替代文本），值是 "一只猫的照片"。（这有助于视障用户和搜索引擎理解内容。）
记忆诀窍：标签三明治

元素是三明治。标签是面包。内容是馅料。属性是贴在面包（起始标签）上的额外贴纸，用来提供特殊说明！

3. 黄金法则：关注点分离（结构与表现）

在现代网页设计中，我们严格地将页面的外观与其意义和结构分离开来。这被称为关注点分离（Separation of Concerns）。

HTML：结构

HTML 的工作仅仅是定义内容是什么。

  • “这是主标题 (H1)。”
  • “这是一个链接 (A 标签)。”
  • “这是一张图像 (IMG 标签)。”

CSS：表现

CSS（层叠样式表）控制结构看起来怎么样。

  • “把 H1 设置为蓝色并居中。”
  • “把链接设置为粗体并去掉下划线。”
  • “将图像放置在页面的右侧。”
为什么要进行这种分离？
  1. 一致性： 如果你想让一个拥有 100 个页面的网站中所有标题都变成绿色，你只需修改一行 CSS 代码，而不是 100 个单独的 HTML 文件。
  2. 效率： HTML 文件更小，加载速度更快，因为它们不包含杂乱的样式信息。
  3. 可访问性： 屏幕阅读器和搜索引擎可以轻松理解纯结构，而不会被表现代码混淆。
常见错误： 使用旧的 HTML 标签（如已弃用的 <font> 标签）来控制颜色或大小。在 9210 课程中，我们必须使用 CSS 来处理表现，HTML 仅用于结构。

4. 文件路径：绝对路径 vs 相对路径

当你链接到另一个页面、图像或样式表时，必须准确告诉浏览器在哪里可以找到该文件。这个位置地址称为文件路径。主要有两种类型：

绝对路径（Absolute File Paths）

绝对路径给出了文件的完整地址，从协议（例如 http:// 或 https://）开始。

  • 用于链接到当前网站之外的资源。
  • 示例： <a href="https://www.officialwebsite.com/index.html">
  • 类比： 使用完整的 GPS 坐标。无论你从哪里开始，它都有效。

相对路径（Relative File Paths）

相对路径给出了相对于你当前正在查看的文件的地址。

  • 用于链接到当前网站之内的资源（内部链接）。
  • 它更短、更高效，因为浏览器会自动补全地址的前半部分。
相对路径的工作原理（分步说明）：
  1. 链接到同一文件夹中的文件：
    示例： 从 page1.html 链接到 page2.html（在同一文件夹中）：
    <a href="page2.html">去往第二页</a>
  2. 链接到子文件夹中的文件（向下一级）：
    示例： 链接到名为 images 文件夹中的图像：
    <img src="images/logo.png">
  3. 链接到父文件夹中的文件（向上一级）：
    使用 ../ 在文件夹结构中向上移动一级。
    示例： <a href="../index.html">返回首页</a>
重点结论： 内部链接请始终使用相对路径。这样即使你将整个网站迁移到新的服务器，所有链接也会自动生效！

5. 浏览器的任务：显示页面

当你输入 URL（网址）并按下回车键后会发生什么？浏览器执行一个被称为渲染（rendering）的关键过程。

分步说明：渲染网页

  1. 请求： 浏览器向服务器发送请求，索取 HTML 文件（以及任何链接资源，如 CSS 文件或图像）。
  2. 接收数据： 服务器将原始 HTML、CSS 和其他文件发送回你的计算机。
  3. 解析 HTML： 浏览器逐行读取 HTML 代码（这称为解析，parsing）。它会构建一个内部结构图，称为文档对象模型 (DOM)。
  4. 应用样式 (CSS)： 浏览器读取 CSS 文件，并将样式（颜色、字体、大小）附加到 HTML 中定义的相应结构元素上。
  5. 渲染/绘制： 浏览器根据结合后的 HTML 结构和 CSS 样式，计算出每个元素在屏幕上的精确位置。这个最后的绘制过程就是渲染。

鼓励： 理解这个过程有助于你调试代码！如果你的页面显示有误，你就知道要么是 HTML 结构不正确（第 3 步），要么是 CSS 规则没有正确应用（第 4 步）。

本章总结：核心概念回顾

HTML 是网页的结构语言。
  • 元素由标签（如 <p>）组成，用于定义内容。
  • 属性在起始标签内提供额外信息（例如 id="main"）。
  • 关注点分离意味着 HTML 处理结构（内容是什么），CSS 处理表现（内容看起来如何）。
  • 绝对路径用于链接到网站外部（完整的 URL）。
  • 相对路径用于链接到网站内部（基于位置的简短地址）。
  • 浏览器解析 HTML 并渲染最终的可见页面。