JavaWeb学习之路(17)–HTML之图像-阿里云开发者社区

开发者社区> 程序员大阳> 正文

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

简介: 本文目录 1. 前言 2. 显示一张图片 3. 图片的可替换文本 4. 将图片放入文件夹 5. 小结与拓展
+关注继续查看

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. 小结与拓展

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


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


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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
2020年,我们该如何学习 WEB 前端开发
每当想要开始学习,脑子里总会跳出一系列问题:WEB前端的学习先后顺序是什么?PC端必须要掌握哪些知识和框架?移动端要掌握哪些知识和框架?TypeScript和node.js是否为可学可不学?新手应该按照什么先后次第学习呢?本文是阿里巴巴淘系技术部高级前端工程师——小问的个人经验总结,希望帮到处于迷茫期的你!
2815 0
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
8449 0
算法学习之路|部分A+B
正整数A的“DA(为1位整数)部分”定义为由A中所有DA组成的新整数PA。例如:给定A = 3862767,DA = 6,则A的“6部分”PA是66,因为A中有2个6。
885 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
12070 0
Java校招学习之路的经验总结——《我的Java打怪日记》
不论科班还是非科班,不论大一还是研二,都可以看看,希望对你有所帮助。
8720 0
从零开始学习 webservice第一集,java webservice简单实例入门教程
现在从零开始学习webservice 概念自己百度搜,总之,webservice就相当于一个接口,就像你走进了一家售货店,你不需要知道这家店怎么卖给你东西,你拿着钱去,说我要一包玉溪,人家就会给你返回一包玉溪烟,这就是webservice。
1478 0
+关注
程序员大阳
努力努力再努力
588
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载