1.6 KiB
1.6 KiB
id, title, challengeType, videoUrl, forumTopicId
| id | title | challengeType | videoUrl | forumTopicId |
|---|---|---|---|---|
| bad87fee1348bd9aedf08812 | 给网站添加图片 | 0 | https://scrimba.com/p/pVMPUv/c8EbJf2 | 16640 |
--description--
用img元素来为你的网站添加图片，其中src属性指向一个图片的地址。
例如：
<img src="https://www.freecatphotoapp.com/your-image.jpg">
注意：img元素是没有结束标记的。
所有的img元素必须有alt属性，alt属性的文本是当图片无法加载时显示的替代文本，这对于通过屏幕阅读器来浏览网页的用户非常重要。
注意：如果图片是纯装饰性的，用一个空的alt是最佳实践。
理想情况下，alt属性不应该包含特殊字符，除非必要。
让我们给上面例子的img添加alt属性。
<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="作者站在沙滩上竖起两个大拇指">
--instructions--
让我们给网站添加图片：
在main元素里面，给p前面插入一个img元素
现在设置src属性指向这个地址：
https://bit.ly/fcc-relaxing-cat
最后不要忘记给图片添加一个alt文本。
--hints--
网页应该有一张图片。
assert($('img').length);
img 应该有一个src属性，指向猫咪图片。
assert(/^https:\/\/bit\.ly\/fcc-relaxing-cat$/i.test($('img').attr('src')));
img 元素的alt属性值不应为空。
assert(
$('img').attr('alt') &&
$('img').attr('alt').length &&
/<img\S*alt=(['"])(?!\1|>)\S+\1\S*\/?>/.test(code.replace(/\s/g, ''))
);