3

我试图弄清楚这是否是好的编码风格。我知道它是有效的，至少在 HTML5 下是有效的，但我想知道它的语义是否符合我的意图。

<ol>
  <li>
    <h2>The First Item</h2>
    <p>a descriptive paragraph</p>
  </li>
  <li>
    <h2>The Second Item</h2>
    <p>a descriptive paragraph</p>
  </li>
  <li>
    <h2>The Third Item</h2>
    <p>a descriptive paragraph</p>
  </li>
</ol>

我使用的是有序列表，因为这些项目在逻辑上是按顺序排列的，但每个项目似乎都应该有一个标题。从语义上讲，这段代码有意义吗？我应该使用其他类型的标签来表示列表项的标题吗？我应该完全丢弃列表而只使用标题标签吗？这里的最佳做法是什么？

4

5 回答 5

6

它在任何版本的 HTML 中都有效。但有效性是一个正式的概念，也允许各种胡说八道。

在实践中，ol表示项目的编号列表。它不是一个列表的抽象概念，一个有序的序列。例如，一个段落在逻辑上是一个语句序列，连续的段落构成更高层次的序列。甚至一个单词的字母也是一个有序的序列。我们仍然不使用ol它们。我们使用ol浏览器生成的编号来列出相当短的项目的逐项列表，例如食谱或购物清单或支持想法的参数列表。项目的长度没有具体的上限，除非它们越长，就越不适合以编号列表的形式呈现。

因此，如果您的列表项需要标题，那么您不应该使用列表。在实际方面，如果您用作 a 中的第一个h2元素，则默认情况下，项目编号将以比标题小得多的字体显示（并且以正常重量显示，而不是粗体）。每当默认呈现非常奇怪时，您应该问自己是否正在使用 HTML 标记的真正用途。liol

该示例由以标题开头的段落组成。除了 or 之外，没有任何实际或理论上的理由为什么它应该具有标记h2，p除非出于样式或脚本的目的，您需要将标题和段落的组合视为一个单元，或将整个构造视为一个单元。如果您需要，请使用div，例如

<div class="foo">
  <div class="bar">
    <h2>The First Item</h2>
    <p>a descriptive paragraph</p>
  </div>
  <div class="bar">
    <h2>The Second Item</h2>
    <p>a descriptive paragraph</p>
  </div>
  <div class="bar">
    <h2>The Third Item</h2>
    <p>a descriptive paragraph</p>
  </div>
</div>

将fooand替换bar为反映内容的名称，或替换为和 等通用section名称subsection。（这部分取决于品味和编码风格，部分取决于您是否打算对具有不同含义的内容使用类似的标记。）

或者，您可以section按照 HTML5 草案使用标记，但这会导致问题，因为一些旧浏览器根本无法识别，并且在功能或外观方面没有实际好处（尽管这可能会改变）。

与类一起使用div可以让您轻松地设置它们的样式（或在 JavaScript 中处理它们），而无需您首先需要防止的特殊默认呈现（作为带有边距的编号列表）的负担。

如果要对项目进行编号，最稳健的方法是最明显的方法：将数字放入标题中，例如<h2>1 The First Item</h2>。如果您认为创作中的灵活性，即重新排序部件、添加和删除部件的可能性，而无需手动更改数字，足以证明在最旧的浏览器中缺少数字，您可以使用 CSS（自动编号和生成的内容) 插入数字。

于 2012-05-03T03:38:56.693 回答
1

从语义上讲，它有点多余，但如果它对您的内容有意义，那就太好了。

于 2012-05-02T23:58:59.633 回答
0

如果您的列表没有按特定顺序排列，请使用无序列表。您甚至可以考虑使用嵌套列表，但在这种情况下，我会使用定义列表。

http://jsfiddle.net/SmqFK/

于 2012-05-03T03:18:30.843 回答
0

问问自己这是否真的是一个清单。如果是这样，我认为你正在做的事情很好。另请查看 CSS 计数器和编号：http ://webdesign.about.com/od/css2/a/aa032807.htm

于 2012-05-03T00:02:53.497 回答
-4

这真的取决于你想要完成什么。html 就是为了让事情看起来不错。无论如何，对我来说似乎很好。我也喜欢这个小标签。

<ol>
  <li>
      <fieldset>
        <legend><b>The Fist Item:</b></legend>
        a descriptive paragraph
      </fieldset>
  </li>
</ol>
于 2012-05-02T23:55:36.220 回答