零基础HTML教程(18)--图像
点此查看本系列全部文章 零基础Java全栈教程
文章目录
- 1. 任务背景
- 2. 任务目标
- 3. 相关知识点
- 4. 任务实操
- 4.1 显示一张图片
- 4.2 图片的可替换文本
- 4.3 将图片放入文件夹
- 5. 任务总结
1. 任务背景
HTML号称：超文本传输语言。所谓“超”着，超级、超越的意思。
但是之前咱们所讲的，不论是标题还是段落，都是文本，完全没提现出“超”的意思来。
本节，咱们就往下HTML中添加图像，开始展示超文本的内容。
2. 任务目标
学习图像标签的使用。
3. 相关知识点
图像标签是
通过图像标签的属性src来指定图像标签加载的文件。
通过图像标签的属性alt来指定图片文件不存在时的替换文本。
4. 任务实操
4.1 显示一张图片
图片没法用文字描述，很难把图片放到img标签的内容部分。
但是图片一般是一个文件，我们可以通过图片标签的属性，指定加载的图片文件名。
首先将图片文件1.jpg和我们的网页hello.html放到一个文件下，然后编写代码如下：
DOCTYPE html>
<html><head><title>图像实例title><meta charset="utf-8">
head><body><p>显示一个图片<img src="1.jpg">p>
body>html>
当浏览器在处理到img标签时，发现该标签src属性的值为1.jpg，所以该标签就会加载该图片文件。
所以效果如下：
4.2 图片的可替换文本
有时候图片不小心丢失了，当然一般情况下是不会发生的，但是如果发生了，则图片无法正常显示，效果如下：
这样看起来就不是很友好了，此时我们可以给图片添加一个可替换文本，当图片不能正常显示时，可以显示一段文本内容替换。
<p>显示一个图片<img src="1.jpg" alt="java图片">p>
其实效果也不是很好，所以还是尽量要保证图片是正确的、存在的。
4.3 将图片放入文件夹
如果图片比较多，那么图片都跟网页混在一起，会很杂乱。
我们可以建立一个images文件夹下，将1.jpg放入其中，此时hello.html与images处于同一目录。所以代码更改为：
<p>显示一个图片<img src="./images/1.jpg">p>
解释下，./表示当前目录，然后./images/表示当前目录的images文件夹下，最后./images/1.jpg就表示跟当前网页同目录的images文件夹下的1.jpg文件。
另外，当访问当前目录的时候，可以省略./，所以上述写法等同于：
<img src="images/1.jpg">
5. 任务总结
本篇讲述了如何在网页上显示图像，以及如何加载文件夹下的图像。
其实还可以加载当前文件上层目录下的图片，使用的语法为../，..就表示当前文件所在目录的上级目录。
这个比较复杂，暂时不需要大家掌握，感兴趣的同学可以自行去尝试。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！