html如何加图片

HTML是一种标记语言，用于在网页中创建文本、图片、视频等内容。图片是网页制作中必不可少的元素之一，如何正确地加入图片，是每个网页制作人员都需要掌握的技能。

一、基本语法

HTML中用img标签来插入图片，img的全称是“image”，即图片的意思。下面是img标签的基本语法：

<img src="图片文件路径" alt="图片描述">

img标签有两个主要的属性：src和alt。src是指图片文件的路径，alt是指当页面无法正常显示图片时，会显示的文字说明。

其中，src属性必须填写，而alt属性可有可无。如果图片路径不正确，则图片将无法显示。如果没有设置alt属性，则页面上无法正常显示图片的地方可能会显示出一串无意义的文字。

图片路径可以是本地路径或网络路径。本地路径指的是存储在本地计算机上的图片文件的路径；网络路径指的是通过网络访问的图片文件的路径，例如从互联网上下载的图片。

二、本地图片的路径

本地图片的路径分为绝对路径和相对路径两种。绝对路径指定的是整个文件系统中的图片位置，需要写出完整的路径；相对路径则是以HTML文件为起点的路径描述，只需要写出图片相对HTML文件的位置即可。

下面分别介绍两种本地图片路径的写法。

1. 绝对路径

绝对路径指的是图片在整个文件系统中的位置。根据操作系统不同，绝对路径会稍有不同。在Windows系统中，绝对路径从盘符开始，例如：

C:\Users\Administrator\Pictures\test.jpg

在Mac OS X系统中，绝对路径从根目录开始，例如：

/Users/username/Documents/test.jpg

这种方式的缺点是，每个网页都必须使用完整的文件路径，如果文件存储位置改变，代码需要重新修改。

2. 相对路径

相对路径是指图片相对于HTML文件的位置。目录结构越简单，相对路径就越好用。在HTML文件中，"."表示当前文件所在的目录，".."表示当前文件所在的目录的上一级目录，如果图片与HTML文件处在同一目录下，可以使用相对路径表示，例如：

<img src="./images/test.jpg" alt="测试图片">

若图片存储在HTML文件所在目录的images文件夹下，则路径为“./images/test.jpg”。

三、网络图片

网络图片是指从互联网上获取的图片。在HTML中，与本地图片同样可以使用img标签来插入网络图片。

网络图片通常由URL（Uniform Resource Locator）表示，是由协议名、主机名、文件路径和文件名等组成的字符串。例如，访问百度图片的URL为：

https://www.baidu.com/img/bd_logo1.png

其中，“https://”是协议名，表示使用HTTPS协议进行数据传输；“www.baidu.com”是主机名；“img/bd_logo1.png”则是文件路径和文件名。

加入网络图片时，只需将网络图片的URL复制到img标签的src属性中即可，例如：

<img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo">

网络图片比较方便，不用担心路径问题，只要图片的URL没问题，就可以使用img标签在HTML中直接插入图片。

四、图片自适应

在网页制作过程中，一种常见的需求是让图片尺寸自适应，这样可以在不同的设备和屏幕上有更好的展示效果。常用的方法有使用CSS来设置宽度、高度和max-width等属性。

1. 使用CSS设置宽度和高度

CSS中的width和height属性可以分别设置图片的宽度和高度，例如：

<style>
    img {
        width: 100%;
        height: auto;
    }
</style>

其中，width设置为100%表示图片的宽度会随着可用空间的变化而变化；height设置为auto表示高度会根据宽度的比例自动调整，保持原始比例。

2. 使用CSS设置max-width

使用max-width属性可以使图片在超出一定宽度时自动等比缩小，但不会小于其原始尺寸。例如：

<style>
    img {
        max-width: 100%;
        height: auto;
    }
</style>

其中，max-width设置为100%表示图片的最大宽度不会超过其可用空间，且不会超过原始尺寸，height设置为auto表示高度会根据宽度的比例自动调整，保持原始比例。

总之，在网页制作中加入图片时要考虑到图片路径、图片描述、图片大小和调整等问题。只要掌握好基本语法和常见方法，就可以灵活运用HTML中的img标签，让网页更加丰富多彩。

以上是html如何加图片的详细内容。更多信息请关注PHP中文网其他相关文章！