个人介绍HTML网页制作代码有哪些关键点？-网页设计-锦华智联科技

最简单的单页介绍（适合初学者）

这个版本非常基础，只包含HTML和少量内联CSS,适合快速搭建一个简单的个人介绍页面。

（图片来源网络，侵删）

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的个人介绍 - 张三</title>
    <!-- 引入一个流行的图标库 Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body style="font-family: 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; margin: 0; background-color: #f4f4f4; color: #333;">
    <header style="background: #333; color: #fff; text-align: center; padding: 1rem 0;">
        <h1 style="margin: 0;">张三</h1>
        <p style="margin: 0;">前端开发工程师 | 终身学习者</p>
    </header>
    <main style="max-width: 800px; margin: 2rem auto; padding: 2rem; background-color: #fff; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1);">
        <section id="about" style="margin-bottom: 2rem;">
            <h2 style="border-bottom: 2px solid #eee; padding-bottom: 0.5rem;">关于我</h2>
            <p>你好！我是张三，一名充满热情的前端开发工程师，我热爱创造美观、实用且用户友好的网页，拥有5年的Web开发经验，精通HTML, CSS, JavaScript以及主流框架如React和Vue。</p>
        </section>
        <section id="skills" style="margin-bottom: 2rem;">
            <h2 style="border-bottom: 2px solid #eee; padding-bottom: 0.5rem;">技能专长</h2>
            <ul>
                <li>HTML5, CSS3, JavaScript (ES6+)</li>
                <li>React, Vue.js, Angular</li>
                <li>Node.js, Express</li>
                <li>Git, Webpack, Vite</li>
                <li>响应式设计与移动端开发</li>
            </ul>
        </section>
        <section id="contact" style="margin-bottom: 2rem;">
            <h2 style="border-bottom: 2px solid #eee; padding-bottom: 0.5rem;">联系方式</h2>
            <p>
                <i class="fas fa-envelope"></i> 邮箱: <a href="mailto:zhangsan@example.com" style="color: #007BFF;">zhangsan@example.com</a>
            </p>
            <p>
                <i class="fab fa-github"></i> GitHub: <a href="https://github.com/zhangsan" target="_blank" style="color: #007BFF;">github.com/zhangsan</a>
            </p>
            <p>
                <i class="fab fa-linkedin"></i> LinkedIn: <a href="https://linkedin.com/in/zhangsan" target="_blank" style="color: #007BFF;">linkedin.com/in/zhangsan</a>
            </p>
        </section>
    </main>
    <footer style="text-align: center; padding: 1rem; background: #333; color: #fff; margin-top: 2rem;">
        <p>&copy; 2025 张三. All rights reserved.</p>
    </footer>
</body>
</html>

如何使用：

将以上代码复制到一个文本编辑器中（如 VS Code, Sublime Text, 或记事本）。
将文件另存为 index.html。
用浏览器打开这个 index.html 文件,你就能看到一个简单的个人介绍页面了。
：只需修改 <h1>, <p>, <li> 等标签内的文本，以及邮箱、GitHub等链接,就能变成你自己的介绍。

带导航和现代风格的个人主页（推荐）

这个版本更专业,包含了：

外部CSS文件：使代码结构更清晰。
固定导航栏：方便在不同部分间跳转。
响应式设计：在手机和电脑上都能良好显示。
更现代的布局和样式。

文件结构

你需要创建三个文件：

my-portfolio/
├── index.html
├── style.css
└── script.js

`index.html` (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">
    <!-- 引入字体图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <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="#projects" class="nav-link">项目</a>
        <a href="#contact" class="nav-link">联系我</a>
    </nav>
    <main>
        <!-- 首页/英雄区 -->
        <section id="home" class="hero">
            <div class="hero-content">
                <h1>你好，我是 <span class="highlight">李四</span></h1>
                <p>一名全栈开发工程师 & UI/UX 设计爱好者</p>
                <a href="#contact" class="btn">联系我</a>
            </div>
        </section>
        <!-- 关于我 -->
        <section id="about" class="content-section">
            <h2>关于我</h2>
            <p>我是一名拥有5年经验的全栈开发工程师，专注于构建高性能、可扩展的Web应用程序，我对新技术充满热情，喜欢探索和解决复杂的技术问题。</p>
        </section>
        <!-- 技能 -->
        <section id="skills" class="content-section">
            <h2>我的技能</h2>
            <div class="skills-container">
                <div class="skill-card">
                    <i class="fab fa-html5"></i>
                    <h3>前端</h3>
                    <p>HTML, CSS, JavaScript, React, Vue</p>
                </div>
                <div class="skill-card">
                    <i class="fas fa-server"></i>
                    <h3>后端</h3>
                    <p>Node.js, Python, Java, MySQL, MongoDB</p>
                </div>
                <div class="skill-card">
                    <i class="fas fa-tools"></i>
                    <h3>工具</h3>
                    <p>Git, Docker, AWS, Figma</p>
                </div>
            </div>
        </section>
        <!-- 项目 -->
        <section id="projects" class="content-section">
            <h2>我的项目</h2>
            <div class="projects-container">
                <div class="project-card">
                    <h3>电商平台</h3>
                    <p>使用React和Node.js构建的全栈电商解决方案。</p>
                    <a href="#" class="btn">查看详情</a>
                </div>
                <div class="project-card">
                    <h3>任务管理App</h3>
                    <p>一个基于Vue.js的实时协作任务管理工具。</p>
                    <a href="#" class="btn">查看详情</a>
                </div>
            </div>
        </section>
        <!-- 联系我 -->
        <section id="contact" class="content-section">
            <h2>联系我</h2>
            <p>有项目想合作？或者只是想打个招呼？随时欢迎！</p>
            <div class="contact-links">
                <a href="mailto:lisi@example.com"><i class="fas fa-envelope"></i> 邮箱</a>
                <a href="https://github.com/lisi" target="_blank"><i class="fab fa-github"></i> GitHub</a>
                <a href="https://linkedin.com/in/lisi" target="_blank"><i class="fab fa-linkedin"></i> LinkedIn</a>
            </div>
        </section>
    </main>
    <!-- 页脚 -->
    <footer>
        <p>&copy; 2025 李四. All rights reserved.</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

`style.css` (样式)

/* --- 全局样式 --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
}
h1, h2, h3 {
    font-weight: 600;
}
a {
    text-decoration: none;
    color: #007BFF;
}
section {
    padding: 80px 20px;
    max-width: 1100px;
    margin: 0 auto;
}
h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2.5rem;
    color: #333;
}
/* --- 导航栏 --- */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1000;
    display: flex;
    justify-content: center;
    padding: 15px 0;
}
.navbar a {
    color: #333;
    margin: 0 20px;
    font-weight: 500;
    transition: color 0.3s ease;
}
.navbar a:hover {
    color: #007BFF;
}
/* --- 英雄区 --- */
.hero {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80') no-repeat center center/cover;
    color: #fff;
}
.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 10px;
}
.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}
.highlight {
    color: #FFD700;
}
/* --- 按钮样式 --- */
.btn {
    display: inline-block;
    background: #007BFF;
    color: #fff;
    padding: 12px 25px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.3s ease;
}
.btn:hover {
    background: #0056b3;
}
/* --- 内容区通用样式 --- */
.content-section {
    background: #fff;
}
/* --- 技能区 --- */
.skills-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
}
.skill-card {
    background: #f4f4f4;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    width: 300px;
    transition: transform 0.3s ease;
}
.skill-card:hover {
    transform: translateY(-10px);
}
.skill-card i {
    font-size: 3rem;
    color: #007BFF;
    margin-bottom: 15px;
}
/* --- 项目区 --- */
.projects-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
}
.project-card {
    background: #f4f4f4;
    padding: 25px;
    border-radius: 8px;
    width: 45%;
    text-align: center;
}
/* --- 联系区 --- */
.contact-links {
    display: flex;
    justify-content: center;
    gap: 30px;
}
.contact-links a {
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
/* --- 页脚 --- */
footer {
    text-align: center;
    padding: 20px;
    background: #333;
    color: #fff;
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        padding: 10px;
    }
    .navbar a {
        margin: 5px 0;
    }
    .hero-content h1 {
        font-size: 2.5rem;
    }
    .skills-container, .projects-container {
        flex-direction: column;
        align-items: center;
    }
    .skill-card, .project-card {
        width: 90%;
    }
    .contact-links {
        flex-direction: column;
        align-items: center;
    }
}

`script.js` (交互效果 - 平滑滚动)

// 等待整个文档加载完成
document.addEventListener('DOMContentLoaded', function() {
    // 获取所有导航链接
    const navLinks = document.querySelectorAll('.navbar a[href^="#"]');
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault(); // 阻止默认的跳转行为
            const targetId = this.getAttribute('href'); // 获取目标ID，#about
            const targetSection = document.querySelector(targetId); // 找到对应的元素
            if (targetSection) {
                // 使用 scrollIntoView 进行平滑滚动
                targetSection.scrollIntoView({
                    behavior: 'smooth'
                });
            }
        });
    });
});

如何使用这个版本：

创建一个名为 my-portfolio 的文件夹。
在文件夹中创建 index.html, style.css, 和 script.js 三个文件。
将上面提供的代码分别复制粘贴到对应的文件中。
你可以修改 index.html 中的所有文本和链接。
你可以修改 style.css 中的颜色、字体、背景图片等来改变页面的外观。
用浏览器打开 index.html 即可看到效果。

更高级的带动画和效果的版本

这个版本在版本二的基础上,增加了以下特性：

滚动触发动画：当页面滚动到某个区域时,内容会以动画形式出现。
打字机效果：在英雄区,名字会一个字一个字地打出来。
更丰富的交互。

主要改动：

style.css: 需要添加一些用于动画的类（如 .fade-in）和定义动画关键帧（@keyframes）。
script.js: 需要编写JavaScript来检测滚动位置,并为进入视口的元素添加动画类。

由于代码量较大，这里只提供核心的JS和CSS增量,您可以将其合并到版本二的代码中。

（图片来源网络，侵删）

增量的 `style.css` (添加到版本二样式文件末尾)

/* --- 滚动动画 --- */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* --- 打字机效果 --- */
.typewriter {
    overflow: hidden;
    border-right: .15em solid orange;
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: .15em;
    animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: orange; }
}

增量的 `script.js` (替换版本二的整个JS文件)

document.addEventListener('DOMContentLoaded', function() {
    // 1. 平滑滚动
    const navLinks = document.querySelectorAll('.navbar a[href^="#"]');
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            const targetSection = document.querySelector(targetId);
            if (targetSection) {
                targetSection.scrollIntoView({ behavior: 'smooth' });
            }
        });
    });
    // 2. 滚动触发动画
    const faders = document.querySelectorAll('.fade-in');
    const appearOptions = {
        threshold: 0.1, // 当10%的元素可见时触发
        rootMargin: "0px 0px -100px 0px" // 提前100px触发
    };
    const appearOnScroll = new IntersectionObserver(function(entries, appearOnScroll) {
        entries.forEach(entry => {
            if (!entry.isIntersecting) {
                return;
            } else {
                entry.target.classList.add('is-visible');
                appearOnScroll.unobserve(entry.target); // 动画触发后停止观察
            }
        });
    }, appearOptions);
    faders.forEach(fader => {
        appearOnScroll.observe(fader);
    });
    // 3. 打字机效果 (针对英雄区的名字)
    const heroName = document.querySelector('.hero-content h1 span');
    if (heroName) {
        const originalText = heroName.textContent;
        heroName.textContent = '';
        heroName.classList.add('typewriter');
        // 为了打字机效果能正确显示，需要设置宽度
        setTimeout(() => {
            heroName.style.width = 'fit-content';
        }, 10);
    }
});

如何在HTML中应用动画：

您需要在 index.html 中希望添加动画的元素上添加 fade-in 类。

<!-- 在关于我部分 -->
<section id="about" class="content-section fade-in">
    <h2>关于我</h2>
    <p>...</p>
</section>
<!-- 在技能部分 -->
<section id="skills" class="content-section fade-in">
    <h2>我的技能</h2>
    <div class="skills-container">
        <div class="skill-card fade-in">...</div>
        <div class="skill-card fade-in">...</div>
        <div class="skill-card fade-in">...</div>
    </div>
</section>

总结和建议

新手：从 版本一 开始,理解HTML的基本结构。
进阶：版本二 是一个非常好的起点，它展示了现代网页开发的最佳实践（分离HTML, CSS, JS），并且功能完善,可以直接作为你个人主页的基础。
高手/追求炫酷效果：在 版本二 的基础上，加入 版本三 的动画效果,让你的个人主页更具吸引力和现代感。

选择一个你喜欢的版本，然后尽情地修改和定制它,打造出属于你自己的独一无二的个人介绍网页吧！

个人介绍HTML网页制作代码有哪些关键点？