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

Question

据我对HTML5的了解，您在文档中（或至少在一部分中）应该只包含一个标头标签和一个页脚标签。 但是，如果要在屏幕上显示一个页脚，而在打印时显示另一个页脚，该怎么办。 就HTML而言，即使一次只出现一个页脚，您也要添加两个页脚。

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

Answer 1

一种方法是将每个部分放在两个部分中，一个部分显示在屏幕上（.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的元素，我相信在这种情况下是正确的。 这是有关屏幕阅读器如何处理显示的更全面的指南：无：

http://juicystudio.com/article/screen-readers-display-none.php

祝好运！