freeCodeCamp

2.1 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	localeTitle
587d774c367417b2b2512a9d	Know When Alt Text Should be Left Blank	0	https://scrimba.com/c/cM9P4t2	301019	知道 Alt 文本何时应该留空

Description

在上一个挑战中，我们了解到img标签必须有一个alt属性。在图片已经有了文字说明，或者仅仅为了美化页面的情况下，alt属性似乎有些多余。即便如此，我们仍然需要为img标签添加alt属性，这时可以把它设为空，例如： <img src="visualDecoration.jpeg" alt=""> 背景图片通常起装饰作用，而且含有 CSS 类，所以屏幕阅读器无法读取。 注意：
对于有标题的图片，我们依然需要添加alt属性，因为这样有助于搜索引擎记录图片内容。

Instructions

Camper Cat 已经大体写好了博客页面。他打算使用忍者刀图片作为两篇文章之间的分割线，并为图片添加一个空的alt属性（注意：这里img标签的src属性提供的链接是无效的，因此页面上可能不会显示图片，不用担心）。

Tests

tests:
  - text: '你的<code>img</code>标签应该包含<code>alt</code>属性。'
    testString: assert(!($('img').attr('alt') == undefined));
  - text: '<code>alt</code>属性对应的值应该为空。'
    testString: assert($('img').attr('alt') == '');

Challenge Seed

<h1>Deep Thoughts with Master Camper Cat</h1>
<article>
  <h2>Defeating your Foe: the Red Dot is Ours!</h2>
  <p>To Come...</p>
</article>

<img src="samuraiSwords.jpeg">

<article>
  <h2>Is Chuck Norris a Cat Person?</h2>
  <p>To Come...</p>
</article>

Solution

// solution required

2.1 KiB Raw Blame History