文章目录
[+]
一、如何用代码制作网页
要用代码制作网页，首先需要了解HTML、CSS和JavaScript这三种基本的网页技术，HTML(超文本标记语言)用于定义网页的结构；CSS(层叠样式表)用于设置网页的样式；JavaScript用于实现网页的交互功能，接下来，我们将以一个简单的网页为例，介绍如何使用HTML、CSS和JavaScript来制作网页。
1. 创建一个HTML文件
在VSCode中，新建一个文件，将其命名为`index.html`,然后将以下代码复制到该文件中：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的网页</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>欢迎来到我的网页！</h1>
<button id="clickMe">点击我</button>
<script src="scripts.js"></script>
</body>
</html>
2. 创建一个CSS文件
在VSCode中，新建一个文件，将其命名为`styles.css`,然后将以下代码复制到该文件中：
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
}
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
3. 创建一个JavaScript文件
在VSCode中，新建一个文件，将其命名为`scripts.js`,然后将以下代码复制到该文件中：
document.getElementById('clickMe').addEventListener('click', function() {
alert('你好，欢迎来到我的网页！');
});
4. 在浏览器中预览网页效果
打开浏览器，输入文件所在的文件夹路径，例如：`file:///C:/Users/用户名/Documents/myWebPage`,然后按回车键，你应该能看到一个包含标题、按钮和弹出框的简单网页，点击按钮后，会弹出一个提示框显示“你好，欢迎来到我的网页！”。
二、vscode制作网页的完整代码示例
下面是一个使用VSCode编写的简单网页示例，包括HTML、CSS和JavaScript代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的网页</title>
</head>
<body>
<h1>欢迎来到我的网页！</h1>
<button id="clickMe">点击我</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script> $(document).ready(function(){ "#clickMe").click(function(){ alert("Hello World!"); }); }); </script> </body> </html>
