如何标记 HTML 列表的标题

发布于 2024-09-13 00:55:10 字数 870 浏览 9 评论 0原文

AFAIK，没有专用的元素（例如用于表格的、用于图形的

等）来标记列表的标题。我应该使用什么标记？

Lorem ipsum dolor sat amet， consectetur adipiscing elit。努拉 eget enim nec metus feugiat porta。悬而未决的判决没什么。前庭福西布斯·奥西·卢图斯等的原发 ultrices posuere cubilia Curae;莫尔比 nisl suscipit rutrum 中的简历。
我喜欢的水果：
凤梨
覆盆子
香蕉
在莫里斯·维尔·迪亚姆·埃莱芬德中脂肪。 Proin id neque quam，欧盟马蒂斯·伊普苏姆。 Nulla facilisi。 Sed ID 智人 eget mi cursus placerat vel sed 胡斯托。整数 vel pellentesque magna。 Donec quis nisi lacus, Accumsan 雄狮。奎斯克临时梅图斯生命 nisl eleifend aliquet。保护者 adipiscing purus magna。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

勿挽旧人 2024-09-20 00:55:10

看来您需要 HTML5 答案。如果您的所有列表都有标题，我将使用

标题，并且列表项为: 's：

<dl>
    <dt>Fruits I love:</dt>
    <dd>Ananas</dd>
    <dd>Strawberry</dd>
</dl>

如果您混合使用大量带/不带标题的列表，我会坚持使用

< ol>

中以保留语义：

<div class="list">
    <h2>Fruits I love:</h2>
    <ul>
        <li>Ananas</li>
        <li>Strawberry</li>
    </ul>
</div>

It looks like you want a HTML5 answer. If all your lists have header I would use a <dl> (now meaning description list) with a single <dt> header and the list items as <dd>'s:

<dl>
    <dt>Fruits I love:</dt>
    <dd>Ananas</dd>
    <dd>Strawberry</dd>
</dl>

If you mix a lot of lists with/without headers I would stick with <ul>/<ol> and use normal <hX>'s. Wrap the <hX> and the list in a <div> to preserve the semantics:

<div class="list">
    <h2>Fruits I love:</h2>
    <ul>
        <li>Ananas</li>
        <li>Strawberry</li>
    </ul>
</div>

回复收藏 0 原文

葬シ愛 2024-09-20 00:55:10

我会使用常规标头，最好是低于您之前使用的标头的级别。

回复收藏 0 原文

本王不退位尔等都是臣 2024-09-20 00:55:10

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget enim nec metus feugiat porta. Suspendisse convallis dictum tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi vitae erat in nisl suscipit rutrum.</p>

<p>Fruits I love:</p>
<ul>
  <li>Ananas</li>
  <li>Raspberry</li>
  <li>Banana</li>
</ul>

<p>In in mauris vel diam eleifend adipiscing. Proin id neque quam, eu mattis ipsum. Nulla facilisi. Sed id sapien eget mi cursus placerat vel sed justo. Integer vel pellentesque magna. Donec quis nisi lacus, accumsan rhoncus leo. Quisque tempor metus vitae nisl eleifend aliquet. Maecenas adipiscing purus magna.</p>

在这种情况下，没有理由使用除段落之外的任何其他内容。 figcaption 在另一种情况下是合适的：

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget enim nec metus feugiat porta. Suspendisse convallis dictum tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi vitae erat in nisl suscipit rutrum.</p>

<p>I love <a href=#fruits>some fruits</a>!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget enim nec metus feugiat porta. Suspendisse convallis dictum tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi vitae erat in nisl suscipit rutrum.</p>

<p>In in mauris vel diam eleifend adipiscing. Proin id neque quam, eu mattis ipsum. Nulla facilisi. Sed id sapien eget mi cursus placerat vel sed justo. Integer vel pellentesque magna. Donec quis nisi lacus, accumsan rhoncus leo. Quisque tempor metus vitae nisl eleifend aliquet. Maecenas adipiscing purus magna.</p>

<figure id=fruits>
  <figcaption>List 1: Fruits I love</figcaption>
  <ul>
    <li>Ananas</li>
    <li>Raspberry</li>
    <li>Banana</li>
  </ul>
</figure>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget enim nec metus feugiat porta. Suspendisse convallis dictum tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi vitae erat in nisl suscipit rutrum.</p>

<p>Fruits I love:</p>
<ul>
  <li>Ananas</li>
  <li>Raspberry</li>
  <li>Banana</li>
</ul>

<p>In in mauris vel diam eleifend adipiscing. Proin id neque quam, eu mattis ipsum. Nulla facilisi. Sed id sapien eget mi cursus placerat vel sed justo. Integer vel pellentesque magna. Donec quis nisi lacus, accumsan rhoncus leo. Quisque tempor metus vitae nisl eleifend aliquet. Maecenas adipiscing purus magna.</p>

There's no reason to use anything else than a paragraph in this case. figcaption would be appropriate in another circumstance:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget enim nec metus feugiat porta. Suspendisse convallis dictum tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi vitae erat in nisl suscipit rutrum.</p>

<p>I love <a href=#fruits>some fruits</a>!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget enim nec metus feugiat porta. Suspendisse convallis dictum tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi vitae erat in nisl suscipit rutrum.</p>

<p>In in mauris vel diam eleifend adipiscing. Proin id neque quam, eu mattis ipsum. Nulla facilisi. Sed id sapien eget mi cursus placerat vel sed justo. Integer vel pellentesque magna. Donec quis nisi lacus, accumsan rhoncus leo. Quisque tempor metus vitae nisl eleifend aliquet. Maecenas adipiscing purus magna.</p>

<figure id=fruits>
  <figcaption>List 1: Fruits I love</figcaption>
  <ul>
    <li>Ananas</li>
    <li>Raspberry</li>
    <li>Banana</li>
  </ul>
</figure>

回复收藏 0 原文