这篇博客详细介绍了如何在HTML中设置页面背景颜色和图片，包括使用`<body>`标签的`bgcolor`和`background`属性。此外，还探讨了`<img>`标签的应用，如设置图片路径、调整图片大小、添加边框、设置鼠标悬停提示以及图片加载失败时的替代文本。同时，讲解了如何通过`align`属性调整文本相对于图片的位置，包括`bottom`, `top`和`middle`三种情况。
1、设置背景颜色和图片
注意：<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
语法：<img src=“url”/>
或<img src=“url”>两尖括号之间不能有东西
背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>007-背景颜色和背景图片</title>
</head>
<!--
bgcolor : 设置背景色
background : 设置背景图片
以上的设置都是对背景进行设置
-->
<body bgcolor = "red" background="chanyeol.jpg">
</body>
</html>
2、图片img标签
2.1、设置图片路径
- img标 签 是 图 片 标 签 , 用 来 显 示 图 片
- src 属 性 可 以 设 置 图 片 的 路 径
在 JavaSE中 路 径 也 分 为 相 对 路 径 和 绝 对 路 径 .
相 对 路 径 : 从 工 程 名 开 始 算
绝 对 路 径 : 盘 符 : / 目 录 / 文 件 名
在 web中 路 径 分 为 相 对 路 径 和 绝 对 路 径 两 种 相 对 路 径 :
. : 表 示 当 前 文 件 所 在 的 目 录
… : 表 示 当 前 文 件 所 在 的 上 一 级 目 录
文 件 名 : 表 示 当 前 文 件 所 在 目 录 的 文 件 , 相 当 于./ 文 件 名./可 以 省 略
绝 对 路 径 : 正 确 格 式 是 : http://ip:port/ 工 程 名 / 资 源 路 径
错 误 格 式 是 :盘 符 😕 目 录 / 文 件 名
2.2、设置图片的大小
1、设置图片宽度和高度的时候，只设置宽度，高度会进行等比例缩放。
2、img标签就是图片标签
3、src属性是图片的路径
4、width设置宽度,height设置高度
5、title设置鼠标悬停时显示的信息。
6、alt设置图片加载失败时显示的提示信息，属 性 设 置 当 指 定 路 径 找 不 到 图 片 时 , 用 来 代 替 显 示 的 文 本 内 容。
7、border 属 性 设 置 图 片 边 框 大 小
<img src="chanyeol.jpg" width="800" border="1px" title="这是灿烈的照片">
<img src="chanyeol1.jpg" width="500">
<img src="chanyeol2.jpg" width="600">
<img src="chanyeol.jpg" width="800" border="1px" title="这是灿烈的照片">
<!--chanyeol11.jpg没此路径的图片-->
<img src="chanyeol11.jpg" width="500" alt="找不到图片">
<img src="chanyeol2.jpg" width="600">
2.3、设置文本在图片的位置
align设置文本在图片的位置，默认为bottom在图片的左下方
bottom:图片左下方
<b>图片</b><img align="bottom" src="chanyeol1.jpg" width="200">
top:图片左上方
<b>图片</b><img align="top" src="chanyeol1.jpg" width="200">
middle:图片左边
<b>图片</b><img align="middle" src="chanyeol1.jpg" width="200">
扫一扫
3013
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
