添加兩個頁眉和頁腳，一個用於屏幕和打印

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

祝好運！