2-图片展示案例

2.1 案例需求

img

2.2 技术分析

1,图片标签

  • img标签中的img其实是英文image的缩写, img标签的作用, 就是告诉浏览器我们需要显示一张图片
1
2
语法:
<img src="图片路径" width="宽" height="高" alt="图片描述" title="用于告诉浏览器, 当鼠标悬停在图片上时, 需要弹出的描述框中显示什么内容"/>
  • 示例代码
1
2
3
    <!--掌握: src属性: 图片的路径; width属性:指定图片的宽度 ; height属性: 指定图片的高度;
        了解: alt属性: 图片的描述(只有图片显示错误的时候才有效果); title属性: 鼠标放上去显示的标题-->
    <img src="../img/b.jpg" width="400px" height="200px" alt="美女" title="哈哈哈哈"/>

2.路径问题

2.1相对路径

​ 相对路径就是每次都从.html文件所在的文件夹开始查找, 我们称之为相对路径

2.1.1同级

​ 同级就是"图片"和".html文件"存储在同一个文件夹中

​ 格式: src="QRCode.jpg"

​ 含义: 在.html文件所在的文件夹中查找名称叫做QRCode.jpg的图片

2.1.2上级

​ 上级就是"存储图片的位置"和存"储代码的文件夹"在同一个文件夹中

​ 格式: src="../QRCode.jpg"

​ 含义：在.html文件所在的文件夹中找到这个文件夹的上一级文件夹, 然后再在上一级文件夹中找到名称叫QRCode.jpg, 其中../ 代表找到当前文件夹的上一级文件夹

2.2绝对路径

​ 绝对路径就是每次都从指定的盘符开始查找.

绝对路径注意点:

​ 1.路径中不要出现中文, 否则可能出现未知问题

​ 2.如果是通过"相对路径"来指定图片, 不能跨盘符,例如.html文件在C盘, 那么不能去查找D盘图片

2.3 思路分析

  • 创建标题标签
  • 创建一个图片标签, 创建font标签, 创建下划线标签(复制4个)

2.4 代码实现

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例二图片展示</title>
</head>
<body>
    <!--- 创建标题标签
        - 创建一个图片标签, 创建font标签, 创建下划线标签(复制4个)
    -->
    <h1>家用电器排行</h1>
    <img src="../img/tv01.jpg"> <font size="3">TCL电视, 品质保障</font>
    <hr/>
    <img src="../img/tv02.jpg"> <font size="3">TCL电视, 品质保障</font>
    <hr/>
    <img src="../img/tv03.jpg"> <font size="3">TCL电视, 品质保障</font>
    <hr/>
    <img src="../img/tv04.jpg"> <font size="3">TCL电视, 品质保障</font>
    <hr/>
    <img src="../img/tv05.jpg"> <font size="3">TCL电视, 品质保障</font>
    <hr/>

</body>
</html>