2-1 各得其所——用语义化标签让网页内容易读、易维护.pptxVIP

一号任务各得其所——用语义化标签让网页内容易读、易维护汇报人：xxx时间：2026

01任务说明

任务说明一号任务在零号任务中，我们已经初步了解如何使用语义化标签来构建网页结构，本任务将进一步丰富社团管理网页的内容，重点在于运用更多的语义化标签，以提升网页的可读性和结构性。具体要求如下。（1）使用figure标签为图片等提供容器，并通过figcaption标签提供图片的说明文字。（2）使用mark标签来标记页面中需要突出显示的文字，例如，可以用于高亮显示搜索结果中的关键词。（3）使用progress标签来显示任务的完成进度，例如，可以用来展示志愿者时长录入的进度或者社团活动的报名人数进度。

知识准备02

01figure与figcaption标签03progress标签02mark标签目录

1.figure与ficaption标签知识准备figure标签用于为图片、图表等视觉内容提供容器，而figcaption标签则提供该图片或图表的描述性文字，示例代码如下：这些标签的使用不仅能增强页面的视觉表现力，还能提升图片的语义性，使其内容更加清晰可理解。

2.mark标签知识准备mark标签用于标记文本，使其高亮显示，通常用来表示重要的内容或用户可能关心的信息。示例代码如下：mark标签使得关键字、重要信息或相关术语更为显眼，帮助用户快速抓住重点。同时可以增强内容的可读性，特别是