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

编码<ul>或26895140683267450450的标题/标题的最佳方法是什么? 就像我们在<table>中有<caption>一样,我们不想让它们加粗。

这个可以吗?

<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>
6个解决方案
38 votes

始终使用标题标签作为标题。 线索就是名字:)

如果您不希望它们加粗,请使用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>元素将标题和列表更清楚地关联。 (尽管没有一些JavaScript,但<section>在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;
}
Paul D. Waite answered 2020-01-05T17:28:14Z
36 votes

尽管这很旧,但我正在为以后在搜索时可能发现此问题的其他人更新它。

@马特·凯利赫(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;
}

这将创建一个列表,该列表的上方带有“标头”伪元素,其文本设置为aria-label属性中的值。 然后,您可以轻松地根据需要设置样式。

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

注意:IE8支持:before属性,但必须使用单冒号版本(并且必须定义有效的doctype)。 IE7不支持:before,但是Modernizer或Selectivizr应该为您解决该问题。 所有现代浏览器都支持旧的:before语法,但更喜欢使用:: before语法。 通常,解决此问题的最佳方法是为IE7 / 8使用外部样式表,该样式表使用旧格式,而使用新样式的样式表为常规样式表,但实际上,大多数样式表仅使用旧的单冒号格式,因为它仍然100%交叉 浏览器,即使在技术上对CSS3无效。

Erasmus answered 2020-01-05T17:29:07Z
9 votes

我喜欢将css data-headerdata-*属性用于列表

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属性的任何文本。 然后,您可以轻松地根据需要设置样式。

Matt Kelliher answered 2020-01-05T17:29:41Z
7 votes

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

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

pixeltocode answered 2020-01-05T17:30:10Z
2 votes

是否允许使用<caption>

<ul>
  <caption> Title of List </caption>
  <li> Item 1 </li>
  <li> Item 2 </li>
</ul>
phonedog365 answered 2020-01-05T17:30:29Z
0 votes

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

  1. 您必须使用特定级别:如果您在h1中,请使用h2,如果您在h5中,请使用h6(如果您在h6中……嗡嗡声,请使用strong或em作为示例)。 它不是义务,而是可访问性问题(此处为绿色部分)。

  2. 您不必为列表指定标题...因为该元素不存在。 因此屏幕阅读器将不会使用特殊的东西。

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

Alysko answered 2020-01-05T17:31:03Z
translate from https://stackoverflow.com:/questions/2227437/what-would-be-the-best-method-to-code-heading-title-for-ul-or-ol-like-we-ha