2、HTML ＜img＞标签（插入图片）

最新推荐文章于 2024-03-07 13:52:19 发布

不善表演

最新推荐文章于 2024-03-07 13:52:19 发布

阅读量5.5k

点赞数 4

分类专栏： HTML入门教程

本文链接：https://blog.csdn.net/weixin_44234912/article/details/109311438

版权

HTML入门教程专栏收录该内容

28 篇文章 26 订阅

订阅专栏

如果是 HTML 初学者，建议在使用图片前新建一个存放图片的文件夹，方便后期图片的整理。这是一个良好的习惯。

开发过程中，经常使用图像来美化页面，图像已经成为大多数网站的一个重要组成部分。都说一图胜千言，好的图像有助于制作出精美的网站，从而与那些外观平平的网站区别开来。

在 HTML 中，使用 <img> 标签来插入图像，其语法格式如下：

<img src="url" />

<img> 是图片 image 的简称，它只包含属性，没有闭和标签。
src 是它的必选属性，用来表示图片的路径来源。

下面，我们来详细分析一下 <img> 标签的 src 属性。

1. src属性

src 是 source 的简称，用来声明图像文件的来源，也就是定义图片的引用地址。图片可以是.jpg、 .png、 .gif等多种格式，引用地址可以是相对 url，也可以是绝对 url。下面我们来看两个示例。

1) 引用网络图片
可以这样引用网络图片：
<img src="http://poolga.com/shared/images/poolgas/iphone_2122.png"/>
运行结果如下图所示：
在这里插入图片描述

2) 引用本地图片
如果在项目的当前文件中，想要引入上一层 image 目录下的一张图片 logo.jpg，可以这样引用：

<img src="image/tiger.png"/>

运行结果如下图所示：
在这里插入图片描述
此处../可以进入上一层目录，然后进入 image 文件夹，最后找到 img.jpg。

提示：图片的名称尽量不要使用中文，否则即使路径正确，浏览器也可能无法识别，从而显示不出图片。

2. 其他属性

前面讲述了 <img> 标签的必选属性 src，接下来再看一下它的可选属性。<img> 标签常用的可选属性有alt、title、width以及height等，我们来分别看一下：

alt 属性用来对图像进行文本说明。一般情况下，当浏览器因某种原因无法载入图像时，就会显示这段文本。虽然 alt属性值可以为空，但还是建议读者给 alt 属性设置符合图像信息的文本；
title 用来设置鼠标移动到图片上的提示文字。它的值一般与 alt 的值相同，最大的区别是显示的前提条件不同，alt属性是图片加载失败后显示，而 title 属性则是图片加载成功后鼠标放到它上面才显示；
width 用来设置图片的宽度，使用时不需要加单位，默认是像素（px）；
height 用来设置图片的高度，和 width 一样在使用时不需要加单位，默认是像（px）。

具体使用方法如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>img标签</title>
</head>
<img src="image/tiger.png"
	 width="200"
	 height="200"
	 title="虎头虎脑"
	 alt="虎头虎脑"
/>
</body>
</html>

在浏览器中运行结果如下图所示：
在这里插入图片描述
在这段代码中，首先引入了文件的路径，紧接着对图片的宽高进行了设置，均是 200px；其次又设置了 title 属性，当鼠标移动到图片上时，会显示 title 的内容；最后设置了 alt，当图片加载不出来会显示 alt 的内容。

建议读者为页面上的图像都加上 alt 属性，这样不仅有助于更好的显示信息，而且对于那些使用屏幕阅读软件（存在视觉障碍的人使用的一类软件）的人来说帮助很大。

3. 总结

从上面的讲述中我们可以收获以下几点内容：

src 表示图片的引用地址，这个地址可以是相对 url，也可以是绝对 url；
alt 表示图片加载失败时显示的内容；
title 表示鼠标移动到图片上时显示的文字；
width 表示图片的宽，默认单位是像素（px）；
height 表示图片的高，默认单位也是像素（px）。

不善表演

关注

4
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
2、HTML ＜img＞标签（插入图片）

如果是 HTML 初学者，建议在使用图片前新建一个存放图片的文件夹，方便后期图片的整理。这是一个良好的习惯。开发过程中，经常使用图像来美化页面，图像已经成为大多数网站的一个重要组成部分。都说一图胜千言，好的图像有助于制作出精美的网站，从而与那些外观平平的网站区别开来。在 HTML 中，使用 <img> 标签来插入图像，其语法格式如下：<img src="url" /><img> 是图片 image 的简称，它只包含属性，没有闭和标签。src 是它的必选属性.
复制链接

扫一扫