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 标准模型，websitearchitecture.co.uk
• 什么是渐进增强，以及为什么它很重要

学习成果

• 标准机构如何运作——例如 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)