本文只为记录并帮助有需要的小伙伴学习使用VScode
最早开始本人的前端代码是使用HBuilder编写的,但最近想正式转战VSCode,所以才有这系列文章
注意本教程发布于2024年7月,软件为win1.91,后续版本使用时也可参考
步骤一、新建文件夹
!!注意!!
1、文件名尽可能为英文
2、文件路径尽可能不存在中文
3、文件名不包含特殊字符
4、文件名尽可能通俗易懂
①在自己的非系统盘符(系统盘一般为C盘)下创建文件夹
作者的创建目录为D:\ProgrammingFile\VScode\StaticPage
步骤二、打开
①点击界面左上角文件
②选择打开文件夹
③打开刚刚创建的文件夹
步骤三、创建项目目录结构
①点击新建文件夹
②命名Demo1回车
③右键项目Demo1然后选择新建文件夹
④新建一个名为css的文件夹
⑤以此类推创建image文件夹、js文件夹
⑥右键项目选择新建文件(创建html文件)
⑦任意取名(!注意!后缀添加上".html")
步骤四、编写HTML
①在html文件下输入!回车快速生成html结构
②编写html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Frontend Page</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<h1>欢迎来到NPC码农的简单前端页面</h1>
</header>
<main>
<p>NPC码农的简单静态前端小页面</p>
<button id="alertButton">点击我</button>
</main>
<footer>
<p>版权所有 © NPC码农2024</p>
</footer>
<script src="js/script.js"></script>
</body>
</html>
步骤五、编写CSS
①右键css文件夹下创建css文件
②编写css
/* 全局样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* 头部样式 */
header {
background-color: #4CAF50;
color: white;
padding: 15px;
text-align: center;
}
/* 主内容样式 */
main {
flex: 1;
padding: 20px;
text-align: center;
}
/* 按钮样式 */
button {
padding: 10px 20px;
font-size: 16px;
background-color: #008CBA;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #005f6a;
}
/* 页脚样式 */
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
步骤六、编写JS
①右键js文件夹下创建js文件
⑤编写js
//NPC码农
// 当页面加载完成后执行的代码
document.addEventListener('DOMContentLoaded', () => {
const button = document.getElementById('alertButton');
button.addEventListener('click', () => {
alert('按钮被点击了!');
});
});