Html教程

Appearance

HTML 图像 ​

什么是HTML图像 ​

HTML图像通过 <img> 标签在网页中显示图片。这是一个自闭合标签，不需要结束标签。图像可以增强网页的视觉效果和用户体验。

img 标签的基本语法 ​

html
<img src="图片路径" alt="替代文本">

必需属性 ​

1. src 属性 指定图像文件的路径：

html
<!-- 相对路径 -->
<img src="images/logo.png" alt="网站logo">

<!-- 绝对路径 -->
<img src="/assets/images/banner.jpg" alt="横幅图片">

<!-- 网络图片 -->
<img src="https://example.com/photo.jpg" alt="示例图片">

2. alt 属性 提供图像的替代文本，当图像无法显示时显示：

html
<img src="product.jpg" alt="红色T恤，100%纯棉材质">
<img src="chart.png" alt="2024年销售数据柱状图">
<img src="profile.jpg" alt="张三的个人头像照片">

图像属性详解 ​

1. 尺寸属性 ​

html
<!-- 使用width和height属性 -->
<img src="photo.jpg" alt="风景照" width="300" height="200">

<!-- 只设置宽度，高度自动比例缩放 -->
<img src="photo.jpg" alt="风景照" width="300">

<!-- 只设置高度，宽度自动比例缩放 -->
<img src="photo.jpg" alt="风景照" height="200">

2. 标题属性 ​

html
<img src="sunset.jpg" 
     alt="美丽的日落景色" 
     title="鼠标悬停查看详细信息"
     width="400" 
     height="300">

3. 加载属性 ​

html
<!-- 懒加载（现代浏览器支持） -->
<img src="large-image.jpg" 
     alt="大图片" 
     loading="lazy"
     width="800" 
     height="600">

<!-- 预加载 -->
<img src="important-image.jpg" 
     alt="重要图片" 
     loading="eager"
     width="400" 
     height="300">

图像路径类型 ​

1. 相对路径 ​

html
<!-- 同一目录 -->
<img src="logo.png" alt="Logo">

<!-- 子目录 -->
<img src="images/header-bg.jpg" alt="页面背景">
<img src="assets/photos/team.jpg" alt="团队照片">

<!-- 上级目录 -->
<img src="../images/icon.png" alt="图标">
<img src="../../assets/banner.jpg" alt="横幅">

2. 绝对路径 ​

html
<!-- 从网站根目录开始 -->
<img src="/images/logo.png" alt="网站Logo">
<img src="/assets/photos/product-1.jpg" alt="产品图片">

3. 网络路径 ​

html
<img src="https://picsum.photos/300/200" alt="随机图片">
<img src="https://via.placeholder.com/150x100" alt="占位图片">

图像格式 ​

常用图像格式对比 ​

格式特点适用场景
JPEG/JPG有损压缩，文件小，支持数百万色彩照片、复杂图像
PNG无损压缩，支持透明背景Logo、图标、需要透明的图片
GIF支持动画，256色限制简单动画、小图标
SVG矢量格式，无限缩放不失真图标、简单图形、Logo
WebP现代格式，压缩率高现代浏览器中的所有图片

格式选择示例 ​

html
<!-- 照片使用JPEG -->
<img src="landscape.jpg" alt="风景照片" width="600" height="400">

<!-- 带透明背景的Logo使用PNG -->
<img src="logo.png" alt="公司Logo" width="200" height="80">

<!-- 简单动画使用GIF -->
<img src="loading.gif" alt="加载动画" width="50" height="50">

<!-- 图标使用SVG -->
<img src="icon.svg" alt="搜索图标" width="24" height="24">

<!-- 现代浏览器使用WebP -->
<img src="hero-image.webp" alt="首页横幅" width="1200" height="600">

响应式图像 ​

1. CSS控制响应式 ​

html
<style>
.responsive-img {
    max-width: 100%;
    height: auto;
}

.container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}
</style>

<div class="container">
    <img src="hero-image.jpg" 
         alt="响应式图片" 
         class="responsive-img">
</div>

2. srcset 属性（多分辨率） ​

html
<img src="image-400.jpg" 
     srcset="image-400.jpg 400w,
             image-800.jpg 800w,
             image-1200.jpg 1200w"
     sizes="(max-width: 600px) 100vw,
            (max-width: 1000px) 50vw,
            33vw"
     alt="多分辨率图片">

3. picture 元素 ​

html
<picture>
    <!-- 移动设备 -->
    <source media="(max-width: 600px)" 
            srcset="mobile-image.jpg">
    
    <!-- 平板设备 -->
    <source media="(max-width: 1024px)" 
            srcset="tablet-image.jpg">
    
    <!-- 桌面设备 -->
    <source media="(min-width: 1025px)" 
            srcset="desktop-image.jpg">
    
    <!-- 后备图片 -->
    <img src="default-image.jpg" alt="响应式图片">
</picture>

图像优化技巧 ​

1. 现代图片格式回退 ​

html
<picture>
    <source srcset="image.webp" type="image/webp">
    <source srcset="image.avif" type="image/avif">
    <img src="image.jpg" alt="优化后的图片">
</picture>

2. 懒加载实现 ​

html
<!-- 原生懒加载 -->
<img src="placeholder.jpg" 
     data-src="actual-image.jpg" 
     alt="懒加载图片" 
     loading="lazy"
     class="lazy-load">

<style>
.lazy-load {
    opacity: 0;
    transition: opacity 0.3s;
}

.lazy-load.loaded {
    opacity: 1;
}
</style>

3. 占位符技术 ​

html
<!-- 模糊占位符 -->
<div class="image-placeholder" style="background-image: url('tiny-blurred.jpg');">
    <img src="full-image.jpg" 
         alt="带占位符的图片" 
         onload="this.parentElement.style.backgroundImage='none';">
</div>

<style>
.image-placeholder {
    background-size: cover;
    background-position: center;
    position: relative;
}

.image-placeholder img {
    width: 100%;
    height: auto;
    display: block;
}
</style>

图像样式控制 ​

1. 基础样式 ​

html
<style>
.image-basic {
    width: 300px;
    height: 200px;
    object-fit: cover;           /* 裁剪方式 */
    border-radius: 8px;          /* 圆角 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 阴影 */
    transition: transform 0.3s ease;
}

.image-basic:hover {
    transform: scale(1.05);      /* 悬停放大 */
}

.image-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;          /* 圆形 */
    object-fit: cover;
}

.image-grayscale {
    filter: grayscale(100%);     /* 灰度 */
    transition: filter 0.3s ease;
}

.image-grayscale:hover {
    filter: grayscale(0%);       /* 悬停恢复彩色 */
}
</style>

<img src="photo.jpg" alt="基础样式" class="image-basic">
<img src="avatar.jpg" alt="圆形头像" class="image-circle">
<img src="vintage.jpg" alt="灰度效果" class="image-grayscale">

2. 高级效果 ​

html
<style>
.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

.image-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.image-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.image-item:hover img {
    transform: scale(1.1);
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom, 
        transparent 0%, 
        rgba(0,0,0,0.7) 100%
    );
    color: white;
    padding: 20px;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-item:hover .image-overlay {
    opacity: 1;
}

.image-caption h3 {
    margin: 0 0 5px 0;
    font-size: 1.2em;
}

.image-caption p {
    margin: 0;
    font-size: 0.9em;
    opacity: 0.8;
}
</style>

<div class="image-gallery">
    <div class="image-item">
        <img src="nature1.jpg" alt="自然风光1">
        <div class="image-overlay">
            <div class="image-caption">
                <h3>美丽山川</h3>
                <p>壮观的山脉景色</p>
            </div>
        </div>
    </div>
    
    <div class="image-item">
        <img src="nature2.jpg" alt="自然风光2">
        <div class="image-overlay">
            <div class="image-caption">
                <h3>宁静湖泊</h3>
                <p>清澈的湖水倒影</p>
            </div>
        </div>
    </div>
</div>

图像与文本的结合 ​

1. 图文混排 ​

html
<style>
.article-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    line-height: 1.6;
}

.image-left {
    float: left;
    margin: 0 20px 20px 0;
    max-width: 300px;
    height: auto;
}

.image-right {
    float: right;
    margin: 0 0 20px 20px;
    max-width: 300px;
    height: auto;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}
</style>

<article class="article-content clearfix">
    <h2>图文混排示例</h2>
    
    <img src="content-image1.jpg" alt="相关图片" class="image-left">
    <p>这是文章内容，图片会浮动在文字的左侧。这种布局常用于新闻文章和博客中，
    可以让读者在阅读文字的同时欣赏相关图片。</p>
    
    <p>更多文字内容会围绕图片排列，形成自然的阅读流程。当文字内容足够多时，
    会在图片下方继续排列。</p>
    
    <img src="content-image2.jpg" alt="另一张图片" class="image-right">
    <p>这张图片浮动在右侧，文字会从左侧开始排列。这种灵活的布局方式
    让页面内容更加丰富多彩。</p>
</article>

2. 图片标题 ​

html
<style>
.figure-container {
    max-width: 500px;
    margin: 20px auto;
    text-align: center;
}

.figure-container img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.figure-caption {
    margin-top: 10px;
    font-style: italic;
    color: #666;
    font-size: 0.9em;
}
</style>

<figure class="figure-container">
    <img src="chart-example.png" alt="销售数据图表">
    <figcaption class="figure-caption">
        图1: 2024年第一季度销售数据对比图
    </figcaption>
</figure>

图标和小图片 ​

1. 内联SVG图标 ​

html
<style>
.icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: 8px;
}

.text-with-icon {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
</style>

<div class="text-with-icon">
    <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
    </svg>
    这是带星星图标的文本
</div>

<div class="text-with-icon">
    <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
    </svg>
    这是带勾选图标的文本
</div>

2. 小图标应用 ​

html
<style>
.social-icons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin: 20px 0;
}

.social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 8px;
    background-color: #f0f0f0;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background-color: #007acc;
    transform: translateY(-2px);
}

.social-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
</style>

<div class="social-icons">
    <a href="#" class="social-icon">
        <img src="facebook-icon.svg" alt="Facebook">
    </a>
    <a href="#" class="social-icon">
        <img src="twitter-icon.svg" alt="Twitter">
    </a>
    <a href="#" class="social-icon">
        <img src="instagram-icon.svg" alt="Instagram">
    </a>
</div>

图像性能优化 ​

1. 图片压缩和格式选择 ​

html
<!-- 根据用途选择合适格式 -->
<picture>
    <!-- 现代浏览器使用WebP -->
    <source srcset="hero.webp" type="image/webp">
    <!-- 回退到JPEG -->
    <img src="hero.jpg" alt="首页横幅" 
         width="1200" height="600"
         loading="lazy">
</picture>

<!-- 小图标使用SVG -->
<img src="logo.svg" alt="网站Logo" width="150" height="60">

<!-- 照片使用适当质量的JPEG -->
<img src="photo-optimized.jpg" alt="产品照片" 
     width="400" height="300" loading="lazy">

2. 预加载重要图片 ​

html
<head>
    <!-- 预加载关键图片 -->
    <link rel="preload" as="image" href="hero-image.jpg">
    <link rel="preload" as="image" href="logo.png">
</head>

实际应用示例 ​

完整的图片展示页面 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML图像应用示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
        }
        
        .hero-section {
            text-align: center;
            margin-bottom: 40px;
        }
        
        .hero-image {
            width: 100%;
            max-width: 800px;
            height: 300px;
            object-fit: cover;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
        
        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
            margin: 40px 0;
        }
        
        .gallery-item {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .gallery-item:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.2);
        }
        
        .gallery-item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        
        .gallery-info {
            padding: 20px;
        }
        
        .gallery-info h3 {
            margin: 0 0 10px 0;
            color: #333;
            font-size: 1.2em;
        }
        
        .gallery-info p {
            margin: 0;
            color: #666;
            line-height: 1.5;
        }
        
        .profile-section {
            display: flex;
            align-items: center;
            gap: 30px;
            margin: 40px 0;
            padding: 30px;
            background: #f8f9fa;
            border-radius: 15px;
        }
        
        .profile-avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            border: 5px solid white;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        .profile-info h2 {
            margin: 0 0 10px 0;
            color: #333;
        }
        
        .profile-info p {
            margin: 0;
            color: #666;
            line-height: 1.6;
        }
        
        .icon-list {
            display: flex;
            gap: 20px;
            margin: 20px 0;
        }
        
        .icon-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 15px;
            background: #e3f2fd;
            border-radius: 25px;
            color: #1976d2;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .icon-item:hover {
            background: #1976d2;
            color: white;
            transform: scale(1.05);
        }
        
        .icon-item img {
            width: 20px;
            height: 20px;
        }
        
        @media (max-width: 768px) {
            .profile-section {
                flex-direction: column;
                text-align: center;
            }
            
            .icon-list {
                justify-content: center;
                flex-wrap: wrap;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="hero-section">
            <h1>HTML图像应用展示</h1>
            <picture>
                <source srcset="hero-image.webp" type="image/webp">
                <img src="hero-image.jpg" 
                     alt="美丽的风景横幅图片" 
                     class="hero-image"
                     loading="eager">
            </picture>
        </header>
        
        <section class="profile-section">
            <img src="avatar.jpg" 
                 alt="作者头像" 
                 class="profile-avatar">
            <div class="profile-info">
                <h2>关于作者</h2>
                <p>我是一名前端开发者，热爱创造美观且功能强大的web应用。
                通过这个页面，我想展示HTML图像的各种应用方式和最佳实践。</p>
                
                <div class="icon-list">
                    <a href="#" class="icon-item">
                        <img src="github-icon.svg" alt="GitHub">
                        <span>GitHub</span>
                    </a>
                    <a href="#" class="icon-item">
                        <img src="email-icon.svg" alt="邮箱">
                        <span>邮箱</span>
                    </a>
                    <a href="#" class="icon-item">
                        <img src="blog-icon.svg" alt="博客">
                        <span>博客</span>
                    </a>
                </div>
            </div>
        </section>
        
        <section>
            <h2>作品展示</h2>
            <div class="gallery">
                <div class="gallery-item">
                    <img src="project1.jpg" 
                         alt="项目1截图" 
                         loading="lazy">
                    <div class="gallery-info">
                        <h3>响应式网站设计</h3>
                        <p>为客户设计的现代化响应式网站，具有优雅的视觉效果和良好的用户体验。</p>
                    </div>
                </div>
                
                <div class="gallery-item">
                    <img src="project2.jpg" 
                         alt="项目2截图" 
                         loading="lazy">
                    <div class="gallery-info">
                        <h3>电商平台开发</h3>
                        <p>完整的电商解决方案，包含商品展示、购物车、支付等功能模块。</p>
                    </div>
                </div>
                
                <div class="gallery-item">
                    <img src="project3.jpg" 
                         alt="项目3截图" 
                         loading="lazy">
                    <div class="gallery-info">
                        <h3>移动应用界面</h3>
                        <p>专为移动设备优化的用户界面，注重触摸友好和性能表现。</p>
                    </div>
                </div>
                
                <div class="gallery-item">
                    <img src="project4.jpg" 
                         alt="项目4截图" 
                         loading="lazy">
                    <div class="gallery-info">
                        <h3>数据可视化</h3>
                        <p>交互式数据图表和仪表板，帮助用户更好地理解复杂数据。</p>
                    </div>
                </div>
            </div>
        </section>
        
        <footer style="text-align: center; margin-top: 40px; padding-top: 20px; border-top: 1px solid #eee;">
            <p>&copy; 2024 图像应用示例. 所有图片仅供演示使用.</p>
        </footer>
    </div>
</body>
</html>

常见错误 ​

1. 缺少alt属性 ​

html
<!-- 错误：没有alt属性 -->
<img src="photo.jpg">

<!-- 正确：包含描述性的alt文本 -->
<img src="photo.jpg" alt="公司团队在会议室讨论项目">

2. 图片尺寸设置不当 ​

html
<!-- 错误：强制拉伸图片 -->
<img src="square-image.jpg" width="500" height="200" alt="图片">

<!-- 正确：保持比例或使用CSS -->
<img src="square-image.jpg" width="200" alt="图片">
<!-- 或者 -->
<img src="square-image.jpg" alt="图片" style="width: 200px; height: 200px; object-fit: cover;">

3. 不考虑性能 ​

html
<!-- 错误：大图片没有优化 -->
<img src="huge-image-5mb.jpg" alt="图片">

<!-- 正确：优化后的图片和懒加载 -->
<img src="optimized-image.webp" alt="图片" loading="lazy" width="400" height="300">

小结 ​

  • <img> 标签用于在网页中插入图像
  • src 和 alt 是必需属性
  • 选择合适的图片格式很重要
  • 使用响应式技术适配不同设备
  • 合理的样式可以增强视觉效果
  • 性能优化包括格式选择、压缩和懒加载
  • 注意可访问性，提供有意义的替代文本
  • 现代web开发中优先使用WebP等新格式

下一章我们将学习HTML表格的创建和使用。

Copyright © 2025-2026 京公网安备 11010102000001号 京ICP备2024078128号-1