内容正文:
第12课 万维网服务大揭秘
探索我们每天畅游的数字世界
1.7.2013
同学们好!欢迎来到今天的信息技术课堂。我们每天都在上网,享受着互联网带来的便利。但你有没有想过,我们看到的精彩内容,是如何通过一根网线或无线信号,呈现在我们眼前的呢?今天,就让我们一起踏上一段奇妙的旅程,揭开万维网背后的神秘面纱!
‹#›
课堂导入:我们每天都在“魔法”中
我们每天都在上网,用百度查资料,用微信和朋友聊天,在B站看视频,在淘宝买东西。我们动动手指,就能看到世界各地的信息。这一切就像魔法一样,对吗?
思考一下:
当我们在浏览器地址栏输入 www.baidu.com 时,浏览器是如何知道去哪里找到百度的页面的?
我们点击一个链接,为什么就能跳转到另一个页面?网络链接背后隐藏着怎样的逻辑?
我们在网上输入的账号密码,会不会被别人看到?网络世界中的信息是如何被保护的?
1.7.2013
同学们,我们每天都在享受网络带来的便利。无论是查资料、聊天还是看视频,一切都显得那么轻松快捷。但这背后其实隐藏着复杂的科学原理。比如,我们输入一个网址,浏览器是如何找到它的?我们点击链接,为什么就能跳转到新页面?这些问题,正是我们今天要探索的核心。
‹#›
核心概念辨析:互联网 ≠ 万维网
互联网 (Internet)
是遍布全球的计算机网络相互连接形成的巨大网络。它就像一个庞大的“高速公路系统”,负责底层的数据传输,但本身并不直接提供具体的信息服务。
万维网 (WWW)
运行在互联网上的“信息服务系统”,如同公路上跑的“物流快递系统”。通过超链接将全球信息资源串联,让我们能便捷地获取、浏览和交互各类信息。
我们平时所说的“上网”,绝大多数时候其实是在使用运行于互联网之上的“万维网”这项服务。二者是基础与应用的关系,不可混淆。
1.7.2013
在正式开始之前,我们必须先厘清一个重要的概念:互联网和万维网到底有什么区别?简单来说,互联网是硬件基础,是连接全球电脑的“高速公路”;而万维网是运行在这条公路上的“信息服务系统”,比如我们访问的网站、看的视频,都属于万维网服务。记住,我们平时说的“上网”,其实上的是“万维网”。
‹#›
互联网 vs. 万维网:形象比喻
互联网 (Internet)
角色:高速公路系统。它是基础的物理网络,就像四通八达的道路,本身不运送货物,只提供通行能力,让数据“车辆”可以在上面行驶。
万维网 (World Wide Web)
角色:物流快递系统。它利用互联网的“高速公路”,将信息“包裹”从一个地方运送到另一个地方,实现了全球范围内的信息传递与共享。
1.7.2013
这个比喻非常形象。互联网就像我们国家的高速公路网,它建好了路,但路上跑什么车,运什么货,它不管。而万维网,就像是跑在高速公路上的快递车,它负责把信息这个“包裹”送到我们手上。所以,没有互联网,万维网就无法运行;而没有万维网,互联网也就失去了大部分应用价值。
‹#›
互联网上的“家庭地址”——URL
URL (Uniform Resource Locator,统一资源定位符),俗称“网址”。它的作用就像我们现实世界中的家庭地址,用来唯一标识互联网上的一个资源(比如一个网页、一张图片、一个视频),让浏览器能精准找到目标。
在哪里
确定资源所在的服务器网络地址(IP地址或域名),是浏览器寻找目标的第一步。
用什么方式
指定浏览器与服务器通信的协议,如HTTP/HTTPS(网页)、FTP(文件传输)等。
具体是哪个
明确资源在服务器上的具体文件路径和名称,精准定位到网页、图片或视频文件。
1.7.2013
‹#›
拆解一个URL:
https://www.baidu.com/s?wd=信息技术
https:// (协议)— 如同邮政服务,`http`是基础传输协议,`https`是加密的安全版本,保障信息传输安全。
www.baidu.com (域名)— 好比收件人的城市街道,这是百度服务器的唯一网络地址,指引数据准确送达目的地。
/s (路径)— 对应具体的门牌号或房间号,指向服务器上存放搜索功能的`s`文件夹,定位具体资源。
?wd=信息技术 (参数)— 类似包裹附言,告诉服务器“我要搜索‘信息技术’这个关键词”,是交互的具体指令。
1.7.2013
‹#›
课堂互动:URL拆解大师
现在,轮到你们大显身手了!请看下面这个B站视频的URL,请尝试对其进行拆解分析:
https://www.bilibili.com/video/BV1xx411c7mZ?from=search&seid=123456789
01. 协议识别
这个URL使用的是什么网络传输协议?它有什么特点?
02. 域名定位
它要访问的服务器域名是什么?属于哪一级域名?
03. 资源路径
路径部分指向了服务器上的什么具体资源?格式是怎样的?
04. 参数解析
查询参数(Query String)告诉了服务器什么额外信息?
1.7.2013
理论学习之后,我们来做个小练习。这里有一个B站视频的URL,请大家尝试把它拆解开来,找出协议、域名、路径和查询参数分别是什么。这个过程能帮助大家更深刻地理解URL的结构。
‹#›
互动答案揭晓
https://www.bilibili.com/video/BV1xx411c7mZ?from=search&seid=123456789
协议 (Protocol)
https://- 超文本传输安全协议,确保浏览器与服务器之间的通信加密安全。
域名 (Domain)
www.bilibili.com- 服务器的网络地址,通过DNS解析指向B站的具体服务器IP。
路径 (Path)
/video/BV1xx411c7mZ- 服务器上资源的具体位置,指向了一个特定的视频文件或页面。
查询参数 (Query Params)
?from=search&seid=...- 向服务器传递额外信息,如来源页面、用户会话ID等,用于数据分析。
通过这个练习,相信大家对URL的结构和每一部分的含义有了更清晰的认识!
1.7.2013
‹#›
顾客与商店的故事——客户端与服务器
客户端 (Client)
就是我们日常使用的浏览器(如 Chrome, Edge)。它就像一位走进商店的顾客,负责向商店提出具体的需求和指令。
服务器 (Server)
是存放着网页、视频等数字资源的远程计算机。它就像一家商店,时刻准备着根据顾客的需求,提供对应的商品(数据)。
01. 发送请求 (Request)
顾客(浏览器)向商店(服务器)发出指令,例如“我要查看某个网页”。
02. 返回响应 (Response)
商店(服务器)接收到指令后,将对应的网页数据打包,发送回顾客(浏览器)。
1.7.2013
万维网的工作模式非常经典,叫做“客户端-服务器”架构。我们的浏览器就是客户端,像一个顾客;而存放网页的远程计算机就是服务器,像一个商店。顾客进店提出需求,商店提供商品,这个过程在网络世界里就叫做“请求”和“响应”。
‹#›
请求-响应过程详解
01
用户输入 URL
在浏览器地址栏输入 www.baidu.com 并回车,开启访问之旅。
02
浏览器发送请求
客户端向百度服务器发送 HTTP 请求,索取首页内容资源。
03
服务器处理请求
服务器接收到请求后,在存储中检索并定位到首页的 HTML 文件。
04
服务器返回响应
服务器将找到的 HTML 文件内容,通过 HTTP 响应回传给浏览器。
05
浏览器渲染页面
浏览器解析接收到的代码,将其渲染成可视化的百度首页界面。
这个过程在瞬间完成,我们几乎感觉不到延迟。
1.7.2013
这个请求-响应的过程具体是怎样的呢?当你在浏览器输入网址后,浏览器就会向服务器发出一个请求,服务器接到请求后,找到对应的网页文件,再把它发送回浏览器。最后,浏览器把这些代码“翻译”成我们能看懂的页面。整个过程非常迅速。
‹#›
对话的“语言”——HTTP协议
浏览器和服务器之间交流时,必须遵守共同的规则和格式,这就是HTTP协议。全称是 HyperText Transfer Protocol(超文本传输协议),它定义了客户端与服务器交互的标准,是现代Web通信的基石。
特点1:无状态
服务器不会记住你之前的请求。每次请求都是独立的,就像你每次去商店,店员都不认识你一样,不会保留你的购买历史或偏好。
特点2:明文传输
早期的HTTP通信内容是“明文”的,就像用明信片写信,中间环节可能被人偷看。这也是网络安全问题的重要源头,引出了HTTPS等加密协议的需求。
HTTP 就是浏览器与服务器之间通用的“语言”。
1.7.2013
浏览器和服务器之间的对话,也需要一种“语言”,这种语言就是HTTP协议。它规定了请求和响应的格式。HTTP有两个重要特点:一是“无状态”,服务器不记得你是谁;二是“明文传输”,这意味着数据在传输过程中可能被截获,这也是我们后面要讲的网络安全问题的根源。
‹#›
网页的本质:代码的集合
HTML
角色:网页的“骨架”
作用:定义页面的结构,明确标题、段落、图片等元素的位置与层级。
CSS
角色:网页的“皮肤”
作用:负责美化页面,精准控制颜色、字体、间距、布局等视觉表现。
JavaScript
角色:网页的“灵魂”
作用:赋予页面生命力,实现点击、弹窗、动画等交互与动态效果。
1.7.2013
一个网页其实是由三种核心技术构成的。HTML是骨架,决定了页面的结构;CSS是皮肤,负责美化外观;而JavaScript则是灵魂,让页面有了交互和动态效果。这三者共同协作,才构成了我们看到的丰富多彩的网页。
‹#›
一个简单的HTML示例:Hello World!
让我们来看一个最简单的HTML网页代码,感受一下代码和页面的对应关系。浏览器会读取这些标签,并把它们渲染成我们能看到的页面。
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>你好,世界!</h1>
<p>这是我用HTML编写的第一个网页。</p>
<img src="cat.jpg" alt="一只可爱的猫">
</body>
</html>
<h1> 一级标题
定义页面的主标题,通常用于最重要的内容,字号最大。
<p> 段落文本
定义一个文本段落,是网页中最常用的文本容器标签。
<img> 插入图片
用于在网页中嵌入图片,通过 src 属性指定图片路径。
1.7.2013
这是一个非常经典的“Hello World”网页示例。大家可以看到,代码里有<h1>、<p>、<img>这些标签,它们分别代表标题、段落和图片。浏览器就是通过解读这些标签,来构建最终的页面的。是不是很神奇?
‹#›
04
第四站
神奇的“地址翻译官”
——DNS
1.7.2013
我们已经知道了URL和HTTP,但还有一个问题:我们输入的是像www.baidu.com这样好记的名字,而计算机之间通信其实是用一串数字地址,比如14.215.177.38。那么,这个转换是如何完成的呢?这就要请出我们的第四位主角——DNS。
‹#›
DNS:互联网的“电话簿”
DNS (Domain Name System,域名系统),它就像一本巨大的“电话簿”或一位“地址翻译官”,是连接用户与互联网服务器的隐形桥梁。
核心作用:翻译与寻址
把我们容易记住的域名(如 www.baidu.com)翻译成计算机能理解的IP地址(如 14.215.177.38),让浏览器精准找到目标服务器。
如果没有DNS系统,我们上网时就必须手动输入一串串枯燥的数字IP,这对于普通用户来说几乎是不可能完成的任务。
1.7.2013
DNS,域名系统,它的作用就像一本巨大的电话簿。我们输入域名,比如百度,DNS就会帮我们查到它对应的IP地址,然后浏览器才能真正地找到服务器。可以说,没有DNS,互联网的使用会变得极其困难。
‹#›
DNS工作流程(简化版)
01
你在浏览器地址栏输入www.baidu.com,这是访问网站的起点,浏览器并不认识这个域名。
02
浏览器向DNS服务器发出请求,询问该域名对应的IP地址,就像查电话号码一样。
03
DNS服务器查询数据库,找到并返回对应的IP地址(如 14.215.177.38)给浏览器。
04
浏览器拿到IP后,直接向该IP对应的服务器发送HTTP请求,获取网页内容并展示。
这个“翻译”过程是访问网站的第一步,也是至关重要的一步,它在后台毫秒级完成,我们几乎毫无感知。
1.7.2013
‹#›
HTTP的安全隐患:“裸奔”的通信
核心风险:明文传输
数据在网络中传输时,就像一张未密封的明信片,没有任何加密保护。任何处在传输路径上的设备或黑客,都有可能通过抓包工具轻松截获并查看甚至篡改其中的内容,导致隐私泄露和数据被窃。
案例分析:公共WiFi的陷阱
场景:小明在咖啡馆连接免费公共WiFi,用HTTP登录游戏网站,未察觉周围风险。
风险:同一网络下的黑客利用嗅探工具,实时截获并解析了小明发送的明文账号密码。
后果:账号被盗,虚拟财产损失,个人信息被泄露用于其他诈骗。
1.7.2013
HTTP协议最大的安全隐患就是明文传输。这意味着我们发送的数据,比如账号密码,在网络上是“裸奔”的,很容易被截获。特别是在连接公共WiFi时,这种风险会大大增加。就像案例中的小明,他的账号很可能因此被盗。
‹#›
HTTPS:穿上“安全外衣”的HTTP
HTTPS (HyperText Transfer Protocol Secure) 是 HTTP 的安全版本,通过在 HTTP 基础上加入加密层,有效解决了数据传输过程中的窃听、篡改和冒充问题。
数据加密
对传输数据进行高强度加密,即使被截获,黑客看到的也只是无法识别的乱码,保障隐私安全。
身份认证
验证服务器的真实身份,确保访问的是官方网站而非假冒的“钓鱼网站”,建立可信的连接。
识别方法:在浏览器地址栏中,若看到小锁图标且网址以https://开头,即表示当前处于安全的加密连接状态。
1.7.2013
为了解决HTTP的安全问题,HTTPS应运而生。它在HTTP的基础上增加了一个加密层,就像给数据穿上了一件“安全外衣”。它不仅能加密数据,还能验证网站的真伪。我们在上网时,一定要注意看地址栏有没有这个小锁图标,这是保障我们安全的重要标志。
‹#›
案例分析:为什么购物网站必须用HTTPS?
攻击场景
电商网站若用HTTP,黑客可发起“中间人攻击”,在用户浏览时篡改数据,例如将商品价格从500元恶意篡改为50元,诱导用户下单。
严重后果
用户看到虚假低价后下单,商家将被迫以远低于成本的价格发货,直接导致库存损失与资金亏空,长期将严重损害平台信誉与运营。
HTTPS 解决方案
部署HTTPS协议后,浏览器与服务器间传输的所有数据均会被高强度加密。黑客无法窃听或篡改加密后的数据包,从技术根源上保障交易安全。
核心结论
凡是涉及支付结算、用户登录、个人信息等敏感数据传输的网站,必须强制使用HTTPS协议,这是构建安全可信互联网环境的基本要求。
1.7.2013
我们再来看一个购物网站的例子。如果一个购物网站使用不安全的HTTP协议,黑客就有可能篡改商品价格,让你以为捡到了大便宜,从而蒙受损失。而使用HTTPS后,数据被加密,这种篡改就无法实现了。所以,大家在网上购物时,一定要认准HTTPS。
‹#›
从输入URL到页面显示的奇幻旅程
01
输入网址
用户在浏览器地址栏中输入目标网址,开启访问之旅的第一步。
02
DNS 解析
浏览器调用 DNS 服务器,将域名解析为服务器可识别的 IP 地址。
03
发送请求
通过 HTTPS 安全协议向目标 IP 地址的服务器发送页面访问请求。
04
服务器处理
服务器接收并处理请求,在存储中查找对应的 HTML、CSS、JS 等资源文件。
05
返回响应
服务器将找到的资源文件通过 HTTPS 协议打包,响应回请求的浏览器。
06
解析与渲染
浏览器解析收到的代码,构建 DOM 树与渲染树,最终绘制出完整的网页页面。
1.7.2013
这就是一个完整的流程:从你输入网址开始,经过DNS解析,建立HTTPS安全连接,发送请求,服务器响应,最后浏览器渲染页面。这一系列复杂的步骤,在我们看来只是一瞬间的事情,背后凝聚了无数工程师的智慧。
‹#›
随堂练习(一)
题目 01
请指出 `https://www.example.com:8080/blog/article?id=123` 这个URL中的协议、主机名、端口号、路径和查询参数分别是什么?
题目 02
小明在公共WiFi下进行网上银行操作,他应该选择HTTP网站还是HTTPS网站?为什么?请结合网络安全知识简要分析。
题目 03
在日常浏览网页时,我们经常会看到浏览器地址栏左边出现一个小锁的图标。这个图标具体表示什么含义?它对用户有什么重要提示?
1.7.2013
‹#›
随堂练习(二)
拓展思考:我们访问一个网站时,除了HTML文件,浏览器还会从服务器请求哪些类型的文件?一个完整的网页呈现,背后隐藏着多少次资源请求?
提示:想想网页里丰富多彩的图片、视频、动听的音乐,以及精美的字体和布局,它们是从哪里来的?
图片文件
.jpg, .png, .gif
承载视觉内容
样式表文件
.css
控制页面布局与美观
脚本文件
.js
实现交互与动态效果
音视频文件
.mp4, .mp3
丰富的多媒体体验
字体文件
.ttf, .woff2
定制化的文字呈现
1.7.2013
最后一个拓展思考题。我们知道浏览器会请求HTML文件,但一个网页上的图片、视频又是怎么来的呢?其实,浏览器会根据HTML代码中的指示,再次向服务器请求这些图片、CSS样式表、JavaScript脚本等文件。所以,加载一个网页,可能需要多次请求和响应。
‹#›
课堂总结与课后作业
本节课核心知识点回顾
URL:互联网资源的地址,如同现实世界的门牌号,指引浏览器找到目标资源。
HTTP/HTTPS:浏览器与服务器的通信协议,HTTPS相比HTTP多了一层加密保护,更安全。
HTML:网页的骨架,定义了网页的结构和内容,是构建所有网页的基础语言。
DNS:域名解析系统,负责将容易记忆的域名转换为机器可识别的IP地址。
C/S架构:客户端-服务器工作模式,客户端发起请求,服务器提供服务和资源。
课后作业
任务一:观察 URL 协议
打开浏览器,访问几个你常用的网站(如百度、淘宝),仔细观察地址栏中的URL有什么不同?判断它们使用的是HTTP协议还是HTTPS协议,并思考为什么有些网站使用HTTPS。
任务二:尝试访问 IP 地址
在浏览器地址栏输入一个你知道的IP地址(例如 `14.215.177.38`),按下回车键,看看会发生什么?这与直接输入域名访问有什么区别?记录下你的发现。
1.7.2013
好了,我们来总结一下今天的课程。我们学习了URL、HTTP、HTML、DNS和C/S架构这五个核心概念。课后请大家完成两个小作业,通过实际操作来加深理解。希望大家能将今天所学应用到日常上网中,做一个懂技术、会安全的小网民。
‹#›
$