当前位置：首页 > news >正文

[Web网页] Web 基础

news 2025/10/4 7:36:07

一、Web 是什么？从 Internet 到万维网的核心

二、Web 技术的 “三大支柱” 与完整开发架构

1️⃣客户端技术：决定网页 “长什么样”“能不能互动”

2️⃣服务器端技术：处理请求的 “幕后大脑”

3️⃣数据库技术：存储数据的 “仓库”

4️⃣浏览器与服务器：请求与响应的 “桥梁”

三、域名：为什么我们不用记 IP 地址？

1️⃣域名的核心价值：替代难记的 IP 地址

2️⃣从 Hosts 文件到 DNS：域名怎么找到 IP？

3️⃣域名注册：怎么拥有自己的域名？

四、网页、网站与 URL：从 “单个页面” 到 “完整站点”

1️⃣网页：Web 的 “最小单位”

2️⃣网站：多个网页的 “集合”

3️⃣URL：网页的 “地址”

五、静态网页 vs 动态网页：核心区别与适用场景

1️⃣静态网页：固定内容的 “展示板”

2️⃣动态网页：能互动、会变化的 “智能页面”

六、HTTP 协议：Web 通信的 “通用语言”

1️⃣HTTP 是什么？

2️⃣HTTP 的发展历程：从 1.1 到 3.0 的进化

3️⃣HTTP 的工作原理：一次请求的完整流程

4️⃣HTTP 请求：浏览器 “怎么说话”

常用 HTTP 方法：不同请求的 “目的”

5️⃣HTTP 响应：服务器 “怎么回话”

常用 HTTP 状态码：服务器的 “表情”

七、Web1.0 vs Web2.0：从 “只读” 到 “互动” 的变革

总结：初学者的 Web 知识图谱

对于刚接触互联网技术的初学者来说，“Web” 是一个既熟悉又陌生的词。我们每天刷的网页、用的 App，背后都离不开 Web 技术的支撑。这篇文章会从 Web 的基本概念出发，一步步拆解其核心组成、工作原理和关键技术，帮你建立完整的 Web 知识框架，为后续学习打下基础。

一、Web 是什么？从 Internet 到万维网的核心

首先要分清两个容易混淆的概念：Internet（互联网）和 Web（万维网）。

Internet：是全球性的计算机互联网络，相当于 “信息高速公路” 的基础设施，所有设备通过共同协议（如 HTTP）实现通信，核心是 “连接” 和 “共享”。
Web（World Wide Web）：是 Internet 上最流行的应用之一，相当于 “高速公路上跑的内容车”。它通过超文本、超媒体和 HTTP 协议，把分散在全球服务器上的信息和服务无缝连接起来，让我们能通过浏览器轻松访问 —— 简单说，我们平时 “上网看内容”，本质就是在使用 Web 服务。

而现在我们访问网站、使用 App，几乎都基于BS 架构（Browser/Server，浏览器 / 服务器架构），它的核心特点特别友好：

客户端只需要一个浏览器（比如 Chrome、Edge），不用安装复杂软件；
应用的逻辑（比如登录验证、数据计算）和数据（比如用户信息、文章内容）全存在服务器端；
浏览器的工作很简单：向服务器发请求、拿 Web 页面，再展示给用户。对比过去需要安装客户端的 “CS 架构”（Client/Server），BS 架构的升级更方便 —— 服务器端更新后，用户刷新浏览器就能用新功能，不用手动下载安装。

二、Web 技术的 “三大支柱” 与完整开发架构

要搭建一个 Web 应用，需要客户端、服务器端、数据库等多方面技术配合，其中最核心的是 “客户端三剑客”，先从它们说起：

1️⃣客户端技术：决定网页 “长什么样”“能不能互动”

客户端技术直接负责用户看到的页面和交互，核心是以下三个：

HTML（超文本标记语言）：网页的 “骨架”。它用标签（比如<p>表示段落、<img>表示图片）定义网页的结构和内容，告诉浏览器 “这里是标题、这里是按钮、这里是图片”。
CSS（层叠样式表）：网页的 “皮肤”。它控制网页的样式，比如字体大小、颜色、布局（左对齐还是居中），实现 “内容和样式分离”—— 比如用 CSS 改一个属性，就能让整个网站的按钮颜色统一变化，不用逐个修改 HTML。
JavaScript（JS）：网页的 “肌肉”。它让网页有动态行为和交互性，比如点击按钮弹出弹窗、输入内容实时验证、页面滚动时加载新内容。没有 JS 的网页是 “静态的”，有了 JS 才能实现像购物车、登录弹窗这样的交互功能。

2️⃣服务器端技术：处理请求的 “幕后大脑”

当你在浏览器输入网址，点击 “登录” 或 “搜索” 时，请求会发送到服务器，这时候就需要服务器端技术处理：

核心作用：接收客户端请求（比如 “获取首页内容”“验证用户密码”），执行逻辑计算（比如查询数据库里的用户信息），生成动态内容（比如根据你的账号显示专属页面），再把结果返回给浏览器。
常用技术：Java（Spring 框架）、Python（Django/Flask）、PHP、Node.js 等，不同语言各有优势，但核心功能都是 “处理请求、生成响应”。

3️⃣数据库技术：存储数据的 “仓库”

Web 应用需要存储大量数据，比如用户账号、文章内容、商品信息，这就需要数据库：

作用：安全存储、高效管理数据，支持服务器端技术 “查询数据”（比如查某篇文章）、“修改数据”（比如更新用户昵称）、“删除数据”（比如删除购物车商品）。
常用数据库：MySQL（开源免费，中小项目常用）、SQL Server（微软旗下，适合企业级项目）、Oracle（大型项目，功能强大但收费）。

4️⃣浏览器与服务器：请求与响应的 “桥梁”

浏览器：用户的 “窗口”，负责两件事 —— 向服务器发送请求（比如输入 URL 后发送 “获取首页” 请求）、解析服务器返回的内容（比如把 HTML/CSS/JS 翻译成我们看到的网页）。
服务器：“幕后工作站”，24 小时在线，等待并处理浏览器的请求，发送 HTML、CSS、图片等资源给浏览器。
HTTP 协议：浏览器和服务器通信的 “语言”—— 没有共同语言，两者无法沟通。HTTP 协议规定了 “浏览器怎么发请求”“服务器怎么回响应”，是 Web 通信的核心（后面会详细讲）。

三、域名：为什么我们不用记 IP 地址？

你可能好奇：为什么访问网站时输入的是www.baidu.com，而不是一串数字（比如180.101.50.242）？这就要说到域名的作用。

1️⃣域名的核心价值：替代难记的 IP 地址

IP 地址：每个服务器在 Internet 上都有唯一的 IP 地址（比如180.101.50.242是百度某服务器的 IP），但数字串难记，普通人根本记不住几十个网站的 IP。
域名：就是 IP 地址的 “别名”，比如www.baidu.com对应百度的 IP，www.sina.com.cn对应新浪的 IP，好记又好传播。

2️⃣从 Hosts 文件到 DNS：域名怎么找到 IP？

早期互联网用Hosts 文件解析域名：把 “域名 - IP” 对应关系存在本地文件里，但问题很大 —— 如果有 100 万个网站，Hosts 文件会无比庞大，而且主机名容易重复，维护起来特别麻烦。后来就出现了DNS（域名系统），相当于 “全球域名通讯录”：

特点：分布式、层次性 —— 没有一个 “中央 DNS”，而是全球多个服务器协同工作，比如 “根域”“顶级域”“二级域” 分层管理，避免单点故障，解析速度更快。
域名结构：比如mail.163.com，从右到左是 “顶级域（.com）→ 二级域（163.com）→ 主机名（mail，代表邮件服务器）”。完整的域名叫 FQDN（完全限定域名），格式是 “主机名.DNS 后缀”。

3️⃣域名注册：怎么拥有自己的域名？

如果你想做一个网站，需要先注册域名：

原则：先申请先注册—— 域名是唯一的，别人注册了abc.com，你就不能再注册了。
步骤：准备资料（比如个人身份证 / 企业营业执照）→ 找域名注册平台（比如阿里云、腾讯云）→ 查询域名是否被占用→ 提交申请并付费→ 申请成功（之后需要定期续费，否则会被收回）。

四、网页、网站与 URL：从 “单个页面” 到 “完整站点”

1️⃣网页：Web 的 “最小单位”

本质：纯文本格式文件，用 HTML 编写，浏览器会把这个 “文本文件” 翻译成我们看到的图文页面。
分类：后面会详细讲 “静态网页” 和 “动态网页”，这里先记住：早期网站多是静态网页，现在我们用的淘宝、抖音都是动态网页。

2️⃣网站：多个网页的 “集合”

定义：由多个相关网页组成的整体，比如百度网站包含 “首页”“搜索结果页”“百度百科页面” 等，这些网页通过 “超链接” 连接起来（点击 “百度百科” 就能跳转到对应的页面）。
主页（首页）：打开网站后看到的第一个页面，比如www.baidu.com打开的就是百度的主页，相当于网站的 “大门”，引导用户访问其他页面。

3️⃣URL：网页的 “地址”

定义：URL（统一资源定位符）是网页的唯一地址，比如https://www.baidu.com/s?wd=Web基础，浏览器通过 URL 找到对应的网页。
核心组成：协议（https://）+ 域名（www.baidu.com）+ 路径 / 参数（/s?wd=Web基础，表示 “搜索 Web 基础”）。
为什么需要 URL？就像你寄快递需要 “收件地址”，浏览器找网页也需要 “URL 地址”，没有 URL 就无法定位资源。

五、静态网页 vs 动态网页：核心区别与适用场景

网页分为 “静态” 和 “动态”，两者的区别直接影响网站的功能和维护成本，初学者一定要分清：

1️⃣静态网页：固定内容的 “展示板”

本质：标准的 HTML 文件，扩展名是.htm或.html，可以包含文本、图片、Flash 动画、JS 脚本（但 JS 只能实现客户端简单交互，比如弹窗，不能修改服务器数据）。
核心特点：
- URL 固定，不含 “?”（比如www.abc.com/index.html）；
- 内容发布后就保存在服务器上，无论谁访问、什么时候访问，内容都一样（除非手动修改 HTML 文件）；
- 没有数据库支持，不能实现 “登录后显示专属内容”“搜索商品” 等功能；
- 优点：加载速度快（不用连接数据库）、容易被搜索引擎收录；
- 缺点：更新麻烦（改一个内容要手动改所有相关 HTML 文件）、交互性差；
- 适用场景：更新少的展示型网站，比如公司官网（只有 “关于我们”“联系我们” 等固定页面）、个人博客（内容发布后很少修改）。

2️⃣动态网页：能互动、会变化的 “智能页面”

本质：由服务器端技术（比如 Python、PHP）动态生成的网页，URL 通常含 “?”（比如www.taobao.com/search?q=手机，“q = 手机” 是查询参数）。
核心特点：
- 交互性强：能根据用户操作变化，比如登录后显示 “你的订单”，搜索 “手机” 后显示相关商品；
- 自动更新：不用手动改 HTML，服务器会根据数据库数据自动生成页面（比如新闻网站新增一篇文章，服务器直接从数据库调取，不用改首页 HTML）；
- 内容个性化：不同时间、不同用户访问同一 URL，内容可能不同（比如你和朋友打开淘宝首页，推荐的商品不一样）；
- 优点：功能强大、维护方便（改数据只需要改数据库，不用改页面）；
- 缺点：加载速度比静态网页慢（需要连接数据库、动态生成内容）、对服务器性能要求更高；
- 适用场景：需要交互或频繁更新的网站，比如淘宝（购物、下单）、抖音（刷视频、评论）、知乎（提问、回答）。

六、HTTP 协议：Web 通信的 “通用语言”

如果把 Web 比作 “邮局”，浏览器是 “寄信人”，服务器是 “收信人”，那么HTTP 协议就是 “信封格式”—— 规定了 “信怎么写”“怎么寄”“怎么回”，是 Web 通信的核心。

1️⃣HTTP 是什么？

HTTP（超文本传输协议）是应用层协议，运行在 TCP 协议之上，专门用于浏览器和服务器之间传输超文本（HTML、CSS、JS、图片等）。它的核心是 “请求 - 响应模式”：浏览器发 “请求”，服务器回 “响应”，一次请求对应一次响应。

2️⃣HTTP 的发展历程：从 1.1 到 3.0 的进化

HTTP 不是一成不变的，而是随着互联网需求不断升级：

HTTP 1.1（1999 年发布）：目前仍广泛使用的版本，解决了早期版本的效率问题，支持 “长连接”（一次 TCP 连接可以发多个 HTTP 请求），但在高并发场景下仍有瓶颈（比如 “队头阻塞”—— 一个请求卡住，后面的请求都要等）。
HTTP/2（2015 年发布）：针对 HTTP 1.1 的性能缺陷升级，加入 “头部压缩”（减少请求数据量）、“多路复用”（一个 TCP 连接同时发多个请求，解决队头阻塞）、“服务器推送”（服务器主动发资源给浏览器，比如提前发首页需要的 CSS），大幅提升加载速度。
HTTP/3（2022 年发布）：为解决 HTTP/2 的传输问题而生，核心变化是基于 UDP 协议（之前的版本都基于 TCP），使用 QUIC 协议（快速 UDP 互联网协议）：
- 解决 TCP 的 “队头阻塞”（UDP 不保证顺序，单个请求卡住不影响其他）；
- 内置 TLS 1.3 加密（和 HTTPS 一样安全）；
- 连接建立更快（只需 1 个 RTT，TCP 需要 3 个 RTT）；
- 目前支持的产品：Cloudflare（CDN 服务商）、Chrome 浏览器、Firefox Nightly 等，未来会逐渐普及。

3️⃣HTTP 的工作原理：一次请求的完整流程

当你在浏览器输入www.sina.com.cn，按下回车后，发生了什么？

建立 TCP 连接：浏览器先和新浪服务器建立 TCP 连接（三次握手，确保连接可靠）；
发送 HTTP 请求：浏览器按照 HTTP 协议格式，生成 “请求消息”，发送给服务器；
服务器处理请求：服务器接收请求，解析内容（比如 “需要获取首页 HTML”），查询数据库（如果需要动态内容），生成 “响应消息”；
服务器发送响应：服务器把响应消息发回给浏览器；
浏览器解析响应：浏览器读取响应中的 HTML、CSS、JS，翻译成网页展示给你；
关闭 TCP 连接：如果没有后续请求，TCP 连接会关闭（四次挥手）。

4️⃣HTTP 请求：浏览器 “怎么说话”

HTTP 请求由请求行、请求头、请求体三部分组成（请求体可选，比如 GET 请求没有请求体，POST 请求有）。举个实际的 GET 请求例子：

plaintext

GET / HTTP/1.1  # 请求行：方法（GET）+ 路径（/，表示首页）+ 协议版本（HTTP/1.1）
Host: www.sina.com.cn  # 请求头：要访问的域名（一个服务器可能有多个网站，用Host区分）
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/118.0.0.0  # 客户端标识（告诉服务器“我是Chrome浏览器，Windows系统”）
Accept: */*  # 能接收的资源类型（*/*表示所有类型）
Accept-Language: zh-CN,zh;q=0.9  # 偏好语言（中文优先）
Accept-Encoding: gzip, deflate  # 支持的压缩算法（服务器用gzip压缩内容，减少传输量）

常用 HTTP 方法：不同请求的 “目的”

HTTP 定义了多种方法，对应不同的操作，最常用的是GET和POST，其他方法（PUT、DELETE 等）多用于 API 开发：

HTTP 方法	核心作用	特点
GET	从服务器 “获取” 资源（比如看首页、搜索内容）	1. 请求参数会拼在 URL 里（比如`www.baidu.com/s?wd=HTTP`），不安全；2. 有长度限制（URL 不能太长，一般不超过 2048 字符）；3. 会被缓存（比如浏览器保存 “百度首页” 缓存，下次打开更快）；4. 会保存在浏览记录里
POST	向服务器 “提交” 数据（比如登录、注册、上传文件）	1. 请求参数在请求体里，URL 里看不到，更安全；2. 没有长度限制（可以提交大文件，比如上传视频）；3. 不会被缓存；4. 不会保存在浏览记录里
PUT	向服务器 “存储” 资源（比如更新用户信息）	幂等性（多次请求结果一样，比如多次更新同一个昵称，结果相同）
DELETE	让服务器 “删除” 资源（比如删除一篇文章）	幂等性（多次删除同一个资源，结果相同）
HEAD	只获取资源的 “响应头”，不获取响应体（比如判断资源是否存在）	和 GET 类似，但没有响应体，效率更高

5️⃣HTTP 响应：服务器 “怎么回话”

服务器收到请求后，会返回 HTTP 响应，由状态行、响应头、响应体三部分组成。举个成功的响应例子：

plaintext

HTTP/1.1 200 OK  # 状态行：协议版本 + 状态码（200）+ 状态描述（OK）
Content-Type: text/html; charset=utf-8  # 响应头：响应内容类型（HTML，编码UTF-8）
Content-Length: 21932  # 响应内容长度（21932字节）
Content-Encoding: gzip  # 内容用gzip压缩
Cache-Control: max-age=300  # 浏览器可以缓存300秒（5分钟）
<!DOCTYPE html>  # 响应体：HTML内容（浏览器要解析的网页代码）
<html lang="zh-CN">
<head><title>新浪首页</title></head>
<body>...</body>
</html>

常用 HTTP 状态码：服务器的 “表情”

状态码是数字，告诉浏览器 “请求处理结果”，核心分类如下：

2xx（成功）：请求正常处理，最常见的是200 OK（请求成功，返回内容）；
3xx（重定向）：请求的资源换地址了，浏览器需要跳转到新地址：
- 301 Moved Permanently：永久重定向（比如baidu.com跳转到www.baidu.com，告诉浏览器 “以后直接访问新地址”）；
- 302 Found：临时重定向（比如登录后跳转到首页，下次登录仍需要走原流程）；
- 304 Not Modified：资源没修改，浏览器用本地缓存（比如你刷新首页，服务器发现内容没更，让你用之前的缓存，节省流量）；
4xx（客户端错误）：请求有问题，服务器无法处理：
- 400 Bad Request：请求参数错误（比如登录时少传了密码）；
- 401 Unauthorized：未认证（比如访问需要登录的页面，你没登录）；
- 403 Forbidden：权限不足（比如你想访问管理员页面，但你是普通用户）；
- 404 Not Found：资源不存在（比如输入的 URL 错了，服务器找不到对应的页面）；
5xx（服务器错误）：服务器处理时出错：
- 500 Internal Server Error：服务器内部错误（比如代码 bug、连接不上数据库）；
- 503 Service Unavailable：服务器暂时不可用（比如服务器维护、负载过高）。

七、Web1.0 vs Web2.0：从 “只读” 到 “互动” 的变革

最后，我们聊聊 Web 的发展阶段，帮你理解现在的互联网为什么是 “互动型” 的：

Web1.0（早期）：以 “编辑为核心”，网站是 “内容提供者”，用户是 “内容消费者”—— 比如早期的新浪、搜狐，内容由编辑团队制作，用户只能 “看”，不能评论、不能投稿，是 “单向传播”；
Web2.0（现在）：以 “用户为核心”，用户既是 “内容消费者”，也是 “内容制造者”—— 比如抖音（你刷视频是消费，发视频是制造）、知乎（你看回答是消费，写回答是制造）、微信公众号（你读文章是消费，写文章是制造）。Web2.0 的核心特征：用户分享（比如转发朋友圈）、兴趣社群（比如小红书的 “美妆群”）、开放平台（比如微信开放 API，让开发者做小程序）、活跃用户（用户参与度高，不再是 “被动看内容”）。