List 规范列表的HTML5标记
我很难理解以下信息的正确标记是什么 这将是一份葡萄酒的规格清单：List 规范列表的HTML5标记,list,html,format,markup,specifications,List,Html,Format,Markup,Specifications,我很难理解以下信息的正确标记是什么 这将是一份葡萄酒的规格清单： 土壤：土壤是石灰岩和粘土的混合物 绥靖：圣埃米利昂 葡萄藤下面积：7.3公顷 葡萄品种： 梅洛：50% 赤霞珠法郎：50% 陈酿：在新橡木桶中陈酿24个月 顶级年份： 1929年 2009年 酒窖价值图表重设基址： 所以首先我想：如果每个项目都是规范部分中的部分，这看起来会很不错，但后来它看起来不是一个部分，因为它基本上由键：值对组成 因此，我更改了一个定义列表，其中包含一些定义术语，很少有项目包含多个定义。它在标记
- 土壤：土壤是石灰岩和粘土的混合物
- 绥靖：圣埃米利昂
- 葡萄藤下面积：7.3公顷
- 葡萄品种：
- 梅洛：50%
- 赤霞珠法郎：50%
- 陈酿：在新橡木桶中陈酿24个月
- 顶级年份：
- 1929年
- 2009年
- 酒窖价值图表重设基址：
部分中的部分，这看起来会很不错，但后来它看起来不是一个部分，因为它基本上由键：值对组成
因此，我更改了一个定义列表
，其中包含一些定义术语，很少有项目包含多个定义。它在标记中看起来很好，但是如果需要一个块/流元素来搜索其中一个定义并将它们并排浮动，则无法正确设置样式
大概是这样的：
然后我想到我也可以使用无序列表，但我不确定这是否是一个好的标记，因为它实际上必须为每个列表项创建一个标题，并将其值插入到下一个段落中（对我来说似乎太多了）
那么，也许是一张桌子？…好吧，在有这么多选择之后，我有点困惑，这让我感觉更舒服，但仍然是sub-部分
的替代方案，但我不确定这是否是一个好的标记，因为我对部分的印象是，在某些情况下，它们将包含比一行更多的内容
如果有人能在这里提供帮助，让它在一个干净的标记上工作，但同时考虑到可访问性，那就太好了：
提前感谢最具地方特色的是定义列表，在“葡萄品种”和“顶级年份”标签中还有其他较小的列表。但是，您表示您在样式方面有问题。如果你能提供更多关于你希望如何设计它的信息，以及为什么你不能使用CSS来设计它，人们可能会帮你解决这个问题。最有趣的事情是定义列表，在
标签中有更多关于“葡萄品种”和“顶级年份”的小列表。但是，您表示您在样式方面有问题。如果你能提供更多关于你希望如何设计它的信息，以及为什么你不能使用CSS，人们可能会帮你解决这个问题。好的，现在我理解你的问题了。我不知道这是否能满足您的需要，但我已经能够实现这个结果（与FF/Chrome/IE8一起使用）：
我的方法存在以下问题：
您需要手动设置dl的高度
横向规则是不灵活的，并且附加到dts（但是，您可以通过适当使用边距和填充来解决这一问题
如果您希望这些行中的每一行具有不同的高度，则需要为每一行中的至少一个dt标记分配css类（请参阅本文的底端）
正如您所看到的，我的标记非常简单。但是css并不是那么简单。此外，这种方法是极简风格，并且不是很灵活（请注意，我没有使用任何边距/填充来使其看起来更好）：
一种完全不同的方法是在dl上使用position:relative
，并根据其各自的类别将成员绝对定位。好的，现在我了解您的问题。我不知道这是否能满足您的需要，但我已经能够实现这一结果（与FF/Chrome/IE8一起使用）：
我的方法存在以下问题：
您需要手动设置dl的高度
横向规则是不灵活的，并且附加到dts（但是，您可以通过适当使用边距和填充来解决这一问题
如果您希望这些行中的每一行具有不同的高度，则需要为每一行中的至少一个dt标记分配css类（请参阅本文的底端）
正如您所看到的，我的标记非常简单。但是css并不是那么简单。此外，这种方法是极简风格，并且不是很灵活（请注意，我没有使用任何边距/填充来使其看起来更好）：
一种完全不同的方法是在dl上使用position:relative
，并根据其各自的类别将成员absolute
ly定位。这是@dealer solution的幻灯片修改
- 您不需要设置dl高度
- 每个dd可以不同，而不是固定高度
Информация за вино
.葡萄酒说明
{
字体系列：无衬线；
字体大小：12px；
背景色：#efece7；
宽度：600px；
填充：5px20px10px；
}
.葡萄酒说明：酒后饮用
{
明确：两者皆有；
身高：0；
显示：块；
可见性：隐藏；
内容：“.”；
}
.葡萄酒说明
{
颜色：#908f8c；
字体大小：120%；
字体大小：粗体；
文本转换：大写；
浮动：左；
宽度：200px；
填充：5px0；
边框顶部：1px实心#fff；
}
.葡萄酒描述dt.葡萄酒-土壤
{
边框顶部宽度：0px；
宽度：100%；
}
.葡萄酒描述dd
{
颜色：#98676d；
浮动：左；
宽度：195px；/*+5px填充右=200px*/
利润率：30px0-200px；
填充：0 5px25px0；
}
.葡萄酒说明dt.wine-soi
dl.winelist {
background-color: #fdd;
width: 600px;
height: 452px; /* 3 * 150px boxes + 2 * 1px border */
border: 1px solid #000;
}
dl.winelist dt {
width: 200px; /* definition for normal boxes */
height: 150px;
float: left;
font-weight: bold;
background-color: #070;
margin: 0;
border-top: 1px solid #000;
}
dl.winelist dt:first-child {
border-top: 0 /* only show those lines <i>between</i> the boxes */
}
dl.winelist dd {
font-style: italic;
background-color: #770;
margin: 30px 0 0; /* dd gets positioned 30px below the origin of dt */
width: 200px;
float: left;
margin-left: -200px; /* could combine that with margin statement above */
}
dl.winelist dt.triple {
width: 600px;
}
dl.winelist dt.triple + dd {
width: 600px;
margin-left: -600px;
}
dl.winelist ul {
list-style: none; /* you can freely style the ul, it won't actually break anything */
margin: 0;
padding: 0;
}
dt.appelation, dt.aging {
clear: left;
}
dt.soil {
height: 150px;
}
dt.appelation {
height: 120px;
}
dt.aging {
height: 240px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Информация за вино</title>
<style type="text/css">
.wine-description
{
font-family: sans-serif;
font-size: 12px;
background-color: #efece7;
width: 600px;
padding: 5px 20px 10px;
}
.wine-description:after
{
clear: both;
height: 0;
display: block;
visibility: hidden;
content: ".";
}
.wine-description dt
{
color: #908f8c;
font-size: 120%;
font-weight: bold;
text-transform: uppercase;
float:left;
width: 200px;
padding: 5px 0;
border-top: 1px solid #fff;
}
.wine-description dt.wine-soil
{
border-top-width: 0px;
width: 100%;
}
.wine-description dd
{
color: #98676d;
float: left;
width: 195px; /* +5px padding-right = 200px; */
margin: 30px 0 0 -200px;
padding: 0 5px 25px 0;
}
.wine-description dt.wine-soil + dd
{
margin: 0 0 10px;
width: 100%;
}
.clear
{
clear: left;
}
</style>
</head>
<body>
<dl class="wine-description">
<dt class="wine-soil">Soil</dt>
<dd>The soil is a mixture of limestone and clay, becoming sandier on the lower reaches where the grapes exhibit slidhtly lower accidity.</dd>
<dd class="clear"> </dd>
<dt>Apellation</dt>
<dd>St. Emillion</dd>
<dt>Area under vine</dt>
<dd>7.3 Hectares</dd>
<dt>Anual production</dt>
<dd>2200 Cases per annum</dd>
<dd class="clear"> </dd>
<dt>Grape vrieties</dt>
<dd>Merlot (50%)<br />Cabernet Franc (50%)</dd>
<dt>Ageing</dt>
<dd>Aged in new oak barrels for 24-27 months</dd>
<dt>Top vintages</dt>
<dd>1929, 1979, 1982, 1995, 1996, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006</dd>
</dl>
</body>
</html>