如何义提供一个标题,标题或标签的一个列表中HTML
-
16-09-2019 - |
题
什么是适当的方式提供一个 语义 标题为HTML名单?例如,下面列出具有"标题是"/"标题".
水果
- 苹果
- 梨
- 橙色
应该如何单词"果"处理,在这种方式,它是语义上的相关名单本身?
解决方案
同时,没有标题或项元素结构你的标记可以有效地也有同样的效果。这里有一些建议:
嵌套的列表
<ul>
<li>
Fruit
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Organge</li>
</ul>
</li>
</ul>
标题前列表
<hX>Fruit</hX>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
定义列表
<dl>
<dt>Fruit</dt>
<dd>Apple</dd>
<dd>Pear</dd>
<dd>Orange</dd>
</dl>
其他提示
备选案文1
HTML5有 figure
和 figcaption
元素, 我找到工作的相当不错。
例如:
<figure>
<figcaption>Fruit</figcaption>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
</figure>
这些都是那么容易采用CSS。
备选案文2
使用CSS3:前伪元素可能是一种好的解决方案:
HTML:
<ul title="Fruit">
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
CSS:
ul[title]::before {
content: attr(title);
/* then add some nice styling as needed, eg: */
display: block;
font-weight: bold;
padding: 4px;
}
你当然可以,使用不同的选择比 ul[title]
;例如,可以添加一个'标题为标题'类和使用 ul.title-as-header::before
相反,或者任何你需要的。
这个没有副作用,给你一个提示对整个清单。如果你不想这样的提示,可以使用的数据属性,而不是(例如, <ul data-title="fruit">
和 ul[data-title]::before { content: attr(data-title); }
).
据我所知,没有规定在当前HTML前用于提供一个标题的列表,作为没有表。我会留与使用任何一类的段落,或者一头的标签现在.
<h3>Fruit</h3>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
在未来,当HTML5得更广泛通过,你将能够使用 <legend>
和 <figure>
标签来实现这个稍微更多的语义上.
看看 这个职位 在W3C的邮件列表了解更多信息。
没有字幕样的标签一个名单如表。所以我只是给它一个 <Hx>
(x取决于你以前使用的标题).
你可以随时使用 <label/>
关联的标签给你名单的元素:
<div>
<label for="list-2">TEST</label>
<ul id="list-1">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<label for="list-2">TEST</label>
<ol id="list-2">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
不隶属于 StackOverflow