欢迎来到网页技术的世界！
在本章中，我们将探索现代互联网的基石。由于这属于 OCR H046 课程中数据交换 (Exchanging Data) 的一部分，我们将探讨信息是如何被结构化、设计样式以及变得具有互动性的，从而可以在全球范围内共享。看完这些笔记后，你将会明白 HTML、CSS 和 JavaScript 是如何协同工作的，以及为什么压缩 (compression) 是让网页快速运行的“秘密武器”。
别担心，即使你从未写过代码，我们也会把这些概念拆解成非常简单的部分！
1. 网页开发的“三大支柱”
你可以把网站想象成一栋房子。要盖一栋房子，你需要三样东西：结构（砖块）、装饰（油漆）和功能（水电管道）。网页的运行方式完全相同。
A. HTML（结构）
HTML 的全名是 Hypertext Markup Language（超文本标记语言）。它是网页的骨架，告诉浏览器内容是什么（例如：“这是一个标题”、“这是一个段落”或“这是一张图片”）。
运行方式： HTML 使用标签 (tags) 来包裹内容。例如：
<h1>这是一个标题</h1>
<p>这是一个文字段落。</p>
快速回顾：HTML
- 它是一种标记语言，不是编程语言。
- 它定义了结构和内容。
- 它使用括号内的标签。
B. CSS（样式）
CSS 的全名是 Cascading Style Sheets（层叠样式表）。如果 HTML 是房子的砖块，那么 CSS 就是油漆、壁纸和地毯。它告诉浏览器内容应该看起来是什么样子。
为什么要用它？ 与其告诉网站上的每一个段落都要设置为“蓝色”和“12 号字号”，你可以编写一条 CSS 规则，一次改变所有的段落。这样可以保持代码整洁且易于管理。
你知道吗？ “层叠 (Cascading)”这个词的意思是规则会从一个层级“流向”下一个层级。如果你为整个页面设置了字体，页面内的所有段落都会继承该字体，除非你为它们设置了特定的专属规则！
C. JavaScript（行为）
JavaScript 是一种脚本语言 (scripting language)。它为页面增加了互动性。当你点击按钮时发生的动作、弹出窗口提示，或是让你无需重新刷新整个页面就能提交表单，全都是靠它实现的。
在我们盖房子的类比中，JavaScript 就是电灯开关或门铃——它处理的是行为。
关键概念：客户端处理 (Client-Side Processing)
JavaScript 通常在客户端 (Client-Side) 执行。这意味着代码会被发送到你的电脑，并由你的网页浏览器来执行。这比将每一次点击都发送到另一个国家的服务器要快得多！
关键重点：网页三位一体
HTML = 结构（内容是什么）
CSS = 表现（外观如何）
JavaScript = 互动（行为反应）
2. 高效交换数据：压缩
当我们在网络上交换数据时，我们希望它传输得越快越好。高质量的图片或视频通常是巨大的文件！为了快速传送它们，我们使用压缩 (Compression) 来缩小文件大小。
在考试中，你需要知道两种主要类型：有损压缩 (Lossy) 和 无损压缩 (Lossless)。
A. 有损压缩 (Lossy Compression)
有损压缩通过永久删除文件中的部分数据来运行。它会寻找人类眼睛或耳朵可能察觉不到的信息并将其“丢弃”。
例子： JPEG 图片或 MP3 音频文件。如果你使用有损压缩来处理一张蓝天的照片，电脑可能会将 50 种细微差异的蓝色简化为 5 种。看起来几乎一样，但文件大小却小得多。
缺点： 一旦数据丢失，就永远无法找回。如果你压缩过度，画质看起来就会出现“块状”或“像素化”。
B. 无损压缩 (Lossless Compression)
无损压缩在缩小文件的同时，不会丢失任何信息。当你解压文件时，它与原始文件 100% 相同。
它是如何做到的？ 它利用聪明的模式。与其存储“蓝色、蓝色、蓝色、蓝色、蓝色”，它会存储为“5 个蓝色”。这占用了较少的空间，但能让电脑完美地重建原始文件。
例子： PNG 图片、ZIP 文件或程序源代码。对于文字或银行记录等资料，你必须使用无损压缩，因为丢失任何一个字母都会改变含义！
记忆小撇步：
- Lossy (有损) = Lose (丢失) 数据（但文件变小）。
- Lossless (无损) = Less (较少) 空间（但保留所有数据）。
常见误区：
- 误区： 认为有损压缩总是“不好”的。
- 事实： 有损压缩对互联网来说非常棒！如果没有它，Netflix 的缓冲将永无止境，网站加载图片也会花上几分钟。
- 误区： 认为可以将已进行有损压缩的文件转回高质量的原始文件。
- 事实： 一旦数据在有损压缩中“丢失”，它就永远消失了。
快速回顾：压缩比较
1. 有损 (Lossy)： 文件较小，画质较低，数据永久丢失。用途：照片、视频、音频。
2. 无损 (Lossless)： 文件较大（相较于有损压缩），画质完美，数据无丢失。用途：文字、代码、文档。
总结检查清单
在你继续之前，请确保你能回答以下问题：
1. 我能解释 HTML、CSS 和 JavaScript 的不同角色吗？（结构 vs 样式 vs 互动性）
2. 我知道 JavaScript 是一种客户端 (client-side) 语言吗？
3. 我能解释为什么在交换数据时需要压缩吗？
4. 我能描述有损 (Lossy) 和 无损 (Lossless) 压缩之间的区别，并举出每个例子吗？
做得好！你已经掌握了 H046 考试中网页技术的精髓。记住“结构、样式、行为”这个模型，你会发现这个主题更容易记忆。