1. 导航栏：固定在顶部，方便访问者快速跳转到各个部分。
  2. 英雄区：网站的“门面”，包含你的名字、职业简介和一个行动号召按钮。
  3. 关于我：用文字和图片详细介绍你自己。
  4. 技能：以进度条或徽章的形式展示你的专业技能。
  5. 项目展示：一个作品集画廊，展示你的项目。
  6. 联系方式：提供多种联系你的方式，并包含一个简单的联系表单。
  7. 页脚：版权信息和社交媒体链接。

这个模板将是响应式的，意味着它可以在电脑、平板和手机上都完美显示，我会加入一些平滑滚动和悬停效果，让用户体验更流畅。

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

最终预览

你可以先看看这个模板最终会是什么样子,这是一个静态的、功能齐全的演示：

点击这里查看预览

如何使用这个模板

  1. 复制代码：将下面提供的 index.html、style.css 和 script.js 三部分的代码分别复制出来。
  2. 创建文件：在你的电脑上创建三个文件，分别命名为 index.html、style.css 和 script.js。
  3. 粘贴代码：将对应的代码粘贴到对应的文件中。
  4. ：打开 index.html 文件，根据我的注释，将 [你的名字]、[你的职业] 等占位符替换成你自己的信息。
  5. 添加图片：在 images 文件夹中放入你自己的图片，并确保 index.html 中的图片路径正确。
  6. 在浏览器中打开：直接用浏览器打开 index.html 文件，你就能看到你的个人网站了！

第1部分：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>
    <link rel="stylesheet" href="style.css">
    <!-- 引入 Font Awesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <header class="navbar">
        <div class="container">
            <a href="#home" class="logo">[你的名字]</a>
            <nav class="nav-links">
                <a href="#home">首页</a>
                <a href="#about">关于我</a>
                <a href="#skills">技能</a>
                <a href="#projects">项目</a>
                <a href="#contact">联系</a>
            </nav>
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </header>
    <main>
        <!-- 英雄区 -->
        <section id="home" class="hero">
            <div class="hero-content container">
                <h1>你好，我是 <span>[你的名字]</span></h1>
                <p class="hero-subtitle">一名充满热情的 <span>[你的职业，如：前端开发工程师 / UI/UX设计师 / 摄影师]</span></p>
                <p class="hero-description">我专注于创造美观、实用且用户友好的数字体验，让我们一起将想法变为现实。</p>
                <a href="#contact" class="cta-button">联系我</a>
            </div>
        </section>
        <!-- 关于我 -->
        <section id="about" class="about">
            <div class="container">
                <h2 class="section-title">关于我</h2>
                <div class="about-content">
                    <div class="about-image">
                        <img src="images/profile.jpg" alt="[你的名字]的个人照片">
                    </div>
                    <div class="about-text">
                        <p>你好！我是一名[你的职业]，拥有[X]年的行业经验，我毕业于[你的学校]，专业是[你的专业]，我热爱[你的爱好，如：编程、设计、摄影]，并致力于通过我的工作为用户创造价值。</p>
                        <p>我相信，优秀的设计不仅要美观，更要解决实际问题，在我的职业生涯中，我曾参与过[提及1-2个重要项目或成就]，并从中积累了宝贵的经验，我善于学习新技术，乐于接受挑战，并始终保持着对细节的极致追求。</p>
                        <a href="#" class="resume-button" download>下载我的简历 <i class="fas fa-download"></i></a>
                    </div>
                </div>
            </div>
        </section>
        <!-- 技能 -->
        <section id="skills" class="skills">
            <div class="container">
                <h2 class="section-title">我的技能</h2>
                <div class="skills-grid">
                    <div class="skill-item">
                        <i class="fab fa-html5"></i>
                        <h3>HTML5</h3>
                        <div class="skill-bar">
                            <div class="skill-level" style="width: 95%;"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <i class="fab fa-css3-alt"></i>
                        <h3>CSS3</h3>
                        <div class="skill-bar">
                            <div class="skill-level" style="width: 90%;"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <i class="fab fa-js-square"></i>
                        <h3>JavaScript</h3>
                        <div class="skill-bar">
                            <div class="skill-level" style="width: 85%;"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <i class="fab fa-react"></i>
                        <h3>React</h3>
                        <div class="skill-bar">
                            <div class="skill-level" style="width: 80%;"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <i class="fab fa-node-js"></i>
                        <h3>Node.js</h3>
                        <div class="skill-bar">
                            <div class="skill-level" style="width: 75%;"></div>
                        </div>
                    </div>
                    <div class="skill-item">
                        <i class="fab fa-figma"></i>
                        <h3>Figma</h3>
                        <div class="skill-bar">
                            <div class="skill-level" style="width: 88%;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- 项目展示 -->
        <section id="projects" class="projects">
            <div class="container">
                <h2 class="section-title">我的项目</h2>
                <div class="projects-grid">
                    <div class="project-card">
                        <img src="images/project1.jpg" alt="项目1">
                        <div class="project-info">
                            <h3>项目名称 1</h3>
                            <p>这是一个关于[项目简短描述]的项目，我主要负责[你在项目中的角色]。</p>
                            <a href="#" class="project-link">查看详情 <i class="fas fa-arrow-right"></i></a>
                        </div>
                    </div>
                    <div class="project-card">
                        <img src="images/project2.jpg" alt="项目2">
                        <div class="project-info">
                            <h3>项目名称 2</h3>
                            <p>这是一个关于[项目简短描述]的项目，我主要负责[你在项目中的角色]。</p>
                            <a href="#" class="project-link">查看详情 <i class="fas fa-arrow-right"></i></a>
                        </div>
                    </div>
                    <div class="project-card">
                        <img src="images/project3.jpg" alt="项目3">
                        <div class="project-info">
                            <h3>项目名称 3</h3>
                            <p>这是一个关于[项目简短描述]的项目，我主要负责[你在项目中的角色]。</p>
                            <a href="#" class="project-link">查看详情 <i class="fas fa-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- 联系方式 -->
        <section id="contact" class="contact">
            <div class="container">
                <h2 class="section-title">联系我</h2>
                <div class="contact-content">
                    <div class="contact-info">
                        <h3>让我们开始对话吧</h3>
                        <p>如果你对我的工作感兴趣，或者有任何问题，请随时通过以下方式联系我。</p>
                        <div class="contact-details">
                            <p><i class="fas fa-envelope"></i> your.email@example.com</p>
                            <p><i class="fas fa-phone"></i> +86 123 4567 8910</p>
                            <p><i class="fas fa-map-marker-alt"></i> [你的城市，中国]</p>
                        </div>
                        <div class="social-links">
                            <a href="#"><i class="fab fa-github"></i></a>
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-dribbble"></i></a>
                        </div>
                    </div>
                    <form class="contact-form" id="contactForm">
                        <input type="text" name="name" placeholder="你的名字" required>
                        <input type="email" name="email" placeholder="你的邮箱" required>
                        <textarea name="message" placeholder="你的留言" rows="5" required></textarea>
                        <button type="submit" class="submit-button">发送消息</button>
                    </form>
                </div>
            </div>
        </section>
    </main>
    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <p>&copy; 2025 [你的名字]. 保留所有权利。</p>
        </div>
    </footer>
    <!-- 返回顶部按钮 -->
    <a href="#home" class="back-to-top"><i class="fas fa-arrow-up"></i></a>
    <script src="script.js"></script>
</body>
</html>

第2部分：CSS 代码 (style.css)

这是网站的“样式表”，负责所有的视觉设计，包括颜色、字体、布局和动画。

用html制作网页个人网站模板
（图片来源网络，侵删）
/* --- 全局样式和变量 --- */
:root {
    --primary-color: #3498db;
    --secondary-color: #2c3e50;
    --text-color: #333;
    --light-gray: #ecf0f1;
    --white: #ffffff;
    --max-width: 1200px;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--white);
}
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}
.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: var(--secondary-color);
    position: relative;
}
.section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background-color: var(--primary-color);
    margin: 1rem auto 0;
}
/* --- 导航栏 --- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: all 0.3s ease;
}
.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 20px;
}
.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--secondary-color);
    text-decoration: none;
}
.nav-links {
    display: flex;
    list-style: none;
}
.nav-links a {
    color: var(--text-color);
    text-decoration: none;
    margin-left: 2rem;
    font-weight: 500;
    transition: color 0.3s ease;
}
.nav-links a:hover {
    color: var(--primary-color);
}
.hamburger {
    display: none;
    cursor: pointer;
}
.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--secondary-color);
    margin: 5px 0;
    transition: 0.3s;
}
/* --- 英雄区 --- */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('images/hero-bg.jpg') no-repeat center center/cover;
    color: var(--white);
    padding-top: 60px; /* 为固定导航栏留出空间 */
}
.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}
.hero-content span {
    color: var(--primary-color);
}
.hero-subtitle {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.hero-description {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 2rem;
    color: #ddd;
}
.cta-button {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--primary-color);
    color: var(--white);
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.cta-button:hover {
    background-color: #2980b9;
    transform: translateY(-3px);
}
/* --- 关于我 --- */
.about {
    padding: 80px 0;
    background-color: var(--light-gray);
}
.about-content {
    display: flex;
    align-items: center;
    gap: 40px;
}
.about-image img {
    width: 300px;
    height: 300px;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.about-text p {
    margin-bottom: 1.5rem;
}
.resume-button {
    display: inline-block;
    padding: 10px 25px;
    background-color: var(--secondary-color);
    color: var(--white);
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
.resume-button:hover {
    background-color: #1a252f;
}
/* --- 技能 --- */
.skills {
    padding: 80px 0;
}
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}
.skill-item {
    text-align: center;
}
.skill-item i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}
.skill-item h3 {
    margin-bottom: 0.5rem;
}
.skill-bar {
    background-color: #ddd;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
}
.skill-level {
    height: 100%;
    background-color: var(--primary-color);
    border-radius: 5px;
    width: 0; /* 初始宽度为0，用于动画 */
    animation: fillBar 2s ease-out forwards;
}
@keyframes fillBar {
    from { width: 0; }
}
/* --- 项目展示 --- */
.projects {
    padding: 80px 0;
    background-color: var(--light-gray);
}
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.project-card {
    background-color: var(--white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.project-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.project-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.project-info {
    padding: 20px;
}
.project-info h3 {
    margin-bottom: 0.5rem;
    color: var(--secondary-color);
}
.project-info p {
    margin-bottom: 1rem;
    color: #666;
}
.project-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    transition: color 0.3s ease;
}
.project-link:hover {
    color: #2980b9;
}
.project-link i {
    margin-left: 5px;
}
/* --- 联系方式 --- */
.contact {
    padding: 80px 0;
}
.contact-content {
    display: flex;
    justify-content: space-between;
    gap: 50px;
}
.contact-info h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--secondary-color);
}
.contact-info p {
    margin-bottom: 1.5rem;
}
.contact-details p {
    margin-bottom: 0.5rem;
}
.contact-details i {
    color: var(--primary-color);
    margin-right: 10px;
}
.social-links {
    margin-top: 2rem;
}
.social-links a {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: var(--primary-color);
    color: var(--white);
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.social-links a:hover {
    background-color: var(--secondary-color);
    transform: translateY(-3px);
}
.contact-form {
    flex: 1;
    max-width: 500px;
}
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: inherit;
    font-size: 1rem;
}
.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}
.submit-button {
    width: 100%;
    padding: 15px;
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.submit-button:hover {
    background-color: #2980b9;
}
/* --- 页脚 --- */
.footer {
    background-color: var(--secondary-color);
    color: var(--white);
    text-align: center;
    padding: 20px 0;
}
/* --- 返回顶部按钮 --- */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: var(--primary-color);
    color: var(--white);
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}
.back-to-top:hover {
    background-color: #2980b9;
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
    .hamburger {
        display: block;
    }
    .nav-links {
        position: fixed;
        top: 70px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 70px);
        background-color: var(--white);
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: 50px;
        transition: left 0.3s ease;
    }
    .nav-links.active {
        left: 0;
    }
    .nav-links a {
        margin: 0;
        font-size: 1.2rem;
    }
    .hero-content h1 {
        font-size: 2.5rem;
    }
    .hero-subtitle {
        font-size: 1.2rem;
    }
    .about-content {
        flex-direction: column;
        text-align: center;
    }
    .about-image img {
        width: 250px;
        height: 250px;
    }
    .contact-content {
        flex-direction: column;
    }
}

第3部分：JavaScript 代码 (script.js)

这是网站的“大脑”，负责处理交互逻辑，如移动端菜单的切换、滚动效果和表单提交。

document.addEventListener('DOMContentLoaded', () => {
    // 移动端菜单切换
    const hamburger = document.querySelector('.hamburger');
    const navLinks = document.querySelector('.nav-links');
    hamburger.addEventListener('click', () => {
        navLinks.classList.toggle('active');
        // 添加动画效果
        hamburger.classList.toggle('active');
    });
    // 点击导航链接后关闭移动端菜单
    document.querySelectorAll('.nav-links a').forEach(link => {
        link.addEventListener('click', () => {
            navLinks.classList.remove('active');
            hamburger.classList.remove('active');
        });
    });
    // 滚动时改变导航栏样式
    const navbar = document.querySelector('.navbar');
    window.addEventListener('scroll', () => {
        if (window.scrollY > 50) {
            navbar.style.background = 'rgba(255, 255, 255, 0.98)';
            navbar.style.boxShadow = '0 2px 15px rgba(0, 0, 0, 0.1)';
        } else {
            navbar.style.background = 'rgba(255, 255, 255, 0.95)';
            navbar.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
        }
    });
    // 返回顶部按钮
    const backToTopButton = document.querySelector('.back-to-top');
    window.addEventListener('scroll', () => {
        if (window.scrollY > 300) {
            backToTopButton.classList.add('visible');
        } else {
            backToTopButton.classList.remove('visible');
        }
    });
    // 表单提交处理 (示例，实际开发中需要后端支持)
    const contactForm = document.getElementById('contactForm');
    if (contactForm) {
        contactForm.addEventListener('submit', (e) => {
            e.preventDefault(); // 阻止表单默认提交行为
            // 获取表单数据
            const formData = new FormData(contactForm);
            const name = formData.get('name');
            const email = formData.get('email');
            const message = formData.get('message');
            // 这里是模拟提交成功
            // 在实际应用中，你需要使用 Fetch API 或 XMLHttpRequest 将数据发送到服务器
            console.log('表单数据:', { name, email, message });
            // 显示成功消息 (这里用 alert 代替，你可以换成更友好的提示)
            alert(`感谢你的留言，${name}！我会尽快回复你，`);
            // 清空表单
            contactForm.reset();
        });
    }
});

进阶提示

  1. 图片优化：为了加快网站加载速度，请确保你的图片（如 profile.jpg, project1.jpg 等）已经过优化，你可以使用 TinyPNG 或 Squoosh 这样的在线工具来压缩图片。
  2. 添加动画：CSS 动画让网站更生动，我已经在技能部分加入了 fillBar 动画，你可以探索更多 CSS 动画库，如 AOS (Animate On Scroll)，来为滚动时的元素添加动画效果。
  3. 部署网站：完成所有修改后，你可以将你的网站部署到 GitHub Pages、Netlify 或 Vercel 等免费平台上，这样别人就可以通过互联网访问你的网站了。
  4. 联系表单：联系表单的提交功能是模拟的，如果你想让表单真正能发送邮件，你需要一个后端服务（如 Node.js + Express, Python + Flask）或使用第三方服务（如 Formspree, Getform）。

希望这个详细的模板能帮助你快速搭建一个漂亮的个人网站！祝你成功！

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