HTML如何在 A4 纸张大小的页面中制作 HTML 页面？

是否可以使HTML页面的行为，例如，像MS Word中的A4大小的页面？

从本质上讲，我希望能够在浏览器中显示HTML页面，并以A4大小的页面尺寸概述内容。

为了简单起见，我假设HTML页面将仅包含文本（没有图像等），并且不会有标签。<br>

此外，当打印HTML页面时，它将显示为A4大小的纸质页面。

分割线

网友回答：

很久以前，在2005年<>月，AlistApart.com 发表了一篇文章，讲述了他们如何只使用HTML和CSS出版一本书。请参阅：http://alistapart.com/article/boom

以下是该文章的摘录：

CSS2 有一个分页媒体（想想纸片）的概念，而不是连续媒体（想想滚动条）。样式表可以设置页面的大小及其边距。页面模板可以被赋予名称，元素可以说明它们要打印在哪个命名页面上。此外，源文档中的元素可以强制使用分页符。以下是我们使用的样式表中的一个片段：

@page {
    size: 7in 9.25in;
    margin: 27mm 16mm 27mm 16mm;
}

有一个美国的出版商，我们得到了以英寸为单位的页面大小。作为欧洲人，我们继续使用公制测量。CSS 接受两者。

设置页面大小和边距后，我们需要确保在正确的位置有分页符。以下摘录显示了如何在章节和附录之后生成分页符：

div.chapter, div.appendix {
    page-break-after: always;
}

此外，我们使用 CSS2 来声明命名页面：

div.titlepage {
    page: blank;
}

也就是说，标题页将打印在名称为“空白”的页面上。CSS2 描述了命名页面的概念，但只有当页眉和页脚可用时，它们的价值才会显现出来。

无论如何。。。

由于您要打印A4，因此当然需要不同的尺寸：

@page {
    size: 21cm 29.7cm;
    margin: 30mm 45mm 30mm 45mm;
     /* change the margins as you want them to be. */
}

本文深入探讨了设置分页符等内容。所以你可能想完整地阅读它。

在您的情况下，诀窍是先创建打印 CSS。大多数现代浏览器（>2005）都支持缩放，并且已经能够显示基于打印CSS的网站。

现在，您需要使Web显示看起来有点不同，并调整整个设计以适应大多数浏览器（包括2005年之前的旧浏览器）。为此，您必须创建一个Web CSS文件或覆盖打印CSS的某些部分。在为网络显示创建CSS时，请记住浏览器可以具有任何大小（想想：“移动”到“大屏幕电视”）。意思是：对于网络CSS，您的页面宽度和图像宽度最好使用可变宽度（%）进行设置，以支持尽可能多的显示设备和Web浏览客户端。

编辑（26-02-2015）

今天，我偶然在SmashingMagazine上偶然发现了另一篇最近的文章，该文章也深入研究了使用HTML和CSS进行打印设计。以防万一您可以使用另一个教程。

编辑（30-10-2018）

它引起了我的注意，因为它不是有效的 CSS3，这确实是正确的——我只是重复了文章中引用的代码，（如前所述）是很好的旧 CSS2（当你查看文章和这个答案首次发布的年份时，这是有道理的）。无论如何，这是有效的 CSS3 代码，方便您复制和粘贴：size

@media print {
    body{
        width: 21cm;
        height: 29.7cm;
        margin: 30mm 45mm 30mm 45mm; 
        /* change the margins as you want them to be. */
   } 
}

如果您认为您确实需要像素（实际上应该避免使用像素），则必须注意选择正确的DPI进行打印：

72 dpi（网络）= 595 X 842 像素
300 dpi（打印）= 2480 X 3508 像素
600 dpi（高质量打印）= 4960 X 7016 像素

然而，我会避免麻烦，只需使用（厘米）或（毫米）来调整大小，因为这可以避免根据您使用的客户端而出现的渲染故障。cmmm

分割线

网友回答：

强制 Web 浏览器以与 A4 相同的像素尺寸显示页面相当容易。但是，在呈现内容时可能会有一些怪癖。

假设您的显示器显示 72 dpi，您可以添加如下内容：

<!DOCTYPE html>
<html>
  <head>
    <style>
    body {
        height: 842px;
        width: 595px;
        /* to centre page on screen*/
        margin-left: auto;
        margin-right: auto;
    }
    </style>
  </head>
  <body>
  </body>
</html>

分割线

网友回答：

A4尺寸为210x297mm

因此，您可以使用 CSS 设置 HTML 页面以适应这些大小：

html,body{
    height:297mm;
    width:210mm;
}

模板简介：该模板名称为【HTML如何在 A4 纸张大小的页面中制作 HTML 页面？】，大小是暂无信息，文档格式为.编程语言，推荐使用Sublime/Dreamweaver/HBuilder打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【HTML】栏目查找您需要的精美模板。