在 HTML（超文本标记语言）页面中，图片是丰富内容、提升。掌握在 HTML 页面中加入图片的表达式及相关技巧，是打造精美网页的基础。接下来，就为你详细介绍如何在 HTML 页面中添加图片。
在 HTML 中，插入图片主要通过<img>标签来实现，它是一个自闭合标签，无需结束标签，基本语法格式如下：
<img src="图片路径" alt="图片描述" width="宽度值" height="高度值">src属性是<img>标签的核心，用于明确图片的具体位置，可以是相对路径或绝对路径 。
alt属性用于在图片无法显示时，展示替代文字内容 。比如因网络故障、图片路径错误等原因，图片不能正常加载，浏览器就会显示alt属性中的文字。
此外，alt文本还有助于搜索引擎理解图片内容，对网页的 SEO（搜索引擎优化）有积极作用 。
例如<img src="flower.jpg" alt="绽放的花朵"> ，当图片无法显示时，用户能看到 “绽放的花朵” 这样的描述，不至于页面出现空白区域。
width和height属性用于定义图片的宽度和高度，单位通常为像素（px） 。可以只设置其中一个属性，另一个属性会按照原图比例自动调整；
若同时设置，要注意保持比例，否则图片可能会变形 。比如<img src="landscape.jpg" alt="风景图" width="400" height="300"> ，将图片宽度设为 400 像素，高度设为 300 像素。
如果只想设置宽度，保留高度默认值，代码如<img src="portrait.jpg" alt="人物肖像" width="200"> ，高度会按比例适配。
除了在<img>标签内设置基本尺寸，还能通过 CSS（层叠样式表）对图片进行更丰富的样式设置 。可以在 HTML 文件的<head>部分添加<style>标签，编写 CSS 样式规则；也可以使用外部 CSS 文件。
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>图片样式示例</title><style>img {border: 2px solid #000; /* 添加2像素黑色边框 */border-radius: 10px; /* 设置圆角 */box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */margin: 10px; /* 设置外边距 */}</style></head><body><img src="example.jpg" alt="示例图片"></body></html>上述代码通过 CSS 为页面中的所有图片统一添加了边框、圆角、阴影和外边距，让图片看起来更美观。
在移动互联网时代，为确保图片在不同设备上都能良好显示，可设置响应式图片 。
使用srcset和sizes属性配合<img>标签，根据设备屏幕宽度加载合适尺寸的图片 。
<img src="small.jpg"srcset="medium.jpg 1000w, large.jpg 2000w"sizes="(max-width: 600px) 100vw, 50vw"alt="响应式图片">在这段代码中，srcset定义了不同尺寸图片及其对应的像素密度描述符（w单位），sizes根据设备屏幕宽度设置图片的显示宽度，浏览器会根据设备情况自动选择合适的图片加载，既能保证图片质量，又能减少带宽消耗。
通过以上方法，你就能轻松在 HTML 页面中加入图片，并对其进行多样化设置。无论是制作个人博客、企业官网还是其他类型的网页，掌握这些技巧都能让页面更具吸引力和专业性 。
