html个人网页完整代码

时间：2026-04-01 13:52:13

以下是一个完整的 HTML 个人网页代码示例，包含基本的结构、样式和内容。你可以将这段代码保存为 .html 文件（例如 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>我的个人网页</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            color: #333;
        }

        header {
            background-color: #333;
            color: white;
            padding: 20px 0;
            text-align: center;
        }

        header h1 {
            margin: 0;
            font-size: 2em;
        }

        .container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }

        .section {
            margin-bottom: 30px;
        }

        .section h2 {
            margin-bottom: 10px;
        }

        .section p {
            font-size: 1em;
        }

        .contact {
            background-color: #f9f9f9;
            padding: 20px;
            border-radius: 5px;
        }

        .contact h3 {
            margin-top: 0;
        }

        .contact p {
            margin: 5px 0;
        }

        footer {
            text-align: center;
            padding: 20px;
            background-color: #333;
            color: white;
            margin-top: 40px;
        }
    </style>
</head>
<body>

    <header>
        <h1>我的个人网页</h1>
    </header>

    <div >
        <div >
            <h2>关于我</h2>
            <p>你好！我是张三，一名热爱编程和设计的开发者。我专注于前端开发和用户体验设计。</p>
            <p>我热爱学习新技术，喜欢探索有趣的项目，并享受与他人合作解决问题的乐趣。</p>
        </div>

        <div >
            <h2>我的技能</h2>
            <ul>
                <li>HTML5, CSS3, JavaScript</li>
                <li>React, Vue.js</li>
                <li>前端框架：Bootstrap, Tailwind CSS</li>
                <li>版本控制：Git</li>
                <li>数据库：MySQL, PostgreSQL</li>
            </ul>
        </div>

        <div >
            <h2>联系方式</h2>
            <div >
                <h3>联系方式</h3>
                <p><strong>Email:</strong> zhangsan@example.com</p>
                <p><strong>GitHub:</strong> <a href="https://github.com/zhangsan" target="_blank">https://github.com/zhangsan</a></p>
                <p><strong>LinkedIn:</strong> <a href="https://linkedin.com/in/zhangsan" target="_blank">https://linkedin.com/in/zhangsan</a></p>
            </div>
        </div>
    </div>

    <footer>
        <p>&copy; 2025 我的个人网页. All rights reserved.</p>
    </footer>

</body>
</html>

游戏秘籍图文推荐

html个人网页完整代码相关文章