如何在 HTML5 中放置标题横幅图像答案

【问题标题】：How to put header banner image in HTML5如何在 HTML5 中放置标题横幅图像
【发布时间】：2013-08-08 08:54:04
【问题描述】：

我刚开始使用 HTML5 和 CSS3。我的设计包括顶部的标题横幅。也就是说，标志和横幅图像都在一个横幅中。

现在，在 HTML5 中，我该如何编码？

<header>
<figure></figure>
</header>

或

<header>
<div>Image Header Banner</div>
</header>

【问题讨论】：

【解决方案1】：

根据您的描述，您不会在此处使用<figure>，因为您只需要添加徽标/图片即可。

<figure> 元素用于需要对带有标题的图像进行分组。

图形元素表示一个内容单元，可选地带有一个标题，它是独立的，通常被称为来自文档主要流程的单个单元，并且可以移动远离文档的主要流程而不影响文件的含义。

相反，您可以使用<img /> 标记在您的<header> 中放置图像

<header>
 <img />
 <img />
</header>

或包装在 <div> 容器中 - 取决于您的需要。

另外，请查看this article 关于<figure> 元素，特别是在文章末尾这样说：

不过，使用<figure> 元素可能并不总是合适的。例如，不应使用<figure> 标记图形横幅。相反，只需使用 <img> 元素。

【讨论】：

【解决方案2】：

<header>
    <figure>
        <img src="image" alt="Logo" />
    </figure>
</header>

【讨论】：