HTML 图像

什么是 HTML 图像？

HTML 图像是通过 <img> 标签定义的，用于在网页中显示图像。

HTML 图像的基本语法

<img src="image.jpg" alt="图像描述">

HTML 图像示例

<img src="favicon.ico" alt="网站图标">

HTML 图像的属性

src - 指定图像的路径
alt - 指定图像的替代文本，当图像无法显示时显示
width - 指定图像的宽度
height - 指定图像的高度
title - 指定图像的提示文本，鼠标悬停时显示

<img src="image.jpg" alt="风景图像" width="500" height="300" title="美丽的风景">

图像路径

图像路径可以是绝对路径或相对路径。

绝对路径 - 完整的 URL 地址，如 https://www.example.com/images/image.jpg
相对路径 - 相对于当前 HTML 文件的路径，如 images/image.jpg 或 ../image.jpg

<!-- 绝对路径 -->
<img src="https://www.example.com/images/image.jpg" alt="示例图像"> 



<!-- 相对路径 -->
<img src="images/image.jpg" alt="示例图像"> 




<img src="../image.jpg" alt="示例图像">

图像作为链接

您可以将图像作为链接使用。

<a href="https://www.example.com"> 
    <img src="button.png" alt="访问示例网站"> 
    
    
</a>

HTML5 图片元素

HTML5 引入了 <picture> 元素，用于为不同的设备或屏幕尺寸提供不同的图像。

<picture> 
    <source media="(min-width: 600px)" srcset="large-image.jpg"> 
    
    
    
    <source media="(min-width: 400px)" srcset="medium-image.jpg"> 
    
    
    
    <img src="small-image.jpg" alt="响应式图像"> 
    
    
    
</picture>

图像格式

常用的网页图像格式包括：

JPEG (.jpg, .jpeg) - 适合照片和复杂图像
PNG (.png) - 适合图标和需要透明背景的图像
GIF (.gif) - 适合简单的动画
WebP (.webp) - 现代图像格式，压缩率更高
SVG (.svg) - 矢量图像，适合图标和图形

图像的对齐方式

您可以使用 CSS 来设置图像的对齐方式。

<style> /* 内部样式表，定义图像的对齐方式 */
img.left { /* 左浮动样式类 */
    float: left; /* 设置图像向左浮动 */
    margin-right: 10px; /* 设置右侧外边距为 10 像素，与文本保持距离 */
}

img.right { /* 右浮动样式类 */
    float: right; /* 设置图像向右浮动 */
    margin-left: 10px; /* 设置左侧外边距为 10 像素，与文本保持距离 */
}

img.center { /* 居中对齐样式类 */
    display: block; /* 设置图像为块级元素 */
    margin: 0 auto; /* 设置上下外边距为 0，左右自动，实现水平居中 */
}
</style> /* 结束内部样式表 */

<img src="image.jpg" alt="左侧图像" class="left"> 
<p>这是一段文本，图像会浮动在左侧。</p> 

<img src="image.jpg" alt="右侧图像" class="right"> 
<p>这是一段文本，图像会浮动在右侧。</p> 

<img src="image.jpg" alt="居中图像" class="center">