小白前端入门笔记（八），怎么在网页中插入图片？

发布于

大家好，欢迎来到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属性的例子吧：

代码语言：javascript
复制
<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属性。

要求

  1. 你的页面应该有一张图片
  2. 你的图片标签需要有一个src属性指向kitten图片
  3. 你的图片标签当中应该有alt属性，并且不为空

编辑器

解答

很简单，我们只需要按照img的格式要求来添加一个img标签即可。

代码语言：javascript
复制
<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>

想要亲自动手尝试一下的同学不要忘了点击文末的阅读原文进行跳转哦~

文章就到这里，给个三连再走吧~

#图片标签#网站