HTML、CSS 和 JavaScript 是前端編程密不可分的三大語言新娜，我們一般看到的網(wǎng)頁都由這三種語言組合編程而成赵辕。這三者之間究竟有什么樣的關(guān)系？他們又是通過什么樣的軟件編成的呢概龄？
HTML还惠、CSS 和 JavaScript 之間的關(guān)系
我們平時看到的網(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)頁的整體顏色、位置频丘、字體办成、按鈕等設(shè)計
.JS 文件：賦予網(wǎng)頁的交互功能，例如：用戶點擊搂漠、輸入等操作會觸發(fā)哪些功能
網(wǎng)頁制作實戰(zhàn)
在學習編程的時候迂卢，最重要的就是直接動手嘗試，從實際挑戰(zhàn)中逐漸作出調(diào)整状答。這個網(wǎng)站制作教程將根據(jù)以下幾個步驟冷守，手把手帶你制作一個簡易的網(wǎng)站，讓你了解 HTML惊科、CSS 和 JS 之間的關(guān)系與基本操作：
1. 草擬網(wǎng)站內(nèi)容
2. 在Lightly中編寫代碼
3. 使用 HTML 建立網(wǎng)站基本框架
4. 使用 CSS 調(diào)整網(wǎng)站設(shè)計
5. 使用 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 也為我們關(guān)聯(lián)好了 CSS 和 JS 文件，關(guān)聯(lián)這兩個文件的代碼分別如下：
<!--- 關(guān)聯(lián) CSS 文件的代碼 --->
<link type="text/css" rel="stylesheet" href="css/style.css"/>
<!--- 關(guān)聯(lián) JS 文件的代碼 --->
<script type="text/javascript" src="js/script.js"></script>
在正式開始網(wǎng)頁的編程之前睦霎，我們也可以先調(diào)整 <head> 標簽中的頁面信息梢卸，同時確保 CSS 和 JS 文件正確關(guān)聯(lián)。
<head>
? ? <meta charset="UTF-8">
? ? <title>Lightly 網(wǎng)頁制作</title> <!--- 這里可以修改頁面標題 --->
? ? <link type="text/css" rel="stylesheet" href="css/style.css"/>
? ? <script type="text/javascript" src="js/script.js"></script>
</head>
添加網(wǎng)頁內(nèi)容
<body> 標簽含有網(wǎng)頁的主要內(nèi)容副女，如果直接點擊右上角的小眼睛蛤高，目前只會彈出 “Hello World!”。我們可以修改 <body> </body> 里的內(nèi)容碑幅，讓網(wǎng)頁變得更豐富戴陡。
<body>
? ? <!--- 這里的內(nèi)容是評論，不會顯示在網(wǎng)頁中 --->
? ? <!--- h1 標題 --->
? ? <h1>網(wǎng)頁制作指南</h1>
? ? <!--- p = paragraph 段落 --->
? ? <p id="msg">任務(wù)清單</p>
? ? <!--- ul = unordered list 無序號列表 --->
? ? <!--- ol = ordered list 有序號列表 --->
? ? <!--- li 即列表中的內(nèi)容 --->
? ? <ul>
? ? ? <li class="list">添加可視化設(shè)計</li>
? ? ? <li class="list">添加淺色與深色主題</li>
? ? ? <li>添加切換主題功能沟涨！</li>
? ? </ul>
</body>
添加好內(nèi)容后猜欺，我們可以在此預覽網(wǎng)頁：
只修改了 HTML 部分的網(wǎng)頁只有黑白文字，沒有設(shè)計拷窜。
使用 CSS 設(shè)計網(wǎng)頁
完成網(wǎng)頁的基本結(jié)構(gòu)后，我們轉(zhuǎn)到 style.css 文件，開始為網(wǎng)頁設(shè)計編程篮昧。Lightly 的 style.css 文件默認為空白赋荆，我們可以嘗試添加以下參數(shù)代碼：
定義顏色名稱
/* CSS 的評論代碼與 HTML 不同 */
/* 使用根目錄定義顏色 */
:root {
? --green: #f0fff0;
? --white: #ffffff;
? --black: #000000;
}
* {
? color: var(--fontColor);
}
更改字體樣式
body {
? ? /* 設(shè)置背景顏色，調(diào)整文本為黑體懊昨、居中 */
? ? font-family: SimHei;
? ? text-align: center;
? ? background: var(--bg);
}
ul {
? ? /* 設(shè)置 ul 文本為宋體 */
? ? font-family: SimSun;
}
為列表設(shè)置邊框
/* 為 ul 添加邊框 */
.feature {
? ? text-align: left;
? ? font-size: 24px;
? ? margin: auto;
? ? width: 400px;
? ? height: 200px;
? ? outline: solid 1px;
? ? /* 將列表內(nèi)容居中 */
? ? display: flex;
? ? justify-content: center;
? ? align-items: center;
}
添加淺色主題
/* 添加淺色主題 */
.light-theme {
? color: var(--black);
? background: var(--green);
}
在刷新網(wǎng)頁之前窄潭，我們需要回到 .HTML 文件為 <body> 標簽添加淺色主題：
<body class="light-theme">
同時在 <ul> 的上下方添加 <div> 標簽，注意需要為 <div> 標簽添加 class：
? ? <div class="feature">
? ? ? ? <ul>
????? ? ? ? ? ?...
? ? ? ? </ul>
? ? </div>
完成后 CSS 文件配置后酵颁，回到 .HTML 文件重新加載網(wǎng)頁查看效果：
使用 JavaScript 實現(xiàn)主題切換
掌握基本的 CSS 設(shè)計后嫉你，我們可以嘗試進一步編寫 JavaScript 代碼，讓網(wǎng)頁實現(xiàn)深色和淺色主題切換的功能躏惋。
首先幽污，我們需要在 .html 文件中添加“切換主題”的按鈕：
? ? <!--- div = division 分區(qū) --->
? ? <div>
? ? ? ? <button class="btn" onclick="function()">切換深色</button>
? ? </div>
接著，把 <head> 中的 script.js 關(guān)聯(lián)代碼移動（剪切+粘貼）到 </body> 標簽結(jié)束前：
<script type="text/javascript" src="js/script.js"></script>
</body>
在添加切換功能前簿姨，我們需要添加并調(diào)整 CSS 的主題：
/* 添加淺色主題 */
.light-theme {
? --bg: var(--green);
? --fontColor: var(--black);
? --btnBg: var(--black);
? --btnFontColor: var(--white);
}
/* 添加深色主題 */
.dark-theme {
? --bg: var(--black);
? --fontColor: var(--green);
? --btnBg: var(--white);
? --btnFontColor: var(--black);
}
然后調(diào)整按鈕設(shè)計：
/* 調(diào)整按鈕設(shè)計 */
.btn {
? ? position: absolute;
? ? top: 20px;
? ? left: 250px;
? ? height: 50px;
? ? width: 50px;
? ? border-radius: 50%;
? ? border: none;
? ? color: var(--btnFontColor);
? ? background-color: var(--btnBg);
}
/* 添加點擊效果 */
.btn:focus { outline-style: none; }
最后距误，轉(zhuǎn)到 script.js 文件并添加按鈕功能：
// 為 switcher 添加定義
const switcher = document.querySelector('.btn');
// 使用監(jiān)聽功能監(jiān)聽按鈕動態(tài)
switcher.addEventListener('click', function() {
? ? document.body.classList.toggle('dark-theme')
? ? // 使用 if 功能實現(xiàn)主題切換
? ? var className = document.body.className;
? ? if(className == "light-theme") {
? ? ? ? this.textContent = "切換深色";
? ? }
? ? else {
? ? ? ? this.textContent = "切換淺色";
? ? }
? ? console.log('current class name: ' + className);
});
所有步驟完成后，重新預覽網(wǎng)頁效果”馕唬現(xiàn)在准潭，點擊按鈕即可切換主題顏色：
