学生简单网站制作教程对于想要接触网页开发的学生来说，制作一个简单网站不仅能锻炼逻辑思维和动手能力，还能获得成就感，本教程将使用HTML、CSS和JavaScript三种基础技术，从零开始教你搭建一个静态个人网站，无需编程基础,跟着步骤操作即可完成。
我们需要准备开发环境，电脑上只需安装一个文本编辑器，推荐使用Visual Studio Code（VS Code），它是免费且功能强大的代码编辑器，支持语法高亮和实时预览，下载地址可通过搜索“Visual Studio Code官网”获取，安装完成后，打开VS Code，在扩展商店中搜索“Chinese Language Pack”并安装，将其界面设置为中文，方便操作，创建一个项目文件夹，例如命名为“my-website”，在VS Code中通过“文件→打开文件夹”打开该文件夹,后续所有文件都保存在这里。
网站的基本结构由HTML（超文本标记语言）搭建，它负责定义网页的内容和框架，在项目文件夹中新建一个名为“index.html”的文件，这是网站的首页，用VS Code打开该文件,输入以下基础代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">我的个人网站</title>
</head>
<body>
<header>
<h1>欢迎来到我的个人网站</h1>
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于我</a></li>
<li><a href="#contact">联系方式</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h2>首页</h2>
<p>这里是网站首页内容，可以写一些个人介绍或最新动态。</p>
</section>
<section id="about">
<h2>关于我</h2>
<p>这里可以介绍自己的兴趣爱好、学习经历等。</p>
</section>
<section id="contact">
<h2>联系方式</h2>
<p>邮箱：example@email.com</p>
<p>电话：123-4567-8910</p>
</section>
</main>
<footer>
<p>© 2025 我的个人网站 版权所有</p>
</footer>
</body>
</html>
这段代码中，<!DOCTYPE html>声明文档类型，<html>是根标签，<head>包含网页标题和字符编码等信息，<body>则是网页的可见内容。<header>、<nav>、<main>、<section>、<footer>是HTML5提供的语义化标签，分别表示页眉、导航、主体、内容区块和页脚，有助于提升代码的可读性和搜索引擎优化，保存文件后，用浏览器打开“index.html”,可以看到一个带有标题和导航栏的简单网页结构。
用CSS（层叠样式表）美化网页，让页面更美观，在项目文件夹中新建一个名为“style.css”的文件，回到“index.html”，在<head>标签内添加以下代码引入CSS文件：
<link rel="stylesheet" href="style.css">
然后在“style.css”中输入以下样式代码：
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 1rem 0;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
}
nav ul li {
margin: 0 20px;
}
nav ul li a {
color: white;
text-decoration: none;
font-size: 1.1rem;
}
nav ul li a:hover {
text-decoration: underline;
}
main {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: white;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
section {
margin-bottom: 30px;
}
footer {
text-align: center;
padding: 1rem 0;
background-color: #333;
color: white;
position: relative;
bottom: 0;
width: 100%;
}
这段CSS代码设置了网页的字体、背景色、导航栏样式、内容区块布局等。body中的margin: 0和padding: 0去除了默认的边距，nav ul使用display: flex让导航列表项水平排列，main中的max-width: 800px和margin: 20px auto居中显示并限制最大宽度，保存CSS文件后，刷新浏览器页面，会发现网页样式已发生变化，布局更规整,视觉效果更佳。
如果希望网页具有交互功能，比如点击导航栏平滑滚动到对应内容区块，可以使用JavaScript，在项目文件夹中新建一个名为“script.js”的文件，回到“index.html”，在</body>标签前添加以下代码引入JavaScript文件：
<script src="script.js"></script>
然后在“script.js”中输入以下代码：
document.addEventListener('DOMContentLoaded', function() {
const navLinks = document.querySelectorAll('nav a[href^="#"]');
navLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href').substring(1);
const targetElement = document.getElementById(targetId);
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth'
});
}
});
});
});
这段JavaScript代码首先等待网页内容加载完成（DOMContentLoaded事件），然后获取所有导航链接（href属性以“#”开头的<a>标签），为每个链接添加点击事件监听器，点击链接时，通过preventDefault()阻止默认跳转行为，获取目标区块的ID（如“home”），使用scrollIntoView方法并设置behavior: 'smooth'实现平滑滚动效果，保存文件后刷新页面，点击导航栏中的链接,页面会平滑滚动到对应内容区块。
至此，一个简单的个人网站就制作完成了，如果需要进一步丰富内容，可以在<main>标签内添加更多<section>区块，插入图片（使用<img src="图片路径" alt="图片描述">标签）、视频或文字；如果需要调整样式，可以修改“style.css”文件中的属性值，如更改颜色、字体大小、边距等，还可以学习使用CSS框架（如Bootstrap）或JavaScript库（如jQuery）来简化开发，但基础掌握后,进阶学习也会更加轻松。
相关问答FAQs
-
问：制作网站时，图片应该放在哪个文件夹里？如何正确引用图片路径？
答：为了保持项目结构清晰，建议在项目文件夹中新建一个名为“images”的文件夹，将所有图片文件存放在该文件夹内，在HTML中引用图片时，路径应相对于“index.html”文件的位置，如果图片名为“photo.jpg”，存放在“images”文件夹中，则引用代码为<img src="images/photo.jpg" alt="我的照片">，如果图片存放在项目根目录（与“index.html”同级），则直接写<img src="photo.jpg" alt="我的照片">即可。 -
问：为什么我的CSS样式没有生效？可能的原因有哪些？
答：CSS样式不生效常见原因包括：① 路径错误，检查“index.html”中<link rel="stylesheet" href="style.css">的路径是否正确，确保“style.css”文件与“index.html”在同一目录或根据实际位置调整路径；② 选择器错误，检查CSS选择器（如标签名、类名、ID名）是否与HTML中的元素完全匹配，注意大小写和拼写；③ 优先级问题，其他CSS样式可能覆盖了当前样式，可以通过增加选择器 specificity（如使用ID选择器代替类选择器）或添加!important（慎用）来提高优先级；④ 缓存问题，浏览器可能缓存了旧样式，可以尝试强制刷新页面（Windows/Linux按Ctrl+F5，Mac按Cmd+Shift+R）。
