<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "5a764667bbe82aa72ac0a67f4c97ff4a",
  "translation_date": "2025-10-03T08:50:02+00:00",
  "source_file": "3-terrarium/1-intro-to-html/assignment.md",
  "language_code": "zh"
}
-->
# HTML实践作业：构建博客模型

## 目标

设计并手写个人博客主页的HTML结构。通过这个练习，你将练习语义化HTML、布局规划以及代码组织。

## 说明

1. **设计你的博客模型**
   - 绘制博客主页的视觉模型草图。包括关键部分，如页眉、导航栏、主要内容、侧边栏和页脚。
   - 你可以使用纸张绘制并扫描你的草图，或者使用数字工具（例如Figma、Adobe XD、Canva，甚至PowerPoint）。

2. **识别HTML元素**
   - 列出你计划在每个部分中使用的HTML元素（例如，`<header>`、`<nav>`、`<main>`、`<article>`、`<aside>`、`<footer>`、`<section>`、`<h1>`–`<h6>`、`<p>`、`<img>`、`<ul>`、`<li>`、`<a>`等）。

3. **编写HTML标记**
   - 手写你的模型的HTML代码。专注于语义结构和最佳实践。
   - 至少包含10个不同的HTML元素。
   - 添加注释以解释你的选择和结构。

4. **提交你的作品**
   - 上传你的草图/模型和HTML文件。
   - 可选：提供一段简短的反思（2–3句话），说明你的设计决策。

## 评分标准

| 评估标准       | 卓越表现                                                                                     | 合格表现                                                                         | 需改进表现                                                                      |
|----------------|--------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------|---------------------------------------------------------------------------------|
| 视觉模型       | 清晰、详细的模型，标注了各部分并具有深思熟虑的布局                                           | 基本模型，标注了一些部分                                                         | 模型简单或不清晰；缺乏部分标注                                                  |
| HTML元素       | 使用10个以上语义化HTML元素；展示了对结构和最佳实践的理解                                      | 使用5–9个HTML元素；部分语义化结构                                                | 使用少于5个元素；缺乏语义化结构                                                |
| 代码质量       | 代码组织良好、可读性强，带有注释；遵循HTML标准                                               | 代码大体组织良好；注释较少                                                       | 代码组织混乱；缺乏注释                                                          |
| 反思           | 深刻反思设计选择和挑战                                                                      | 基本反思                                                                         | 无反思或缺乏相关性                                                              |

## 提示

- 使用语义化HTML标签以提高可访问性和SEO。
- 使用缩进和注释来组织代码。
- 参考 [MDN HTML元素参考](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) 获取指导。
- 考虑你的布局如何在未来的作业中扩展或进行样式化。

---

**免责声明**：  
本文档使用AI翻译服务 [Co-op Translator](https://github.com/Azure/co-op-translator) 进行翻译。尽管我们努力确保翻译的准确性，但请注意，自动翻译可能包含错误或不准确之处。原始语言的文档应被视为权威来源。对于关键信息，建议使用专业人工翻译。我们不对因使用此翻译而产生的任何误解或误读承担责任。