首页课程HTML Fun ClassHTML image

HTML image

目录列表

标签

在 HTML 中,图像由 标签定义。

是空标签,它只包含属性,并且没有闭合标签。

要在页面上显示图像,你需要使用源属性(src)。源属性的值是图像的 URL 地址。

定义图像的语法是:

<img src="url" />


在 HTML 中,用什么标签来定义图像?

< />

图像位置

URL 指存储图像的位置,你需要为位于引号之间的 src 属性放置图像位置。

例如, 如果名为 "logo.png" 的图像位于 www.php.cn 的 images 目录中,那么其 URL 为 https://www.php.cn/images/logo.png。

   <html>
   <head>
      <title>first page</title>
   </head>
   <body> 
      <img src="logo.png" alt="" />
   </body>
</html>

如果图像无法显示,则 alt 属性用来为图像定义一串预备的可替换的文本。alt 属性是必需的。


在HTML中,用什么属性来添加图像 URL?

设置图像的高度与宽度

height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。

该属性值可以以 像素 或 百分比 形式指定,默认单位为像素。

<html>
   <head>
      <title>first page</title>
   </head>
   <body> 
      <img src="logo.png" height="100px" width="100px" alt="" />
      <!-- 或者 -->
      <img src="logo.png" height="80%" width="80%" alt="" />
   </body>
</html>

在HTML中,设置图像的高度与宽度是用哪两个属性?

图像边框

标签的 border 属性规定图像周围的边框的宽度。

注释:默认情况下,图像是没有边框的。

使用 border 属性和一个用像素表示的宽度值就可以去掉 (border="0") 或加宽图像的边框。

实例:

<img src="logo.png" height="100px" width="100px" border="2" alt="" />

带有 2 像素粗边框的图像:



在横线处填写创建带有 5 像素粗边框的图像:

<img ="logo.png" alt="" ="5" />