编程马·菜鸟教程

Appearance

基础小项目 ​

17.1 个人简介页面 ​

项目目标 ​

创建一个简单的个人简介页面，展示个人基本信息。

技术要点 ​

  • 文本标签：h1、p
  • 图片标签：img
  • 链接标签：a
  • 分区标签：div

实现代码 ​

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>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f4f4f4;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .avatar {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 20px;
        }
        
        h1 {
            color: #2c3e50;
            margin-bottom: 10px;
        }
        
        .title {
            color: #7f8c8d;
            margin-bottom: 20px;
        }
        
        section {
            margin-bottom: 30px;
        }
        
        h2 {
            color: #34495e;
            margin-bottom: 15px;
            padding-bottom: 5px;
            border-bottom: 1px solid #e0e0e0;
        }
        
        ul {
            list-style: none;
        }
        
        li {
            margin-bottom: 10px;
        }
        
        .contact-info {
            background-color: #f9f9f9;
            padding: 15px;
            border-radius: 5px;
        }
        
        .contact-info a {
            color: #3498db;
            text-decoration: none;
        }
        
        .contact-info a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=professional%20profile%20photo&image_size=square" alt="个人头像" class="avatar">
            <h1>张三</h1>
            <p class="title">前端开发工程师</p>
        </header>
        
        <section>
            <h2>个人简介</h2>
            <p>我是一名前端开发工程师，热爱编程和技术创新。拥有2年前端开发经验，熟悉HTML、CSS、JavaScript等前端技术栈。</p>
        </section>
        
        <section>
            <h2>教育背景</h2>
            <ul>
                <li><strong>大学本科</strong> - 计算机科学与技术专业</li>
                <li>毕业时间：2022年6月</li>
            </ul>
        </section>
        
        <section>
            <h2>技能</h2>
            <ul>
                <li>HTML5/CSS3</li>
                <li>JavaScript</li>
                <li>React</li>
                <li>Vue</li>
                <li>Node.js</li>
            </ul>
        </section>
        
        <section class="contact-info">
            <h2>联系方式</h2>
            <ul>
                <li>邮箱：zhangsan@example.com</li>
                <li>电话：13800138000</li>
                <li>GitHub：<a href="https://github.com/zhangsan" target="_blank">github.com/zhangsan</a></li>
            </ul>
        </section>
    </div>
</body>
</html>

17.2 简单导航页面 ​

项目目标 ​

创建一个简单的导航页面，包含导航菜单和链接。

技术要点 ​

  • 列表标签：ul、li
  • 链接标签：a
  • 分区标签：nav、header、footer

实现代码 ​

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>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
        }
        
        header {
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
        }
        
        nav {
            background-color: #f4f4f4;
            padding: 10px 0;
            border-bottom: 1px solid #ddd;
        }
        
        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        nav ul {
            list-style: none;
            display: flex;
            justify-content: center;
        }
        
        nav li {
            margin: 0 15px;
        }
        
        nav a {
            color: #333;
            text-decoration: none;
            padding: 8px 15px;
            border-radius: 3px;
            transition: background-color 0.3s;
        }
        
        nav a:hover {
            background-color: #ddd;
        }
        
        main {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
            text-align: center;
        }
        
        h2 {
            margin-bottom: 20px;
            color: #2c3e50;
        }
        
        .feature {
            display: flex;
            justify-content: space-around;
            margin-top: 40px;
        }
        
        .feature-item {
            width: 30%;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .feature-item h3 {
            margin-bottom: 10px;
            color: #34495e;
        }
        
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px;
            margin-top: 40px;
        }
    </style>
</head>
<body>
    <header>
        <h1>网站名称</h1>
        <p>欢迎访问我们的网站</p>
    </header>
    
    <nav>
        <div class="nav-container">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">产品中心</a></li>
                <li><a href="#">服务项目</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </div>
    </nav>
    
    <main>
        <h2>欢迎来到我们的网站</h2>
        <p>这是一个简单的导航页面示例，展示了如何创建一个基本的网站导航结构。</p>
        
        <div class="feature">
            <div class="feature-item">
                <h3>产品1</h3>
                <p>这是产品1的描述</p>
            </div>
            <div class="feature-item">
                <h3>产品2</h3>
                <p>这是产品2的描述</p>
            </div>
            <div class="feature-item">
                <h3>产品3</h3>
                <p>这是产品3的描述</p>
            </div>
        </div>
    </main>
    
    <footer>
        <p>© 2026 网站名称 版权所有</p>
    </footer>
</body>
</html>

17.3 数据表格页面 ​

项目目标 ​

创建一个数据表格页面，展示结构化数据。

技术要点 ​

  • 表格标签：table、tr、td、th
  • 分区标签：div

实现代码 ​

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>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f4f4f4;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        h1 {
            text-align: center;
            margin-bottom: 30px;
            color: #2c3e50;
        }
        
        .table-container {
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
        }
        
        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #e0e0e0;
        }
        
        th {
            background-color: #3498db;
            color: white;
            font-weight: bold;
        }
        
        tr:hover {
            background-color: #f5f5f5;
        }
        
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        
        .action-buttons {
            display: flex;
            gap: 10px;
        }
        
        .btn {
            padding: 5px 10px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            font-size: 14px;
        }
        
        .btn-edit {
            background-color: #f39c12;
            color: white;
        }
        
        .btn-delete {
            background-color: #e74c3c;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>学生信息表</h1>
        <div class="table-container">
            <table>
                <thead>
                    <tr>
                        <th>学号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>专业</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>2023001</td>
                        <td>张三</td>
                        <td>男</td>
                        <td>18</td>
                        <td>计算机科学</td>
                        <td>
                            <div class="action-buttons">
                                <button class="btn btn-edit">编辑</button>
                                <button class="btn btn-delete">删除</button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>2023002</td>
                        <td>李四</td>
                        <td>女</td>
                        <td>19</td>
                        <td>软件工程</td>
                        <td>
                            <div class="action-buttons">
                                <button class="btn btn-edit">编辑</button>
                                <button class="btn btn-delete">删除</button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>2023003</td>
                        <td>王五</td>
                        <td>男</td>
                        <td>18</td>
                        <td>数据科学</td>
                        <td>
                            <div class="action-buttons">
                                <button class="btn btn-edit">编辑</button>
                                <button class="btn btn-delete">删除</button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>2023004</td>
                        <td>赵六</td>
                        <td>女</td>
                        <td>19</td>
                        <td>人工智能</td>
                        <td>
                            <div class="action-buttons">
                                <button class="btn btn-edit">编辑</button>
                                <button class="btn btn-delete">删除</button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>2023005</td>
                        <td>钱七</td>
                        <td>男</td>
                        <td>18</td>
                        <td>网络工程</td>
                        <td>
                            <div class="action-buttons">
                                <button class="btn btn-edit">编辑</button>
                                <button class="btn btn-delete">删除</button>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

17.4 简单注册表单 ​

项目目标 ​

创建一个简单的注册表单，实现基础用户交互。

技术要点 ​

  • 表单标签：form、input、button
  • 文本标签：h1、p
  • 分区标签：div

实现代码 ​

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>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f4f4f4;
        }
        
        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        
        h1 {
            text-align: center;
            margin-bottom: 30px;
            color: #2c3e50;
        }
        
        .form-container {
            background-color: white;
            padding: 30px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #34495e;
        }
        
        input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 3px;
            font-size: 16px;
        }
        
        input:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
        }
        
        .btn {
            width: 100%;
            padding: 12px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 3px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .btn:hover {
            background-color: #2980b9;
        }
        
        .login-link {
            text-align: center;
            margin-top: 20px;
        }
        
        .login-link a {
            color: #3498db;
            text-decoration: none;
        }
        
        .login-link a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>用户注册</h1>
        <div class="form-container">
            <form>
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" id="username" name="username" placeholder="请输入用户名" required>
                </div>
                
                <div class="form-group">
                    <label for="email">邮箱</label>
                    <input type="email" id="email" name="email" placeholder="请输入邮箱" required>
                </div>
                
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" id="password" name="password" placeholder="请输入密码" required>
                </div>
                
                <div class="form-group">
                    <label for="confirm-password">确认密码</label>
                    <input type="password" id="confirm-password" name="confirm-password" placeholder="请确认密码" required>
                </div>
                
                <button type="submit" class="btn">注册</button>
            </form>
            
            <div class="login-link">
                <p>已有账号？<a href="#">立即登录</a></p>
            </div>
        </div>
    </div>
</body>
</html>

17.5 语义化文章页面 ​

项目目标 ​

创建一个语义化的文章页面，优化SEO结构。

技术要点 ​

  • 语义化标签：header、nav、main、article、section、footer
  • 文本标签：h1、h2、p
  • 图片标签：img
  • 链接标签：a

实现代码 ​

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>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f4f4f4;
        }
        
        header {
            background-color: #333;
            color: white;
            padding: 20px;
        }
        
        .header-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        nav ul {
            list-style: none;
            display: flex;
        }
        
        nav li {
            margin-left: 20px;
        }
        
        nav a {
            color: white;
            text-decoration: none;
        }
        
        nav a:hover {
            text-decoration: underline;
        }
        
        main {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            display: flex;
            gap: 20px;
        }
        
        article {
            flex: 3;
            background-color: white;
            padding: 30px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        aside {
            flex: 1;
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        h1 {
            color: #2c3e50;
            margin-bottom: 20px;
        }
        
        .article-meta {
            color: #7f8c8d;
            margin-bottom: 20px;
            font-size: 14px;
        }
        
        img {
            max-width: 100%;
            height: auto;
            margin: 20px 0;
            border-radius: 5px;
        }
        
        h2 {
            color: #34495e;
            margin: 30px 0 15px;
        }
        
        p {
            margin-bottom: 15px;
        }
        
        .related-posts {
            margin-top: 30px;
        }
        
        .related-posts h3 {
            color: #34495e;
            margin-bottom: 15px;
        }
        
        .related-posts ul {
            list-style: none;
        }
        
        .related-posts li {
            margin-bottom: 10px;
        }
        
        .related-posts a {
            color: #3498db;
            text-decoration: none;
        }
        
        .related-posts a:hover {
            text-decoration: underline;
        }
        
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <header>
        <div class="header-container">
            <h1>网站名称</h1>
            <nav>
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">文章</a></li>
                    <li><a href="#">关于</a></li>
                    <li><a href="#">联系</a></li>
                </ul>
            </nav>
        </div>
    </header>
    
    <main>
        <article>
            <h1>HTML语义化开发的重要性</h1>
            <div class="article-meta">
                <span>发布时间：2026-01-01</span> | 
                <span>作者：张三</span> | 
                <span>分类：前端开发</span>
            </div>
            
            <p>HTML语义化是前端开发中的重要概念，它指的是使用正确的HTML标签来表示页面内容的含义，让代码更具可读性和可维护性，同时提升SEO效果。</p>
            
            <img src="https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=semantic%20html%20coding&image_size=landscape_16_9" alt="HTML语义化开发">
            
            <h2>语义化标签的使用</h2>
            <p>HTML5引入了一系列语义化标签，如header、nav、main、article、section、footer等，这些标签可以更清晰地表达页面的结构。</p>
            
            <h2>语义化的优势</h2>
            <p>语义化开发的优势包括：</p>
            <ul>
                <li>提升SEO效果，搜索引擎更容易理解页面结构</li>
                <li>增强代码可读性，便于团队协作</li>
                <li>提高网站的可访问性，便于屏幕阅读器用户</li>
                <li>便于后期维护和升级</li>
            </ul>
            
            <h2>实战建议</h2>
            <p>在实际开发中，应该优先使用语义化标签，避免滥用div标签。同时，要保持代码的整洁和规范，为标签添加合理的class和id属性。</p>
        </article>
        
        <aside>
            <h3>相关文章</h3>
            <ul class="related-posts">
                <li><a href="#">CSS Flexbox布局指南</a></li>
                <li><a href="#">JavaScript异步编程详解</a></li>
                <li><a href="#">响应式网页设计技巧</a></li>
                <li><a href="#">前端性能优化策略</a></li>
            </ul>
            
            <h3>热门标签</h3>
            <div>
                <a href="#">HTML</a> | 
                <a href="#">CSS</a> | 
                <a href="#">JavaScript</a> | 
                <a href="#">前端开发</a> | 
                <a href="#">SEO</a>
            </div>
        </aside>
    </main>
    
    <footer>
        <p>© 2026 网站名称 版权所有</p>
    </footer>
</body>
</html>

小结 ​

通过本章节的学习，你已经完成了几个基础小项目的开发，包括个人简介页面、简单导航页面、数据表格页面、简单注册表单和语义化文章页面。这些项目涵盖了HTML的核心知识点，通过实战练习，你可以巩固所学的HTML知识，提升实战能力。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建