Appearance
第零课 软件安装和环境配置
工欲善其事，必先利其器。
观前须知
此页面的内容主要针对使用电脑且操作系统为 Windows 的用户（如果你的电脑不是苹果牌的，那 99% 概率满足此要求），如果有使用苹果电脑（Mac）的朋友， 可以在群里提问，我再想想办法 😢
Visual Studio Code (vscode) 的安装
Visual Studio Code （简称 vscode） 是我们开发用到的主力软件。
安装软件本体
下载地址（官网）：https://code.visualstudio.com/
点进去后，可以看到一个大大的“Download for Windows” 按钮，没错，不要犹豫，点击它，开始下载。
如果你不是从上面的链接点击下载，而是自己去搜索引擎找下载地址， 那你大概率会被国内的各种推广广告吞没。比如我们在百度中搜索：
可以看到，即使我们输入了完整的名字，真正的官方网站还是排在搜索结果的第三条， 前两条则是“99 包邮传奇版”的广告。 在后续下载其他软件时，大家也要擦亮慧眼，不要被这些无良商家蒙骗。
WARNING
请注意，“Visual Studio Code” 和 “Visual Studio” 是完全不同的两个软件，我们要用到的是前者，标志为蓝色图标，而 “Visual Studio” 则是紫色。
下载完真正的安装包只有不到 100MB 大小（2024 年 9 月 23 日的数据），和 V 卡通 App 大小相当，十分甚至九分的轻量 : )
打开后有可能会先弹出警告，点击确定即可。
接下来依次是“许可协议”、“选择目标位置”、“选择开始菜单文件夹”三个步骤， 建议全部保持默认选项，安装位置也最好保持默认，尽量不要改到其他盘。 但如果你的 C 盘连 400MB 的空间都没有的话，建议及时在群内求助。
来到这个步骤，为了后续操作方便，建议勾选全部选项。
安装完成后，默认会自动打开 vscode 程序。
看到这满是英文的界面，有的朋友可能已经开始感到不适了。 不过不用慌张，点击界面最左侧从上到下排列的按钮中的最后一个 ——就是那个长得像巧克力掰掉一块的按钮——其实是扩展商店的按钮， 在展开的页面里搜索“chinese”，点击简体中文插件右下角的 “Install” 按钮。
安装完成后，点击右下角的提示，重启软件后就变成中文啦。
TIP
到这里大家可能会注意到，我们目前为止的操作中很多都是全英文界面， 这在我们后续的学习，乃至整个大学的学习生活中都是非常常见的。 在这里给大家一个建议，尽早养成阅读英文的技能和习惯。
如果你在安装时的“选择附加任务”环节勾选了“创建桌面快捷方式”选项的话， 现在你的桌面已经能看到 vscode 的图标了。如果没有的话，则需要在开始菜单里寻找。
至此，Visual Studio Code 的安装已经圆满结束，撒花 🎉
VSCode 插件安装
我们安装好 vscode 后，默认配置下它的功能是非常有限的，只比系统自带的记事本多一点功能。我们需要利用插件来扩展他的能力。因为我们要学习 Web 开发，所以需要下载 Web 开发相关的插件。如果你以后学习其他领域其他语言，比如 Python、C/C++ 等，也可以用 vscode，只需要下载相关的插件就好。
在试用期，我们主要学习 HTML、CSS、JavaScript 的基础内容，需要安装一些和它们相关的插件。
TIP
vscode 中“插件”的英文原名是 “Extension”，在中文语境下，“插件”、“扩展”都是这个意思。
我们之前安装的简体中文语言包，实际上也是 vscode 的插件，相信通过之前的操作你已经会安装插件了。 下面就让我列出一些我们后续开发会用到的插件。
WARNING
有一些插件虽然名字一样，但是提供的是完全不同的功能，大家下载的时候一定要检查仔细了，检查一下图标是不是对应的。
HTMLHint
用于检查 HTML 代码中的格式错误，比如元素嵌套顺序等问题（类似于数学公式中的括号嵌套）。
Live Server
用于预览正在开发的网页，Web 开发初期必备！
HTML CSS Support
用于 HTML 的 id 和 class 和 CSS 代码的联动功能（看不懂没关系，装就对了！）
Prettier
用于格式化你的代码，把你的代码变得漂漂亮亮的！
其它
还有更多插件等待大家探索。比如，你甚至可以在 vscode 里刷知乎、听网易云、上 QQ、刷 NGA 等等等等...
浏览器
推荐使用 Edge 浏览器，应该大部分电脑会自带这个浏览器，它大概长这个样子：
如果没有的话，可以点击这里下载
也可以使用 Chrome 浏览器，下载地址：https://google.cn/chrome/
作业
在桌面或者其他位置，鼠标右击，新建一个文件夹，取一个自己喜欢的名字（最好用英文）：
右键新建好的文件夹，选择“通过 Code 打开”：
在 vscode 中，左上角“新建”->“新建文件...”，命名为 “index.html”（不含引号），保存到刚才新建的文件夹里。
复制下面的代码，粘贴到新建好的 index.html 文件里：
TIP
网站代码块右上角有复制的按钮，也可选中文本后，右键菜单选择“复制”/“粘贴”。
也可以使用快捷键 Ctrl + C 复制，Ctrl + V 粘贴。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>欢迎加入学生在线！</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Poppins", sans-serif;
background: linear-gradient(135deg, #f06, #f79);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
.bg-animation {
position: absolute;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: float 6s ease-in-out infinite;
}
.bg-animation:nth-child(1) {
top: 10%;
left: 15%;
animation-delay: 0s;
}
.bg-animation:nth-child(2) {
top: 40%;
left: 70%;
animation-delay: 2s;
width: 150px;
height: 150px;
}
.bg-animation:nth-child(3) {
top: 70%;
left: 30%;
animation-delay: 4s;
width: 100px;
height: 100px;
}
@keyframes float {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(360deg);
}
}
.container {
background: rgba(255, 255, 255, 0.85);
padding: 40px 30px;
border-radius: 15px;
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
width: 100%;
max-width: 500px;
position: relative;
z-index: 1;
transition: transform 0.3s ease;
}
.container:hover {
transform: scale(1.02);
}
h2 {
text-align: center;
margin-bottom: 30px;
color: #333;
font-weight: 600;
font-size: 28px;
}
label {
display: block;
margin-bottom: 8px;
color: #555;
font-weight: 500;
}
input[type="text"],
input[type="date"],
textarea {
width: 100%;
padding: 12px 15px;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 16px;
transition: border-color 0.3s ease;
}
input[type="text"]:focus,
input[type="date"]:focus,
textarea:focus {
border-color: #f06;
outline: none;
}
textarea {
resize: vertical;
min-height: 120px;
}
.submit-btn {
width: 100%;
padding: 15px;
background: linear-gradient(135deg, #f06, #f79);
border: none;
border-radius: 8px;
color: #fff;
font-size: 18px;
cursor: pointer;
transition: background 0.3s ease, transform 0.3s ease;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}
.submit-btn:hover {
background: linear-gradient(135deg, #f79, #f06);
transform: translateY(-3px);
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
}
@media (max-width: 600px) {
.container {
padding: 30px 20px;
}
h2 {
font-size: 24px;
}
.submit-btn {
font-size: 16px;
}
}
#date {
text-align: center;
margin-top: 1rem;
color: gray;
}
div {
}
</style>
</head>
<body>
<div class="bg-animation"></div>
<div class="bg-animation"></div>
<div class="bg-animation"></div>
<div class="container">
<h2>欢迎加入学生在线！</h2>
<form action="#" method="post">
<label for="name">你的名字是什么呢？</label>
<input
type="text"
id="name"
name="name"
placeholder="请输入你的名字"
required
/>
<label for="hobbies">你有什么爱好呢？</label>
<input
type="text"
id="hobbies"
name="hobbies"
placeholder="略略略"
required
/>
<label for="reason">为什么想加入 Web 呢：</label>
<textarea
id="reason"
name="reason"
placeholder="就是想加入:P"
required
></textarea>
<input type="submit" value="提交报名" class="submit-btn" id="submit" />
<p id="date"></p>
</form>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
function setTime() {
const dateInput = document.getElementById("date");
const today = new Date().toLocaleString();
dateInput.textContent = today;
}
setTime();
setInterval(() => {
setTime();
}, 1000);
document.querySelector("#submit").addEventListener("click", () => {
if (confirm("欢迎加入学生在线喵~\n欢迎加入学生在线谢谢喵~~")) {
window.location.reload();
}
});
});
</script>
<script>
(async () => {
let a =
})();
</script>
<div>
</body>
</html>右键编辑器任意位置，右键菜单选择“Open with Live Server”
此时浏览器应该会弹出一个网页，展示的就是代码对应的网页的内容：
最后，打开 vscode 的扩展商店页面和错误信息页面：
来一张全家福～
把全家福提交给负责人就可以啦～
有任何问题欢迎群内或私聊提问 🥰