🌐 HTML 个人介绍页面

📝 题目说明

相信经过了一些学习你已经对HTML有一个初步的了解啦，现在让我们通过实际的项目来巩固所学知识！

请使用HTML创建一个个人介绍页面，要求页面具有明确的主题性和良好的语义化结构。

🎯 题目要求

基础要求

1. 页面结构

   • 使用语义化标签构建页面结构（如 <header>, <main>, <section>, <footer> 等）
   • 页面要有清晰的层次结构，不是简单的标签堆砌

2. 内容要求(包括但不限于)

   • 个人头像或照片（使用 <img> 标签）
   • 个人基本信息（如姓名、年龄、专业/职业等）
   • 自我介绍段落（让大家认识认识你吧 !）
   • 个人技能展示（使用列表）
   • 联系方式（使用表格展示）

3. 技术要求

   • 正确使用各种HTML标签（<h1>-<h6>, <p>, <img>, <ul>/<ol>, <table>, <a> 等）
   • 图片要有合适的 alt 属性描述
   • 超链接要有明确的文字说明
   • 表格要有表头（<th>）

进阶要求（挑战自己）

1. 多媒体元素

   • 尝试添加一个简单的音频或视频元素
   • 使用 <figure> 和 <figcaption> 为图片添加说明

2. 表单元素

   • 添加一个简单的联系表单（包含文本框、邮箱、下拉选择、文本域等）
   • 使用 <label> 标签为表单元素添加说明

3. 特殊元素

   • 使用 <blockquote> 引用一句名言
   • 使用 <code> 或 <pre> 展示一段代码
   • 使用 <details> 和 <summary> 创建可折叠的详细信息

💡 参考思路

页面结构示例

<header>
    <h1>Asuka的个人主页</h1>
</header
<main>
    <section class="profile">
        <h2>个人信息</h2>
        <p>姓名：banyuan</p>
        <p>职业：前端开发工程师</p>
        <figure>
          <img src="头像.jpg" alt="banyuan的照片" width="100px">
          <figcaption>banyuan的照片</figcaption>
        </figure>
    </section>
    <section class="skills">
        <h2>专业技能</h2>
        <ul>
            <li>HTML5</li>
            <li>CSS3</li>
            <li>JavaScript</li>
        </ul>
    </section>
    <!-- ...... -->
    <section class="contact">
    <table>
        <tr>
            <th>联系方式</th>
            <td></td>
        </tr>
        <tr>
            <th>邮箱</th>
            <td>banyuan@example.com</td>
        </tr>
        <tr>
            <th>手机号</th>
            <td>1234567890</td>
        </tr>
    </table>
    </section>
</main>

<footer>
    <p>&copy; 2026 banyuan的个人主页</p>
</footer>

🎨 设计建议

1. 内容真实性：尽量使用真实的信息，让页面更有意义
2. 结构清晰：合理使用标题层级，让页面结构一目了然
3. 语义化优先：优先使用语义化标签，而不是 <div> 和 <span>
4. 可访问性：为图片添加 alt 属性，为表单元素添加 label

🌟 评分标准

1. 结构完整性：页面结构是否清晰，层次是否分明
2. 语义化使用：是否正确使用语义化标签
3. 内容丰富性：内容是否充实，是否有实际意义
4. 技术规范：标签使用是否规范，属性设置是否合理
5. 创意表现：页面设计是否有个人特色

---

提示：这个题目是前端学习的第一步，重点在于理解HTML的基本概念和语义化的重要性。不要担心页面不够美观，下一关我们会学习CSS来美化页面！