HTML/CSS1

news2024/11/17 7:45:15

1.前置说明

请点这里

2.img元素

格式：

<img src="图片地址" alt="占位文字" width="图片宽度" height="图片高度">

其中alt是当图片加载失败时显示的文字而且不同内核的浏览器显示出来的占位文字的效果也是不尽相同的
而如果同时设置了图片宽度和图片高度的话可能会导致图片比例失调为了保持原图片的比例我们可以只设置width/height 浏览器会自动根据比例来计算出另外一个属性
还有就是alt是html5中img元素的必要属性

接下来是一个小小的演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="图片路径失败">
</body>
</html>

在这里插入图片描述

img元素的src属性值可以通过绝对路径或者相对路径进行表示
绝对路径：完整的图片路径表现形式
相对路径：不完整的图片路径表现形式(其中 .表示当前文件所在的路径可以省略而…则表示当前文件的上一级路径)
接下来分别通过绝对路径和相对路径来演示一下两种的区别
绝对路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="图片路径失败">
</body>
</html>

在这里插入图片描述
相对路径
先展示一下文件结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="./img.png" alt="图片路径失败">
</body>
</html>

当然以上写法也可以省略./

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="img.png" alt="图片路径失败">
</body>
</html>

当然我也可以获取当前路径下的images文件夹下的image图片同样可以有两种方式表达图片的获取路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="images/img.png" alt="图片路径失败">
</body>
</html>

假设我们的文件结构如下图所示依然是想要获取image图片的话那么可以通过…的方式进行图片的获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="../img.png" alt="图片路径失败">
</body>
</html>