Web前端开发：图像标签的运用与技巧

快乐小码哥

已于 2024-02-29 08:13:04 修改

阅读量1.3k

点赞数 25

分类专栏：前端开发 WebStorm 文章标签：前端 webstorm vscode html

于 2024-02-28 22:38:27 首次发布

本文链接：https://blog.csdn.net/m0_69771795/article/details/136334577

版权

前端开发同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

WebStorm

7 篇文章 0 订阅

订阅专栏

在本次上新课程之前，我们将先进行上期知识的回顾，涵盖上期所学内容。随后，我们将迎来新知识的上新阶段。具体流程包括一、上期回顾；二、知识上新。这种安排有助于巩固之前学到的知识，并为新的学习内容打下基础。

上期回顾

<p>段落内容</p>

段落标签 <p> 是用来定义 HTML 文档中的段落。它是最基本的文本容器之一，用于表示文本内容中的一个独立段落。浏览器会根据 <p> 标签自动地在段落之间添加垂直间距，以区分不同的段落，从而提高文档的可读性。

当我们写一篇文章，如果不设置段落，那么整篇文章内容会显得杂乱无章，阅读起来会变得困难。添加段落可以使得文字结构更清晰，内容更易于理解。
————————————————

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/m0_69771795/article/details/136311345

知识上新

图像标签

图像标签 <img>

<img> 是 HTML 中的一个标签，用于在网页中嵌入图像。这标签是一个空标签，没有结束标签，因为它没有包含任何文本内容，只包含一些属性用于指定图像的来源、尺寸、替代文本等。

以下是一个简单的 <img> 标签的例子：

<img src="image.jpg" alt="描述性文本" width="300" height="200">

在现代的Web前端开发中，图像标签的运用已经成为一个不可或缺的元素。它不仅可以丰富页面的内容，增加视觉冲击力，还可以通过合理的使用和优化技巧，提高页面的加载速度和用户体验。今天，我们就来深入探讨一下图片标签的运用与技巧。

我们需要了解的是图像标签的基本使用方法。在HTML中，我们通常使用<img>标签来插入一张图。<img> 标签支持多种属性，常见的属性包括但不限于：

src（source）：指定图像文件的来源，可以是文件路径、URL等。
alt（alternate text）：提供图像的替代文本，当图像无法显示时或被屏幕阅读器阅读时显示。

title：用于提供额外的信息（鼠标悬停在图像上时，会显示这个信息）。
width（宽度）：指定图像的显示宽度，可以用像素值或百分比表示。
height（高度）：指定图像的显示高度，同样可以用像素值或百分比表示。
loading：指定图像的加载方式，可以是 "eager"（立即加载）或 "lazy"（延迟加载）。
sizes：为响应式设计指定图像显示尺寸的一组条件。
srcset：提供一组备选图像源，以适应不同屏幕尺寸和分辨率。
crossorigin：指定图像请求的跨域设置。
usemap：与 <map> 元素关联，用于创建图像映射。
ismap：声明图像是否是一个服务器端图像映射。
这些属性可以根据需要组合使用，以调整图像的显示和行为。

标签语法

例如，我们可以这样使用``标签：

<html>
<head>
<title>Web前端开发：图像标签的运用与技巧</title>
</head>
<body>

<p>本节课的主要内容讲【图像标签】的运用与技巧</p>

<p>我们在下方，添加一图片，名称：快乐小码哥.png</p>

<img src="快乐小码哥.png" alt="这是一张图片未显示成功" title="鼠标悬停显示的文字">

</body>
</html>

这段代码会在页面上插入一张名为 “快乐小码哥.png” 的图片，如果图片无法显示，会显示 ”这是一张图片未显示成功” ，当鼠标悬停在图片上时，会显示 “鼠标悬停显示的文字” 。运行效果如下：

使用技巧

仅仅知道如何使用<img>标签是不够的，我们还需要知道如何优化它的使用，以提高页面的性能和用户体验。以下是一些常用的优化技巧：

1、图片格式

支持多种图像格式，常见的包括但不限于：

JPEG（.jpg）：一种常用的有损压缩图像格式，适用于照片和彩色图像。
PNG（.png）：一种无损压缩图像格式，支持透明度和更高的图像质量，常用于图标、透明背景等。
GIF（.gif）：支持动画和透明度的图像格式，适用于简单的动画和图标。
SVG（.svg）：矢量图形格式，以 XML 格式表示，可以缩放而不失真，适用于图标和图形。
WebP（.webp）：一种由 Google 提出的图像格式，支持有损和无损压缩，通常具有更小的文件大小和更好的图像质量。
BMP（.bmp）： Windows 中的位图格式，不进行压缩，文件通常较大。
ICO（.ico）：用于表示图标文件，通常包含多个图标尺寸和颜色深度。

这些格式的选择取决于图像的特性、用途、文件大小要求等因素。开发者可以根据具体需求选择最合适的图像格式。

2、压缩图片

通过工具或在线服务，我们可以压缩图片的大小，从而加快页面的加载速度。但是，我们需要注意，过度的压缩可能会影响图片的质量。

3、响应式图片

随着移动设备的普及，响应式设计变得越来越重要。我们可以使用`srcset`属性，为不同分辨率的设备提供不同大小的图片，从而提高页面在不同设备上的加载速度和显示效果。

4、延迟加载图片

对于一些不在首屏显示的图片，我们可以使用JavaScript或CSS，实现图片的延迟加载。这样，只有在用户滚动到图片的位置时，图片才会开始加载，从而提高页面的初始加载速度。

5、合理布局

图片的布局也会影响页面的性能和用户体验。我们应该避免使用过大的图片，或者过多的图片在一个页面上。同时，我们也可以使用CSS的【background-image】属性，将图片作为元素的背景，这样可以节省HTTP请求的数量。

6、文件路径

要指定图像文件的路径，可以在src属性中指定该图像文件的URL或相对路径。以下是一些常见的路径引用方法：

绝对路径：绝对路径是指完整的URL地址，包括协议、域名、路径等信息。例如：

<img src="D:\教学资料\前端开发\快乐小码哥.png" alt="这是一张图片" >

<img src="https://baidu.com/images/快乐小码哥.png" alt="这是一张图片" >

相对路径：相对路径是相对于当前文件的路径。相对路径可以是相对于当前文件所在目录的路径，也可以是相对于当前文件所在网站根目录的路径。以下是一些相对路径的示例：
相对于当前文件所在目录：

<img src="快乐小码哥.png" alt="图像">

相对于当前文件所在文件夹目录：

<img src="images/快乐小码哥.png" alt="图像">

相对于当前文件所在网站根目录：

<img src="/images/快乐小码哥.png" alt="图像">

相对于当前文件所在网站根目录的上一级目录：

<img src="../images/快乐小码哥.png" alt="图像">

以上就是关于图像标签的运用与技巧的一些基本介绍。在实际的开发中，我们可能需要根据具体的需求和情况，灵活运用这些技巧，以达到最佳的效果。希望这篇文章能对你有所帮助。

快乐小码哥

关注

25
点赞
踩
17

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web前端开发：图像标签的运用与技巧

在本次上新课程之前，我们将先进行上期知识的回顾，涵盖上期所学内容。随后，我们将迎来新知识的上新阶段。具体流程包括一、上期回顾；二、知识上新。这种安排有助于巩固之前学到的知识，并为新的学习内容打下基础。
复制链接

扫一扫