预览为预告片等。

如果要显示某些其他地方已存在的内容，您可能希望使用blockquote element。如果您没有更改内容的任何内容，则只能使用blockquote。

由于它是切片根元素，因此任何标题/部分都不会影响您的轮廓。

<blockquote>
  <!-- the quoted page -->
  <h1>Foo bar page</h1>
  <nav>…</nav>
  <article></article>
  <!-- could of course also use 'iframe' if it’s the whole page + CSS -->
</blockquote>

如果要显示内容的屏幕截图，请使用blockquote：

<blockquote>
  <img src="screenshot.png" alt="Article Foo …" />
</blockquote>

如果您需要更复杂的替代内容，可能需要use object instead of img。

如果您没有引用（即内容在同一个网站上，或者您自己的内容，或者您正在解释），您可以使用article。

<article>
  <h1>Summary of article <a href="/article/foo">Foo</a></h1>
  <p>…</p>
</article>

在这种情况下，标题/部分会影响您的大纲，这是有道理的，因为它是您的内容（您汇总/转述）。

如果它只是侧边栏中的预告片/摘录（或search result或帖子列表等），您可能希望使用bookmark link type链接到实际内容。< / p>

预览，创建/编辑内容时

我想这取决于您对内容的理解，如果首先需要专用元素。有人可能会争辩说预览是页面实际内容的（部分），而且它恰好也会在另一页面上发布。因此，最基本的变体是使用适合此内容的切片元素，可能是article：

<form><!-- the content edit form --></form>
<article><!-- the preview --></article>

RESP。更有用的大纲：

<body>
  <h1>Create a new foo</h1>
  <form><!-- the content edit form --></form>
  <section>
    <h1>Preview of your foo</h1>
    <article><!-- the preview --></article> <!-- depends on your case; would also be possible to have several sectioning content elements here -->
  </section>
</body>

在这里使用figure element是有意义的;因为它是一个切片根，预览内容的可能标题/部分不会影响当前轮廓：

<form>
  <!-- the content edit form -->
</form>
<figure>
  <!-- your preview -->
</figure>

这就是我的建议：

<body>
  <h1>Create a new foo</h1>
  <form>
    <!-- the content edit form -->
  </form>

  <section>
    <h1>Preview of your foo</h1>
    <figure>
      <article>
        <!-- your preview -->
      </article>
      <!-- might use other, more or no sectioning elements here; depends on your case -->
    </figure>
  </section>
</body>

特殊情况

samp

在某些情况下，使用samp element：

可能是合适的

samp元素表示来自程序或计算系统的（样本）输出。

请注意，samp只能包含短语内容，因此您无法将其用于复杂内容。

output

在某些情况下，使用output element：

可能是合适的

output元素表示计算或用户操作的结果。

您甚至可以使用for属性将输出（=预览）与表单相关联。

就像samp一样，它只能包含短语内容，因此不适合复杂的内容。

Answer 2

听起来您可能在一个页面中包含这些网站的许多简短预览或摘要？在那种情况下，我认为有很多方法可以在更小的 HTML 块中表达这些类型的块，同时赋予它们额外的语义含义。所以我会给你几个我会在 HTML5 中尝试使用的选项。

DETAILS 元素

details 元素是 HTML5 中新的交互式元素，它显示文本摘要和用户可以通过单击摘要文本查看的其他隐藏文本详细信息。这通常由浏览器创建为一段带有下拉切换箭头的标题文本，单击时会显示隐藏的内容。此元素通常用作无 Javascript 的切换小部件，以在用户选择查看时公开其他信息。这个新的 HTML5 元素的好处在于，它将创建这个漂亮的切换、打开和关闭文本块，而无需任何 Javascript，其中包括一个漂亮的可点击摘要“栏”，可展开更多详细文本。我添加了一些额外的 CSS 以使其看起来性感。（注意：IE1-11 不支持此元素，但通过我添加的样式，它会优雅地降级并在一个堆叠块中显示摘要和 div 内容。）

<details>
  <summary style="display:block;margin: 0;padding: .2em;width: 25em;background-color: #ccccccff;box-shadow: 2px 2px 3px #aaa;">&copy; Copyright 2021</summary>
  <div style="display:block;margin: 0;padding: .2em;width: 25em;background-color: #efefefff;box-shadow: 2px 2px 3px #aaa;">
    <p>Owned by Company ABC. All Rights Reserved.</p>
    <p>All content and graphics on this web site are the property of Company ABC.</p>
  </div>
</details>

定义元素

当其术语在段落中定义时，dfn 元素表示一段定义文本。它表示将在句子中定义的一段文本。定义项通常采用纯斜体样式。不像 details 元素那么花哨，而是告诉搜索引擎您将文本标题与描述性文本相关联。如果您只想在普通段落中删除页面预览，但让它们的标题更有意义，请使用这段简单的 HTML 将标题包裹起来。您还可以在 dfn 元素周围包裹一个锚标记并链接到您正在预览的页面。那么这个链接就具有更多的语义含义。

<p>The <dfn id="sun" title="Our Shining Celestial Body">Sun</dfn> is the name of the local star in our solar system.</p>

DESCRIPTION LIST 元素

如果您的页面预览需要更正式的内容，例如列表，请尝试使用描述列表。 dl 元素是一个描述列表，包含一组描述术语 (dt) 和描述详细信息 (dd)。描述列表通常用于以键值对的形式显示页面的词汇表、词典或术语词典。如果您有很多这样的预览，那么描述列表就很棒。它确实具有很多语义含义，并允许您在不同的地方拥有描述 TERM 及其描述。同样，这比纯 HTML 段落具有更多的语义含义。我已经向其中添加了一些 CSS，当您将其粘贴到 HTML 页面中并查看它时，您会看到这些 CSS。每个描述都在一个带边框的白色块中。您可以将页面预览标题添加为术语，并在说明元素中添加文本预览。

<dl>
  <div style="margin: .2em;padding: 0 .5em;border: 1px solid #999;">
    <dt id="fruit1">Apple</dt>
    <dd nowrap="no" role="definition" aria-labelledby="fruit1">A popular fruit that grows on trees</dd>
  </div>
  <div style="margin: .2em;padding: 0 .5em;border: 1px solid #999;">
    <dt id="fruit2">Strawberry</dt>
    <dd nowrap="no" role="definition" aria-labelledby="fruit2">A popular berry that grows low to the ground</dd>
  </div>
</dl>

页面预览的最佳元素是什么？

2 个答案:

预览为预告片等。

预览，创建/编辑内容时

特殊情况