你好，未来的网页设计师！
欢迎来到精彩的网页设计（Web Page Design）世界！本章将涵盖最重要的“核心概念”——这些是你在开始编写代码之前，必须掌握的基本构建块与规则。
如果一开始觉得有点难，别担心！ 我们会将复杂的概念拆解为简单易懂的步骤。你可以把本章想象成学习建筑大师的基本工具——只要掌握了这些工具，建造任何东西都难不倒你！
快速回顾：什么是网页？
网页本质上是一个用特殊代码编写的文档，网络浏览器（如 Chrome 或 Safari）可以读取这些代码并将其可视化地显示出来。
1. 基础：HTML 与标记语言
什么是 HTML？
HTML 的全称是 HyperText Markup Language（超文本标记语言）。它是用来构建你所见到的几乎每一个网页之结构与内容的语言。
超文本（HyperText）： 这代表文本是通过超链接（hyperlinks）相互连接的，让你可以在不同页面之间跳转。
标记（Markup）： 这点很关键！HTML 是一种标记语言，而不是编程语言。它不会命令计算机执行计算，而是告诉浏览器内容应该如何进行结构化与标注。
类比提示！
试想人体构造：
HTML 是骨骼（结构）： 它定义了头部（标题）、躯干（段落）和四肢（列表/图像）的位置。
CSS（我们之后会学到）则是皮肤、毛发和衣服（外观）。
“标记”有什么作用？
标记使用一种特殊的代码，称为标签（tags），用来包含并定义不同的内容片段。例如，将文本标记为标题、段落或列表项。
2. 核心词汇：标签、元素与属性
为了流畅地使用网页设计语言，你必须理解以下三个核心术语的区别：
标签（Tags）
标签是定义元素起始与结束的标记。标签始终放在尖括号（< 和 >）内。
起始标签（Opening Tag）： <p>（开始一个段落）
结束标签（Closing Tag）： </p>（结束一个段落，请注意正斜杠 /）
元素（Elements）
元素是一个完整的单元，包含起始标签、内容以及结束标签。
示例： <p>这是内容。</p>
上述整串内容就是一个段落元素。
你知道吗？ 有些元素，例如图像标签（<img>）或换行标签（<br>），不包裹任何内容，因此不需要结束标签。这些被称为自闭合（self-closing）或空（void）元素。
属性（Attributes）
属性提供了关于元素的额外信息。它们总是放在起始标签内，绝不会放在结束标签内。书写格式为：name="value"。
示例： 如果你想显示一张图像（<img>），你需要一个属性来告诉浏览器去哪里找到这个图像文件。
<img src="photo.jpg" alt="一只猫的照片">
名称（name）是 src（来源），而值（value）是 "photo.jpg"。
名称（name）是 alt（替代文本），而值（value）是 "一只猫的照片"。（这能帮助视障用户和搜索引擎理解内容。）
记忆诀窍：标签三明治
元素就是整个三明治。标签就是面包。内容就是馅料。属性则是贴在面包（起始标签）上的额外贴纸，用来提供特殊说明！
3. 黄金法则：关注点分离（结构与表现）
在现代网页设计中，我们会严格将页面的“外观”与其“意义及结构”分离开来。这被称为关注点分离（separation of concerns）。
HTML：结构
HTML 的工作只是定义内容是什么。
“这是主标题 (H1)。”
“这是一个链接 (A 标签)。”
“这是一张图像 (IMG 标签)。”
CSS：表现
CSS（层叠样式表）控制结构看起来如何。
“把 H1 设为蓝色并居中。”
“把链接设为粗体并移除下划线。”
“将图像放在页面的右侧。”
为什么这种分离很重要？
1. 一致性： 如果你想让一个拥有 100 个页面的网站所有标题都变成绿色，你只需要修改一行 CSS 代码，而不是 100 个单独的 HTML 文件。
2. 效率： HTML 文件越小，加载速度就越快，因为里面没有包含杂乱的样式信息。
3. 无障碍性： 屏幕阅读器与搜索引擎可以轻易地理解纯粹的结构，而不会被表现代码干扰。
4. 文件路径：绝对路径与相对路径
当你要链接到另一个页面、图像或样式表时，你必须精确地告诉浏览器去哪里找到那个文件。这个位置地址称为文件路径（file path）。
绝对文件路径（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. 客户端与服务器端脚本（Client-Side vs. Server-Side Scripting）
网页的功能远不止显示静态文本和图像。脚本（scripts）是添加到网页中用来执行任务的小型程序：
客户端脚本（Client-Side Scripting）
执行位置： 直接在用户的网页浏览器（客户端）内执行。
用途： 用于为网页添加额外功能与交互性（例如在提交前验证表单输入，或制作交互式下拉菜单）。
服务器端脚本（Server-Side Scripting）
执行位置： 在网页发送至浏览器之前，在网页服务器上执行。
用途： 用于动态生成网页（例如查询数据库并为特定用户构建自定义的 HTML 页面）。
6. 浏览器的工作：显示页面
当你输入 URL（网址）并按下回车键后会发生什么？浏览器会执行一个至关重要的过程，称为渲染（rendering）。
分步解析：网页渲染过程
1. 请求： 你的浏览器向网页服务器发送请求，索取 HTML 文件（以及任何链接的资源，如 CSS 文件或图像）。
2. 接收数据： 服务器将原始的 HTML、CSS 和其他文件发回你的计算机。
3. 解析 HTML： 浏览器逐行读取 HTML 代码（这称为解析，parsing）。它会构建一个结构化的内部结构图，称为文档对象模型 (DOM)。
4. 应用样式 (CSS)： 浏览器读取 CSS 文件，并将样式（颜色、字体、大小）应用到 HTML 定义的对应结构元素上。
5. 渲染/绘制： 浏览器接着根据结合后的 HTML 结构与 CSS 样式，精确计算每个元素在屏幕上的放置位置。这个最终的绘制过程就是渲染。
鼓励一下： 理解这个过程有助于你进行调试！如果你的页面显示有误，你就会知道要么是 HTML 结构不正确（第 3 步），要么是 CSS 规则没能正确应用（第 4 步）。
章节总结：核心概念复习
元素（Elements）由标签（Tags）（如 <p>）组成，并用于定义内容。
属性（Attributes）在起始标签内提供额外信息（例如 id="main"）。
关注点分离意味着 HTML 处理结构（它是什么），而 CSS 处理表现（它看起来如何）。
绝对路径用于链接到网站外部（完整 URL），而相对路径用于链接到网站内部。
客户端脚本在浏览器内部添加功能，而服务器端脚本则在服务器上动态生成网页。
浏览器会解析（parse） HTML 并渲染（render）最终显示的页面。