大家好,欢迎来到freecodecamp HTML专题第8篇。
今天的挑战关于img
标签。
背景知识
你可以通过使用img
标签在你的网站当中插入图片,并且可以用src
属性指定图片的地址。
这是一个例子:
代码语言:javascript复制<img src="https://www.freecatphotoapp.com/your-image.jpg">
注意,img
元素是self-closing的标签,也就是说它不需要再单独写一个closing tag。
所有的img
元素都必须要一个alt
属性,alt
属性当中的文本是用来给屏幕阅读器的(视力残障人士),并且可以在图片无法显示的时候用来填充。
注意:
如果图片仅仅用来装饰的,可以使用空字符串来填充alt
属性。
理想情况下alt
属性当中不应该包含特殊字符,让我们再来看一个包含了alt
属性的例子吧:
<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="A business cat wearing a necktie.">
题意
让我们试着在网站当中加入一张图片吧。
在现有的main
元素当中,p
标签之前,插入一个img
元素。并且将src
属性设置为:https://bit.ly/fcc-relaxing-cat。
最后,不要忘记了给img
元素加上alt
属性。
要求
- 你的页面应该有一张图片
- 你的图片标签需要有一个src属性指向kitten图片
- 你的图片标签当中应该有
alt
属性,并且不为空
编辑器
解答
很简单,我们只需要按照img
的格式要求来添加一个img
标签即可。
<h2>CatPhotoApp</h2>
<main>
<img src="https://bit.ly/fcc-relaxing-cat", alt="hello">
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
想要亲自动手尝试一下的同学不要忘了点击文末的阅读原文进行跳转哦~
文章就到这里,给个三连再走吧~