如何添加图像 - Html

在 HTML 中，通过<img>标签添加图像。

基本语法

<img src="image.png" alt="描述文本" width="500" height="300">

其中：

• src 属性指定图像文件的 URL。
• alt 属性是一段替换文本，用于在图像无法显示时提供替代信息。
• width 和 height 属性分别设置图像的宽度和高度，单位为像素。

更多属性

title

title 属性用于设置图像的标题。当鼠标悬停在图像上时，title 属性值将显示为提示。

<img src="image.png" alt="描述文本" title="标题文本">

border

border 属性用于设置图像边框的宽度，单位为像素。

<img src="image.png" alt="描述文本" border="1">

align

align 属性用于设置图像在文本中的对齐方式。可以设置为 left、right 或 center。默认值为 none。

<img src="image.png" alt="描述文本" align="left">

style

style 属性用于设置图像样式。可以使用任何 CSS 样式。

<img src="image.png" alt="描述文本" style="border: 1px solid black; margin: 10px;">

响应式图像

可以通过 CSS 让图像在不同屏幕设备上自适应大小。一种常用的方法是使用 max-width 属性。以下示例将图像最大宽度设置为 100%。

<style>
    img {
        max-width: 100%;
        height: auto;
    }
</style>
<img src="image.png" alt="描述文本">

总结

在 HTML 中添加图像非常简单，只需使用 <img> 标签，并设置相关属性即可。还可以通过 CSS 让图像自适应大小，适应不同屏幕设备。