6.7 KiB

Raw Permalink Blame History Unescape Escape

HTML 练习作业：构建博客原型

学习目标

通过设计和编码一个完整的博客主页结构，应用您的 HTML 知识。这个实践作业将强化语义 HTML 概念、无障碍最佳实践以及专业代码组织技能，这些技能将在您的整个网页开发旅程中使用。

完成此作业后，您将能够：

练习在编码前规划网站布局
适当地应用语义 HTML 元素
创建可访问的、结构良好的标记
培养带有注释和组织的专业编码习惯

项目要求

第 1 部分：设计规划（视觉原型）

创建您的博客主页的视觉原型，包括：

带有网站标题和导航的页眉
具有至少 2-3 篇博客文章预览的主内容区
包含附加信息的侧边栏（关于部分、最近帖子、分类）
带有联系信息或链接的页脚

原型创建选项：

手绘草图：使用纸和铅笔，然后拍照或扫描您的设计
数字工具：Figma、Adobe XD、Canva、PowerPoint 或任何绘图应用
线框工具：Balsamiq、MockFlow 或类似的线框软件

在您的原型部分标注您计划使用的 HTML 元素（例如，“页眉 - <header>”、“博客文章 - <article>”）。

第 2 部分：HTML 元素规划

创建一个列表，将您的原型的每个部分映射到特定的 HTML 元素：

Example:
- Site Header → <header>
- Main Navigation → <nav> with <ul> and <li>
- Blog Post → <article> with <h2>, <p>, <time>
- Sidebar → <aside> with <section> elements
- Page Footer → <footer>

必须包含的元素： 您的 HTML 必须至少包含以下列表中 10 种不同的语义元素：

<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>
<h1>, <h2>, <h3>, <p>, <ul>, <li>, <a>
<img>, <time>, <blockquote>, <strong>, <em>

第 3 部分：HTML 实现

编码您的博客主页，遵循以下标准：

文档结构：包含正确的 DOCTYPE、html、head 和 body 元素
语义标记：根据用途使用 HTML 元素
无障碍：为图片加入恰当的 alt 文本和有意义的链接文本
代码质量：使用一致的缩进和有意义的注释
内容：包含真实的博客内容（您可以使用占位文本）

示例 HTML 结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Personal Blog</title>
</head>
<body>
    <!-- Main site header -->
    <header>
        <h1>My Blog Title</h1>
        <nav>
            <!-- Navigation menu -->
        </nav>
    </header>
    
    <!-- Main content area -->
    <main>
        <!-- Blog posts go here -->
    </main>
    
    <!-- Sidebar content -->
    <aside>
        <!-- Additional information -->
    </aside>
    
    <!-- Site footer -->
    <footer>
        <!-- Footer content -->
    </footer>
</body>
</html>

第 4 部分：反思

写一个简短的反思（3-5 句），内容包括：

哪些 HTML 元素是您最有信心使用的？
规划或编码过程中遇到了哪些挑战？
语义 HTML 如何帮助您组织内容？
下一次 HTML 项目中您会有什么不同的做法？

提交清单

提交前，请确保您已完成：

带有标注 HTML 元素的视觉原型
完整的 HTML 文件，具有正确的文档结构
至少使用了 10 种不同且恰当的语义 HTML 元素
有意义的注释，解释您的代码结构
有效的 HTML 语法（在浏览器中测试）
针对提示问题的书面反思

评估标准

评估标准	优秀 (4)	良好 (3)	发展中 (2)	初学者 (1)
规划与设计	详尽且标注清晰的原型，展示了对布局和 HTML 语义结构的深刻理解	清晰的原型，大部分部分都有恰当标注	基本原型，有一些标注，表现出一般理解	原型内容少或不清晰，缺乏正确的部分识别
语义 HTML 使用	适当使用 10 种以上语义元素，表现出对 HTML 结构和无障碍的深刻理解	正确使用 8-9 种语义元素，显示良好的语义标记理解	使用 6-7 种语义元素，对适当使用有一些混淆	使用少于 6 种元素或误用语义元素
代码质量与组织	代码组织异常良好，缩进正确，有全面的注释，且 HTML 语法完美	代码组织良好，有良好缩进和有用注释，语法有效	代码大致有序，有少量注释，存在轻微语法问题	组织差，极少注释，存在多处语法错误
无障碍与最佳实践	极佳的无障碍考虑，有意义的 alt 文本，恰当的标题层级，遵循所有现代 HTML 最佳实践	良好的无障碍特性，恰当使用标题和 alt 文本，遵循大多数最佳实践	有一些无障碍考虑，基本的 alt 文本和标题结构	无障碍特性有限，标题结构差，不遵循最佳实践
反思与学习	有深刻见解的反思，展现了对 HTML 概念和学习过程的深刻理解和分析	良好的反思，显示了对关键概念的理解和一定的自我认知	基本反思，对 HTML 概念或学习过程的见解有限	反思很少或缺失，几乎没有对学习内容的理解

学习资源

必备参考资料：

MDN HTML 元素参考 - 全面 HTML 元素指南
HTML5 语义元素 - 理解语义标记
网页无障碍指导原则 - 创建无障碍网页内容
HTML 校验器 - 检查您的 HTML 语法

成功技巧：

在编写任何代码之前先开始制作原型
使用浏览器的开发者工具检查您的 HTML 结构
测试您的页面在不同屏幕尺寸下的显示（即使没有 CSS）
大声朗读您的 HTML 以检查结构是否逻辑通顺
考虑屏幕阅读器如何解释您的页面结构

💡 记住：本作业关注 HTML 结构和语义。不要担心视觉样式 —— 那是 CSS 的工作！您的页面可能看起来很普通，但应结构良好且有意义。

免责声明：
本文件使用AI翻译服务Co-op Translator进行翻译。虽然我们力求准确，但请注意，自动翻译可能存在错误或不准确之处。原始文本应被视为权威来源。对于重要信息，建议采用专业人工翻译。我们不对因使用本翻译内容而引起的任何误解或错误解释承担责任。

6.7 KiB Raw Permalink Blame History Unescape Escape