如何用HTML设计简单个人介绍网页？-网页设计-锦华智联科技

头部导航：方便访问者跳转到页面的不同部分。
个人英雄区：展示你的头像、姓名、职位和一句个人简介。
关于我：详细介绍你的背景、技能和兴趣。
技能展示：用进度条或图标直观地展示你的技能水平。
联系方式：提供多种联系你的方式，如邮箱、社交媒体等。

最终预览效果

你可以先看看这个网页大概会长什么样：点击这里查看一个可运行的示例

（图片来源网络，侵删）

如何使用

复制代码：将下面的 HTML、CSS 和 JavaScript 代码分别复制到对应的文件中（index.html, style.css, script.js）。
：打开 index.html 文件，根据提示修改其中的文本内容，比如你的名字、介绍、技能等。
添加图片：准备一张你的头像（推荐正方形），命名为 profile.jpg，放在与 index.html 相同的文件夹里，或者直接修改 <img> 标签的 src 属性,指向你头像的在线链接。
在浏览器中打开：直接用浏览器打开 index.html 文件,你就能看到你的个人介绍网页了！

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.4.0/css/all.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <header>
        <nav class="navbar">
            <a href="#home" class="nav-link">首页</a>
            <a href="#about" class="nav-link">关于我</a>
            <a href="#skills" class="nav-link">技能</a>
            <a href="#contact" class="nav-link">联系我</a>
        </nav>
    </header>
    <main>
        <!-- 个人英雄区 -->
        <section id="home" class="hero">
            <div class="profile-img">
                <!-- 将这里的 "profile.jpg" 替换成你自己的头像文件名或链接 -->
                <img src="profile.jpg" alt="我的头像">
            </div>
            <h1>你好，我是张三</h1>
            <p class="title">一名热爱生活的前端开发工程师</p>
            <p class="intro">我专注于创造美观、实用且用户友好的网页体验。</p>
            <a href="#contact" class="cta-button">联系我</a>
        </section>
        <!-- 关于我 -->
        <section id="about" class="about">
            <h2>关于我</h2>
            <p>我是一名充满激情的前端开发者，拥有超过5年的行业经验，我毕业于XX大学计算机科学专业，对技术和设计都抱有浓厚的兴趣。</p>
            <p>在工作之余，我喜欢阅读科技博客、探索新的开源项目，并享受徒步旅行带来的宁静，我相信持续学习和保持好奇心是个人成长的关键。</p>
            <p>我的目标是利用技术解决实际问题，并为用户创造价值。</p>
        </section>
        <!-- 技能展示 -->
        <section id="skills" class="skills">
            <h2>我的技能</h2>
            <div class="skill-item">
                <span class="skill-name">HTML / CSS</span>
                <div class="skill-bar">
                    <div class="skill-level" style="width: 95%;"></div>
                </div>
            </div>
            <div class="skill-item">
                <span class="skill-name">JavaScript</span>
                <div class="skill-bar">
                    <div class="skill-level" style="width: 90%;"></div>
                </div>
            </div>
            <div class="skill-item">
                <span class="skill-name">React / Vue</span>
                <div class="skill-bar">
                    <div class="skill-level" style="width: 85%;"></div>
                </div>
            </div>
            <div class="skill-item">
                <span class="skill-name">UI/UX 设计</span>
                <div class="skill-bar">
                    <div class="skill-level" style="width: 75%;"></div>
                </div>
            </div>
        </section>
        <!-- 联系方式 -->
        <section id="contact" class="contact">
            <h2>联系我</h2>
            <p>如果你有任何问题或合作意向，欢迎随时通过以下方式联系我！</p>
            <div class="contact-links">
                <a href="mailto:your.email@example.com" target="_blank"><i class="fas fa-envelope"></i> 邮箱</a>
                <a href="https://github.com/yourusername" target="_blank"><i class="fab fa-github"></i> GitHub</a>
                <a href="https://linkedin.com/in/yourusername" target="_blank"><i class="fab fa-linkedin"></i> LinkedIn</a>
                <a href="https://twitter.com/yourusername" target="_blank"><i class="fab fa-twitter"></i> Twitter</a>
            </div>
        </section>
    </main>
    <!-- 页脚 -->
    <footer>
        <p>&copy; 2025 张三. All rights reserved.</p>
    </footer>
    <!-- 引入 JavaScript 文件 -->
    <script src="script.js"></script>
</body>
</html>

CSS 代码 (`style.css`)

这是网页的样式表，负责美化网页，让它看起来更专业、更美观。

/* --- 全局样式 --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
:root {
    --primary-color: #007BFF;
    --secondary-color: #343a40;
    --text-color: #333;
    --light-bg: #f4f4f4;
    --white-color: #fff;
    --section-padding: 80px 20px;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--white-color);
}
h1, h2 {
    font-weight: 600;
    margin-bottom: 20px;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; text-align: center; }
p { margin-bottom: 15px; }
a {
    text-decoration: none;
    color: var(--primary-color);
    transition: color 0.3s ease;
}
a:hover {
    color: #0056b3;
}
section {
    padding: var(--section-padding);
    max-width: 1100px;
    margin: 0 auto;
}
/* --- 导航栏 --- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--white-color);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    display: flex;
    justify-content: center;
    padding: 15px 0;
}
.navbar .nav-link {
    color: var(--secondary-color);
    margin: 0 20px;
    font-weight: 600;
    transition: color 0.3s ease;
}
.navbar .nav-link:hover {
    color: var(--primary-color);
}
/* --- 英雄区 --- */
.hero {
    text-align: center;
    padding-top: 120px; /* 为固定导航栏留出空间 */
    padding-bottom: 50px;
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: var(--white-color);
    border-radius: 0 0 50% 50% / 20px;
}
.profile-img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 5px solid var(--white-color);
    margin: 0 auto 30px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.profile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cta-button {
    display: inline-block;
    background: var(--white-color);
    color: var(--primary-color);
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    margin-top: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
/* --- 关于我 --- */
.about {
    background-color: var(--light-bg);
}
/* --- 技能 --- */
.skills {
    text-align: center;
}
.skill-item {
    max-width: 600px;
    margin: 25px auto;
    text-align: left;
}
.skill-name {
    display: inline-block;
    margin-bottom: 8px;
    font-weight: 600;
}
.skill-bar {
    background-color: #ddd;
    height: 15px;
    border-radius: 10px;
    overflow: hidden;
}
.skill-level {
    height: 100%;
    background: linear-gradient(90deg, #007BFF, #0056b3);
    border-radius: 10px;
    width: 0; /* 初始为0，用于JS动画 */
    transition: width 2s ease-in-out;
}
/* --- 联系方式 --- */
.contact-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
}
.contact-links a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--white-color);
    border: 2px solid var(--primary-color);
    border-radius: 50px;
    color: var(--primary-color);
    font-weight: 600;
    transition: all 0.3s ease;
}
.contact-links a:hover {
    background: var(--primary-color);
    color: var(--white-color);
}
/* --- 页脚 --- */
footer {
    text-align: center;
    padding: 20px;
    background-color: var(--secondary-color);
    color: var(--white-color);
    margin-top: 50px;
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
    .navbar {
        flex-wrap: wrap;
        padding: 10px;
    }
    .navbar .nav-link {
        margin: 5px 10px;
    }
    .hero {
        padding-top: 150px;
    }
    .contact-links {
        flex-direction: column;
        align-items: center;
    }
}

JavaScript 代码 (`script.js`)

这是网页的交互脚本，这里主要实现了当滚动到技能区域时,技能条会动态填充的动画效果。

document.addEventListener('DOMContentLoaded', function() {
    // 获取所有技能条
    const skillBars = document.querySelectorAll('.skill-level');
    // 创建一个观察器，用于检测元素是否进入视口
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            // 如果元素进入视口
            if (entry.isIntersecting) {
                // 获取技能条的宽度（通过内联样式设置）
                const width = entry.target.style.width;
                // 将宽度应用到元素上，触发动画
                entry.target.style.width = width;
                // 停止观察这个元素，避免重复触发
                observer.unobserve(entry.target);
            }
        });
    }, {
        threshold: 0.5 // 当元素50%可见时触发
    });
    // 开始观察每个技能条
    skillBars.forEach(bar => {
        // 初始宽度设为0，这样动画从0开始
        bar.style.width = '0';
        observer.observe(bar);
    });
});

进阶建议

添加作品集：你可以创建一个新的 "Portfolio" (作品集) 部分，展示你做过的项目，每个项目可以包含一张截图、项目名称、简短描述和项目链接。
添加博客：如果你喜欢写作，可以添加一个 "Blog" (博客) 链接,指向你的个人博客或技术文章。
优化图片：为你的头像和作品集图片使用 WebP 格式，或者进行压缩,以加快网页加载速度。
增加动效：使用 AOS (Animate On Scroll) 这样的库,可以为各个部分的进入添加更丰富的滚动动画。

希望这个设计能帮助你快速搭建一个属于自己的个人介绍网页！

（图片来源网络，侵删）

如何用HTML设计简单个人介绍网页？

最终预览效果

如何使用

HTML 代码 (index.html)

CSS 代码 (style.css)

JavaScript 代码 (script.js)

进阶建议

HTML 代码 (`index.html`)

CSS 代码 (`style.css`)

JavaScript 代码 (`script.js`)