互联网与网站工作原理

BeginnerWeb Fundamentals

理解互联网的底层运作方式和网站的组成结构，是 Web 开发的第一步。

---

一、🌐 互联网的物理本质

互联网不是"云端"的抽象概念，而是由物理线缆连接的 全球计算机网络。

1.1 客户端 - 服务器模型

互联网中的计算机按角色分为两类：

角色	英文	职责
服务器	Server	7×24 小时在线，存储并提供网站的数据与文件
客户端	Client	用户用来访问互联网的终端设备

当用户在浏览器中输入网址时，本质上就是客户端向服务器发起请求，服务器返回所需的文件与数据。

1.2 海底光缆

各大洲之间的互联网连接依赖 海底光缆：

• 每根电缆包含 数百根光纤
• 使用激光传输数据，速率可达 400 Gbps
• 全球海底光缆分布可在 submarinecablemap.com 查看

TIP

每次加载网页，信号都在这些海底光缆中以光速穿越大洋，仅凭一个 IP 地址，在毫秒级完成全球通信。

---

二、🔍 DNS 解析流程

当你在浏览器输入 google.com 时，背后经历以下步骤：

浏览器 → ISP → DNS 服务器（查询 IP）→ 返回 IP → 浏览器直接访问目标服务器 → 服务器返回文件

关键角色

角色	全称	说明
ISP	Internet Service Provider	互联网服务提供商（如中国电信、AT&T）
DNS 服务器	Domain Name System Server	域名解析服务器，相当于互联网的 电话簿
IP 地址	Internet Protocol Address	每台联网设备的唯一标识，类似邮政编码

解析过程详解

1. 浏览器将域名 google.com 发送给 ISP
2. ISP 转发请求至 DNS 服务器
3. DNS 服务器在数据库中查找该域名对应的 IP 地址
4. IP 地址返回给浏览器
5. 浏览器使用 IP 地址 直接访问 目标服务器
6. 服务器返回网站所需的文件（HTML、CSS、JS 等）

动手验证

访问 nslookup.io，输入 google.com 可获取其 IP 地址。将该 IP 粘贴到浏览器地址栏，同样能看到 Google 首页。

---

三、🏗️ 网站三要素：HTML / CSS / JavaScript

浏览器从服务器接收的数据主要包含三类文件，各司其职：

HTML 的独立性

在三种文件中，只有 HTML 能独立构建网站。你无法只用一个 CSS 文件或一个 JavaScript 文件创建网站，但只用一个 HTML 文件就可以。事实上，最早的网站就是纯 HTML 构建的。

3.1 总览

文件类型	职责	房屋类比	回答的问题
HTML	结构与内容（Structure）	砖块、钢筋	页面上 有什么？
CSS	表现与样式（Presentation）	油漆、装修	页面 长什么样？
JavaScript	行为与交互（Behavior）	电路、开关	页面 能做什么？

3.2 HTML — 结构层

HTML（HyperText Markup Language）定义页面的 内容与结构：

• 文本段落、标题
• 图片、链接
• 按钮、输入框
• 列表、表格

HTML 决定了页面上 存在 哪些元素，但不关心它们的视觉呈现。

3.3 CSS — 表现层

CSS（Cascading Style Sheets）控制页面的 视觉表现：

• 颜色、字体、字号
• 布局、间距、对齐
• 圆角、阴影、渐变
• 响应式适配

CSS 不增加新内容，只改变已有内容的 呈现方式。

3.4 JavaScript — 行为层

JavaScript 赋予页面 交互能力，将静态页面变成动态应用：

• 用户事件响应（点击、输入、滚动）
• 动态内容更新（无需刷新页面）
• 数据提交与获取（表单、API 调用）
• 动画效果

JavaScript 使网站从"看"变成"用"——发送邮件、进行搜索、发布内容。

3.5 三者协作示例（Google 首页）

HTML  →  渲染 Logo 图片 + 搜索输入框 + 搜索按钮
CSS   →  设定输入框形状、按钮颜色、居中布局
JS    →  处理搜索提交、自动补全、即时搜索

---

四、🛠️ Chrome DevTools 基础

Chrome 浏览器内置的 开发者工具（DevTools） 是 Web 开发的核心调试工具。

打开方式

• 右键页面元素 -> 检查（Inspect）
• 快捷键：F12 或 Cmd + Option + I（macOS）/ Ctrl + Shift + I（Windows）

核心面板

面板	说明
Elements	实时查看 / 编辑 HTML 结构与 CSS 样式
Console	执行 JavaScript、查看日志与错误
Network	监控网络请求、分析加载性能
Sources	调试 JavaScript、设置断点

Elements 面板实操

1. 定位元素：右键页面上的任意元素 -> 点击 Inspect，DevTools 会自动高亮对应的 HTML 代码
2. 编辑文本：在 Elements 面板中找到目标文本，双击 即可修改内容（如按钮文字、标题等）
3. 查看属性：可以看到元素的 class、id、src、href 等所有属性
4. 实时预览：修改后页面会立即更新，无需刷新

右键元素 -> Inspect -> 定位代码 -> 双击编辑 -> 页面实时更新

你可以用 DevTools 临时修改任何网站的 HTML 内容（如修改按钮文字、替换新闻标题），但这些修改只存在于你的本地浏览器中。

局部修改

在 DevTools 中的编辑仅影响 本地浏览器渲染，不会修改服务器上的原始文件。刷新页面后，浏览器重新从服务器获取原始文件，所有修改都会丢失。

---

五、📚 术语速查

术语	英文全称	释义
ISP	Internet Service Provider	互联网服务提供商
DNS	Domain Name System	域名系统，将域名解析为 IP 地址
IP 地址	Internet Protocol Address	联网设备的唯一数字标识
HTML	HyperText Markup Language	超文本标记语言，定义网页结构与内容
CSS	Cascading Style Sheets	层叠样式表，控制网页视觉呈现
JS	JavaScript	脚本语言，实现网页交互功能
DevTools	Developer Tools	浏览器内置开发者调试工具

---

← 返回 Web 开发研究