html文档怎么添加图片

在HTML文档中插入图片是网页设计的一个基本技能，正确地插入图片不仅能美化网页，还能帮助传达更多的信息，以下是如何在HTML文档中插入图片的详细步骤和技术介绍。

1、使用<img>标签

HTML提供了<img>标签专门用于嵌入图像，这个标签是一个空标签，即它没有闭合标签，而是通过属性来定义图像的来源和显示方式。

2、设置src属性

src属性是必须的，它定义了图像文件的路径，这个路径可以是相对路径也可以是绝对路径。

<img src="images/myimage.jpg" alt="我的图片">

在上面的例子中，images/myimage.jpg是图像文件相对于当前HTML文档的路径。

3、设置alt属性

alt属性是可选的，但它非常重要，因为它为那些无法看到图像的用户提供替代文本描述，这对于搜索引擎优化（SEO）和可访问性都很重要。

<img src="images/myimage.jpg" alt="一张描述性的替代文本">

4、设置width和height属性

这两个属性用于定义图像的宽度和高度，你可以使用像素（px）、百分比（%）等单位来设置，如果没有设置这些属性，浏览器会根据图像的实际大小来显示。

5、设置title属性

title属性提供了一个额外的信息，当鼠标悬停在图片上时会显示这个信息，这增加了用户体验，但并不是必需的。

6、使用CSS进行样式化

虽然<img>标签本身不提供太多样式化选项，但你可以使用CSS来改变图片的边框、边距、对齐方式等，你可以使用CSS为图片添加一个边框：

img {
    border: 2px solid black;
}

7、响应式图片

为了在不同设备上都能良好地显示图片，可以使用响应式图片技术，如使用srcset属性指定不同分辨率下的图片源，或者使用picture元素结合多个source元素来适应不同的屏幕尺寸和分辨率。

8、图片格式

常见的图片格式包括JPEG（.jpg）、PNG（.png）、GIF（.gif），以及SVG（.svg），每种格式都有其适用场景，例如JPEG适合照片，PNG适合透明背景的图像，而SVG适合矢量图和图标。

9、图片优化

为了提高页面加载速度，应该对图片进行优化，比如压缩图片大小、选择合适的图片格式、使用图片CDN服务等。

10、图片版权

在使用图片时，要注意图片的版权问题，确保你有权使用图片，或者使用公共领域或符合Creative Commons许可的图片。