前端笔记02 - 图像标签、路径

最新推荐文章于 2022-08-26 01:59:58 发布

醒醒，写bug了！

最新推荐文章于 2022-08-26 01:59:58 发布

阅读量113

点赞数 2

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

本文链接：https://blog.csdn.net/kukudeqi/article/details/120168726

版权

前端笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文详细探讨了HTML中的图像标签<img>的使用，包括如何设置图像源URL，相对路径和绝对路径的区别，以及如何处理图像加载失败的情况。通过实例解析，帮助读者深入理解HTML图像显示的原理和最佳实践。

摘要由CSDN通过智能技术生成

代码

<!DOCTYPE html>
<html lang="zh-CN">

<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>stud-002</title>
</head>

<body>

    <!--<img>是图像标签，其中src是必须要有的。“”中是文件的路径名和文件的名称-->
    <!--
        图像标签需要注意：
            1：图像标签可以拥有多个属性，必须写在标签名的后面。
            2：属性之间不分先后顺序，标签民与属性、属性与属性之间均以空格分开。
            3：属性采用键值对的格式，即key="value"的格式，属性="属性值"。
    -->
    <h4>图像标签的使用</h4>
    <img src="R-C.jpg" />
    <h4>alt替换文本，图片显示不出来的时候用文字代替</h4>
    <img src="R-C1.jpg" alt="我很帅，我知道" />
    <h4>title提示文本，鼠标放到图片上提示的文字</h4>
    <img src="R-C.jpg" title="我很帅，我知道" />

    <h4>width给图像设定宽度</h4>
    <img src="R-C.jpg" width="99" />
    <h4>height给图像设定高度</h4>
    <img src="R-C.jpg" height="300" />
    <h4>border给图像设置边框</h4>
    <img src="R-C.jpg" border="20" />

    <!--
        相对路径：以文件所在位置为参考基础，而建立出的目录路径
    -->
    <h2>使用相对路径</h2>
    <h4>同一级路径</h4>
    <img src="R-C.jpg" />
    <!--访问下一级路径要用 / -->
    <h4>下一级路径</h4>
    <img src="images/R-C.jpg" />
    <!--访问上一级路径需要 ../ -->
    <h4>访问上一级路径</h4>
    <img src="../R-C.jpg" />

    <!--
        绝对路径：是指目录下的绝对位置，直接达到目标位置，通常是从盘符开始的路径
    -->
    <h2>使用绝对路径</h2>
    <h4>绝对路径</h4>
    <img src="E:\MyWeb\学习\R-C.jpg" />
    <h4>绝对路径，使用网络地址</h4>
    <img src="https://tse1-mm.cn.bing.net/th/id/R-C.d6ae43a6a8ace146c3551a35ff6c0178?rik=6PWivHtYRDg7XA&riu=http%3a%2f%2fwww.3gmfw.cn%2farticle%2fUploadPic%2f2013-7%2f201371322427285.jpg&ehk=n336%2fe9NLyuUGnMlh%2foo8h6Y1eVB3PeVGHy8Hj0TBwY%3d&risl=&pid=ImgRaw&r=0"
    />

</body>

</html>