html - 以当今现代方式使用“标题”HTML 元素的最合适方式是什么？

Question

它们与 CSS 一起使用吗？（非桌子？）

它们是如何使用的？

请举例。

Answer 1

CSS 标题端属性用于指定标题相对于表格的位置（即表格上方或下方）。

Syntax:   caption-side: <value> Possible Values:  

* top
* bottom
* inherit

初始值：顶部适用于：带有标题的表继承：是媒体：视觉示例：

标题{标题侧：底部；
宽度：自动；文本对齐：左；}

<style type="text/css">
caption {
  caption-side: bottom;
  width: auto;
  text-align: left;
  }
</style>
<table border="1">
  <caption>This is the caption</caption>
  <tr>
    <td>Try changing the values to see the effect it has on the position of the caption.</td>
  </tr>
  <tr>
    <td><b>Note:</b> If this is not working, your browser might not support the caption-side property. At the time of writing, browser support for the caption-side property was limited.</td>
  </tr>
</table>

Answer 2

这个元素应该用于为表格提供一个简短的标题；它不应该用于提供表结构的描述，就像您可能对表摘要属性所做的那样。

该元素提供了一种以可视方式caption标记以下内容的方法（与不可见的 summary 属性不同）。它有一个特定于元素的属性 ，这是非常基本的并且不完全受支持（它也已被弃用，因此通常应避免使用它）。tabletablealign

每个caption元素只能使用一次，table并且必须紧跟在table开始标记之后。

虽然标题元素似乎是标记 a 的最合适的标记table，但实际上它的目的是为label数据表提供与您可能为书中的图片提供标题相同的方式。然而，在大多数印刷媒体中，插图、图像和表格的标题通常出现在项目之后，而标题元素出现在表格之前。糟糕的 CSS 样式选项caption和糟糕的对齐支持导致许多人转而选择在带有标题元素 1-6 的表格之前（例如，h3元素）。这使某些使用辅助技术（例如屏幕阅读器）的人更容易在文档中从一个标题跳转到另一个标题（有一些方法可以按标题导航，也可以在页面上显示标题列表）。但是，应该注意的是，标题实际上是为了指示标题之后的整个部分的内容，一直到下一个标题所在的位置，而不是页面的一个离散部分caption。该caption元素是识别 a 的正确标记table，然后，但如果您看到人们使用标题代替，请不要感到惊讶。

例子

这是一个表格标题，它提供了一个视觉摘要和标题：

<table border="1">
  <caption>Interest Rates for Young Saver Accounts</caption>
  <tr>
    <th>Account Type</th>
    <th>Interest Rate</th>
  </tr>
  <tr>
    <td>Smart</td>
    <td>From 2%</td>
  </tr>
  <tr>
    <td>Young Saver</td>
    <td>From 1.6%</td>
  </tr>
</table>