在HTML中做一个好看的页面图片的显示是必不可少的一部分，这里介绍HTML中图片标签的使用方法。
图像标签
您可以使用 <img> 标记在网页中插入图像。以下是使用此标签的简单语法。
<img src = "Image URL" ... attributes-list/><img> 标签是一个空标签，这意味着它只能包含属性列表，并且没有结束标签。
示例
要尝试以下示例，让我们将 HTML 文件 xxx.htm 和图像文件 xxx.png 保存在同一目录中，不过，这里为了演示方便放在相对路径中：
<!DOCTYPE html>
<html>
<head>
<title>使用image标签例子</title>
</head>
<body>
<p>简单img标签的例子</p>
<img src = "/static/default/images/logo.png" alt = "易学教程" />
</body>
</html>您可以使用 PNG、JPEG 或 GIF 扩展名的图像，图像名称始终区分大小写。
alt 属性在做页面显示的时候最好能带上，如果图像无法显示，它会指定图像的替代文本。
设置图像位置
通常我们将所有图像保存在单独的目录中。因此，让我们将 HTML 文件 test.htm 保留在主目录中，并在主目录中创建一个子目录 images，我们将在其中保存图像 test.png。
示例
假设我们的图像位置是"/static/default/images/logo.png"，请尝试以下示例 -
<!DOCTYPE html>
<html>
<head>
<title>网页图像例子</title>
</head>
<body>
<p>网页位置</p>
<img src = "/static/default/images/logo.png" alt = "易学教程" />
</body>
</html>设置图像宽度/高度
您可以使用宽度和高度属性根据您的要求设置图像的宽度和高度。您可以按照像素或实际尺寸的百分比来指定图像的宽度和高度。
示例
<!DOCTYPE html>
<html>
<head>
<title>设置图像宽高</title>
</head>
<body>
<p>设置图像宽高</p>
<img src = "/static/default/images/logo.png" alt = "易学教程" width = "150" height = "100"/>
</body>
</html>设置图像边框
默认情况下，图像周围会有边框，您可以使用 border 属性以像素为单位指定边框厚度。border为 0 表示图片周围没有边框。
示例
<!DOCTYPE html>
<html>
<head>
<title>设置图像边框</title>
</head>
<body>
<p>设置图像边框</p>
<img src = "/static/default/images/logo.png" alt = "易学教程" border = "3"/>
</body>
</html>设置图像对齐方式
默认情况下，图像将在页面左侧对齐，但您可以使用align属性将其设置为居中或居右。
示例
<!DOCTYPE html>
<html>
<head>
<title>设置图像对齐方式</title>
</head>
<body>
<p>设置图像对齐方式</p>
<img src = "/static/default/images/logo.png" alt = "易学教程" border = "3" align = "right"/>
</body>
</html>