1. Web 标准

学习成果

• 客户端和服务器及其在 Web 中的作用。

• DNS 及其工作原理（高层概述）。

• TCP/IP 和 HTTP。

• HTTP 语法（基础级别）。

• 常见的 HTTP 响应代码（例如 200、301、403、404 和 500）。

• URL 的组成部分（协议、域名和子域名）。

• 顶级域名 (TLD) 以及如何注册域名。

• 托管，如何购买以及如何将网站上线。

注意:

• 本节的关键目标之一是高层次地理解 Web 在代码之外是如何运作的。
• 您还应该掌握一套术语，以便能够精确地谈论 Web 的运作方式。

资源

• 请求和响应，Scrimba 课程合作伙伴

• Web 是如何工作的

• Web 如何工作：面向 Web 开发新手（或任何人）的入门指南，freeCodeCamp (2015)

• 什么是域名？

• 什么是 URL？

• 发布您的网站

学习成果

• HTML、CSS 和 JavaScript 的用途。

注意:

主要 Web 创作技术的用途

• HTML 用于结构和语义（含义）。
• CSS 用于样式和布局。
• JavaScript 用于控制动态行为。

• 它们在更大的生态系统中的位置，以及它们并非唯一的 Web 技术。

• 为什么分离层级是个好主意。

注意:

分离是个好主意，因为

• 代码管理和理解。
• 团队协作/角色分离。
• 性能。

• 事实上，在现实中，分离并不总是清晰的。

注意:

• 一个典型的例子是使用 JavaScript 来实时动态更新 CSS 样式，以响应应用程序状态的变化、用户选择等。
• 通常的做法是修改 `Element.style.x` 属性，这会导致内联 CSS 被注入到 HTML 中。更好的策略是添加/更改元素的类，以避免内联 CSS。
• 更严重的是，JavaScript 框架使用各种“HTML-in-JavaScript”或“CSS-in-JavaScript”的自定义语法，导致大量混合了不同语法类型。

• 这种分离的性质——一个可以努力追求的理想，而不是绝对的。

• 渐进增强的概念。

注意:

渐进增强通常被认为不重要，因为如今浏览器对新功能的兼容性越来越好，而且人们的网络连接速度也越来越快。然而，您应该考虑与现代相关的例子——减少装饰以使移动体验更流畅并节省数据，或者为仍在按兆字节支付家庭互联网费用的发展中国家的用户提供更简单、低带宽的体验。

这延伸到响应式设计，稍后将进行更深入的介绍。

资源

• Web 开发基础入门，Scrimba 课程合作伙伴

• Web 和 Web 标准

• Web 标准模型，explainers.dev

• 什么是渐进增强，为什么它很重要

学习成果

• 标准机构如何运作——例如 W3C、WHATWG、TC39 和 Khronos Group。

• 标准创建过程。

注意:

• Web 的基本原则——可互操作、可访问、协作，并且不被任何单一公司拥有。
• 这个基础意味着 Web 是一个独特且令人兴奋的行业，值得参与。
• 完整的 W3C 标准过程是深入和学术的。目前，您应该了解不同个人和公司如何参与标准过程，以及不同成熟阶段如何旨在消除问题（例如，互操作性问题、专利问题）。

• Web 标准功能的生命周期

  • 实验性：通常只在一个浏览器引擎中可用，因为它正在开发中，有时甚至还没有规范。太早无法在生产环境中使用。

  • 稳定：开发完成，已规范，可在各种浏览器引擎中使用。

  • 已弃用：不再使用，可能仍在浏览器中，但已标记为删除。

• Web 标准构建的关键原则

  • 开放贡献和使用。

  • 无专利障碍或被任何单一私人实体控制。

  • 可访问和可互操作。

  • 它们不会破坏 Web。

资源

• Web 和 Web 标准

• 关于 W3C Web 标准，W3C

• W3C 推荐跟踪，W3C (2021)

• WHATWG 常见问题解答，WHATWG

• Web 平台设计原则，W3C (2023)

学习成果

• HTTP 请求-响应模型。

• HTTP 响应中返回的不同类型的资源。

注意:

需要理解的不同类型的下载资源有

• HTML 文件。
• CSS 文件。
• JavaScript 文件。
• 媒体资源，如图片、视频、音频文件、PDF 和 SVG。
• 浏览器无法原生处理的其他文件类型，会将其交给设备上的相关应用程序，例如 Word 文档和 PowerPoint 幻灯片。

• 静态文件与动态文件：一些下载的代码文件将是静态的（它们在服务器上的形式与下载时相同），而一些将是动态的（由服务器根据可变数据生成）。

• 这些文件如何组合起来创建一个 Web 文档，然后由浏览器显示。

注意:

渲染网页的不同阶段

• 请求一个网页（例如，通过点击链接）。
• 执行 DNS 查询，以查找网页所需的所有资源的服务器位置。
• 开始获取资源。这包括 TCP 握手、TLS 协商以及 HTTP 请求和响应。
• 从下载的 HTML 中组装 DOM 树。
• 从 CSS 规则构建 CSSOM。
• 解析、解释、编译和执行 JavaScript。
• 构建辅助技术（例如屏幕阅读器）可以使用的可访问性树。
• 从 DOM 和 CSSOM 创建渲染树，以确定应用于每个 DOM 节点的视觉样式。
• 计算页面布局。
• 通过绘制和复合，将样式化、布局好的节点按正确的顺序绘制到屏幕上。

• 为什么浏览器有时被视为一个不友好的编程环境

  • 与其他编程环境不同，很难保证您的代码将在什么环境下运行。

  • 您无法保证用户的操作系统、浏览器、语言、位置、网络连接、CPU、GPU、内存等。

  • 您需要拥抱不确定性，并学会防御性编程。这会回溯并扩展我们在 1.2 HTML、CSS 和 JavaScript 三角 中研究的概念。此处也是一个查看相关概念（如错误处理、功能检测和响应式设计）的好地方。

• 另一方面——为什么 Web 是一个很棒的编程环境

  • 它的基本状态是可访问和可链接的。其中一些基本功能在其他环境中难以实现。

  • 通过 Web 进行应用程序交付简单而强大。

  • 更新很容易——在很多情况下，您只需重新加载浏览器标签页即可。您不必担心不断下载和安装大型软件包。

  • 社区充满活力且乐于助人，并且有很多很棒的学习资源。

资源

• 填充页面：浏览器如何工作

• 处理文件

• 浏览器如何工作，freeCodeCamp (2018)