HTML 向图像添加标题

当前位置：主页 > 学无止境 > WEB前端 > HTML >

Vue React JavaScript Angular CSS HTML

HTML 向图像添加标题

作者：迹忆客最近更新：2023/03/27 浏览次数：

本文讨论了使用 HTML 和 CSS 属性在网页上的一个或多个图像下方或上方编写标题的不同方法。

`<figcaption>` 和 `<figure>` 标签的使用

HTML 有一个特定的标签，用于向图像插入标题。 <figcaption> 表示 <figure> 元素的标题，它可以作为 HTML 中 <figure> 元素的第一个或最后一个子元素放置。

<figure> 和 <figcaption> 是 HTML5 中作为标签引入的两个新元素。在这里，<figure> 标签最适合用于显示图像和图形，而 <figcaption> 告诉观众他们在看什么。

<figcaption> 标签还支持 HTML 的全局属性和事件属性。

在下面的示例中，我们使用 <figure> 元素来标记网页或文档上的图像，并使用 <figcaption> 元素来定义图像的标题：

<!DOCTYPE html>
<html>
<body>

<figure>
  <img src="/img/jiyik/logo.png" alt="logo">
  <figcaption>jiyik Logo</figcaption>
</figure>

</body>
</html>

这里我们可以使用 HTML 中 <img> 标签的 style 属性来调整图像的分辨率（高度和宽度）。

此处，图像的分辨率设置为其原始大小。

因为<figure>和<figcaption>是新的HTML5标签，旧版本的浏览器无法理解这两个标签的处理过程。因此，这些标签在网页上呈现为内联标签，这意味着这些标签不会为图形标题自动换行，它们只会与图像并排设置。

因此，作为解决方案，我们可以使用 CSS 属性来设置 <figure> 和 <figcaption> 的样式，如下例所示：

<!DOCTYPE html>
<html>
    <head>
        <style>
            figure {
            border: 5px #4257f5 solid;
            padding: 4px;
            margin: auto;
            }
            figcaption {
            background-color:grey;
            color: white;
            font-style: italic;
            padding: 2px;
            text-align: center;
            }
        </style>
    </head>
    <body>
        <figure>
            <img src="/img/jiyik/logo.png" alt="logo" style="width:100%">
            <figcaption>DelftStack Logo</figcaption>
        </figure>
    </body>
</html>

在这里，我们可以根据需要使用不同的 CSS 属性和值来编辑 <figcaption> 和 <figure> 标签。

在图像顶部添加标题

如果没有任何相反的 CSS 指南，标题将出现在图的顶部或底部，具体取决于 <figcaption> 元素是图中的第一个元素还是最后一个元素。

在这个例子中，我们将图像的标题设置在它的顶部，如下所示：

<!DOCTYPE html>
<html>
    <head>
        <style>
            figure {
            border: 5px #4257f5 solid;
            padding: 4px;
            margin: auto;
            }
            figcaption {
            background-color:grey;
            color: white;
            font-style: italic;
            padding: 2px;
            text-align: center;
            }
        </style>
    </head>
    <body>
        <figure>
            <figcaption>Fig.2 - Jiyik Logo</figcaption>
            <img src="/img/jiyik/logo.png" alt="logo" style="width:100%">
        </figure>
    </body>
</html>

使用 `<figure>` 和 `<figcaption>` 标签为多个图像添加标题

我们可以在 <figcaption> 的帮助下为多个图像添加标题：

<!DOCTYPE html>
<html>
<body>

<figure>
  <img src="/img/jiyik/logo.png" alt="logo">
  <figcaption>Jiyik Logo</figcaption>
</figure>

<figure>
  <img src="/img/jiyik/logo.png" alt="logo">
  <figcaption>Fig.2 - Jiyik Logo</figcaption>
</figure>

</body>
</html>

我们可以使用 CSS 属性通过向文本添加不同的样式或颜色来格式化图像的标题。

使用 `<div>` 标签为多张图片添加说明

借助 <div> 标签和 CSS 属性，我们可以同时为多个图像添加标题。在下面的示例中，我们将为两个图像添加标题，并且可以选择添加一个链接，一旦单击图像，该链接将指向另一个网页或网站。

<!DOCTYPE html>
<html>
    <head>
        <style>
            #pictures{
            text-align:center;
            margin:50px auto;
            }
            #pictures a{
            margin:0px 50px;
            display:inline-block;
            text-decoration:none;
            color:black;
            }
        </style>
    </head>
    <body>
        <div id="pictures">
            <a href="">
                <img src="/img/Jiyik/logo.png" width="480px" height="90px">
                <div class="caption">Fig 1 - Jiyik Logo</div>
            </a>
            <a href="">
                <img src="/img/Jiyik/logo.png" width="480px" height="90px">
                <div class="caption">Fig 2 - Jiyik Logo</div>
            </a>
        </div>
    </body>
</html>

使用此方法时，我们可以在顶部添加图像的标题，并进一步实现。

总结

如上所述，可以使用不同的方法来使用 HTML 和 CSS 属性为图像添加标题。尽管如此，某些方法，例如以表格格式添加一个或多个图像及其标题，目前并不适用。

HTML5 中的 <figure> 和 <figcaption> 等新标签使为图像添加字幕的任务变得更加容易。

上一篇：HTML 格式中在图像上单击或悬停时进行放大

下一篇：HTML 图像的透明度

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享