srcmini上一章HTML教程请查看：html注释
图像是非常重要的，以美化以及描述许多复杂的概念在你的网页上简单的方式，本教程将指导你完成在web页面中使用图像的简单步骤。
插入图片
你可以使用<img>标记在web页面中插入任何图像，下面是使用此标记的简单语法。
<img src = "Image URL" ... attributes-list/><img>标记是一个空标记，这意味着它只能包含属性列表，没有关闭标记。
例子
为了尝试以下示例，让我们将HTML文件test.htm和图像文件test.png放在同一个目录中
<!DOCTYPE html>
<html>
<head>
<title>在网页内使用图像</title>
</head>
<body>
<p>简单的图像插入</p>
<img src = "/html/images/test.png" alt = "测试图像" />
</body>
</html>
你可以使用PNG, JPEG或GIF图像文件根据你的需要,但确保你在src属性指定正确的图像文件的名字，图像名称始终是区分大小写的。
alt属性是一个强制属性指定一个替代文本图像，如果图片不能显示。
设置图像的位置
通常我们把所有的图片在一个单独的目录中。让我们继续在我们的主目录,并创建一个HTML文件test.htm子目录图片在主目录,我们将会使我们test.png形象。
例子
假设我们的形象定位是“image/test.png”,试试下面的例子−
<!DOCTYPE html>
<html>
<head>
<title>在网页内使用图像</title>
</head>
<body>
<p>简单图像插入</p>
<img src = "/html/images/test.png" alt = "测试图像" />
</body>
</html>
设置图像宽度/高度
你可以根据需要使用width和height属性设置图像的宽度和高度，可以根据像素或实际大小的百分比指定图像的宽度和高度。
例子
<!DOCTYPE html>
<html>
<head>
<title>设置图像的宽度和高度</title>
</head>
<body>
<p>设置图像的宽度和高度</p>
<img src = "/html/images/test.png" alt = "测试图像" width = "150" height = "100"/>
</body>
</html>
设置图像边界
默认情况下，图像周围会有一个边框，你可以使用边框属性以像素为单位来指定边框厚度，厚度为0表示图片周围没有边框。
例子
<!DOCTYPE html>
<html>
<head>
<title>设置图像边界</title>
</head>
<body>
<p>设置图像边界</p>
<img src = "/html/images/test.png" alt = "测试图像" border = "3"/>
</body>
</html>
设置图像对齐
默认情况下，图像将在页面的左侧对齐，但你可以使用align属性将其设置在中间或右侧。
例子
<!DOCTYPE html>
<html>
<head>
<title>设置图像对齐</title>
</head>
<body>
<p>设置图像对齐</p>
<img src = "/html/images/test.png" alt = "测试图像" border = "3" align = "right"/>
</body>
</html>
评论前必须登录！
注册