图像标签与相对路径和绝对路径

最新推荐文章于 2022-06-22 15:40:49 发布

我不能创造的我都不能理解

最新推荐文章于 2022-06-22 15:40:49 发布

阅读量142

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/weixin_43972159/article/details/118465771

版权

笔记专栏收录该内容

38 篇文章 0 订阅

订阅专栏

图像标签

图像标签的其它属性

属性	属性值	说明
src	图片的路径	必须属性
alt	文本	图像不能显示时,显示此文本
title	文本	提示文本,属性放在图像上,显示的文字
width	像素	图像宽度
height	像素	图像的高度
border	像素	图像的边框粗细

要么修改高度,要么修改宽度,如果同时修改,可能会出现图像压扁的情况出现

注意点

图像标签可以有多个属性,必须写在标签名的后面
属性之间不分先后顺序,标签名和属性,属性之间的均以空格分开
属性采取键值对的格式,即kv的格式,属性=属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像标签</title>
</head>
<body>
    <h4>这是一个图像:</h4>
    <img src="img/img.png" alt="" title="鼠标悬停的时候,显示的文字">
    <h4>这个图像不存在:</h4>
    <img src="img1.png" alt="这张图片不存在,看你怎么显示出来...">

    <p>开始学习其他的几个属性</p>
    <h4>weight属性</h4>
    <img src="img/img.png" alt="" title="鼠标悬停的时候,显示的文字" width="400px" height="200px">


</body>
</html>

路径

页面上的图片非常多,通过我们会新建一个文件夹来存放这些图像文件,这时再查找图像文件,就需要采用"路径"的方式来指定图像文件的存储的位置

相对路径

以引用文件所在位置为参考,而建立出的目录路径,简单来说,就是图片相对于html页面的位置

相对路径分类	符号	说明
同一级路径		很好理解
下一级路径	/	很好理解
上一级路径	…/	很好理解

绝对路径

是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径

例如,C:\Users\练习\img.png 或者完整的网络地址

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路径练习</title>
</head>
<body>
    <h4>同一级目录</h4>
    <img src="img.png" alt="aaa">
    <p>------------------</p>

    <h4>下一级目录</h4>
    <img src="img/img.png" alt="aaa">
    <p>-------------------</p>

    <h4>上一级目录</h4>
    <img src="../img/img.png" alt="aaa" width="500" >
    
    <h4>绝对地址</h4>
    <img src="C:\Users\ALIENWARE\Desktop\manager\manager-myself\2021\技术文章\待完成\pink\html部分\练习\img.png" alt="这是一个绝对路径">
    <h4>这是一个网络路径的绝对地址</h4>

    <img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="网络图片的地址">

</body>
</html>

我不能创造的我都不能理解

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图像标签与相对路径和绝对路径

图像标签图像标签的其它属性属性属性值说明src图片的路径必须属性alt文本图像不能显示时,显示此文本title文本提示文本,属性放在图像上,显示的文字width像素图像宽度height像素图像的高度border像素图像的边框粗细要么修改高度,要么修改宽度,如果同时修改,可能会出现图像压扁的情况出现注意点图像标签可以有多个属性,必须写在标签名的后面属性之间不分先后顺序,标签名和属性,属性之间的均以空格分开属性采取键
复制链接

扫一扫