JavaWeb学习之路(17)–HTML之图像

1. 前言

图像标签是<img>,作用是在网页上显示图片。


2. 显示一张图片

图片没法用文字描述,很难把图片放到img标签的内容部分。


但是图片一般是一个文件,我们可以通过源属性,将图片显示到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,所以该标签就会加载该图片文件。


所以效果如下:



3. 图片的可替换文本

有时候图片不小心丢失了,当然一般情况下是不会发生的,但是如果发生了,则图片无法正常显示,效果如下:


这样看起来就不是很友好了,此时我们可以给图片添加一个可替换文本,当图片不能正常显示时,可以显示一段文本内容替换。


 <p>

       显示一个图片

       <img src="1.jpg" alt="java图片">

   </p>



其实效果也不是很好,所以还是尽量要保证图片是正确的、存在的。


4. 将图片放入文件夹

如果图片比较多,那么图片都跟网页混在一起,会很杂乱。


我们可以建立一个images文件夹下,将1.jpg放入其中,此时hello.html与imags处于同一目录。所以代码更改为:


<p>

       显示一个图片

       <img src="./images/1.jpg">

   </p>


解释下,./表示当前目录,然后./images/表示当前目录的images文件夹下,最后./images/1.jpg就表示跟当前网页同目录的images文件夹下的1.jpg文件。


另外,当访问当前目录的时候,可以省略./,所以上述写法等同于:


       <img src="images/1.jpg">

1

5. 小结与拓展

本篇讲述了如何在网页上显示图像,以及如何加载文件夹下的图像。


其实还可以加载当前文件上层目录下的图片,使用的语法为../,..就表示当前文件所在目录的上级目录。


这个比较复杂,暂时不需要大家掌握,感兴趣的同学可以自行去尝试。

上一篇:使用sourceTree 工具


下一篇:解决scanf()函数不安全因素的一劳永逸做法