• 首页课程HTML趣味课堂HTML 图像

    HTML 图像

    目录列表

    标签

    在 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" />

    PHP中文网