HTML 图片

时间:2019-06-08 23:19:23  来源:igfitidea点击:

图片对于美化以及在网页上以简单的方式描述许多复杂的概念非常重要。

插入图片

我们可以使用<img>标记在网页中插入任何图片。

下面是使用此标记的简单语法。

<img src = "图片地址" ...属性列表 />

<img>标记是一个空标记,即它只能包含属性列表,并且没有结束标记。

示例

<body>
   <img src = "/html/images/test.png" alt = "Test Image" />
</body>

在Linux中,图片名称始终区分大小写。

alt属性是一个强制属性,如果图片无法显示,它将指定图片的替代文本。

设置图片位置

通常我们把所有的图片放在一个单独的目录中。

设置图片宽度/高度

可以使用宽度和高度属性根据需要设置图片宽度和高度。
可以用像素或实际大小的百分比指定图片的宽度和高度。

示例

<body>
   <p>设置图片的宽度和高度</p>
   <img src = "/html/images/test.png" alt = "图片测试" width = "150" height = "100"/>
</body>

设置图片边框

默认情况下,图片周围有一个边框,我们可以使用border属性以像素为单位指定边框的宽度。
宽度为0表示图片周围没有边框。

示例

<body>
   <p>设置图片边框</p>
   <img src = "/html/images/test.png" alt = "图片" border = "2"/>
</body>

设置图片对齐

默认情况下,图片将在页面的左侧对齐,但我们可以使用align属性设置左对齐或者中间对齐。

示例

<body>
   <p>设置图片对齐方式</p>
   <img src = "/html/images/test.png" alt = "图片测试" border = "3" align = "right"/>
</body>