HTML中的图像标签和常见图片处理方法

# 1. HTML中的图像标签

## 1.1 图像标签的基本语法
在HTML中，可以使用`<img>`标签来插入图像。该标签的基本语法如下：

<img src="图片路径" alt="替代文本" title="标题属性">

- `src`属性用于指定图像的路径，可以是本地路径或者网络路径。
- `alt`属性用于设置替代文本，在图像无法显示或无法加载时，替代文本将会显示。
- `title`属性可以为图像添加标题，当鼠标悬停在图像上方时，标题将会显示。

## 1.2 图像路径的指定方法
图像路径可以有多种指定方法：
- 相对路径：相对于当前HTML文件的路径，可以使用相对文件夹路径或者相对文件路径。
- 绝对路径：包括网络路径（URL）和本地路径（文件系统路径）。

示例代码：

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

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

## 1.3 替代文本和标题属性的重要性
替代文本和标题属性对于图像在浏览器中的展示起着重要作用：
- 替代文本（alt属性）可以提供对于图像内容的描述，对于无法加载图像或者图像无法显示的情况下，替代文本会被显示出来，提高了页面的可访问性。
- 标题属性（title属性）可以为图像添加额外的信息，当鼠标悬停在图像上方时，标题会显示。这对于提供更好的用户体验和辅助信息非常有用。

示例代码：

<!-- 添加替代文本和标题属性示例 -->
<img src="images/pic.jpg" alt="美丽的风景" title="风景图片">

该示例中，当图像无法加载时，用户将看到描述为"美丽的风景"的文本；当用户将鼠标悬停在图像上时，会出现一个提示框显示"风景图片"。

以上是第一章的内容，介绍了HTML中的图像标签，包括基本语法、图像路径的指定方法以及替代文本和标题属性的重要性。接下来将会介绍常见的图像格式。

# 2. 常见的图像格式

### 2.1 JPEG格式的特点和应用场景

JPEG（Joint Photographic Experts Group）是一种广泛使用的图像压缩格式，它主要用于存储和传输照片和复杂图像。下面是一段使用Python语言处理JPEG图像的示例代码：

import PIL.Image as Image

# 打开JPEG图像
image = Image.open('example.jpg')

# 显示图像信息
print('图像格式:', image.format)
print('图像大小:', image.size)
print('图像模式:', image.mode)

# 调整图像尺寸
image_resized = image.resize((800, 600))
image_resized.show()

# 保存压缩后的JPEG图像
image_resized.save('example_resized.jpg', quality=90)

在上面的代码中，我们使用PIL库（Python Imaging Library）来打开和处理JPEG图像。通过`Image.open()`函数可以打开一张JPEG图像，并使用`print()`函数输出图像的格式、大小和模式。然后，我们使用`resize()`函数调整图像的尺寸为800x600，并使用`show()`函数显示调整后的图像。最后，使用`save()`函数将压缩后的JPEG图像保存到本地。

JPEG格式适用于需要保留较高图像细节和颜色精度的场景，如照片、艺术作品和复杂图形。它通过有损压缩算法来降低图像文件的大小，并在一定程度上牺牲图像质量。

### 2.2 PNG格式的特点和应用场景

PNG（Portable Network Graphics）是一种使用无损压缩算法的图像格式，它主要用于存储和传输图标、图形和简单的图像。下面是一段使用Java语言处理PNG图像的示例代码：

import javax.imageio.ImageIO;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;

public class PNGImageProcessing {

    public static void main(String[] args) {

        try {
            // 读取PNG图像
            BufferedImage image = ImageIO.read(new File("example.png"));

            // 输出图像信息
            System.out.println("图像宽度: " + image.getWidth());
            System.out.println("图像高度: " + image.getHeight());
            System.out.println("图像是否透明: " + image.getColorModel().hasAlpha());

            // 调整图像尺寸
            BufferedImage resizedImage = new BufferedImage(800, 600, BufferedImage.TYPE_INT_ARGB);
            resizedImage.getGraphics().drawImage(image, 0, 0, 800, 600, null);