HTML图片
图像对于美化以及以简单的方式在你的网页上描绘许多复杂的概念非常重要。本教程将引导你完成一些简单的步骤，以在网页中使用图像。
插入图片
你可以使用以下方法在网页中插入任何图像：标签。以下是使用此标记的简单语法。
<img src = "Image URL" ... attributes-list/>
标记是一个空标记，这意味着它只能包含属性列表，而没有结束标记。
要尝试以下示例，我们将HTML文件test.htm和图像文件test.png保留在同一目录中：
<!DOCTYPE html> <html> <head> <title>Using Image in Webpage</title> </head> <body> <p>Simple Image Insert</p> <img src = "/html/images/test.png" alt = "Test Image" /> </body> </html>
这将产生以下结果：
你可以根据自己的喜好使用PNG，JPEG或GIF图像文件，但请确保在src属性。映像名称始终区分大小写。
Thealt属性是必填属性，用于在无法显示图像时为图像指定替代文本。
设置图像位置
通常，我们将所有图像保存在单独的目录中。因此，让我们将HTML文件test.htm保留在主目录中并创建一个子目录images在主目录中，我们将保留图像test.png。
假设我们的图片位置是“ image / test.png”，请尝试以下示例：
<!DOCTYPE html> <html> <head> <title>Using Image in Webpage</title> </head> <body> <p>Simple Image Insert</p> <img src = "/html/images/test.png" alt = "Test Image" /> </body> </html>
这将产生以下结果：
设置图像的宽度/高度
你可以根据需要使用以下方式设置图像的宽度和高度：widthandheight属性。你可以根据像素或图像实际大小的百分比来指定图像的宽度和高度。
<!DOCTYPE html> <html> <head> <title>Set Image Width and Height</title> </head> <body> <p>Setting image width and height</p> <img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/> </body> </html>
这将产生以下结果：
设置图像边框
默认情况下，图像周围有边框，你可以使用border属性以像素为单位指定边框粗细。厚度0表示图片周围没有边框。
<!DOCTYPE html> <html> <head> <title>Set Image Border</title> </head> <body> <p>Setting image Border</p> <img src = "/html/images/test.png" alt = "Test Image" border = "3"/> </body> </html>
这将产生以下结果：
设置图像对齐
默认情况下，图像将在页面左侧对齐，但是你可以使用align属性以将其设置在中央或右侧。
<!DOCTYPE html> <html> <head> <title>Set Image Alignment</title> </head> <body> <p>Setting image Alignment</p> <img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/> </body> </html>
这将产生以下结果：
免费网络图形
对于免费的Web图形(包括模式)，你可以查看 免费网络图形