Wed掌握＜img＞图片标签：从alt到border的使用技巧

原创于 2025-10-26 16:06:16 发布 · 583 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

AI的出现，是否能替代IT从业者？ 10w+人浏览 954人参与

前面我们只是简单了解一下<img>图片标签的使用，针对图片路径（src属性）进行了简单练习

下面的练习将会进一步对图片标签的其他属性进行了解

alt属性：替换文本

当无法正常显示文本内容时，可通过alt属性提供替代文本提示。

下面代码展示的是图片路径正常的效果：只能看到图片，不能看到文字

 <!-- 简单了解图片标签其他属性 -->
    <!-- 1.alt属性:替换文本 -->
    <!-- 下面将演示，图片正常显示的效果 -->
    <img src = "测试图片标签2.jpg" alt = "这是一张普通的图片">

注意：复制前面代码的时候，图片路径修改成自己目录里面存在的，且路径格式正确。

展示一下正确的图片路径会出现的效果：会发现图片正常显示，但是没有发现有文字出现。

如果输入的图片路径是错误或者图片不存在的情况会怎样呢？

下面是错误路径的示范代码：

<!-- 这里我们演示一次，错误的图片地址 
         看看会出现什么情况
    -->
    <img src = ".../测试图片标签2.jpg" alt = "这是一张普通的图片">

展示一下错误的图片路径会出现的效果：直接返回——alt属性输入的文本内容

title属性：提示文本

当鼠标悬停在文本上方时，稍等片刻便会弹出提示框，显示我们预先输入的文本内容

 <!-- 2.title属性：提示文本 -->
     <!-- 使用title属性可以输入描述图片的内容 -->
     <img src = "测试图片标签2.jpg" title = "帅气头像">

展示一下提示文本的效果：文本框一般都是出现在光标下方

width和height属性：控制元素尺寸

width属性定义元素的宽度，height属性定义元素的高度

下面代码直接可以看出width跟height对属性的影响

  <!-- 3.width属性：控制元素宽度
            height属性：控制元素高度 -->
    <img src = "测试图片标签2.jpg" >
    <img src = "测试图片标签2.jpg" width = "500px" >
    <img src = "测试图片标签2.jpg" height = "100px">
    <img src = "测试图片标签2.jpg" width = "20px" height="50px">

提示：px 是 pixel （像素）的缩写。

这里表示图片在屏幕上显示是为500个像素宽

width = "500px"

展示一下控制元素属性的效果：更高的像素数意味着更大的图像尺寸

border属性：设置边框

边框是围绕元素内容及内边距的线条，其样式（实线/虚线）、粗细、颜色等均由CSS属性控制。

HTML负责网页结构，CSS则专注于样式呈现

1.边框会有上边框、下边框、左边框、右边框，下面是各种边框表示方式：

如果统一设置样式可以使用：border

上边框：border-top

下边框：border-bottom

左边框：border-left

右边框：border-right

2.边框样式有实线、虚线、点线，下面是各种样式表示方式：

实线：solid

虚线：dashed

点线：dotted

3.边框支持颜色自定义，下面是两种设置颜色的方法：

使用十六进制色值（如 #00ff00）
直接输入颜色英文名称（如 "green"）

下面代码是对于在<img>标签下简单使用border属性

   <!-- 4.broad属性：边框 -->
     <!-- 提到边框就要想到边框的宽度，边框的样式，边框的颜色 -->
      <!-- 下面例子展示上面提及的三种效果 -->


<img src ="project\测试图片标签.jpg" border = "30px">

<img src ="project\测试图片标签.jpg" border = "16px dotted red;">

<img src ="project\测试图片标签.jpg" style = "border :16px dotted red;">

边框属性使用效果展示：直接使用border属性无法单独设置边框样式和颜色。

需要通过搭配style属性才能实现边框样式和颜色的自定义设置。

为什么设置了样式后，图片的边框会呈现样式和颜色的变化？

正如之前所述，HTML负责构建网页的结构，而CSS则专门控制元素的样式表现。

在上面的代码示例"style = 'border :16px dotted red;'"中，我们看到的正是CSS的样式规则实现。

HTML仅提供简单的黑色实线边框样式，缺乏自定义样式和颜色的设置选项。

CSS规则简写

border : 16px solid red;

以下是实现 border 属性扩展的代码：

  <!-- 4.broad属性：边框 -->
     <!-- 提到边框就要想到边框的宽度，边框的样式，边框的颜色 -->
      <!-- 下面例子展示上面提及的三种效果 -->
       <img src ="project\测试图片标签.jpg" class = "testborder">
       <style>
      .testborder{
        /* 测试样式：soild实线 dashed虚线 dotted点线 */
        /* 边框颜色选择使用border-color */
        border-top: 15px dashed;
        border-color: blue;
      }
    </style>

展示一下图片边框效果：