在HTML网页中添加图片,你可以使用``标签,下面是一个基本的例子:
<!DOCTYPE html> <html> <head> <title>我的网页</title> </head> <body> <img src="my_image.jpg" alt="我的图片"> </body> </html>
在这个例子中,``标签用于插入图片,`src`属性定义了图片的来源,可以是相对路径(如上例所示)或绝对URL,`alt`属性提供了图片无法显示时的替代文本,这对于网页的可访问性和搜索引擎优化(SEO)非常重要。
如果你想要控制图片的大小,你可以使用`width`和`height`属性。
<img src="my_image.jpg" alt="我的图片" width="500" height="600">
这将把图片的宽度设置为500像素,高度设置为600像素,请注意,如果你同时设置了`width`和`height`,并且它们的比例不符合原始图片的比例,那么图片可能会变形,如果你只想设置宽度或高度的一个值,而让另一个值自动缩放以保持图片的比例,你可以只设置一个值,然后让另一个值保持为空。
你也可以使用CSS来控制图片的大小和样式。
<!DOCTYPE html> <html> <head> <title>我的网页</title> <style> .my_image { width: 500px; height: auto; border: 1px solid black; } </style> </head> <body> <img src="my_image.jpg" alt="我的图片" class="my_image"> </body> </html>
在这个例子中,我们创建了一个CSS类`my_image`,并将其应用于``标签,这个类将图片的宽度设置为500像素,高度设置为自动(以保持图片的比例),并添加了一个黑色的边框。