如何避免 HTML 中损坏的主题部分（例如 div）？答案

【问题标题】：How to avoid broken thematic sections (eg. div) in HTML?如何避免 HTML 中损坏的主题部分（例如 div）？
【发布时间】：2019-03-15 14:29:14
【问题描述】：

我正在尝试将印刷书籍中的文本转换为 HTML5，但同时我正在尝试保持其主题和页面/段落/行布局结构完全不变。例如，印刷书籍的每一页都被划分为<div> 部分，例如。 <div class=page id=55> 以便它准确模拟/表示印刷书籍的页面单元，也便于参考。我不太关心文本将如何在浏览器上呈现，这是我以后可以考虑的事情。我只希望 HTML 和浏览器“知道”印刷书籍的原始分页和布局。

问题是在印刷书籍中，一些段落甚至方框、表格等跨越到下一页。如果我把它翻译成 HTML，我会这样做：

<div class=page id=1>
<p>Once upon a time...</p>
...
<p>...and so the bold knight
</div>
<div class=page id=2>
slew the evil dragon.</p>
<p>Text...</p>
...

这在 HTML 中是非法的，因为我们有一个 <p> 标签被 </div> 标签打断，然后是一个以纯文本开头的新 div 元素，它被 </p> 标签关闭。

HTML 希望我用</p> 结束损坏段落的第一部分，并在 div 之后继续使用新的<p> 标签，但我没有这样做，因为它不对应于分页原书的，会导致半段被理解为2个正确的段落。

那么，如何在保持理论页/段落/断段/分页结构和信息的同时使用合法的HTML，或者至少让浏览器“知道”原始分页？有没有更合适的标签或方法来模拟分页符同时保留页码id？

可能是这样的

<p>...and so the brave knight<some tag(s) that show page 2 begins here>killed the dragon</p>

【问题讨论】：

HTML 和 CSS 无能为力。浏览器将为您关闭 unclosed p 标签，但不会打开没有打开 p 标签的新标签。你在 JS 方面还有很长的路要走，我怀疑 regex。
包装在“页面”div中是错误的方法。正如您在底部所建议的那样，您需要一些可以放在段落中间以指示分页符的排序标记。一个空的跨度可以工作，我可能想利用微数据并在那里使用带有 itemprop 属性的<meta> 元素。但我认为 HTML 中没有任何特定用途。
@Alohci 这似乎是在正确的轨道上，你能用这些标签给我写一个正确的答案吗？

标签： css html pagination

【解决方案1】：

如何不将每个页面封装在一个 div 中，而是在每个页面的开头包含一个标签来指定页码。 aside 标签似乎适合此。

<aside class="page-number" data-page="1">Page 1</aside>
<p>Once upon a time...</p>
<p>...and so the bold knight</p>
<aside class="page-number" data-page="2">Page 2</aside>
<p class="continued">slew the evil dragon.</p>
<p>Text...</p>

如果您需要继续一个段落，那么您将不得不分成多个元素，但也许您可以指定一个段落何时是前一个段落的延续。例如使用如上所示的continued 类。

如果您真的不想破坏p 标签，那么您可以在其中放置一个span，仅用于语义原因。像这样的东西；

<p>...and so the bold knight 
<span class="page-marker" aria-hidden="true" data-page="1"></span>
slew the evil dragon.</p>

但是这种方式比之前的解决方案更缺乏语义意义。

【讨论】：

这似乎是在正确的轨道上！将<aside> 标签放在段落中间是否违法，即不将其分成两部分？
@Voprosnik 是的，您不能在p 标签内添加aside，只允许使用散文。如果您真的不想破坏p，那么我想您可以在中间放置一个未显示的空白跨度。我会更新我的答案
还有一个问题。 aria-hidden="true" 是否应该包含在每个跨度标签中？既然已经有class="page-marker"，我不能把它包含在css部分吗？
@Voprosnik aria-hidden 只是告诉屏幕阅读器不要阅读该部分:)
我知道了，但我想我应该把它放在 css 部分而不是每一页。那么data-page= 呢？它是一个有效的 CSS 属性吗？我在网上没有找到任何关于它的信息。

【解决方案2】：

尝试将display: inline; 添加到page 类的CSS 样式或每个页面div 的style 属性中。

【讨论】：