在 HTML5 中,我們可以使用
和標簽在頁面中展示代碼。而在這些代碼中,我們還可以添加打印樣式,讓它們在用戶按下打印鍵之后能夠在紙張上良好地展示出來。要設置頁面打印樣式,我們可以使用 @media print 來定義針對打印時的樣式。在這個媒體查詢中,我們可以指定要隱藏或顯示哪些元素,以及更改字體大小和行距等樣式。
@media print {
/* 隱藏導航欄和頁腳 */
header, footer {
display: none;
}
/* 更改字體大小和行距 */
body {
font-size: 12pt;
line-height: 1.5;
}
/* 將工具欄的按鈕隱藏 */
.button-toolbar {
display: none !important;
}
}
除了使用 @media print 的方式來設置打印樣式外,還可以使用一些 HTML5 內置的標簽來改進打印效果。例如,<header>
和<footer>
標簽可以用來在打印版面上添加頁眉和頁腳。
在<title>
標簽中,我們還可以添加<small>
標簽,用來指定打印時要顯示的頁面文檔信息。例如,下面的例子會將文檔的創建日期和最后修改日期添加到打印頁面中。
我的網站創建于 2022 年 1 月 1 日,最后修改于 2022 年 1 月 5 日
總之,通過 HTML5 中內置的標簽和 @media print 的方式,我們可以更加方便地設置網頁的打印效果,提高用戶的打印體驗。