欢迎来到网页技术的世界！
你有没有想过，浏览器是如何将一堆代码变成精美的网页？或者 Google 是如何能在不到一秒的时间内，精确地找到你想要的信息？在这一章节，我们将揭开网页技术（Web Technologies）的神秘面纱。我们将探讨网页的基础结构、搜索引擎如何对网页进行排名，以及当你点击按钮时，「思考」过程究竟发生在哪里。
如果觉得信息量太大也别担心，我们会将其拆解为四个简单的部分。让我们开始吧！
1. 三大支柱：HTML、CSS 与 JavaScript
制作网页就像盖房子一样。要建造一栋实用且美观的房屋，你需要三样东西：结构、装饰，以及公用设施（如水电系统）。在网页开发中，我们也使用三种特定的语言来达成这些目的。
A. HTML (超文本标记语言) - 结构
HTML 是网页的「骨架」。它定义了网页中「有什么」。它使用标签 (tags) 来告诉浏览器：「这是标题」、「这是段落」或「这是一张图片」。没有 HTML，网页就没有内容。
B. CSS (层叠样式表) - 外观
CSS 是网页的「油漆与装饰」。它告诉浏览器 HTML 应该「看起来怎样」。你可以使用 CSS 来调整颜色、字体、边距和版面配置。将内容 (HTML) 与样式 (CSS) 分离是一个核心原则，因为它让你只需更新一个 CSS 文件，就能改变整个网站的外观。
C. JavaScript - 行为
JavaScript 增加了「互动性」。如果 HTML 是骨架，CSS 是油漆，那么 JavaScript 就是电力系统。它处理如图片轮播、表单验证，或是当你按下「赞」按钮时会发生什么事。它让静态网页变得动态 (dynamic)。
房屋比喻：
- HTML： 砖块、墙壁与木梁。
- CSS： 壁纸、地毯与墙面油漆颜色。
- JavaScript： 电灯开关、门铃与智能温控系统。
快速回顾： 记住，HTML 提供内容，CSS 提供样式，而 JavaScript 提供功能。
2. 搜索引擎索引 (Search Engine Indexing)
互联网上有数十亿个网页，搜索引擎是如何找到正确的那一个呢？它们并不会在你每次输入搜索指令时才去搜索「实时」的网络，那样太慢了！相反地，它们会搜索一个索引 (index)。
索引是如何建立的：
1. 爬取 (Crawling)： 搜索引擎会使用名为蜘蛛 (spiders) 或爬虫 (crawlers) 的软件。这些程序会造访网页，读取内容，并追踪网页上的每一个链接以发现新页面。
2. 索引 (Indexing)： 蜘蛛找到的信息（关键词、元数据和内容）会被储存在一个庞大的数据库中，称为索引 (index)。
3. 搜索 (Searching)： 当你搜索某个项目时，搜索引擎会在它的索引中寻找符合的内容，而不是直接在真实的互联网上搜索。
关键点： 如果一个网站没有被索引，那么无论它内容多好，都不会出现在搜索结果中！
3. PageRank 算法
如果有 1,000 个网页都在讨论「巧克力蛋糕」，Google 是如何决定谁排第一呢？他们使用一种称为 PageRank 的算法（以 Google 共同创始人 Larry Page 的姓氏命名）。
运作原理：
PageRank 将从 A 页面连到 B 页面的链接视为一项信任投票。然而，并非所有投票的权重都相同！
- 来自高排名网站（如 BBC）的链接，比来自全新博客的链接更有价值。
- 指向某个页面的链接越多，该页面的权威性 (authority) 就越高。
- 如果一个页面有太多连出的链接，那么它分配给每个链接的「价值」就会被稀释。
（简化后的）公式：
页面 \( A \) 的 PageRank 是透过此逻辑计算的：
\( PR(A) = (1-d) + d \left( \frac{PR(B)}{L(B)} + \frac{PR(C)}{L(C)} + ... \right) \)
其中：
- \( PR \) 是该页面的 PageRank 值。
- \( d \) 是「阻尼系数」(damping factor)（通常设定为 0.85），代表使用者停止点击链接的概率。
- \( L \) 是该页面上的外部链接数量。
你知道吗？
PageRank 不仅仅看有多少人链接到你，它还看是「谁」链接到你。这代表质量与数量同样重要。
4. 客户端 (Client-Side) 与服务器端 (Server-Side) 处理
当你使用网页应用程序时，代码会在两个不同的地方执行。理解「工作」发生在哪里对于考试至关重要。
A. 客户端处理 (Client-Side Processing)
客户端 (Client) 指的是你笔记本电脑或手机上的网页浏览器（如 Chrome、Safari 等）。客户端处理意味着代码被下载并在你的设备上执行。
- 用途： 初步表单验证（例如检查电子邮件是否有「@」符号）、动画效果以及本地互动元素。
- 优点： 速度快（无需等待数据在互联网上传输），并减轻服务器的负载。
- 缺点： 可能会被使用者篡改（对于密码检查等安全性事务来说并不安全）。
B. 服务器端处理 (Server-Side Processing)
服务器 (Server) 是远程那台强大的电脑，负责「托管」网站。服务器端处理意味着数据会被发送到该电脑进行处理，处理结果再回传给你。
- 用途： 数据库查询（如搜索产品）、处理付款以及安全登录。
- 优点： 安全性高得多，并且可以存取无法塞进你手机的大型数据库。
- 缺点： 数据来回传输需要时间（延迟 latency）。
餐厅比喻：
想象你在餐厅里：
- 客户端： 你在餐桌上自己加盐。你自己动手，马上就能完成，厨师不需要操心。
- 服务器端： 你请厨师煎牛排。你不能在餐桌上自己煎（你没有烤架），这样更「安全」（厨师知道如何处理生肉），但你必须等待服务员把餐点送回来。
要避免的常见错误： 不要假设所有事情都发生在服务器上！例如鼠标移到按钮上时按钮变色，这类简单的互动几乎都是在客户端处理的。
最终重点回顾
1. HTML/CSS/JS： 分别负责结构、外观与行为。
2. 索引 (Indexing)： 蜘蛛爬取网络以建立可搜索的数据库。
3. PageRank： 一种基于链接质量与数量，以数学方式为网页排名的机制。
4. 处理 (Processing)： 使用客户端处理以追求速度与界面效果；使用服务器端处理以确保安全性并处理数据库。
恭喜你读完了网页技术的笔记！休息一下吧，然后试着向别人解释「房屋比喻」——这是确保你真正理解的最棒方法！