html图像img元素 – HTML教程 htmlimg元素|HTML

上一章HTML教程请查看：html注释
图像是非常重要的，以美化以及描述许多复杂的概念在你的网页上简单的方式，本教程将指导你完成在web页面中使用图像的简单步骤。
插入图片你可以使用< img> 标记在web页面中插入任何图像，下面是使用此标记的简单语法。

< img src = "http://www.srcmini.com/Image URL" ... attributes-list/>

< img> 标记是一个空标记，这意味着它只能包含属性列表，没有关闭标记。
例子
为了尝试以下示例，让我们将HTML文件test.htm和图像文件test.png放在同一个目录中

< !DOCTYPE html> < html>< head> < title>在网页内使用图像< /title> < /head>< body> 简单的图像插入 < img src = "http://www.srcmini.com/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> 简单图像插入 < img src = "http://www.srcmini.com/html/images/test.png" alt = "测试图像" /> < /body>< /html>

设置图像宽度/高度你可以根据需要使用width和height属性设置图像的宽度和高度，可以根据像素或实际大小的百分比指定图像的宽度和高度。
例子

< !DOCTYPE html> < html>< head> < title>设置图像的宽度和高度< /title> < /head>< body> 设置图像的宽度和高度 < img src = "http://www.srcmini.com/html/images/test.png" alt = "测试图像" width = "150" height = "100"/> < /body>< /html>

设置图像边界默认情况下，图像周围会有一个边框，你可以使用边框属性以像素为单位来指定边框厚度，厚度为0表示图片周围没有边框。
例子

< !DOCTYPE html> < html>< head> < title>设置图像边界< /title> < /head>< body> 设置图像边界 < img src = "http://www.srcmini.com/html/images/test.png" alt = "测试图像" border = "3"/> < /body>< /html>

设置图像对齐默认情况下，图像将在页面的左侧对齐，但你可以使用align属性将其设置在中间或右侧。
【html图像img元素 – HTML教程】例子

< !DOCTYPE html> < html>< head> < title>设置图像对齐< /title> < /head>< body> 设置图像对齐 < img src = "http://www.srcmini.com/html/images/test.png" alt = "测试图像" border = "3" align = "right"/> < /body>< /html>