freeCodeCamp

2.2 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	localeTitle
587d774e367417b2b2512a9f	Jump Straight to the Content Using the main Element	0	https://scrimba.com/c/cPp7zuE	301018	使用 main 元素包裹主题内容

Description

HTML5 添加了诸如main、header、footer、nav、article、section等大量新标签，开发人员提供更多的选择，也兼顾了无障碍特性。默认情况下，浏览器呈现这些新标签的方式与div相似。然而，合理地使用它们，可以使你的标签更加的语义化。辅助技术（如：屏幕阅读器）可以通过这些标签为用户提供更加准确的、易于理解的页面信息。 main标签用于呈现网页的主体内容，且每个页面只能有一个。这意味着它只应包含与页面中心主题相关的信息，而不应包含如导航连接、网页横幅等可以在多个页面中重复出现的内容。 main标签的语义化特性可以使辅助技术快速定位到页面的主体。如果页面顶部有一个 “跳转到主要内容” 的链接，那么辅助设备会自动识别main标签，实现这个功能。

Instructions

Camper Cat 对他的忍者武器页面有一些新的想法，请帮助他在header标签和footer标签（在接下来的挑战中会详细介绍）之间添加完整main标签来使页面语义化。在这个挑战中，你可以先让main为空。

Tests

tests:
  - text: '你的代码应该有一个<code>main</code>标签。'
    testString: assert($('main').length == 1);
  - text: '<code>main</code>标签应该在<code>header</code>标签与<code>footer</code>标签之间。'
    testString: assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi));

Challenge Seed

<header>
  <h1>Weapons of the Ninja</h1>
</header>



<footer></footer>

Solution

// solution required

2.2 KiB Raw Blame History