在网页设计中，图片能够极大地增强页面的视觉效果和用户体验。HTML 提供了简单而强大的方法来插入和管理图片。本文将详细介绍如何在HTML中使用图片，包括基本语法、常用属性、图片大小调整、图片与文本的对齐方式等内容。
HTML 图片语法
在HTML中插入图片最常用的方法是使用<img>标签。<img>是一个不需要闭合的标签。基本语法如下：
<img src="URL" alt="替代文本">src：指定图片文件的URL。alt：提供图片的替代文本，当图片无法显示时，浏览器会显示这段文字。
例如：
<img src="images/example.jpg" alt="示例图片">标签属性
除了src和alt属性外，<img>标签还支持其他一些属性：
title：为图片提供额外的信息，通常显示为工具提示。width和height：设置图片的宽度和高度（以像素为单位）。style：使用内联CSS来设置图片的样式。
例如：
<img src="images/example.jpg" alt="示例图片" title="这是一个示例图片" width="300" height="200" style="border: 1px solid black;">图片大小
使用 width 和 height 属性
可以直接在 <img> 标签中使用 width 和 height 属性来设置图片的尺寸：
<img src="images/example.jpg" alt="示例图片" width="300" height="200">使用 style 属性
也可以使用 style 属性来设置图片的尺寸：
<img src="images/example.jpg" alt="示例图片" style="width: 300px; height: 200px;">建议优先使用 style 属性定义图片的大小，使用 style 属性可以实现更丰富更多样的定义方式。比如使用百分比，是自适应各类设备屏幕的主要方式之一：
<img src="images/example.jpg" alt="示例图片" style="width: 100%; height: auto;">使用其他网站/服务器上的图片
你可以直接使用其他网站或服务器上的图片，只需将 src 属性设置为该图片的完整URL：
<img src="https://example.com/images/external.jpg" alt="外部图片">这些情况会造成使用其他网站或服务器上的图片失败！
跨域问题
许多网站为了安全考虑，会禁止其他网站直接引用其资源（包括图片）。这被称为跨域资源共享（CORS）问题。如果目标网站设置了CORS策略，你的请求可能会被拒绝。你可以查看浏览器的开发者工具（通常是F12键）中的网络请求，看看是否有相关的错误信息。
HTTP/HTTPS混合内容
如果你的网站是通过HTTPS访问的，而引用的图片是通过HTTP提供的，浏览器可能会阻止加载这些不安全的内容。确保图片的URL也是HTTPS。
缓存问题
有时浏览器缓存可能导致图片不显示。尝试清除浏览器缓存或强制刷新页面（通常是Ctrl + F5）。
防火墙或代理服务器
如果你的网络或使用的代理服务器，防火墙或代理服务器可能会阻止某些外部资源的加载。尝试在不同的网络环境下测试。
HTML 图片动画特效
虽然HTML本身不支持图片动画，但可以结合CSS或JavaScript来实现动画效果。例如，使用CSS transition 属性来实现图片的淡入淡出效果：
<style>
.fade-in {
opacity: 0;
transition: opacity 2s ease-in-out;
}
.fade-in:hover {
opacity: 1;
}
</style>
<img src="images/example.jpg" alt="示例图片" class="fade-in">图片与文本的对齐方式
可以使用 align 属性或CSS来控制图片与文本的对齐方式。例如，使用CSS vertical-align 属性：
<img src="images/example.jpg" alt="示例图片" style="vertical-align: middle;"> 文本内容图片作为链接
可以将图片嵌入到 <a> 标签中，使其成为一个可点击的链接：
<a href="https://www.example.com">
<img src="images/example.jpg" alt="示例图片">
</a>图片可以浮动
使用CSS float 属性可以让图片浮动到文本的一侧，使文本环绕图片：
<img src="images/example.jpg" alt="示例图片" style="float: left; margin: 10px;">
<p>这是一段环绕图片的文本内容。</p>常见HTML图片格式
常见的图片格式包括：
- JPEG (
.jpg或.jpeg)：适用于照片和复杂的图片。 - PNG (
.png)：支持透明背景，适用于图标和徽标。 - GIF (
.gif)：支持动画和透明背景，适用于简单的动画。 - WebP (
.webp)：现代格式，提供更好的压缩率和质量。
HTML图片的使用不仅限于简单的插入，通过合理利用各种属性和CSS，可以创建出丰富多样的视觉效果。希望本指南能帮助你更好地理解和使用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>
.fade-in {
opacity: 0;
transition: opacity 2s ease-in-out;
}
.fade-in:hover {
opacity: 1;
}
</style>
</head>
<body>
<h1>HTML 图片示例</h1>
<h2>基本用法</h2>
<img src="images/example.jpg" alt="示例图片" title="这是一个示例图片" width="300" height="200" style="border: 1px solid black;">
<h2>使用其他网站的图片</h2>
<img src="https://example.com/images/external.jpg" alt="外部图片">
<h2>图片动画特效</h2>
<img src="images/example.jpg" alt="示例图片" class="fade-in">
<h2>图片与文本对齐</h2>
<img src="images/example.jpg" alt="示例图片" style="vertical-align: middle;"> 文本内容
<h2>图片作为链接</h2>
<a href="https://www.example.com">
<img src="images/example.jpg" alt="示例图片">
</a>
<h2>图片浮动</h2>
<img src="images/example.jpg" alt="示例图片" style="float: left; margin: 10px;">
<p>这是一段环绕图片的文本内容。</p>
</body>
</html>希望这些示例能帮助你更好地理解HTML图片的使用方法。祝你编程愉快！