Web前端-4-html-图片标签

最新推荐文章于 2023-05-24 23:15:54 发布

karry_孙二

最新推荐文章于 2023-05-24 23:15:54 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端基础

本文链接：https://blog.youkuaiyun.com/qq_39620483/article/details/84075476

Web前端基础专栏收录该内容

29 篇文章

订阅专栏

本文介绍了HTML中用于插入图片的<img>标签，包括其基本语法、src、alt、title、width/height以及border属性的使用，同时讲解了图片地址的相对路径表示法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片标签

1）<img>标签可以在网页上插入一张图片，它是独立使用的标签，通过“src”属性定义图片的地址，通过“alt”属性定义图片加载失

败时显示的文字，以及对搜索引擎和盲人读屏软件的支持。

2）<img>标记创建的是被引用图像的占位空间，语法格式如下。

像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址即

url分为绝对地址和相对地址。

<img>标记的作用是嵌入图像，

3）图片标记含多个属性，如下。

属性值	说明
src	图像地址
alt	添加图像的代替文字
width/height	设置图像宽度/高度
border	设置图像边框

①src属性

src属性为必须属性，其他属性为可选项。src属性用于指定图像文件所在的路径，这个路径可以是相对路径也可以是绝对路径。

②alt属性

alt属性用于添加图像的替代文。<img>标记的alt属性用于添加图像的替代文字，若图片没有被下载，图片位置会显示此替代文字，起到提醒说明的作用。

③title属性

当浏览网页时，若图像下载完成，鼠标放在图像上时，鼠标旁会出现此替代文字。

④width/height属性

width/height属性用于设置图像宽度/高度。<img>标记的属性width和height用来设置图像的宽度和高度，默认情况下，网页中显示的图像保持原图的尺寸。即不设置图像的宽度和高度，图像大小与原图一致。

⑤border属性

图像默认是没有边框的，除非图像在a元素内部。<img>标记的border属性可以为图像定义边框的宽度，既可增加或者去掉(border="0")图像的边框。边框颜色默认为黑色。

4）图片地址（一般相对地址用的多）

“ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。

“ ../ ” 表示当前文件所在目录下的上一级目录，比如：“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
    <img src="./weimei.jpeg" alt="这是一张唯美的图片" title="图片标题" width="50" height="50">
    <img src="../image/hua.jpeg" alt="这是一张花的图片" title="图片标题" width="100" height="100">
</body>
</html>