Pro015-从零开始HTML[#015]——10分钟-img 显示图像

标签

#015_Apl_img

    当我们在 HTML 文档上编辑的文字已经无法直观的体现内容的时候，就需要用到图像来传达。那么，我们如何在 HTML 上显示图像呢？那么这节课，我们就来学习，如何使用 img 图像标签，在页面上显示图像。

---

如何使用 img 标签？

    在 HTML 中，图像由 标签定义，这个标签是一个空标签，和< br />、

---

一样，img 需要在开始标签上将这个元素关闭。在页面上显示图像，你需要使用源属性 src (source)。源属性的值描述的时图像的 URL 地址。

img 标签显示图像

效果图

图像无法显示怎么办？

    在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

    在这里，我们可以使用 img 元素 的 alt 属性，来为图像定义一小段预备的可替换的文本。

可替换的文本

效果图

还记得我们的项目文件夹嘛？把图片放入 img 文件夹中，便于管理。

项目文件夹

图像源放置入对应的项目管理文件夹中

如何显示网络来源的图像？

    首先，我们可以在网页上右键图片，点击其中一个叫【复制图片地址】或者【复制图片URL】的选项，就可以复制到网络图像来源的 URL 。

    然后我们把这一串地址，塞进刚才 img 标签的 src 属性中去。

将网络图像的 URL 放入 src 属性值中

效果图

    非常好，我们把上一个课程中展示的图片，用网络来源的方法显示出来了。

注意事项

    但是要注意的时，不要轻易随意使用网络来源的图像。虽然我们可以通过这个方法从别的网页上摘抄图像到我们的网页上显示出来。从而导致，我们将与图像的作者、或者被抄袭的网页所有方产生版权冲突。

    这也就是网络上常说的盗链，这是一个非常坏的行为，所以尽量不要去做这种事。

    最好就是，得到图像作者的允许之后，将图片放到本地工程项目文件中使用。这样更方便维护、也减少的版权冲突。