图片代码 - HTML

HTML是一种标记语言，常用于创建网页。其中，图片也是网页中不可或缺的元素。本文将介绍如何在HTML中插入图像，以及一些常见的属性和技巧。

插入图片

插入图片在HTML中通过<img>元素实现。它有两个必选属性：src和alt。其中，src指定图片的地址，可以是相对路径或绝对路径；alt则是图片的替代文本，当图片无法加载时，浏览器将显示替代文本。

<img src="example.jpg" alt="这是一张示例图片">

图片大小

width和height属性可以控制图片的大小。它们可以设置为像素或百分比，也可以只设置其中一个。

<img src="example.jpg" alt="这是一张示例图片" width="500" height="300">

<img src="example.jpg" alt="这是一张示例图片" width="50%">

图片对齐

align属性可以控制图片的对齐方式。常见的取值包括left、center和right。此外，还可以设置top、middle和bottom等值。

<img src="example.jpg" alt="这是一张示例图片" align="center">

图片链接

将图片链接到其他页面也很简单，只需要将<img>标签嵌套在<a>标签内即可。

<a href="https://www.example.com"><img src="example.jpg" alt="这是一张示例图片"></a>

响应式图片

如果希望图片在不同设备上自适应大小，可以使用CSS的max-width属性。

<style>
    img {
        max-width: 100%;
        height: auto;
    }
</style>
<img src="example.jpg" alt="这是一张示例图片">

Base64图片

使用Base64编码可以将图片嵌入到HTML中，而不需要下载外部资源。这对于一些小图标和纹理非常有用。

<img src="data:image/png;base64,iVBORw0KGgoAA... (base64编码)" alt="这是一张Base64编码的图片">

以上就是HTML中插入图像的一些基本技巧，希望对你有所帮助。