图像标签img

卡夫卡的baby

已于 2022-06-29 23:32:22 修改

阅读量530

点赞数

分类专栏： html 文章标签：大数据 html

于 2022-06-28 14:29:36 首次发布

本文链接：https://blog.csdn.net/weixin_72303943/article/details/125501726

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

img 元素向网页中嵌入一幅图像。

请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。

<img> 标签有两个必需的属性：src 属性和 alt 属性。

属性	值	描述
src	URL	规定显示图像的URL
alt	text	规定图像的替代文本
width	pixels；%	定义图像的宽度
height	pixels；%	定义图像的高度

网页中使用图像标签，注意：宽度和高度的设置：

 <div>
        <!-- 给图片添加 宽度，高度会 自动 等比例缩放 -->
        <img src="./images/w1.jpeg" alt="" width="220" title="" >
    </div>
    <div>
        <!-- 一般 我们不给图 指定一个单一的 高度值 去使用 -->
        <img src="./images/f1.jpg" alt=""  height="240">
    </div>

图像标签中引入图片，涉及到图片的后缀名的说明，如下所示：

<!-- 背景颜色bgcolor -->
<body bgcolor="pink">
        <!-- img图像标签 单标签 只有起始标签 没有结束标签 -->
    <!-- 引用的图片的 后缀名 可以是.jpeg, .jpg  .gif(一般是动态的图）  .png -->
    <img src="./images/nvhai.webp.jpg" alt="">
    <img src="./images/shenxiang.webp.jpg" alt="">
    <img src="./images/xioameihao.webp.jpg" alt="">
    <img src="./images/tiankong.webp.jpg" alt="">
    <img src="./images/huahai.webp.jpg" alt=""><br><br>

     <!--背景透明的png后缀的图片，他的透明区域，会跟着指定区域的背景走，
    指定区域的背景图是什么颜色，他的透明区域就是什么颜色  -->
    <img src="./images/logo.png" alt=""><br>

     <!-- 注意：xxx.webp后缀的图，是企业技术开发人员后期处理生成的一个指定后缀名 -->
    <!-- 如果图本身是矩形，一般给图添加宽度，不加高度，让高度跟着宽度进行等比例缩放 -->
    <img src="./images/wangzhangguangmang.gif" alt="" width="400"><br>
    <img src="./images/xingqiu.gif" alt="" width="400">
    <img src="./images/weimei.webp.jpg" alt="" width="400">
    <img src="./images/shanshui.gif" alt="" width="400" height="500">
    <img src="./images/xiaoniao.gif" alt="" width="300">

预览：