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

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


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


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

相关文章
|
2月前
|
人工智能
|
3月前
|
数据可视化 前端开发
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
本文介绍了如何在Twaver-HTML5中使用鹰眼(Overview)可视化视图组件,它作为Network的缩略图,允许用户通过缩略图导航Network,支持单击、双击和框选操作来控制Network视图。
43 5
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
|
3月前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
36 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
|
3月前
Twaver-HTML5基础学习(38)劈分面板SplitPane
本文介绍了如何在Twaver-HTML5中使用SplitPane组件来创建可分割的面板,通过动态调整分割条来改变面板的大小,支持水平和垂直分割。
35 2
Twaver-HTML5基础学习(38)劈分面板SplitPane
|
1月前
|
存储
HTML 图像1
在HTML中,图像通过`&lt;img&gt;`标签定义,此标签仅含属性而无闭合标签。要显示图像,需指定源属性`src`,其值为图像的URL地址。此外,推荐使用`alt`属性提供替代文本,以增强页面的可访问性。图像的高度和宽度可通过`height`和`width`属性设置,以确保页面加载时布局稳定。使用图像时应注意数量和路径,避免影响页面加载速度和显示效果。
|
3月前
|
前端开发
Twaver-HTML5基础学习(37)network导出图片并下载
本文介绍了如何在Twaver-HTML5中将network导出为图片并提供下载,主要通过将network转换为canvas对象,然后转换为base64编码的图片进行展示和下载。
40 5
|
3月前
|
移动开发 数据可视化 HTML5
Twaver-HTML5基础学习(40)表格可视化视图组件(Table)
本文介绍了如何在Twaver-HTML5中使用表格可视化视图组件(Table),包括创建表格、定义列对象、实现数据绑定和排序,以及处理表格事件和获取表格数据的方法。
40 1
|
2月前
html基础知识学习
html基础知识学习
35 0
|
5天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
17 6