为<ul>或<ol>编写标题/标题的最佳方法是什么,就像我们在<table>中有<caption>一样？

Question

什么是编写的标题/标题是最好的方法<ul>还是<ol>？就像我们<caption>在<table>,我们不想让他们大胆.

这个可以吗？

<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

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

如果您不希望它们变为粗体,请使用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;
}

在HTML5中,您可以使用<section>元素更清楚地关联标题和列表.(<section>虽然没有一些JavaScript,但在IE 8及更早版本中无法正常工作.)

<section>
    <h1>heading</h1>

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

你可以在HTML 4中做类似的事情:

<div class="list-with-heading">
    <h3>Heading</h3>

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

然后风格:

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

Answer 2

虽然这已经过时了,但我正在为其他可能在以后搜索时找到此问题的人进行更新.

@Matt Kelliher:

使用css :之前和列表的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支持:在属性之前,但必须使用单冒号版本(并且必须定义有效的doctype).IE7不支持:之前,但Modernizer或Selectivizr应该为您解决该问题.所有现代浏览器都支持旧版:在语法之前,但更喜欢使用:: before语法.通常,处理此问题的最佳方法是使用旧格式的IE7/8外部样式表和使用新格式的通用样式表,但在实践中,大多数只使用旧的单冒号格式,因为它仍然是100%交叉浏览器,即使技术上对CSS3无效.

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

怎样使标题像这样具有不同样式的列表元素

<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。重置边距和填充后，您可以在列表元素上应用除标题类之外的其他边距，以使它们缩进。