4、HTML图片

HTML图片

< img > 标签及src属性

< img >——图片标签，src属性——来源（地址）

效果：

标签的alt属性

alt属性——可替换的文本（当图片显示不出来的时候，它就会把这个文本显示出来）

效果：

< img > 的title属性

title属性——对图片额外的补充说明（当鼠标在图片上悬停时，它的文本就会显示出来）

效果：

HTML中常用的图片格式

HTML中常用图片格式及透明通道的实例

效果：

透明通道：指图片镂空的部分可以直接看到背景（png支持透明通道，而jpg和gif是不支持这种功能的）

访问图片的方式

网络图片效果图：

本地图片绝对路径效果图：

本地图片相对路径效果图：

HTML图片-课后作业

1.下面图片标签哪个是正确的？

A：<img src="qiuqiu.jpg"></img>
B：<img src="qiuqiu.jpg">

我的答案：

B是正确的，因为 标签是单标签。

2.在工作中，显示图片是尽量使用相对路径，还是绝对路径？

当链接到同一网站的其他位置时，你应该使用相对路径；

当链接到另一个网站时，你需要使用绝对路径。

3.打开https://www.mi.com/seckill/ 通过控制台获取到任意一张商品图片链接，在自己的页面里，用网络绝对路径的形式，把图片显示出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1558946216.38041386.jpg">
</body>
</html>

4.把上面图片下载到本地，用相对路径的形式把图片显示出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="小米闪购商品.jpg">
</body>
</html>

5.给图片加上提示信息，”这是小米闪购的商品“。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1558946216.38041386.jpg" title="这是小米闪购的商品">
</body>
</html>

6.请阅读资料

https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML

posted @ 2021-03-03 12:05  丨Mr丨C  阅读(550)  评论(0)    收藏  举报