CSS 为 <ul> 或 <ol> 编码标题/标题的最佳方法是什么，就像我们在 <table> 中有 <caption> 一样？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2227437/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What would be the best method to code heading/title for <ul> or <ol>, Like we have <caption> in <table>?
提问by Jitendra Vyas
What would be the best method to code heading/title of <ul>or <ol>? Like we have <caption>in <table>, and we don't want to make them bold.
对<ul>or 的标题/标题进行编码的最佳方法是<ol>什么？就像我们在<caption>中一样<table>，我们不想让它们变得大胆。
Is this okay?
这个可以吗？
<p>heading</p>
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
Or should headings always be used?
还是应该始终使用标题？
<h3|4|5|6>heading</h3|4|5|6>
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
回答by Erasmus
Though this is old, I'm updating it for others who might find this question when searching later.
虽然这是旧的，但我正在为以后搜索时可能会发现这个问题的其他人更新它。
@Matt Kelliher:
@马特凯利赫：
Using the css :beforeand a data-* attribute for the list is a great idea, but can be modified slightly to be more handicap accessible as well:
使用 css :before和列表的data-* 属性是一个好主意，但可以稍微修改以使其更易于访问：
HTML:
HTML：
<ul aria-label="Vehicle Models Available:">
<li>Dodge Shadow</li>
<li>Ford Focus</li>
<li>Chevy Lumina</li>
</ul>
CSS:
CSS：
ul:before{
content:attr(aria-label);
font-size:120%;
font-weight:bold;
margin-left:-15px;
}
This will make a list with the "header" pseudo element above it with text set to the value in the aria-label attribute. You can then easily style it to your needs.
这将创建一个列表，上面有“header”伪元素，文本设置为 aria-label 属性中的值。然后，您可以轻松地根据需要对其进行样式设置。
The benefit of this over using a data-* attribute is that aria-label will be read off by screen readers as a "label" for the list, which is semantically correct for your intended use of this data.
与使用 data-* 属性相比，这样做的好处是 aria-label 将被屏幕阅读器读取为列表的“标签”，这对于您对该数据的预期用途来说在语义上是正确的。
Note:IE8 supports :before attributes, but must use the single colon version (and must have a valid doctype defined). IE7 does not support :before, but Modernizer or Selectivizr should fix that issue for you. All modern browsers support the older :before syntax, but prefer that the ::before syntax be used. Generally the best way to handle this is to have an external stylesheet for IE7/8 that uses the old format and a general stylesheet using the new format, but in practice, most just use the old single colon format since it is still 100% cross browser, even if not technically valid for CSS3.
注意：IE8 支持 :before 属性，但必须使用单冒号版本（并且必须定义有效的文档类型）。IE7 不支持 :before，但 Modernizer 或 Selectivizr 应该会为您解决这个问题。所有现代浏览器都支持旧的 :before 语法，但更喜欢使用 ::before 语法。通常，处理此问题的最佳方法是使用旧格式的 IE7/8 外部样式表和使用新格式的通用样式表，但实际上，大多数只使用旧的单冒号格式，因为它仍然是 100% 交叉浏览器，即使在技术上对 CSS3 无效。
回答by Paul D. Waite
Always use heading tags for headings. The clue is in the name :)
始终使用标题标签作为标题。线索就在名字里:)
If you don't want them to be bold, change their style with CSS. For example:
如果您不希望它们变得粗体，请使用 CSS 更改它们的样式。例如：
HTML:
HTML：
<h3 class="list-heading">heading</h3>
<ul>
<li>list item </li>
<li>list item </li>
<li>list item </li>
</ul>
CSS
CSS
.list-heading {
font-weight: normal;
}
In HTML5, you can associate the heading and the list more clearly by using the <section>element. (<section>doesn't work properly in IE 8 and earlier without some JavaScript though.)
在 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>
You could do something similar in HTML 4:
你可以在 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>
Then style thus:
然后样式如下：
.list-with-heading h3 {
font-weight: normal;
}
回答by Matt Kelliher
I like to make use of the css :beforeand a data-*attribute for the list
我喜欢使用 css:before和data-*列表的属性
HTML:
HTML：
<ul data-header="heading">
<li>list item </li>
<li>list item </li>
<li>list item </li>
</ul>
CSS:
CSS：
ul:before{
content:attr(data-header);
font-size:120%;
font-weight:bold;
margin-left:-15px;
}
This will make a list with the header on it that is whatever text is specified as the list's data-headerattribute. You can then easily style it to your needs.
这将创建一个带有标题的列表，该列表是指定为列表data-header属性的任何文本。然后，您可以轻松地根据需要对其进行样式设置。
回答by pixeltocode
how about making the heading a list-element with different styles like so
如何使标题成为具有不同样式的列表元素
<ul>
<li class="heading">heading</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
and the CSS
和 CSS
ul .heading {font-weight: normal; list-style: none;}
additionally, use a reset CSS to set margins and paddings right on the ul and li. here'sa good reset CSS. once you've reset the margins and paddings, you can apply some margin on the list-elements other than the one's with the heading class, to indent them.
此外，使用重置 CSS 在 ul 和 li 上设置边距和填充。这是一个很好的重置 CSS。一旦你重置了边距和填充，你可以在列表元素上应用一些边距而不是带有标题类的元素，以缩进它们。
回答by phonedog365
Would the use of <caption>be allowed?
将使用<caption>被允许？
<ul>
<caption> Title of List </caption>
<li> Item 1 </li>
<li> Item 2 </li>
</ul>
回答by Alysko
h3 is absolutly a better solution than h2, h1 or h6 !
h3 绝对是比 h2、h1 或 h6 更好的解决方案！
You have to use specific level : if you're in a h1, use h2, if you're in a h5, use h6 (if you're in a h6... hum, use strong or em for exemple). It not a obligation but a question of accessibility (Here, green part).
You don't have to give title to list... because this element it doesn't exist. So screen reader will not use something special.
您必须使用特定级别：如果您在 h1 中，则使用 h2，如果您在 h5 中，则使用 h6（如果您在 h6 中......嗯，例如使用 strong 或 em）。这不是义务，而是可访问性问题（此处，绿色部分）。
您不必为列表提供标题...因为它不存在此元素。所以屏幕阅读器不会使用特殊的东西。
Therefore, using Hn is probably one of the best solution, but surely not a specific level.
因此，使用 Hn 可能是最好的解决方案之一，但肯定不是特定级别。
