第1章 Web系统概述 教案

谢从华，高蕴梅 著.Web前端设计基础入门——HTML5、CSS3、JavaScript（微课视频版）,2023, 清华大学出版社. ISBN：9787302641261.

1、教学目标

1. 知识目标
   • 学生能够准确阐述 Internet 的含义、发展历程、提供的网络服务，以及接入技术的演变。
   • 深入理解 TCP/IP 协议的分层结构、各层包含的主要协议及其功能，尤其是 TCP 和 IP 协议的作用。
   • 清晰掌握域名的概念、分级结构、域名解析的原理与过程，以及中国域名服务器的安全现状与应对策略。
   • 熟知 URL、MIME、HTTP 协议的定义、语法、作用及相关特性，如 HTTP 与 HTTPS 的区别。
   • 了解 Web 浏览器的主要组件、内核分类及工作原理，熟悉常见浏览器及其内核特点。
   • 掌握 Web 服务器和应用服务器的概念、功能，熟悉常见的 Web 服务器（如 Apache、IIS、Nginx）和应用服务器（如 Tomcat、WebSphere、WebLogic）的特点与应用场景，了解国产相关产品情况。
   • 熟悉 Web 前端的主要技术，包括 HTML、CSS、JavaScript、jQuery、Bootstrap、ECMAScript 的基本概念、功能、特点及相互关系。
2. 能力目标
   • 能够根据给定的网络场景，分析涉及的 Internet 技术原理，如域名解析过程、HTTP 请求响应流程等。
   • 具备排查简单网络故障的能力，例如根据浏览器显示异常判断可能的服务器、网络或前端代码问题。
   • 可以运用所学的前端技术，初步构建简单的网页页面，实现基本的布局、样式设置与交互功能。
3. 情感目标
   • 培养学生对 Web 系统技术的学习兴趣，激发探索网络技术奥秘的热情。
   • 引导学生关注我国在 Web 技术领域的发展现状，增强为实现信息技术自主可控而努力学习的责任感。

2、教学重难点

1. 教学重点
   • Internet 相关技术，如 TCP/IP 协议分层、域名系统、HTTP 协议。
   • Web 浏览器的内核与工作原理，不同内核浏览器对网页呈现的差异。
   • 各类 Web 服务器和应用服务器的特点、适用场景，如 Apache 与 Nginx 的对比。
   • Web 前端核心技术 HTML、CSS、JavaScript 的协同应用，jQuery 和 Bootstrap 框架对开发效率的提升。
2. 教学难点
   • TCP/IP 协议中各层协议的交互机制，数据传输过程中的封装与解封装细节。
   • 域名解析在复杂网络环境下的完整流程，涉及根域名服务器、权威 DNS 等的协同工作。
   • 浏览器渲染引擎的渲染流程，从 HTML 解析到页面最终呈现的全过程，包括重绘回流等关键概念。
   • ECMAScript 标准的发展演变及其与 JavaScript 的关系，理解不同版本新增特性对实际开发的影响。

3、教学方法

1. 讲授法：系统讲解理论知识，确保知识的准确性与完整性，如 Internet 协议、服务器原理等复杂概念。
2. 案例分析法：通过实际的网络应用案例，如访问百度网站涉及的域名解析、HTTP 请求等，帮助学生理解抽象知识。
3. 演示法：利用软件演示浏览器工作原理、网页前端技术效果，让学生直观感受技术的实现过程，如使用开发者工具查看浏览器内核解析网页的步骤。
4. 小组讨论法：组织学生讨论国产 Web 技术发展面临的挑战与机遇，激发思维碰撞，培养团队协作与分析问题能力。

4、教学准备

1. 多媒体教学设备，确保教学课件、视频等资料的展示效果。
2. 安装有常见浏览器（Firefox、Chrome、IE 等）、Web 服务器软件（如 Apache、Nginx）的教学计算机，用于课堂演示。
3. 自制教学课件，包含丰富的图表、动画，以辅助讲解复杂的技术原理，如 DNS 域名解析流程动画。
4. 准备相关的案例资料、练习题及参考文档，供学生课堂学习与课后拓展。

5、教学过程

（一）导入（Bridge-in）

1. 展示当今互联网丰富多彩的应用场景图片或视频，如网上购物、在线视频、社交媒体互动等。
2. 提问引导：“大家每天都在使用互联网，有没有想过这些便捷的服务背后是由哪些技术支撑的呢？从打开浏览器输入网址到看到精美的网页，这中间隐藏着怎样的奥秘？今天就让我们一起走进 Web 系统的奇妙世界，揭开它神秘的面纱。”

（二）学习目标展示（Objectives ）

在课件上清晰列出本节课的知识、能力与情感目标：

• 知识目标：了解 Internet、Web 浏览器、服务器、前端技术等核心知识要点。
• 能力目标：具备分析网络技术原理、排查简单故障、构建简单网页的能力。
• 情感目标：激发学习兴趣，增强技术自主可控的责任感。
  向学生简要解读目标，让学生明确学习方向与重点。

（三）知识讲解（Pre - lecture）

1. Internet 介绍

 

• Internet 含义
  • 以时间轴为主线讲述 Internet 于 1969 年诞生于美国，由 ARPA 网演变而来，强调其作为全球最大电子计算机互联网的地位。
  • 列举日常生活中的网络服务实例，如用浏览器查找学习资料（体现 WWW 信息服务）、用微信即时通讯、用电子邮箱收发邮件、通过 FTP 下载软件（文件传输服务）、远程登录学校图书馆数据库查询学术资源、逛 BBS 论坛交流兴趣爱好、玩在线电子游戏等，让学生切实感受 Internet 提供服务的丰富多样。
  • 结合校园网或家庭网络接入场景，讲解接入技术发展，从早期电话拨号上网的低带宽、单一接入方式，到如今多样的有线（ADSL、有线电视网接入、光纤接入）和无线接入方式，对比不同接入方式的带宽差异，如过去几十 Kbps 到现在常见的几百 Mbps 甚至 1Gbps 以上，让学生理解接入技术进步对网络体验的提升。
• TCP/IP 协议
  • 运用 3D 动画或分层架构图展示 TCP/IP 协议的四个层次：网络接口层、网络互连层、传输层和应用层，形象呈现各层在网络数据传输中的位置与作用。
  • 重点讲解传输层的 TCP 协议负责可靠的数据传输，通过三次握手建立连接、数据分段、序号标识、流量控制与拥塞控制确保数据完整有序到达；网络互连层的 IP 协议负责为计算机网络相互连接通信进行寻址，让学生理解两者是 Internet 最基本、最重要协议的原因。
  • 列举应用层常见协议，如 HTTP 实现 WWW 服务，以访问百度网站为例，详细说明浏览器与百度服务器之间使用 HTTP 协议交互的过程；FTP 用于文件共享、上传下载，现场演示在命令行或图形化 FTP 客户端软件中进行简单文件传输操作；SMTP 控制信件发送和中转，结合电子邮箱发送邮件流程讲解其在邮件传输中的关键环节，让学生明白各协议在实际网络应用中的功能。
  • 通过对比 IPv4 和 IPv6 的地址表示形式、位数差异，讲解 IPv4 地址枯竭问题推动 IPv6 发展，如给出几个常见的 IPv4 和 IPv6 地址示例，让学生直观区分。
• 域名和域名解析
  • 以生活中的门牌号类比域名，解释域名作为字符型标识便于记忆，如将常熟理工学院网站域名 www.cslg.edu.cn 按级别拆分讲解，.cn 代表中国（国家地区代码顶级域名）、edu 代表教育机构（二级域名）、cslg 代表常熟理工学院（三级域名），说明域名分级结构及各级域名含义。
  • 结合 DNS 服务器工作原理示意图，分步骤讲解域名解析过程：计算机向本地 DNS 服务器（LDNS）发出域名查询请求，LDNS 依次向根 DNS、顶级域 DNS、权威 DNS 查询，根据权威 DNS 返回的 A 记录（域名与 IP 对应）、NS 记录（域名与负责解析的权威 DNS 对应）、Cname 记录（域名别名）获取最终域名对应的 IP 地址，以访问 www.baidu.com 为例详细展示完整查询流程，让学生理解域名解析如何实现域名到 IP 地址的转换。
  • 讲述历史上伊拉克、利比亚域名被终止解析事件，引出中国域名服务器安全问题，展示全球根域名服务器分布地图，说明美国占多数的现状及潜在风险，介绍我国根镜像服务器建设情况，如北京、上海等地的根镜像数量，讲解通过根镜像、任播技术保障国内网络访问，以及应对美国可能篡改根区文件的措施，增强学生网络安全意识。
• URL
  • 以生活中的地址格式类比 URL，讲解 URL 作为因特网上标准资源地址的语法结构：协议类型:// 服务器地址 (必要时需加上端口号)/ 路径 / 文件名，给出常见 URL 实例，如 http://cn.bing.com:80/readnews.aspx?newsid=123，详细解释各部分含义，强调协议类型决定资源获取方式，端口号在特定场景下的作用，以及路径和文件名如何定位资源。
  • 说明浏览器在访问网页时对 URL 的处理规则，如多数浏览器默认 HTTP 协议可省略 “http://” 部分，超文本传输协议常用端口 80 也常省略，让学生了解日常上网输入网址时的便捷性背后的原理。
• MIME
  • 从电子邮件附件引入，讲述 MIME 最早应用于电子邮件系统，后扩展到浏览器和 HTTP 协议，用于规定表示各种数据类型的符号化方法。
  • 展示常见的 MIME 类型及其对应的文件扩展名表格，选取几个典型类型，如 application/pdf 对应.pdf 文件用于显示电子文档、text/html 对应.html 文件是网页基本格式、image/jpeg 对应.jpeg 文件表示图片，解释浏览器如何根据 MIME 类型自动调用相应应用程序打开文件，让学生明白网页中不同类型资源的识别与处理机制。
• HTTP 协议
  • 阐述 HTTP 协议作为 Internet 上应用最广泛网络协议的设计初衷，即为发布和接收 HTML 页面提供方法，通过 HTTP 或 HTTPS 协议请求的资源由统一资源标识符（URI）标识。
  • 对比讲解 HTTP 与 HTTPS 协议：HTTPS 是 HTTP 和 SSL/TLS 的组合，需要申请证书（提及证书费用差异），信息加密传输保障安全，使用 443 端口，连接具备加密传输、身份认证功能；HTTP 是明文传输，使用 80 端口，连接简单无状态，以网上银行交易用 HTTPS、普通网页浏览用 HTTP 为例，让学生理解两者适用场景区别。

2. Web 浏览器

 

• 浏览器的主要组件
  • 打开浏览器软件，对照界面依次讲解各组件：用户界面包含地址栏用于输入网址、后退 / 前进按钮方便浏览历史页面、书签目录保存常用网站，让学生识别这些常用操作区域；浏览器引擎作为查询及操作渲染引擎的接口，简要说明其协调作用；渲染引擎负责将请求内容如 HTML、CSS 解析并显示，强调其决定网页呈现效果的核心地位；网络组件完成 HTTP 请求等网络调用，解释其平台无关性便于在不同操作系统工作；后端用于绘制基本组件，说明其依赖操作系统用户接口实现通用性；JavaScript 解释器负责解释执行 JavaScript 代码，为网页添加动态功能；数据存储用于保存 Cookie 等数据，提及 HTML5 定义的 Web 数据库技术作为轻量级客户端存储方案，让学生了解浏览器背后复杂的功能支撑体系。
• 浏览器的内核
  • 展示常见浏览器及其内核表格，介绍不同内核特点：Firefox 的 Gecko 内核开源，安全性较高；Google Chrome 从 WebKit 过渡到 WebKit Blink 内核，2013 年后在性能与标准支持上不断优化；Safari 的 WebKit 内核是苹果系统自带，与苹果生态紧密结合；IE 的 Trident 内核曾是全球使用率最高，但后期因更新滞后、与标准脱节出现安全问题；Edge 从 2015 年开始有自己的内核逐渐发展；Opera 从 Presto 内核切换到 WebKit Blink 内核适应行业趋势；UC 的 U3 内核针对移动端优化；QQ 浏览器和微信浏览器早期用 X5 内核，2016 年后引入 Blink 内核提升性能，让学生了解内核多样性及各自优势。
  • 以同一网页在不同内核浏览器打开呈现效果差异为例，如 CSS 样式兼容性、JavaScript 特效执行情况，解释渲染引擎对网页编写语法解释不同导致的结果，强调内核在网页显示中的关键作用。
• 浏览器的工作原理
  • 结合浏览器访问网页动态演示，讲解工作原理：在地址栏输入网址后，浏览器依据网址向服务器发送资源请求，服务器解析请求将 Page 描述文档、图片、JavaScript 脚本、CSS 等数据资源传送回浏览器；浏览器引擎对数据依次进行解码、解析、排版、绘制等操作，重点讲解渲染流程核心步骤。
  • 借助流程图详细解析渲染流程：Loader 模块负责处理 HTTP 请求与网络资源缓存，说明主页面与外链资源下载的并发与阻塞情况，如 JavaScript 脚本可能影响页面解析顺序；Parser 模块解析 HTML 构建 DOM 树，以简单 HTML 代码片段为例展示词法解析与语法解析过程，生成 DOM 树节点，同时解析 CSS 构建 CSS 规则匹配 Render 树节点排版布局，解析 JavaScript 实现动态功能操作 DOM 树，解释 JavaScript 引擎（如 Android 4.2 版本 WebKit 采用的 V8 引擎）执行 JavaScript 代码提升性能原理；Layout 模块创建渲染树并计算布局，对比 DOM 树与渲染树，说明非可视 DOM 节点不对应渲染树节点及 CSS Style 传递关系；Paint 模块将渲染树映射成可视图形，遍历渲染树调用绘制方法在画布或位图上显示内容成为用户看到的页面；提及缓存模块的 Page Cache、Memory Cache、Disk Cache 三种类型及其作用，如 Memory Cache 减少相同资源重复下载、Page Cache 提升页面前进后退浏览体验、Disk Cache 节省网络下载时间，让学生深入理解浏览器从请求到页面呈现全过程。

3. Web 服务器和应用服务器

 

• Web 服务器
  • 给出 Web 服务器的定义，将其类比为现实中的图书馆管理员，负责处理读者（Web 客户端）借阅请求、提供书籍（网页等信息），强调其驻留于因特网计算机程序，能处理浏览器请求并返回响应，放置网站文件供全球浏览、数据文件供下载，以学校官网服务器为例说明其功能实现。
  • 指出 Web 服务器程序的共性：从网络接受 HTTP 请求，提供包含 HTML 文件或其他类型文件的 HTTP 回复，让学生明白 Web 服务器与客户端交互的基本模式。
  • 列举最常用的 Web 服务器程序 Internet 信息服务器（IIS）、Nginx 和 Apache，简要介绍各自所属阵营（微软、俄罗斯、开源社区），为后续详细讲解铺垫。
• Apache 服务器
  • 介绍 Apache HTTP Server 是 Apache 软件基金会的开源 Web 服务器，强调其跨平台性（可在 Windows、Unix、Linux 等系统运行）与安全性，是世界著名网站如 Amazon 选用的服务器，通过展示其开源社区活跃的代码更新日志、开发者交流论坛截图，说明其源代码开放吸引众多开发者持续优化新功能、修复缺陷，具备简单、速度快、性能稳定特点，可兼作代理服务器，以配置 Apache 虚拟主机为例，讲解适当优化配置可提升性能，同时提醒硬件和操作系统基础条件对其运行的重要性。
• IIS 服务器
  • 说明 IIS 是微软公司基于 Microsoft Windows 的互联网基本服务，打开 IIS 管理工具界面，展示其图形化操作优势，如便捷地监视配置和控制 Internet 服务，详细讲解 Web 服务组件，包括 Web 服务器、FTP 服务器、NNTP 服务器和 SMTP 服务器对应功能（网页浏览、文件传输、新闻服务、邮件发送），通过创建一个简单的 IIS 网站实例，演示网站、应用程序、虚拟目录之间的层次关系，解释绑定协议（HTTP、HTTPS）与绑定信息（IP 地址、端口编号、主机头）确定服务器与客户交互方式，让学生理解 IIS 在 Windows 环境下构建 Web 服务的便利性与灵活性。
• Nginx 服务器
  • 介绍 Nginx 是俄罗斯人编写的轻量级 HTTP 和反向代理服务器，发音 “engine X”，突出其占有内存少、并发能力强、易于开发部署特点，以电商网站在促销活动时高并发场景为例，对比 Nginx 与 Apache 处理静态文件速度优势，讲解其负载均衡、反向代理功能实现原理，如将用户请求合理分配到后端多个服务器实例，同时提及缺点是只适合静态和反向代理，不擅长处理动态请求，引出与 Tomcat 搭配使用方案，说明两者协同利用各自优势应对复杂 Web 应用需求。
• Tomcat 应用服务器
  • 讲述 Tomcat 由 Sun 软件架构师开发，后成为 Apache 软件基金会 Jakarta 项目核心，是免费开放源代码的 Web 应用服务器，属于轻量级应用服务器，强调其作为 Servlet（JSP 也基于 Servlet）容器本质，可独立于 Apache 运行，支持最新的 Servlet 和 JSP 规范，以开发一个简单的 Java Web 应用部署到 Tomcat 为例，展示其处理动态请求、编译 JSP/Servlet 能力，让学生了解 Tomcat 在 Java 企业级开发中的关键地位，同时明确其局限于 Java 应用场景。
• WebSphere 应用程序服务器
  • 介绍 WebSphere Application Server 是 IBM 电子商务计划核心，基于 Java 应用环境，用于建立、部署和管理 Internet 和 Intranet Web 应用程序，展示其功能完善、开放特点，针对以 Web 为中心成长起来的开发人员，IBM 提供系列