简介

  • 5 分钟

现今通过网站所能实现的事情令人印象深刻。 你可以生成可在所有设备上运行的 Web 体验、添加各种媒体内容、执行复杂的计算， 甚至创建类似于原生应用程序的应用。

如果你有意立即开始 Web 开发，可能会面临一系列令人眼花缭乱的选项。 本模块将展示网站的基本组件和一些可用于启动 Web 开发的工具。 你将同时使用 HTML、CSS 和 JavaScript 来构建一个网站，并在浏览器中使用开发人员工具来了解发生了什么情况。

掌握这一基础知识后，你将有一个更好的背景，将来可以在生成网站时做出决策；例如，是要选择 JavaScript 框架，还是创建自己的 JavaScript 函数来生成网站。

首先了解一下我们的目的是什么。

场景

假设你是一名 Web 开发人员，你的工作任务是让贵公司的网站吸引到范围更广泛的客户。 为了实现让客户自定义网站体验，你决定添加对浅色和深色主题的支持。 你将创建一个简单的概念证明网站来演示对使用 CSS 的主题的支持，并编写 JavaScript 函数在这些主题之间进行切换。

完成后，在选择深色主题时，网站就会如本例所示：

显示启用深色主题的完整网站的屏幕截图。

网页中有哪些内容？

内容、样式和交互逻辑分别分为 HTML、CSS 和 JavaScript 文件。 新式编程中的设计原则是分离关注点。 有很多原因会导致分离关注点，其中两种是简单和重复使用。 例如，通过使用 CSS 设置 HTML 元素的样式，可以简化 HTML 代码。 无需对每个元素的外观进行编码，而是将 CSS 样式应用于页面上的所有元素，而不考虑页面的复杂性。 此外，还可以将多个 HTML 页面链接到单个 CSS 文件，这有助于简化整个网站的一致外观。