HTML/CSS/JS编程入门——使用Lightly制作可切换主题的简单网页

HTML、CSS 和 JavaScript 是前端编程密不可分的三大语言，我们一般看到的网页都由这三种语言组合编程而成。这三者之间究竟有什么样的关系？他们又是通过什么样的软件编成的呢？

目录

1. HTML、CSS 和 JavaScript 之间的关系

2. 网页制作实战

HTML、CSS 和 JavaScript 之间的关系

我们平时看到的网页就像是一座已经建好的房子，而这三个编程语言则分别负责房子的结构（Structure）、样式（Styling）和功能（Functionality）。对一个完整的网页而言，三者几乎缺一不可。但在极端情况下，只要有 HTML 就可以制作出最简单的网页，CSS 和 JavaScript 则会为网页赋予更精美的样式和更多样的功能。

.HTML 文件：网页的基本架构，一般在这里调用 CSS 和 JS 文件
.CSS 文件：网页样式文件，调整网页的整体颜色、位置、字体、按钮等设计
.JS 文件：赋予网页的交互功能，例如：用户点击、输入等操作会触发哪些功能

网页制作实战

在学习编程的时候，最重要的就是直接动手尝试，从实际挑战中逐渐作出调整。这个网站制作教程将根据以下几个步骤，手把手带你制作一个简易的网站，让你了解 HTML、CSS 和 JS 之间的关系与基本操作：

1. 草拟网站内容
2. 在 Lightly 中编写代码
3. 使用 HTML 建立网站基本框架
4. 使用 CSS 调整网站设计
5. 使用 JavaScript 添加网站功能

我们在此次教程中使用轻量且功能强大的 Lightly 集成开发工具（IDE），学习过程中无需下载任何编程软件，也无需熟记复杂的界面操作，只需要通过网页打开就可以在线上实时编写代码，通过一键运行完成网页制作。

这个网页制作教程会教大家制作一个可切换浅色和深色主题的简单网页，网页的效果大致如下：

在 Lightly 创建 HTML 文件

注册并登录 Lightly 账户后，点击 “新建项目” 并创建 HTML 文件。

打开项目后，你会发现 Lightly 已经为我们分别建好了 Index.html、style.css 和 script.js 三个文件。

使用 HTML 建立框架

仔细看 index.html 的代码，Lightly 也为我们关联好了 CSS 和 JS 文件，关联这两个文件的代码分别如下：