标记信件

写信是每个人的必备技能,它也是测验文本格式化技能的一个不错的办法呀! 本次测验要求你为你一封写好的信做出标记,以测验你基础和高级的 HTML 文本格式化技能,包括超链接等等。此外将测验你对一些 HTML <head> 内容的熟悉程度。

预备知识: 阅读并掌握以下文章的内容:开始学习 HTML“头”里有什么?HTML 元信息HTML 文字处理初步创建超链接高级文字格式
学习目标: 测验对 HTML 文本格式和超链接基本和高级用法、HTML <head> 内容的理解程度。

起点

开始测验之前,请先下载 start.zip(该压缩包包含一份要标记的原始文本,以及需要导入的 CSS 代码)。然后用文本编辑器(用 JSBinhimble 等在线编辑工具亦可)创建一个新的 .html 文件来进行测验。

项目概要

本项目中,你的任务为一封大学内网信件进行标记,这封信是研究人员对一名学生有关申请博士学位问题的回复。

块/结构语义:

  • 你应该使用适当的结构来构造整体文档,包括doctype、<html><head><body>元素。
  • 除下面提到的几点之外,这封信应该被标记成有着段落和标题的结构。 这封信有 1 个顶级标题(“回复:”那行)和 3 个二级标题。
  • 使用适当类型的列表标记该学期的开学时间、学习科目和异域舞蹈。
  • 两个地址可以直接放在段落中,<address> 元素不适合它们(想一下为什么)。此外,地址的每一行都应该另开新行,而不是新段落。

内联语义:

  • 应着重显示发信人和收信人的姓名(以及“电话”和“电子邮件”字样)。
  • 用适当的元素把文档中的四个日期标记成机器可读的日期。
  • 为信中第一个地址和第一个日期设置一个类属性“sender-column”,这样就能通过添加CSS 来使它们右对齐,以符合经典信件的布局。
  • 信件正文中有 2 个首字母缩略词/缩写词,标记出它们的扩展形式。
  • 正确标注 6 个下标/上标(位于化学方程式、科学计数法中)。
  • 试着标记至少对两个单词进行着重(<strong>)/ 强调(<em>)显示。
  • 有两个地方应加上超链接,要为它们添加适当的标题。链接指向 https://example.com/ 即可。
  • 用适当的元素标记校训和引文。

文档的头部:

  • 用适当的元标签把文档的字符集声明为 utf-8。
  • 用适当的元标签说明信件的作者。
  • 用适当的标签引入我们提供的 CSS 代码。

提示和技巧

  • 使用 W3C HTML验证器 来验证 HTML,验证通过有额外加分。
  • 完成这个测验不需要任何 CSS 知识,只需把现成的 CSS 放到 HTML 元素里就好。

范例

以下截图展示了这封信标记完成后可能的外观(可 在线查看)。

排版信件截图

测验

如果你是在课堂上进行这个测验,你可以把作品交给导师或教授去打分了。如果你是在自学,也可以在 本节测验的讨论页 或者 Mozilla 聊天室 #mdn 频道取得帮助。要自己先尝试,作弊是不会有收获的!

本章目录