3.9 KiB

Raw Blame History Unescape Escape

HTML实践作业：构建博客模型

目标

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

说明

设计你的博客模型
- 绘制博客主页的视觉模型草图。包括关键部分，如页眉、导航栏、主要内容、侧边栏和页脚。
- 你可以使用纸张绘制并扫描你的草图，或者使用数字工具（例如Figma、Adobe XD、Canva，甚至PowerPoint）。
识别HTML元素
- 列出你计划在每个部分中使用的HTML元素（例如，<header>、<nav>、<main>、<article>、<aside>、<footer>、<section>、<h1>–<h6>、<p>、<img>、<ul>、<li>、<a>等）。
编写HTML标记
- 手写你的模型的HTML代码。专注于语义结构和最佳实践。
- 至少包含10个不同的HTML元素。
- 添加注释以解释你的选择和结构。
提交你的作品
- 上传你的草图/模型和HTML文件。
- 可选：提供一段简短的反思（2–3句话），说明你的设计决策。

评分标准

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

提示

使用语义化HTML标签以提高可访问性和SEO。
使用缩进和注释来组织代码。
参考 MDN HTML元素参考获取指导。
考虑你的布局如何在未来的作业中扩展或进行样式化。

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