这个模板设计简洁、功能齐全，包含了学生个人主页最常见的需求模块，并且使用了流行的技术（如 Bootstrap 5 和 Font Awesome 图标），让你可以轻松上手，并根据个人情况进行个性化修改。

学生个人网页制作html模板
（图片来源网络，侵删）

模板特点

  • 响应式设计：在电脑、平板和手机上都能完美显示。
  • 简洁现代：采用卡片式布局，视觉清爽，重点突出。
  • 功能完整：涵盖了个人信息、技能、项目、联系方式等核心模块。
  • 易于修改：使用清晰的注释，帮助你快速理解每个部分的作用。
  • 无需复杂环境：只需一个文本编辑器（如 VS Code, Sublime Text）即可开始编辑。

第一步：准备工作

在开始之前,你需要准备以下几样东西：

  1. 代码编辑器：强烈推荐 Visual Studio Code (免费且功能强大)。
  2. 浏览器：推荐使用 Google Chrome 或 Microsoft Edge，它们对现代Web标准的支持最好。
  3. 个人素材：准备一张你的个人照片（profile.jpg）、你参与过的项目截图（project1.png, project2.png）等。

第二步：HTML 模板代码

将以下所有代码复制到一个新的文本文件中,并将其保存为 index.html。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">你的名字 - 个人主页</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <style>
        /* 全局样式 */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #333;
            background-color: #f8f9fa;
        }
        /* 导航栏样式 */
        .navbar {
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,.08);
        }
        /* 主要内容区域样式 */
        .main-banner {
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://source.unsplash.com/random/1600x900/?nature,water') no-repeat center center/cover;
            color: #fff;
            padding: 100px 0;
            text-align: center;
        }
        .main-banner h1 {
            font-weight: 700;
            font-size: 3rem;
        }
        .main-banner .lead {
            font-size: 1.5rem;
            margin-bottom: 2rem;
        }
        /* 卡片通用样式 */
        .card {
            border: none;
            box-shadow: 0 4px 8px rgba(0,0,0,.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
        }
        .card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 20px rgba(0,0,0,.1);
        }
        /* 技能进度条样式 */
        .skill-item {
            margin-bottom: 1.5rem;
        }
        .skill-item .skill-name {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
        }
        /* 项目卡片样式 */
        .project-card img {
            height: 200px;
            object-fit: cover;
        }
        /* 页脚样式 */
        footer {
            background-color: #343a40;
            color: #fff;
            padding: 40px 0;
            margin-top: 80px;
        }
        .social-icons a {
            color: #fff;
            font-size: 1.5rem;
            margin: 0 15px;
            transition: color 0.3s ease;
        }
        .social-icons a:hover {
            color: #007bff;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light sticky-top">
        <div class="container">
            <a class="navbar-brand fw-bold" href="#">你的名字</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#about">关于我</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#skills">技能</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#projects">项目</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">联系我</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 主要横幅/个人介绍 -->
    <section class="main-banner">
        <div class="container">
            <img src="profile.jpg" alt="个人头像" class="rounded-circle mb-4" width="200" height="200" style="border: 5px solid #fff;">
            <h1>你好，我是你的名字</h1>
            <p class="lead">一名充满热情的 [你的专业，如：计算机科学] 学生</p>
            <a href="#contact" class="btn btn-primary btn-lg">联系我</a>
        </div>
    </section>
    <!-- 关于我 -->
    <section id="about" class="py-5">
        <div class="container">
            <h2 class="text-center mb-5">关于我</h2>
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <p>你好！我是来自 [你的学校名称] 的 [你的专业] 大三学生，我对 [你的兴趣领域，如：人工智能、Web开发、数据科学] 充满热情，并致力于通过技术解决实际问题。</p>
                    <p>在校期间，我不仅注重理论学习，更积极参与实践项目，锻炼自己的编程能力和团队协作精神，我相信，持续学习和不断探索是成长的关键。</p>
                </div>
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title mb-4">个人信息</h5>
                            <p class="mb-2"><i class="fas fa-user me-2"></i> <strong>姓名:</strong> 你的名字</p>
                            <p class="mb-2"><i class="fas fa-graduation-cap me-2"></i> <strong>学校:</strong> 你的学校</p>
                            <p class="mb-2"><i class="fas fa-book me-2"></i> <strong>专业:</strong> 你的专业</p>
                            <p class="mb-2"><i class="fas fa-calendar me-2"></i> <strong>年级:</strong> 大三</p>
                            <p class="mb-2"><i class="fas fa-envelope me-2"></i> <strong>邮箱:</strong> your.email@example.com</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 技能 -->
    <section id="skills" class="py-5 bg-light">
        <div class="container">
            <h2 class="text-center mb-5">我的技能</h2>
            <div class="row">
                <div class="col-lg-6 mb-4">
                    <h4 class="mb-3">技术技能</h4>
                    <div class="skill-item">
                        <div class="skill-name">
                            <span>HTML / CSS</span>
                            <span>90%</span>
                        </div>
                        <div class="progress">
                            <div class="progress-bar bg-success" role="progressbar" style="width: 90%"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <div class="skill-name">
                            <span>JavaScript</span>
                            <span>85%</span>
                        </div>
                        <div class="progress">
                            <div class="progress-bar bg-info" role="progressbar" style="width: 85%"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <div class="skill-name">
                            <span>Python</span>
                            <span>80%</span>
                        </div>
                        <div class="progress">
                            <div class="progress-bar bg-warning" role="progressbar" style="width: 80%"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <div class="skill-name">
                            <span>Java</span>
                            <span>75%</span>
                        </div>
                        <div class="progress">
                            <div class="progress-bar bg-danger" role="progressbar" style="width: 75%"></div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 mb-4">
                    <h4 class="mb-3">其他技能</h4>
                    <div class="skill-item">
                        <div class="skill-name">
                            <span>团队协作</span>
                            <span>95%</span>
                        </div>
                        <div class="progress">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: 95%"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <div class="skill-name">
                            <span>项目管理</span>
                            <span>85%</span>
                        </div>
                        <div class="progress">
                            <div class="progress-bar bg-secondary" role="progressbar" style="width: 85%"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <div class="skill-name">
                            <span>沟通能力</span>
                            <span>90%</span>
                        </div>
                        <div class="progress">
                            <div class="progress-bar bg-success" role="progressbar" style="width: 90%"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 项目展示 -->
    <section id="projects" class="py-5">
        <div class="container">
            <h2 class="text-center mb-5">我的项目</h2>
            <div class="row g-4">
                <!-- 项目 1 -->
                <div class="col-md-6 col-lg-4">
                    <div class="card project-card">
                        <img src="https://via.placeholder.com/600x400.png?text=项目1截图" class="card-img-top" alt="项目1截图">
                        <div class="card-body">
                            <h5 class="card-title">项目名称 1</h5>
                            <p class="card-text">这是一个关于 [项目简介，如：一个在线图书管理系统] 的项目，我主要负责 [你在项目中的角色，如：后端API开发和数据库设计]。</p>
                            <a href="#" class="btn btn-outline-primary">查看详情</a>
                        </div>
                    </div>
                </div>
                <!-- 项目 2 -->
                <div class="col-md-6 col-lg-4">
                    <div class="card project-card">
                        <img src="https://via.placeholder.com/600x400.png?text=项目2截图" class="card-img-top" alt="项目2截图">
                        <div class="card-body">
                            <h5 class="card-title">项目名称 2</h5>
                            <p class="card-text">这是一个关于 [项目简介，如：一个基于数据可视化的天气分析平台] 的项目，我使用了 [使用的技术，如：React, ECharts, D3.js]。</p>
                            <a href="#" class="btn btn-outline-primary">查看详情</a>
                        </div>
                    </div>
                </div>
                <!-- 项目 3 -->
                <div class="col-md-6 col-lg-4">
                    <div class="card project-card">
                        <img src="https://via.placeholder.com/600x400.png?text=项目3截图" class="card-img-top" alt="项目3截图">
                        <div class="card-body">
                            <h5 class="card-title">项目名称 3</h5>
                            <p class="card-text">这是一个关于 [项目简介，如：一个小型游戏开发] 的项目，这是一个个人作品，旨在练习 [学习目的，如：Unity引擎和C#编程]。</p>
                            <a href="#" class="btn btn-outline-primary">查看详情</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 联系我 -->
    <section id="contact" class="py-5 bg-light">
        <div class="container">
            <h2 class="text-center mb-5">联系我</h2>
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <form id="contact-form">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="name" class="form-label">姓名</label>
                                <input type="text" class="form-control" id="name" required>
                            </div>
                            <div class="col-md-6">
                                <label for="email" class="form-label">邮箱</label>
                                <input type="email" class="form-control" id="email" required>
                            </div>
                            <div class="col-12">
                                <label for="subject" class="form-label">主题</label>
                                <input type="text" class="form-control" id="subject" required>
                            </div>
                            <div class="col-12">
                                <label for="message" class="form-label">留言</label>
                                <textarea class="form-control" id="message" rows="5" required></textarea>
                            </div>
                            <div class="col-12 text-center">
                                <button type="submit" class="btn btn-primary btn-lg">发送消息</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <!-- 页脚 -->
    <footer>
        <div class="container text-center">
            <p class="mb-3">&copy; 2025 你的名字. All Rights Reserved.</p>
            <div class="social-icons">
                <a href="#"><i class="fab fa-github"></i></a>
                <a href="#"><i class="fab fa-linkedin"></i></a>
                <a href="#"><i class="fab fa-twitter"></i></a>
                <a href="#"><i class="fab fa-weixin"></i></a>
            </div>
        </div>
    </footer>
    <!-- Bootstrap 5 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });
        // 联系表单提交（示例，需要后端支持才能真正工作）
        document.getElementById('contact-form').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('感谢您的留言！这是一个演示，消息并未真正发送，在实际部署中，这里会连接到后端服务器处理表单数据。');
            this.reset();
        });
    </script>
</body>
</html>

第三步：如何修改和个性化

你已经有了 index.html 文件，打开它，开始根据下面的提示进行修改：

  1. 替换个人信息：

    学生个人网页制作html模板
    （图片来源网络，侵删）
    • <title>：将 你的名字 - 个人主页 改成你自己的名字。
    • 导航栏品牌：将 <a class="navbar-brand fw-bold" href="#">你的名字</a> 中的 你的名字 替换成你的名字。
    • 个人横幅：
      • 将 <img src="profile.jpg" ...> 中的 profile.jpg 替换为你自己的照片文件名，并把你的照片和 index.html 放在同一个文件夹下。
      • 将 <h1>你好，我是你的名字</h1> 和 <p class="lead">...</p> 中的文字改成你的介绍。
    • 关于我部分：
      • 修改 <section id="about"> 下的 <p> 标签内容，详细描述你的背景、兴趣和目标。
      • 修改个人信息卡片中的 <p> 标签内容，填入你的真实信息。
    • 页脚：将 footer 中的 你的名字 和你的邮箱地址替换掉。

  2. 更新技能：

    • 在 <section id="skills"> 部分，修改每个 skill-item 中的技能名称（如 HTML / CSS）和百分比（如 90%），你可以根据你的真实水平调整进度条的宽度。

  3. 展示项目：

    • 在 <section id="projects"> 部分，复制 <div class="col-md-6 col-lg-4">...</div> 整个卡片块来添加更多项目。
    • 为每个项目修改：
      • <img src="...">：替换成你自己的项目截图。
      • <h5 class="card-title">...</h5>：项目名称。
      • <p class="card-text">...</p>：项目简介和你的角色。
      • <a href="#" ...>： 可以替换为你的项目GitHub地址或详细介绍的页面链接。

  4. 完善联系方式：

    • 在 <section id="contact"> 的表单中，你可以保持原样，也可以增加更多字段。
    • 注意：表单的提交功能目前只是一个前端演示，如果你想让它能真正发送邮件，需要配置后端服务（如使用 PHP, Node.js, Python Flask 等），这超出了纯HTML模板的范围，对于学生作业或展示，前端演示已经足够。
    • 修改页脚的社交媒体图标链接,将 替换成你的 GitHub、LinkedIn、微博等真实链接。

第四步：预览你的网页

完成所有修改后,用你的浏览器（如 Chrome）打开 index.html 文件，你就能看到你的个人网页了！

进阶建议

  • 添加动画：可以学习一些简单的 CSS 动画（如 @keyframes）或使用 AOS (Animate On Scroll) 库来为页面元素添加滚动进入动画，让网页更生动。
  • 部署上线：为了让别人也能通过网址访问你的网页，你可以使用 GitHub Pages、Netlify 或 Vercel 等免费平台进行部署，这非常简单，只需将你的项目文件上传到 Git 仓库即可。
  • 添加博客：如果你想在网站上写一些技术文章，可以考虑集成一个静态博客生成器，如 Hexo 或 Hugo。

这个模板为你提供了一个坚实的基础,大胆地去修改它，让它成为你独一无二的个人名片吧！