HTML 图像

基本用法

在html中,使用<img>标签来表示图像,它常用的属性有src、alt、title。

src 属性告诉浏览器在哪里可以找到所需的图像,通常是一个相对的URL,可绝对的URL。

alt 属性告诉浏览器无法加载图片时显示的图片说明。

title 属性提示图片的相关附加信息。

示例

<!DOCTYPE html>
<html>
    <head>
        <title>图像</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <h1>图像</h1>
        <img src="https://www.wangshenghua.com/docs/images/ngrok-intranet-penetration-1.png"
         alt="跟老王学编程" title="跟老王学编程">
    </body>
</html>

宽度和高度

img标签还可以指定图像的宽度和高度,分别使用属性height、width表示。

示例

<!DOCTYPE html>
<html>
    <head>
        <title>图像</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <h1>图像</h1>
        <img src="https://www.wangshenghua.com/docs/images/ngrok-intranet-penetration-1.png"
             height="20" width="30"
             alt="跟老王学编程" title="跟老王学编程">
    </body>
</html>

H5图像说明

在HTML5中引入了新的标签,用于做图片说明,让图像和说明关系更紧密。

<figure>标签用于包含图像标签及图像说明标签。

<figcaption>标签用于图像说明。

示例

<!DOCTYPE html>
<html>
    <head>
        <title>图像</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <h1>图像</h1>
        <figure>
            <img src="https://www.wangshenghua.com/docs/images/ngrok-intranet-penetration-1.png"
                 alt="跟老王学编程" title="跟老王学编程">
            <figcaption>跟老王学编程 java程序设计</figcaption>
        </figure>
    </body>
</html>