Html 添加两个页眉和页脚，一个用于屏幕和打印

据我所知，在HTML5中，在一个文档中（或者至少在一个部分中）应该只有一个页眉标记和一个页脚标记。但若你们想在屏幕上显示一个页脚，而在打印时显示另一个页脚，那个该怎么办呢。就HTML而言，您将两个页脚添加在一起，即使一次只显示一个页脚

---

例如，屏幕阅读器会忽略打印版本吗？

一种方法是在每个部分中放置两个部分，一个显示在屏幕上（.noprint），另一个显示用于打印（.print）。按您的意愿显示.noprint，并将.print设置为除使用“@media print”查询打印外不显示任何内容

像这样：

<header>

    <div class="noprint">
        <p>stuff for screen only goes here</p>
    </div>

    <div class="print">
        <p>stuff for print only goes here</p>
    </div>

</header>

<style>
.print {
    display: none;
}

@media print {
    .print {
        display: inherit;
    }
    .noprint {
        display: none;
    }
}
</style>

屏幕上的东西只在这里

这里只有印刷品

.打印{
显示：无；
}
@媒体印刷品{
.打印{
显示：继承；
}
.不打印{
显示：无；
}
}

另外，为了回答您关于屏幕阅读器的问题：他们通常不会读取设置为display的元素：none，我相信在这种情况下是正确的。以下是关于屏幕阅读器如何处理显示的更全面的指南：无：

---

祝你好运

使用打印样式，而不是使用两个完全不同的页眉和页脚。