图像
是指通过HTML标记在网页上嵌入的图片。在HTML5中，图像通常使用<img>标签来嵌入，这个标签是HTML中用于定义图像的基本元素。
网页上常用的图像格式主要包括以下几种：
-
JPEG (JPG)：适用于照片或颜色丰富的图像，支持有损压缩。
-
PNG：支持无损压缩，提供高质量的图像。PNG格式支持透明度，这意味着图像可以有透明的部分，这在网页设计中非常有用。
-
GIF ：支持无损压缩和动画。GIF格式限于256色的索引颜色。但由于其支持动画和透明度。
图像<img>标签
以下是<img>标签的一些常见关键属性和说明
-
src属性：这是必需的属性，即图像文件的位置。这个URL可以是相对路径或绝对路径，也可以是一个网络URL。
示例：
<img src="image/"photo.jpg" alt="示例图片">-
alt属性：这是推荐使用的属性，它为图像提供替代文本。如果图像无法显示，浏览器会显示这个属性中的文本。
示例：
<img src="images/photo.jpg" alt="一只小狗">-
width和height属性：调整图像大小，这两个属性分别定义图像的宽度和高度，通常以像素数和百分数为单位。
示例：
<img src="images/photo.jpg" alt="示例图片" width="100" height="100">
- align属性：指图像的对齐方式，left（图像居左）、right（图像居右）、top（顶部对齐）、middle（文本与图像中央对齐）或bottom（文本与图像在底部对齐）。
示例：
<!--图像居左-->
<img src="1.jpg" alt="示例图片" align="left">
<!--图像居右-->
<img src="2.jpg" alt="示例图片" align=" right">
<!--图像顶部对齐-->
<img src="3.jpg" alt="示例图片" align="top">
<!--文本与图像在中央对齐-->
示例
<img src="4.jpg" alt="示例图片" align="middle">
<!--文本与图像在底部对齐-->
示例
<img src="5.jpg" alt="示例图片" align="bottom">
绝对路径，相对路径与网络URL导入图片
-
绝对路径：提供完整的URL或文件路径，如
<img src="C:\Users\Image.jpg" alt="本地图片">。 -
相对路径：相对于当前文档的位置，如
<img src="images/photo.jpg" alt="相对路径图片">。 -
网络URL导入图片 ：通常指的是使用在线图片的URL地址。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--从本地导入图片（绝对路径）-->
<p>从本地导入图片（绝对路径）</p>
<img src="D:\image\1.jpg" alt=" " height="100" width="100">
<!--从本地导入图片（相对路径）-->
<p>从本地导入图片（相对路径）</p>
<img src="..\image\2.jpg" alt="" height="200" width="200">
<!--从网络URL导入图片-->
<p>从网络URL导入图片</p>
<img src="https://dss2.bdstatic.com/5bVYsj_p_tVS5dKfpU_Y_D3/res/r/image/2021-3-4/hao123%20logo.png" alt="" title="百度一下，你就知道" height="500" width="300" >
</body>
</html>运行结果如下：
超链接<a>标签
示例：
<a href="..\image\1.jpg">点击此处，跳转到本地图片</a>运行结果如下：
扫一扫
769
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
