背景图片"/>
HTML的背景颜色和背景图片
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">
更多推荐
HTML的背景颜色和背景图片
发布评论