谢从华，高蕴梅 著.Web前端设计底子入门——HTML5、CSS3、JavaScript（微课视频版）,2023, 清华大学出版社. ISBN：9787302641261.
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 的根本概念、功能、特点及相互关系。
- 本领目的
- 可以或许根据给定的网络场景，分析涉及的 Internet 技术原理，如域名解析过程、HTTP 哀求响应流程等。
- 具备排查简单网络故障的本领，例如根据欣赏器显示异常判断可能的服务器、网络或前端代码问题。
- 可以运用所学的前端技术，初步构建简单的网页页面，实现根本的布局、样式设置与交互功能。
- 情感目的
- 培养学生对 Web 体系技术的学习兴趣，引发探索网络技术奥秘的热情。
- 引导学生关注我国在 Web 技术范畴的发展现状，增强为实现信息技术自主可控而努力学习的责任感。
2、教学重难点
- 教学重点
- Internet 相关技术，如 TCP/IP 协议分层、域名体系、HTTP 协议。
- Web 欣赏器的内核与工作原理，差别内核欣赏器对网页出现的差别。
- 各类 Web 服务器和应用服务器的特点、适用场景，如 Apache 与 Nginx 的对比。
- Web 前端核心技术 HTML、CSS、JavaScript 的协同应用，jQuery 和 Bootstrap 框架对开辟效率的提拔。
- 教学难点
- TCP/IP 协议中各层协议的交互机制，数据传输过程中的封装与解封装细节。
- 域名解析在复杂网络情况下的完备流程，涉及根域名服务器、权势巨子 DNS 等的协同工作。
- 欣赏器渲染引擎的渲染流程，从 HTML 解析到页面终极出现的全过程，包括重绘回流等关键概念。
- ECMAScript 标准的发展演变及其与 JavaScript 的关系，理解差别版本新增特性对实际开辟的影响。
3、教学方法
- 教学法：体系讲解理论知识，确保知识的准确性与完备性，如 Internet 协议、服务器原理等复杂概念。
- 案例分析法：通过实际的网络应用案例，如访问百度网站涉及的域名解析、HTTP 哀求等，帮助学生理解抽象知识。
- 演示法：利用软件演示欣赏器工作原理、网页前端技术效果，让学生直观感受技术的实现过程，如利用开辟者工具检察欣赏器内核解析网页的步骤。
- 小组讨论法：组织学生讨论国产 Web 技术发展面临的挑战与机会，引发思维碰撞，培养团队协作与分析问题本领。
4、教学准备
- 多媒体教学设备，确保教学课件、视频等资料的展示效果。
- 安装有常见欣赏器（Firefox、Chrome、IE 等）、Web 服务器软件（如 Apache、Nginx）的教学计算机，用于课堂演示。
- 自制教学课件，包罗丰富的图表、动画，以辅助讲解复杂的技术原理，如 DNS 域名解析流程动画。
- 准备相关的案例资料、练习题及参考文档，供学生课堂学习与课后拓展。
5、教学过程
（一）导入（Bridge-in）
- 展示当今互联网丰富多彩的应用场景图片或视频，如网上购物、在线视频、交际媒体互动等。
- 提问引导：“各人每天都在利用互联网，有没有想过这些便捷的服务背后是由哪些技术支撑的呢？从打开欣赏器输入网址到看到精美的网页，这中间隐藏着怎样的奥秘？今天就让我们一起走进 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 提供系列
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
