在本次上新课程之前,我们将先进行上期知识的回顾,涵盖上期所学内容。随后,我们将迎来新知识的上新阶段。具体流程包括一、上期回顾;二、知识上新。这种安排有助于巩固之前学到的知识,并为新的学习内容打下基础。
上期回顾
<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:声明图像是否是一个服务器端图像映射。
这些属性可以根据需要组合使用,以调整图像的显示和行为。
标签语法
<img src="image.jpg">
例如,我们可以这样使用``标签:
<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="图像">
以上就是关于图像标签的运用与技巧的一些基本介绍。在实际的开发中,我们可能需要根据具体的需求和情况,灵活运用这些技巧,以达到最佳的效果。希望这篇文章能对你有所帮助。