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

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


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


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

相关文章
|
9月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
9月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
数据可视化 前端开发
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
本文介绍了如何在Twaver-HTML5中使用鹰眼(Overview)可视化视图组件,它作为Network的缩略图,允许用户通过缩略图导航Network,支持单击、双击和框选操作来控制Network视图。
367 5
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
272 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
|
移动开发 数据可视化 HTML5
Twaver-HTML5基础学习(40)表格可视化视图组件(Table)
本文介绍了如何在Twaver-HTML5中使用表格可视化视图组件(Table),包括创建表格、定义列对象、实现数据绑定和排序,以及处理表格事件和获取表格数据的方法。
367 2
HTML 图像1
在HTML中,图像通过`&lt;img&gt;`标签定义,此标签仅含属性而无闭合标签。要显示图像,需指定源属性`src`,其值为图像的URL地址。此外,推荐使用`alt`属性提供替代文本,以增强页面的可访问性。图像的高度和宽度可通过`height`和`width`属性设置,以确保页面加载时布局稳定。使用图像时应注意数量和路径,避免影响页面加载速度和显示效果。
html基础知识学习
html基础知识学习
203 0
|
前端开发 数据安全/隐私保护
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第6章表格与表单
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第6章表格与表单
271 0
|
移动开发 前端开发 HTML5
HTML5学习-表格标签
HTML5学习-表格标签