课灵h5p-标签页 (Tabs)教程

标签页(Tabs)教程标签页(Tabs)是一种高效的内容容器，通过水平切换的选项卡界面来组织信息。它允许你在同一页面空间内并行展示多个同层级的主题（如不同类别的资源、不同语言的版本），帮助学习者按需浏览，保持界面整洁。本教程目标掌握标签页的并行结构设计逻辑学习创建标签页内容的完整操作流程了解如何利用它作为容器整合多种媒体内容何时使用标签页课程内容分类：将同一主题下的视频、阅读材料和测验归纳在一个标签页中。产品功能介绍：并行展示产品的不同型号、规格或应用场景。多语言/多版本：为同一内容提供不同语言版本（如“中文版”、“EnglishVersion”）。系列资源集合：整理一系列相关的工具、文档或案例，方便用户快速切换查找。前置知识Tabs(标签页)本质上是一个用于组织内容的容器。它的强大之处在于能够容纳几乎所有其他H5P内容类型。因此，要充分利用此组件，建议您先熟悉各类基础组件（如HYPERLINK/docs/tutorials/presentation/image-hotspotsnormalLink\tdft\tdfe-10\tdfid\tddp\tdop\tdltinline\tdds\tdfvi\tdlf\tdtf\l\tdsubnormalLink\tdkey54ul5c\tdkey54ul5c图像热点、HYPERLINK/docs/tutorials/composite/interactive-videonormalLink\tdft\tdfe-10\tdfid\tddp\tdop\tdltinline\tdds\tdfvi\tdlf\tdtf\l\tdsubnormalLink\tdkeyi923bf\tdkeyi923bf交互式视频、各类测验等）的使用方法。本教程将侧重于如何组织这些内容，而非讲解子组件的具体配置。教程示例下面是我们将在本教程中创建的标签页示例，主题为「BerryTabs(浆果介绍)」。HYPERLINK/content/01k6tftkr8te5s30wqdh38b9c6normalLink\tdfe-10\tdlttext\tdlfFromDialog\tdtf0\tdsubnormalLink\tdkeydekpmv点击这里浏览示例示例标签页界面：展示草莓、树莓和蓝莓的丰富信息快速复制示例点击HYPERLINK/content/01k6tftkr8te5s30wqdh38b9c6normalLink\tdft\tdfe-10\tdfid\tddp\tdop\tdltinline\tdds\tdfvi\tdlf\tdtf\l\tdsubnormalLink\tdkeyh9dn9g\tdkeyh9dn9g这里➜将示例复制到你的课灵工作区在打开的页面点击"复制"(注意：请确保已登录课灵账号，否则无法复制)随后在生成的副本中点击"编辑"即可查看并操作本教程所示的设置。创建标签页：分步指南步骤1：创建新内容在课灵工作区点击"创建"，进入H5P编辑器在内容类型列表中选择『标签页』或搜索Tabs进入编辑界面开始配置从H5P内容类型列表中选择『标签页』步骤2：设置标题在『标题』字段中输入：BerryTabs。这将作为内容的元数据标题，用于搜索和版权信息。设置标签页的标题步骤3：配置标签页内容点击左侧的“添加标签页”按钮来创建新的标签。本例中我们需要创建三个标签：标签1：Strawberries(草莓)标题：输入Strawberries内容：在标签页中，你可以像使用“HYPERLINK/docs/tutorials/composite/pagenormalLink\tdft\tdfe-10\tdfid\tddp\tdop\tdltinline\tdds\tdfvi\tdlf\tdtf\l\tdsubnormalLink\tdkeyu2ws5o\tdkeyu2ws5o页面(Page)”一样垂直堆叠多种内容类型。它支持包括交互式视频(InteractiveVideo)、课程演示(CoursePresentation)、图像热点(ImageHotspots)以及各类测验题(Quiz)在内的30+种组件，这使其成为一个强大的综合性容器。在本例中，我们为该标签依次添加了图片、文本介绍、图像热点以及一个小测验，以展示Tabs承载丰富内容的能力。标签2：Raspberries(树莓)点击左侧列表底部的“添加标签页”。标题：输入Raspberries。内容：同样添加相关的图片和介绍文本。标签3：Blueberries(蓝莓)标题：输入Blueberries。内容：添加一个“图像热点(ImageHotspots)”，用于展示蓝莓的详细数据图表。添加标签页并配置其中的内容列表（支持图片、文本、热点等多种类型）步骤4：行为设置点击编辑器底部的“行为设置”，根据示例进行如下配置：标签页放置(Tabplacement)：选择“基于屏幕尺寸(Basedonscreensize)”。这样标签页在宽屏上显示在左侧，在窄屏（如手机）上会自动调整为顶部导航。标签页扩展(Tabexpansion)：输入70。这定义了标签内容区域在水平方向上占用的百分比（例如左侧标签导航占30%，右侧内容占70%）。标签页颜色与背景颜色：可根据需要调整主题色。配置标签页的布局和宽度比例步骤5：保存与预览点击『保存并关闭』生成完整的示例内容。您现在应该能看到一个包含三个水果标签的互动页面。交互说明标签切换：用户点击顶部的标签标题即可切换显示的内容。响应式布局：桌面端：通常以横向标签条或左侧导航栏的形式展示（取决于“行为设置”中的选择）。移动端：为节省空间，标签页可能会自动转换为手风琴(Accordion)样式或下拉菜单，用户点击标题展开相应内容。优化与可访问性控制标签数量：建议将标签数量控制在4个以内。过多的标签会导致导航拥挤，尤其是在移动设备上。简短的标题：保持标签标题简洁明了，便于用户快速扫描和理解。内容加载：虽然Tabs会预加载内容，但为了保证流畅体验，避免在单个标签页中堆砌过多的大型媒体文件（如高清视频）。无障碍支持：H5P核心组件已内置良好的ARIA支持。作为创作者，请确保为标签内的图片添加替代文本(AltText)，并使用正确的标题层级。专家提示：用例灵感与相关内容类型推荐想拓展『标签页』的使用场景？以下是一些常见用例，帮助你打开创作思路：产品手册：用不同标签展示产品的外观、规格、使用说明和常见问题。多语言内容：为每种语言创建一个标签（如“English”,“中文”,“Español”）。课程模块：按周或按主题组织学习材料，保持页面整洁。选型指南：标签页(Tabs),页面(Page)还是互动书(InteractiveBook)?这三个组件都是强大的“内容容器”，但适用场景不同：组件核心特征适用场景标签页(Tabs)并行切换内容是同层级的、互斥的（如“不同语言版本”、“不同产品型号”），用户通常只需查看其中一个或几个。页面(Page)垂直堆叠内容是线性的、连续的（如“一篇长文章”），用户需要从上到下完整阅读。互动书(InteractiveBook)章节结构内容量大、有层级结构（如“一本电子书”），需要侧边栏导航、章节划分和进度追踪。简单判断法则：内容很少且独立？用Tabs。内容是一篇长文？用Page。内容是一整门课？用InteractiveBook。更多替代方案如果你需要线性的时间顺序，请使用HYPERLINK/docs/tutorials/composite/timelinenormalLink\tdft\tdfe-10\tdfid\tddp\tdop\tdltinline\tdds\tdfvi\tdlf\tdtf\l\tdsubnormalLink\tdkeyfwgjyc\tdkeyfwgjyc『时间线(Timeline)』。如果你需要决策分支，请使用HYPERLINK/docs/tutorials/composite/branching-scenarionormalLink\tdft\tdfe-10\tdfid\tddp\tdop\tdltinline\tdds\tdfvi\tdlf\tdtf\l\tdsubnormalLink\tdkeyss7a4l\tdkeyss7a4l『分支场景(BranchingScenario)』。最后由SamXu于2026年1月17日更新HYPERLINK/docs/tutorials/composite/advent-calendarnormalLink\tdft\tdfe-10\tdfid\tddp\tdop\tdltinline\tdds\tdfvi\tdlf\tdtf\l\tdsubnormalLink\tdkeybxg1pr\tdkeybxg1pr上一页圣诞日历(AdventCalendar)HYPERLINK/docs/tutorials/composite/NDLA-timelinenormalLink\tdft\tdfe-10\tdfid\tddp\tdop\tdltinline\tdds\tdfvi\tdlf\tdtf\l\tdsubnormalLink\tdkeygs5xpm\tdkeygs5xpm下一页NDLA时间轴(NDLATimeline)HYPERLINK/docs/tutorials/composite/tabs#%E6%9C%AC%E6%95%99%E7%A8%8B%E7%9B%AE%E6%A0%87normalLink\tdft\tdfe-10\tdfid\tddp\tdop\tdltinline\tdds\tdfvi\tdlf\tdtf\l\tdsubnormalLink\tdkey3efjt4\tdkey3efjt4本教程目标HYPERLINK/docs/tutorials/composite/tabs#%E4%BD%95%E6%97%B6%E4%BD%BF%E7%94%A8%E6%A0%87%E7%AD%BE%E9%A1%B5normalLink\tdft\tdfe-10\tdfid\tddp\tdop\tdltinline\tdds\tdfvi\tdlf\tdtf\l\tdsubnormalLink\tdkeyoepddo\tdkeyoepddo何时使用标签页HYPERLINK/docs/tutorials/composite/tabs#%E6%95%99%E7%A8%8B%E7%A4%BA%E4%BE%8BnormalLink\tdft\tdfe-10\tdfid\tddp\tdop\tdltinline\tdds\tdfvi\tdlf\tdtf\l\tdsubnormalLink\tdkeyuezqv9\tdkeyuezqv9教程示例HYPERLINK/docs/tutorials/composite/tabs#%E5%88%9B%E5%BB%BA%E6%A0%87%E7%AD%BE%E9%A1%B5%E5%88%86%E6%AD%A5%E6%8C%87%E5%8D%97normalLink\tdft\tdfe-10\tdfid\tddp\tdop\tdltinline\tdds\tdfvi\tdlf\tdtf\l\tdsubnormalLink\tdkeywx0dvz\tdkeywx0dvz创建标签页：分步指南HYPERLINK/docs/tutorials/composite/tabs#%E6%AD%A5%E9%AA%A4-1%E5%88%9B%E5%BB%BA%E6%96%B0%E5%86%85%E5%AE%B9normalLink\tdft\tdfe-10\tdfid\tddp\tdop\tdltinline\tdds\tdfvi\tdlf\tdtf\l\tdsubnormalLink\tdkeyqaitgr\tdkeyqaitgr步骤1：创建新内容HYPERLINK/docs/tutorials/composite/tabs#%E6%AD%A5%E9%AA%A4-2%E8%AE%BE%E7%BD%AE%E6%A0%87%E9%A2%98normalLink\tdft\tdfe-10\tdfid\tddp\tdop\tdltinline\tdds\tdfvi\tdlf\tdtf\l\tdsubnormalLink\tdkey87axjc\tdkey87axjc步骤2：设置标题HYPERLINK/docs/tutorials/composite/tabs#%E6%AD%A5%E9%AA%A4-3%E9%85%8D%E7%BD%AE%E6%A0%87%E7%AD%BE%E9%A1%B5%E5%86%85%E5%AE%B9normalLink\tdft\tdfe-10\tdfid\tddp\tdop\tdltinline\tdds\tdfvi\tdlf\tdtf\l\tdsubnormalLink\tdkeynln46d\tdkeynln46d步骤3：配置标签页内容HYPERLINK/docs/tutorials/composite/tabs#%E6%A