HTML / CSS / JS 編程入門 —— 制作可切換主題的簡單網(wǎng)頁
HTML、CSS 和 JavaScript 是前端編程密不可分的三大語言，我們一般看到的網(wǎng)頁都由這三種語言組合編程而成。這三者之間究竟有什么樣的關系？他們又是通過什么樣的軟件編成的呢？
目錄
HTML、CSS 和 JavaScript 之間的關系
網(wǎng)頁制作實戰(zhàn)
HTML、CSS 和 JavaScript 之間的關系
我們平時看到的網(wǎng)頁就像是一座已經(jīng)建好的房子，而這三個編程語言則分別負責房子的結(jié)構(gòu)（Structure）、樣式（Styling）和功能（Functionality）。對一個完整的網(wǎng)頁而言，三者幾乎缺一不可。但在極端情況下，只要有 HTML 就可以制作出最簡單的網(wǎng)頁，CSS 和 JavaScript 則會為網(wǎng)頁賦予更精美的樣式和更多樣的功能。
.HTML 文件：網(wǎng)頁的基本架構(gòu)，一般在這里調(diào)用 CSS 和 JS 文件
.CSS 文件：網(wǎng)頁樣式文件，調(diào)整網(wǎng)頁的整體顏色、位置、字體、按鈕等設計
.JS 文件：賦予網(wǎng)頁的交互功能，例如：用戶點擊、輸入等操作會觸發(fā)哪些功能
網(wǎng)頁制作實戰(zhàn)
在學習編程的時候，最重要的就是直接動手嘗試，從實際挑戰(zhàn)中逐漸作出調(diào)整。這個網(wǎng)站制作教程將根據(jù)以下幾個步驟，手把手帶你制作一個簡易的網(wǎng)站，讓你了解 HTML、CSS 和 JS 之間的關系與基本操作：
草擬網(wǎng)站內(nèi)容
在 Lightly 中編寫代碼
使用 HTML 建立網(wǎng)站基本框架
使用 CSS 調(diào)整網(wǎng)站設計
使用 JavaScript 添加網(wǎng)站功能
我們在此次教程中使用輕量且功能強大的 Lightly 集成開發(fā)工具（IDE），學習過程中無需下載任何編程軟件，也無需熟記復雜的界面操作，只需要通過網(wǎng)頁打開就可以在線上實時編寫代碼，通過一鍵運行完成網(wǎng)頁制作。
這個網(wǎng)頁制作教程會教大家制作一個可切換淺色和深色主題的簡單網(wǎng)頁，網(wǎng)頁的效果大致如下：
在 Lightly 創(chuàng)建 HTML 文件
注冊并登錄 Lightly 賬戶后，點擊 “新建項目” 并創(chuàng)建 HTML 文件。
打開項目后，你會發(fā)現(xiàn) Lightly 已經(jīng)為我們分別建好了 Index.html、style.css 和 script.js 三個文件。
使用 HTML 建立框架
仔細看 index.html 的代碼，Lightly 也為我們關聯(lián)好了 CSS 和 JS 文件，關聯(lián)這兩個文件的代碼分別如下：
在正式開始網(wǎng)頁的編程之前，我們也可以先調(diào)整 <head> 標簽中的頁面信息，同時確保 CSS 和 JS 文件正確關聯(lián)。
添加網(wǎng)頁內(nèi)容
<body> 標簽含有網(wǎng)頁的主要內(nèi)容，如果直接點擊右上角的小眼睛，目前只會彈出 “Hello World!”。我們可以修改 <body> </body> 里的內(nèi)容，讓網(wǎng)頁變得更豐富。
添加好內(nèi)容后，我們可以在此預覽網(wǎng)頁：
只修改了 HTML 部分的網(wǎng)頁只有黑白文字，沒有設計。
使用 CSS 設計網(wǎng)頁
完成網(wǎng)頁的基本結(jié)構(gòu)后，我們轉(zhuǎn)到 style.css 文件，開始為網(wǎng)頁設計編程。Lightly 的 style.css 文件默認為空白，我們可以嘗試添加以下參數(shù)代碼：
定義顏色名稱
更改字體樣式
為列表設置邊框
添加淺色主題
在刷新網(wǎng)頁之前，我們需要回到 .HTML 文件為 <body> 標簽添加淺色主題：
同時在 <ul> 的上下方添加 <div> 標簽，注意需要為 <div> 標簽添加 class：
完成后 CSS 文件配置后，回到 .HTML 文件重新加載網(wǎng)頁查看效果：
使用 JavaScript 實現(xiàn)主題切換
掌握基本的 CSS 設計后，我們可以嘗試進一步編寫 JavaScript 代碼，讓網(wǎng)頁實現(xiàn)深色和淺色主題切換的功能。
首先，我們需要在 .html 文件中添加“切換主題”的按鈕：
接著，把 <head> 中的 script.js 關聯(lián)代碼移動（剪切+粘貼）到 </body> 標簽結(jié)束前：
在添加切換功能前，我們需要添加并調(diào)整 CSS 的主題：
然后調(diào)整按鈕設計：
最后，轉(zhuǎn)到 script.js 文件并添加按鈕功能：
所有步驟完成后，重新預覽網(wǎng)頁效果?，F(xiàn)在，點擊按鈕即可切換主題顏色：
