gpt4 book ai didi

html - 名称-值对的语义和结构

转载 作者:技术小花猫 更新时间:2023-10-29 11:31:26 25 4
gpt4 key购买 nike

这是我一直在纠结的问题。标记名称/值对的正确方法是什么?

我喜欢

元素,但它提出了一个问题:无法将一对与另一对分开 - 它们没有唯一的容器。从视觉上看,代码缺乏定义。不过,从语义上讲,我认为这是正确的标记。

<dl>
<dt>Name</dt>
<dd>Value</dd>
<dt>Name</dt>
<dd>Value</dd>
</dl>

在上面的代码中,无论是在代码中还是在渲染中,都很难在视觉上正确地偏移对。例如,如果我想在每对周围加上边框,那将是一个问题。

我们可以指向表格。可以说名称-值对是表格数据。这对我来说似乎是不正确的,但我看到了这个论点。但是,HTML 不区分名称和值,除了位置或添加类名。

<table>
<tr>
<td>Name</td>
<td>Value</td>
</tr>
<tr>
<td>Name</td>
<td>Value</td>
</tr>
</table>

从代码和 CSS 的视觉 Angular 来看,这更有意义。为上述边框设置样式是微不足道的。然而,如上所述,语义充其量是模糊的。

想法、评论、问题?

编辑/更新也许这是我应该在结构方面明确提及的事情,但定义列表也存在无法在语义上对对进行分组的问题。 dddt 之间的顺序和隐式边界很容易理解,但我仍然觉得它们有点不对劲。

最佳答案

感谢这个有趣的问题。这里还有几件事需要考虑。

什么是一对?两个元素在一起。所以我们需要一个标签。假设它是 pair 标签。

 <pair></pair>

该对包含键和对应的值:

 <pair><key>keyname</key><value>value</value></pair>

然后,我们需要列出对:

<pairlist>
<pair><key>keyname</key><value>value</value></pair>
<pair><key>keyname</key><value>value</value></pair>
</pairlist>

接下来要考虑的是对的显示。通常的布局是表格布局:

key value
key value

和可选的分隔符,通常是冒号:

key : value
key : value

可以通过 CSS 轻松添加冒号,但这在 IE 中肯定行不通。

上述情况是理想情况。但是没有有效的 HTML 标记可以轻松地适应这一点。


总结:

dl 在语义上最接近,适用于键和值的简单情况,但很难应用视觉样式(例如,显示内联对或为刚刚悬停的对添加红色边框)。最适合dl 的是词汇表。但这不是我们讨论的情况。

在这种情况下,我能看到的唯一替代方法是使用 table,如下所示:

<table summary="This are the key and value pairs">
<caption>Some notes about semantics</caption>
<thead class="aural if not needed">
<tr><th scope="col">keys</th><th scope="col">values</th></tr>
</thead>
<tbody class="group1">
<tr><th scope="row">key1</th><td>value1</td></tr>
<tr><th scope="row">key2</th><td>value2</td></tr>
</tbody>
<tbody class="group2">
<tr><th scope="row">key3</th><td>value3</td></tr>
<tr><th scope="row">key4</th><td>value4</td></tr>
</tbody>
</table>

还有一个:

<ul>
<li><strong>key</strong> value</li>
<li><strong>key</strong> value</li>
</ul>

或:

<ul>
<li><b>key</b> value</li>
<li><b>key</b> value</li>
</ul>

或者,当 key 可以链接时:

<ul>
<li><a href="/key1">key1</a> value</li>
<li><a href="/key2">key1</a> value</li>
</ul>

键值对通常存储在数据库中,而那些通常存储表格数据,所以这张 table 最适合恕我直言。

你怎么看?

关于html - 名称-值对的语义和结构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3281070/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com