Java网络 1.8 图片

图片

能使用的图片类型

语法

alt 属性

相对路径

图片在文件夹里

图片在浅一层文件夹里

练习

能使用的图片类型

页面上可以插入的图片类型是: jpg (jpeg), gif, png, bmp.

不能再网页中插入的图片格式是: psd, ai.

语法

HTML 页面不是直接插入图片, 而是插入图片的引用地址, 所以也要把图片上传到服务器上.

插入方法:

1

img 是英语 image “图片” 的简写. src 是英语 source “资源” 的简写. src 是 img 标签的属性, https://www.huoban.com/news/zb_users/upload/2022/05/20220529022315_65971.jpg 是这个属性的值.

这个标签和我们之前学的都不一样, 因为这个标签不是 “对儿”. 自封闭标签, 也称为单标签.

为什么? 原因很简单, 如果对, 里面就要有内容, 表示这给这个内容增加语义. 比如:

哈哈哈哈，我是主标题啦！！！

1

图片就是一个图片, 不需要给什么文字增加语义, 所以单标签就可以了:

1

前面提到的 meta 也是自封闭标签:

1

alt 属性

alt 属性:

1

alt 是英语 alternate “替代” 的意思, 就表示不管因为为什么原因. 当这个图片无法被显示的时候, 出现的替代文字. (有的浏览器不支持)

相对路径

HTML 中插入图片, 所以现在有两个文件. 一个 html 文件, 一个是 jpg 文件.

我们关心的就是这两个文件的相对位置. 即使这个网站项目, 被用 u 盘拷给别人, 只要相对路径不变. 图片一定能够正常显示.

图片在文件夹里

如果 html 页面和 images 文件夹在同一级. https://www.huoban.com/news/zb_users/upload/2022/05/20220529022316_41796.jpg 图片在 images 文件下, 则:

1

如果在很深的文件夹中, 也不怕. 我们可以一直罗列下去:

1

图片在浅一层文件夹里

如果 html 文件在 web 文件夹下, 而 3.jpg 和 web 文件夹同一级:

1

如果是上两级:

1

还可以更为复杂:

1

上两级的文件夹中 images 文件夹中的 1 的文件夹中的 https://www.huoban.com/news/zb_users/upload/2022/05/20220529022316_41796.jpg.

练习

有如下文件层次图:

能在 index.html 页面中, 插图图片 1.png 的语句是?

标准答案:

1

解释:

现在 document 是最大的文件夹, 里面有两个文件夹 work 和 photo. work 中有一个文件夹叫做 myweb. myweb 文件里面, 上一级就是 work 文件夹, 上两级就是 document 文件夹. 通过 document 文件夹当做一个中转栈, 进入 photo 文件夹, 看到了 1.png.

Java 网络

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。