图像对于美化以及在网页上以简单方式描绘许多复杂概念非常重要.本教程将指导您完成在网页中使用图像的简单步骤.
插入图像
您可以在网页中插入任何图像使用< img> 标记.以下是使用此标记的简单语法.
<img src = "Image URL" ... attributes-list/>
< img> tag是一个空标记,这意味着它只能包含属性列表而且没有结束标记.
示例
试试以下例如,让我们将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属性中指定正确的图像文件名。 映像名称始终区分大小写。
alt属性是必填属性,用于在无法显示图像时为图像指定替代文本。
Set Image Location
通常,我们将所有图像保存在单独的目录中。 因此,让我们将HTML文件test.htm保留在主目录中,并在主目录中创建一个子目录图像,我们将在其中保留图像test.png。
Example
假设我们的图片位置是" 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>
Set Image Width/Height
您可以根据需要使用width和height属性设置图像的宽度和高度。 您可以根据像素或图像实际大小的百分比来指定图像的宽度和高度。
Example
<!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>
Set Image Border
默认情况下,图像周围有边框,您可以使用border属性以像素为单位指定边框粗细。 厚度0表示图片周围没有边框。
Example
<!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>
Set Image Alignment
默认情况下,图像将在页面左侧对齐,但是您可以使用align属性将其设置在中间或右侧。
Example
<!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>
免费网页图形
免费网站图形包括您可以查看的模式免费网页图形