当前位置：首页 > article >正文

Html5学习教程，从入门到精通，HTML 5 图像语法知识点语法知识点及案例代码（9）

article 2025/3/4 5:37:14

HTML 5 图像语法知识点

在HTML5中，图像是通过<img>标签来嵌入的。以下是关于<img>标签的详细知识点：

基本语法：
```
<img src="image_url" alt="alternative_text">
```
- src：指定图像的URL或路径。
- alt：为图像提供替代文本，当图像无法显示时，浏览器会显示这个文本。
可选属性：
- width 和 height：指定图像的宽度和高度（以像素为单位）。
- title：为图像提供额外的提示信息，当用户将鼠标悬停在图像上时会显示。
- loading：指定图像的加载方式，lazy表示延迟加载，eager表示立即加载。
- srcset 和 sizes：用于响应式图像，指定不同分辨率或尺寸的图像源。
图像格式：
- 常见的图像格式包括JPEG、PNG、GIF、SVG等。
图像链接：
可以将图像包裹在<a>标签中，使图像成为一个可点击的链接。
图像地图：
使用<map>和<area>标签可以创建图像地图，允许用户点击图像的不同区域来触发不同的操作。

案例代码

以下是一个详细的HTML5图像案例代码，包含注释说明：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 图像示例</title>
</head>
<body>

    <!-- 基本图像示例 -->
    <h2>基本图像</h2>
    <img src="https://via.placeholder.com/150" alt="示例图片" title="这是一个示例图片">

    <!-- 带有宽度和高度的图像 -->
    <h2>指定宽度和高度的图像</h2>
    <img src="https://via.placeholder.com/300" alt="示例图片" width="300" height="200">

    <!-- 响应式图像示例 -->
    <h2>响应式图像</h2>
    <img src="https://via.placeholder.com/600" 
         srcset="https://via.placeholder.com/300 300w, https://via.placeholder.com/600 600w, https://via.placeholder.com/900 900w" 
         sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 900px" 
         alt="响应式图片示例">

    <!-- 图像链接示例 -->
    <h2>图像链接</h2>
    <a href="https://www.example.com">
        <img src="https://via.placeholder.com/150" alt="点击访问示例网站">
    </a>

    <!-- 图像地图示例 -->
    <h2>图像地图</h2>
    <img src="https://via.placeholder.com/400" alt="图像地图示例" usemap="#imagemap">
    <map name="imagemap">
        <area shape="rect" coords="0,0,200,200" href="https://www.example.com/area1" alt="区域1">
        <area shape="circle" coords="300,100,50" href="https://www.example.com/area2" alt="区域2">
    </map>

    <!-- 延迟加载图像示例 -->
    <h2>延迟加载图像</h2>
    <img src="https://via.placeholder.com/800" alt="延迟加载图片" loading="lazy">

</body>
</html>

代码解释

基本图像：
- 使用<img>标签嵌入图像，src指定图像路径，alt提供替代文本，title提供提示信息。
指定宽度和高度的图像：
- 通过width和height属性指定图像的显示尺寸。
响应式图像：
- 使用srcset和sizes属性，根据设备的不同分辨率加载不同尺寸的图像。
图像链接：
- 将<img>标签包裹在<a>标签中，使图像成为一个可点击的链接。
图像地图：
- 使用<map>和<area>标签创建图像地图，coords定义可点击区域的坐标，href指定点击后的跳转链接。
延迟加载图像：
- 使用loading="lazy"属性，延迟加载图像，直到图像进入视口时才加载。

通过这个案例，你可以掌握HTML5中图像的基本用法和一些高级特性。

以下是一些实际开发中常见的HTML5图像使用案例，每个案例都附有详细的代码和注释。

案例1：响应式图片（根据不同设备加载不同分辨率的图片）

在实际开发中，为了优化页面加载速度和用户体验，通常会根据设备的屏幕尺寸和分辨率加载不同大小的图片。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式图片示例</title>
</head>
<body>
    <h2>响应式图片示例</h2>
    <img src="https://via.placeholder.com/600" 
         srcset="https://via.placeholder.com/300 300w, 
                 https://via.placeholder.com/600 600w, 
                 https://via.placeholder.com/900 900w" 
         sizes="(max-width: 600px) 300px, 
                (max-width: 900px) 600px, 
                900px" 
         alt="响应式图片示例">
</body>
</html>

解释：

srcset：提供不同分辨率的图片源，浏览器会根据设备的屏幕宽度选择合适的图片。
sizes：定义图片在不同屏幕宽度下的显示尺寸。
当屏幕宽度小于600px时，加载300px宽的图片；当屏幕宽度在600px到900px之间时，加载600px宽的图片；否则加载900px宽的图片。

案例2：图片懒加载（Lazy Loading）

懒加载是一种优化技术，只有当图片进入用户视口时才加载图片，减少初始页面加载时间。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片懒加载示例</title>
</head>
<body>
    <h2>图片懒加载示例</h2>
    <img src="https://via.placeholder.com/800" alt="懒加载图片" loading="lazy">
    <p>向下滚动以查看图片加载效果。</p>
    <div style="height: 1000px;"></div> <!-- 模拟长页面 -->
</body>
</html>

解释：

loading="lazy"：启用懒加载，图片只有在接近视口时才会加载。
适合长页面中位于下方的图片，减少初始加载时间。

案例3：图片链接（点击图片跳转到其他页面）

在实际开发中，经常需要将图片作为链接，点击后跳转到其他页面。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片链接示例</title>
</head>
<body>
    <h2>图片链接示例</h2>
    <a href="https://www.example.com">
        <img src="https://via.placeholder.com/150" alt="点击访问示例网站">
    </a>
    <p>点击图片跳转到示例网站。</p>
</body>
</html>

解释：

将<img>标签包裹在<a>标签中，使图片成为一个可点击的链接。
适合用于广告、导航等场景。

案例4：图片地图（Image Map）

图片地图允许用户点击图片的不同区域来触发不同的操作，常用于地图、产品展示等场景。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片地图示例</title>
</head>
<body>
    <h2>图片地图示例</h2>
    <img src="https://via.placeholder.com/400" alt="图片地图示例" usemap="#imagemap">
    <map name="imagemap">
        <area shape="rect" coords="0,0,200,200" href="https://www.example.com/area1" alt="区域1">
        <area shape="circle" coords="300,100,50" href="https://www.example.com/area2" alt="区域2">
    </map>
    <p>点击图片的不同区域跳转到不同的链接。</p>
</body>
</html>

解释：

<map>：定义图片地图。
<area>：定义可点击区域，shape指定形状（rect矩形，circle圆形），coords指定坐标，href指定跳转链接。
适合用于交互式图片，如地图、产品展示等。

案例5：图片与文本混排（图文混排）

在实际开发中，经常需要将图片与文本混合排版，常见于新闻、博客等场景。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图文混排示例</title>
    <style>
        .container {
            display: flex;
            align-items: center;
        }
        .text {
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <h2>图文混排示例</h2>
    <div class="container">
        <img src="https://via.placeholder.com/150" alt="示例图片">
        <div class="text">
            <p>这是一段与图片混排的文本。图片和文本可以灵活地排列在一起，适合用于新闻、博客等场景。</p>
        </div>
    </div>
</body>
</html>

解释：

使用CSS的flex布局实现图片与文本的混排。
图片和文本可以灵活排列，适合用于新闻、博客等场景。

案例6：图片画廊（Image Gallery）

图片画廊是展示多张图片的常见方式，通常结合CSS和JavaScript实现交互效果。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片画廊示例</title>
    <style>
        .gallery {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .gallery img {
            width: 100px;
            height: 100px;
            object-fit: cover;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h2>图片画廊示例</h2>
    <div class="gallery">
        <img src="https://via.placeholder.com/100" alt="图片1">
        <img src="https://via.placeholder.com/100" alt="图片2">
        <img src="https://via.placeholder.com/100" alt="图片3">
        <img src="https://via.placeholder.com/100" alt="图片4">
    </div>
</body>
</html>