为编码标题/标题的最佳方法是什么？或，就像我们有一样在<表>中？

Question

编码

或
标题/标题的最佳方法是什么？就像我们在 中有

一样，我们不想将它们设置为粗体。

这样可以吗？

<p>heading</p>
<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

或者应该始终使用标题？

<h3|4|5|6>heading</h3|4|5|6>
<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

Answer 1

虽然这已经很旧了，但我正在为以后搜索时可能发现这个问题的其他人更新它。

@Matt Kelliher：

使用 css :before 和列表的 data-* 属性是个好主意，但也可以稍微修改一下，以便更方便地访问：

HTML:

<ul aria-label="Vehicle Models Available:"> 
    <li>Dodge Shadow</li>
    <li>Ford Focus</li>
    <li>Chevy Lumina</li>
</ul>

CSS:

ul:before{
    content:attr(aria-label);
    font-size:120%;
    font-weight:bold;
    margin-left:-15px;
}

这将创建一个列表，其上方有“header”伪元素，文本设置为aria-label 属性中的值。然后您可以轻松地根据您的需要设计它。

与使用 data-* 属性相比，这样做的好处是屏幕阅读器将读取 aria-label 作为列表的“标签”，这在语义上对于您对此数据的预期用途来说是正确的。

注意： IE8 支持 :before 属性，但必须使用单冒号版本（并且必须定义有效的文档类型）。 IE7 不支持 :before，但 Modernizer 或 Selectivizr 应该可以为您解决该问题。所有现代浏览器都支持旧的 :before 语法，但更喜欢使用 ::before 语法。一般来说，处理这个问题的最佳方法是使用旧格式的 IE7/8 外部样式表和使用新格式的通用样式表，但实际上，大多数只使用旧的单冒号格式，因为它仍然是 100% 交叉浏览器，即使技术上对 CSS3 无效。

Answer 2

始终使用标题标签作为标题。线索就在名称中:)

如果您不希望它们变得粗体，请使用 CSS 更改其样式。例如：

HTML:

<h3 class="list-heading">heading</h3>

<ul> 
    <li>list item </li>
    <li>list item </li>
    <li>list item </li>
</ul>

CSS

.list-heading {
    font-weight: normal;
}

您可以使用

元素，如果它们包含文档的一部分：

<section class=“list-with-heading”>
    <h3>heading</h3>

    <ul>
        <li>list item </li>
        <li>list item </li>
        <li>list item </li>
    </ul>
</section>

则样式如下：

.list-with-heading h3 {
    font-weight: normal;
}

Answer 3

我喜欢对列表使用 css :before 和 data-* 属性

HTML:

<ul data-header="heading"> 
<li>list item </li>
<li>list item </li>
<li>list item </li>
</ul>

CSS:

ul:before{
    content:attr(data-header);
    font-size:120%;
    font-weight:bold;
    margin-left:-15px;
}

这将创建一个带有标题的列表，该标题可以是任何内容文本被指定为列表的 data-header 属性。然后您可以轻松地根据您的需要设计它。

Answer 4

如何将标题设为具有不同样式的列表元素（如 so

<ul>
 <li class="heading">heading</li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
</ul>

和 CSS）

ul .heading {font-weight: normal; list-style: none;}

，另外，使用重置 CSS 在 ul 和 li 上设置边距和填充。 这里一个很好的重置CSS。重置边距和填充后，您可以在除标题类之外的列表元素上应用一些边距，以缩进它们。

Answer 5

是否允许使用 ？

<ul>
  <caption> Title of List </caption>
  <li> Item 1 </li>
  <li> Item 2 </li>
</ul>

Answer 6

h3 绝对是比 h2、h1 或 h6 更好的解决方案！

1. 你必须使用特定的级别：如果你在 h1 中，使用 h2，如果你在 h5 中，使用 h6（如果你在 h6 中......嗯，使用 Strong 或 em 例如）。这不是一项义务，而是一个可访问性问题 (这里，绿色部分）。

2. 您不必为列表提供标题...因为该元素不存在。所以屏幕阅读器不会使用特殊的东西。

因此，使用 Hn 可能是最好的解决方案之一，但肯定不是一个特定的级别。