菜鸟教程
教程 html tutorial

个人简介页面

欢迎来到我的个人简介页面，这里展示我的基本信息、专业技能和联系方式。

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 {
        font-family: "Microsoft YaHei", sans-serif;
        max-width: 700px;
        margin: 40px auto;
        padding: 0 20px;
        line-height: 1.6;
        background: #f9f9f9;
        color: #333;
      }
      h1,
      h2 {
        color: #2c3e50;
      }
      ul {
        list-style-type: disc;
        margin-left: 20px;
      }
      .contact-info p {
        margin: 5px 0;
      }
      footer {
        margin-top: 40px;
        font-size: 0.9em;
        color: #888;
        text-align: center;
        border-top: 1px solid #ddd;
        padding-top: 10px;
      }
    </style>
  </head>
  <body>
    <h1>个人简介</h1>

    <section>
      <h2>个人信息</h2>
      <p><strong>姓名：</strong>张三</p>
      <p><strong>职业：</strong>前端开发工程师</p>
      <p>
        <strong>邮箱：</strong
        ><a href="mailto:[email protected]">[email protected]</a>
      </p>
      <p><strong>电话：</strong>123-4567-8901</p>
    </section>

    <section>
      <h2>技能专长</h2>
      <ul>
        <li>熟悉 HTML5、CSS3 和 JavaScript</li>
        <li>掌握 Vue.js、React 等前端框架</li>
        <li>熟悉响应式设计和跨浏览器兼容</li>
        <li>了解后端基础及 Node.js</li>
      </ul>
    </section>

    <section>
      <h2>个人经历</h2>
      <p>
        参与多个大型网站和应用开发项目，注重代码质量和用户体验。热衷学习新技术，持续提升能力。
      </p>
    </section>

    <section class="contact-info">
      <h2>联系方式</h2>
      <p>欢迎通过邮箱或电话联系我，期待合作与交流！</p>
    </section>

    <footer>&copy; 2025 张三 版权所有</footer>
  </body>
</html>

相关内容