在HTML5中，向网页中插入图片是一种非常基本且重要的操作，通过使用<img>标签，您可以轻松地将图片嵌入到网页中，本文将详细介绍如何在HTML5中加入图片，并提供一些有用的技巧和实践建议。
要插入图片，您需要了解图片的来源，图片可以存储在本地计算机上，也可以存储在网络服务器上，根据图片的来源，您需要使用不同的方法来引用图片。
1、插入本地图片
要在HTML5中插入本地图片，您需要使用<img>标签，并为其指定src属性。src属性的值应为图片的路径，以下是一个插入本地图片的基本示例：
<!DOCTYPE html> <html> <head> <title>插入本地图片示例</title> </head> <body> <h1>我的图片</h1> <img src="images/myphoto.jpg" alt="我的图片"> </body> </html>
在这个示例中，src属性的值设置为images/myphoto.jpg，这意味着图片存储在名为“images”的文件夹中。alt属性用于为图片提供替代文本，以便在图片无法显示时提供相关信息，这是一个重要的无障碍功能，有助于提高网页的可访问性。
2、插入网络图片
如果要从网络服务器插入图片，您需要使用完整的URL作为src属性的值，以下是一个插入网络图片的示例：
<!DOCTYPE html> <html> <head> <title>插入网络图片示例</title> </head> <body> <h1>网络图片</h1> <img src="https://example.com/images/picture.jpg" alt="网络图片"> </body> </html>
在这个示例中，图片的URL是https://example.com/images/picture.jpg，请注意，在使用网络图片时，确保您有权使用这些图片，以避免侵犯版权。
3、设置图片尺寸
通过width和height属性，您可以控制图片的显示尺寸，以下是一个设置图片尺寸的示例：
<!DOCTYPE html> <html> <head> <title>设置图片尺寸示例</title> </head> <body> <h1>调整图片尺寸</h1> <img src="images/myphoto.jpg" alt="我的图片" width="300" height="200"> </body> </html>
在这个示例中，图片的宽度被设置为300像素，高度被设置为200像素，请注意，为了保持图片的宽高比，通常只设置宽度或高度中的一个属性，让浏览器自动计算另一个属性。
4、响应式图片
为了使网页在不同设备上表现良好，您可以使用srcset和sizes属性创建响应式图片，以下是一个响应式图片的示例：
<!DOCTYPE html> <html> <head> <title>响应式图片示例</title> </head> <body> <h1>响应式图片</h1> <img src="images/myphoto.jpg" alt="我的图片" srcset="images/myphoto-320w.jpg 320w, images/myphoto-480w.jpg 480w, images/myphoto-800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"> </body> </html>
在这个示例中，我们为不同屏幕尺寸提供了不同尺寸的图片。srcset属性包含了多个图片文件及其宽度，而sizes属性定义了不同屏幕尺寸下的图片宽度，浏览器将根据设备的屏幕尺寸和分辨率自动选择合适的图片。
在HTML5中加入图片是一项简单的任务，只需使用<img>标签并设置相应的属性即可，通过掌握这些基本技巧，您可以轻松地将图片嵌入到网页中，提高网页的视觉效果和用户体验。