图片标签的介绍＜img＞

图片标签的介绍<img>

        使用场景：在网页中显示图片           

        代码：<img src="文件路径" alt="替换文本" title="提示文本" width="宽度" height="高度">

                属性="属性值"

                src "文件路径"

                alt "图片加载失败时，才显示替换文本"

                title "鼠标放上去时出现的提示文本"

                width和height "图片的宽度和高度，只设置一个时，另一个会按比例自动缩放"

       属性注意点：

                    1 标签的属性写在开始标签内部

                    2 标签上可以同时存在多个属性

                    3 属性之间以空格隔开

                    4 标签名与属性之间必须以空格隔开

                    5 属性之间没有顺序之分

        特点：

                1 单标签

                2 img标签需要展示对应的效果，需要借助标签的属性进行设置！

        例题：

    <p>正常图片</p>
    <img src="./images/弥豆子.jpg">
    <p>路径出错情况</p>
    <img src="./img/弥豆子.jpg" alt="这是鬼灭之刃中的弥豆子">
    <p>放鼠标上去会显示图片信息</p>
    <img src="./images/弥豆子.jpg" alt="这是鬼灭之刃中的弥豆子" title="弥豆子">
    <p>只设置宽度</p>
    <img src="./images/弥豆子.jpg" alt="这是鬼灭之刃中的弥豆子" title="弥豆子" width="1000">
    <p>只设置高度</p>
    <img src="./images/弥豆子.jpg" alt="这是鬼灭之刃中的弥豆子" title="弥豆子" height="500">
    <p>宽度和高度同时设置，出现图片变形</p>
    <img src="./images/弥豆子.jpg" alt="这是鬼灭之刃中的弥豆子" title="弥豆子" width="2000" height="500">

效果图： 

---

以上是作者学习总结，分享所学，共同进步。如若哪处有误，感谢指出！