logo标签列表

我应该使用<span>标签还是<p>标签？

htmlcsssemantic-markup
6

我在Photoshop中制作了这个草图，现在正在将其转换为HTML和CSS。

enter image description here

"HTML:"
<div class="pricebox">
    <p class="price">360kr</p>
    <p class="min">40 min</p>
    <p class="info green">Körlektion</p>
</div>

<div class="pricebox">
    <p class="price">1700kr</p>
    <p class="min">Riskutbildnig 2</p>
    <p class="info yellow">Halkan</p>
</div>  
<div class="pricebox">
    <p class="price">500kr</p>
    <p class="min">Riskutbildning 1</p>
    <p class="info red">Riskettan</p>
</div>

CSS（层叠样式表）
body {
    font-family: "Myriad Pro",Myriad,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
.pricebox {
    display:inline-block;
    border: 1px solid #EEEEEE;
    border-radius: 3px;
    width: 100px;
    height: 150px;
    margin: 5px;
}

.price{
    font-size: 28px;
    font-weight:300;
    color: #383838;
    padding: 11px;
}
.min {
    font-size: 11px;
    color: #909090;
    padding: 0 25px;
}
.info {
    height: 35%;
    margin-top: 15px;
    color: #EEEEEE;
    font-weight: 600;
    font-size: 11px;
}
.green{background-color: #a7d155;}
.yellow{background-color: #eada42;}
.red{background-color: #e54e4b;}

但是我不太确定如何组织所有内容，应该使用span或div标签而不是p标签。

请查看这个jsfiddle: http://jsfiddle.net/upas3/1/

欢迎任何想法或解决方案。

这些图片的功能是什么？ - Eric Goncalves
1
这是个人偏好，我会使用span或div，因为它们需要较少的覆盖。 - dmi3y
你所做的将会起作用。只需确保使用CSS正确放置<p>标签即可。 - ATOzTOA
如果你想只用CSS做小三角形，我可以推荐http://www.cssportal.com/css3-shapes/。 - s1lence
我在语言方面有些挑战，你有价格、时间、地点吗？什么是最重要的？ - steveax
显示剩余2条评论
10个回答
5

对于每个这样的块，我会使用 DL 列表，使用 UL 列表将它们在语义上分组:

<ul>
    <li><dl>
        <dt>Körlektion</dt>
        <dd>360kr</dd>
        <dd>40 min</dd>
    </dl></li>

    <li><dl>
        <dt>Halkan</dt>
        <dd>1700kr</dd>
        <dd>Riskutbildnig 2</dd>
    </dl></li>

    <li><dl>
        <dt>Riskettan</dt>
        <dd>500kr</dd>
        <dd>Riskutbildning 1</dd>
    </dl></li>
</ul>
看起来是个好主意，非常简洁。你能提供一个 jsfiddle 吗？ - user592638
这个答案比被选中的那个更好。被选中的答案没有考虑语义，而这个答案考虑了。 - Scott Simpson
2

看起来使用ul和li标签是一个不错的选择。 使用段落标签也可以，但对于UI设计来说很反直觉。

使用列表可能不是一个坏主意，尤其是如果每个“pricebox”本身都是一个列表项 - 这将带来多少附加的语义价值，我不知道（并且这需要更多的覆盖）。 - Sean
2

嗯，div和p在它们都是块级元素的意义上是“相同”的，但是p有更多默认样式，所以在它们之间，您会想使用div。

如果你想让这些块作为一行文本处理，那么你可能会使用span，看起来你确实是这样做的。

更新：正如其他答案中所指出的，您还可以使用各种列表标记，并将它们样式化为内联元素，就像span一样。这对于屏幕阅读器非常有用。

有趣，我想我会选择使用列表标签元素。你能提供一个 jsfiddle 吗？ - user592638
@SHUMAcupcake (a) 看看其他答案；(b) 在谷歌上搜索这个完全标准的技术。 - Marcin
3
选取标签时不应该只因为默认外观而选择，应该根据其语义意义进行选择：p 具有特定含义，而 div 则没有。 - cimmanon
@cimmanon，“假设”基于什么？你对标签的“语义含义”的来源是什么？ - Marcin
1
@Marcin W3C对于如何适当地使用标签有很多建议。 - cimmanon
2
这看起来像是表格数据，而表格数据应该放在表格中。但是，这并不意味着它必须像一个表格一样看起来！

http://jsfiddle.net/jdEP4/ 
table.prices {
    display: block;
}

table.prices thead {
    display: none;
}

table.prices tr {
    display: inline-block;
    border: 1px solid;
}

table.prices td {
    display: block;
    text-align: center;
}

.info.yellow {
    background: yellow;
}

.info.green {
    background: green;
}

.info.red {
    background: red;
}

CSS当然是不完整的，但基础内容已经齐备，可以重新格式化表格。

我完全同意。从语义上讲，表格是正确的选择。不幸的是，在IE中必要的样式无法正常工作。 - Alohci
它在IE8+中运行良好。IE7及更早版本几乎已经绝迹。文档应该在没有样式的情况下也能够理解。不能处理现代样式技术的浏览器仍然应该是功能性和相对美观的。 - cimmanon
1

一般来说，没有统一的格式，所以您可以使用您认为更好的任何内容。实际上，我总是尽量使用需要较少解决方法的元素。比如说，p 标签将需要额外的边距规范化，所以我会使用 div 代替，如果您需要内联元素，可能最好使用 span 而不是 div 等等。只有一件事让我非常烦恼，那就是类/ID 名称，总是尽量避免像 size1、size2、style124 这样的名称 :)，而是使用在上下文中有意义且其他开发人员可以理解的名称。

1

试试这个：http://jsfiddle.net/P4xwK/

关于你的问题，我认为并不重要，你可以使用display:inline和display:block将每个都转换成你喜欢的样式。但是标签的顺序应该是语法上正确的。

除了那个看起来像你想要的小三角形。

body {
    font-family: "Myriad Pro",Myriad,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
.pricebox {
    display:inline-block;
    border: 1px solid #EEEEEE;
    border-radius: 3px;
    width: 100px;
    height: 100px;
    margin: 5px;
}

.price{
    font-size: 28px;
    font-weight:300;
    color: #383838;
    text-align:center;
}
.min {
    font-size: 11px;
    color: #909090;
    text-align:center;
}
.info {
    height: 35%;
    margin-top: 15px;
    padding-top:15px;
    color: #EEEEEE;
    font-weight: 600;
    font-size: 11px;
    text-align:center;
}
.green{background-color: #a7d155;}
.yellow{background-color: #eada42;}
.red{background-color: #e54e4b;}

这里是使用CSS绘制三角形的技巧：

.arrow-up {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid black;
}
1
即使您可以更改HTML容器的显示行为，出于一致性和透明度的原因，您也不应该这样做。 - s1lence
@rekire 我应该把.arrow-up类放在哪里？ - user592638
你可以插入另一个标签，或者更好地使用伪类（如before或after）来应用到你的其他类之一。 - rekire
0

在这里真正重要的是作者方便和回退。

为了方便起见，您可以使用 div 或 span，它们没有默认渲染，除了块与内联之外，因此您无需覆盖任何默认设置。

对于回退，即非 CSS 渲染，您可能希望使用 p 而不是 div，并使用 span 而不是 div，因为您希望将项目呈现为段落（其中包含空行或暂停），但在内部仅作为文本。

0

我会这样组织它：

<div class="pricebox">
    <ul>
        <li class="price">360kr</li>
        <li class="min">40 min</li>
        <li class="info green">Körlektion</li>
    </ul>
</div>

然后根据需要进行样式设置。

div-itus --- .pricebox 和块级样式可以放在 <ul> 上。 - Dawson
0

我更喜欢语义化的解决方案：

HTML：

<dl class="pricebox">
    <dt>Körlektion</dt>
    <dd><abbr class="price" title="360 kronor">360kr</abbr></dd>
    <dd><abbr class="min" title="40 minutes">40 min</abbr></dd>
</dl>
<dl class="pricebox">
    <dt>Halkan</dt>
    <dd><abbr class="price" title="1700 kronor">1700kr</abbr></dd>
    <dd><abbr class="min" title="2 FrihDehBiDeUh">Riskutbildnig 2</abbr></dd>
</dl>  
<dl class="pricebox">
    <dt>Riskettan</dt>
    <dd><abbr class="price" title="500 kronor">500kr</abbr></dd>
    <dd><abbr class="min" title="1 FrihDehBiDeUh">Riskutbildning 1</abbr></dd>
</dl>

受@MaratTanalin解决方案的启发

CSS中：

用dl:nth-of-type(1) dt、dl:nth-of-type(2) dt和dl:nth-of-type(3) dt替换.green、.yellow和.red，除非颜色的选择取决于价格框之外的其他因素。

很棒的答案... 有些文字在哪里？ - rekire
1
@rekire - 如果OP关心语义，那就不是这样的。 "abbr元素表示缩写或首字母缩略词" (http://www.w3.org/TR/html5/text-level-semantics.html#the-abbr-element) - Dawson
0

在我看来，它们看起来像是列表项，而不是段落。从程序上讲，你所拥有的是可以的。从语义上讲，如果CSS被关闭，我会尝试将它们视为列表（这就是为什么我会将它们制作成一个列表）。

<ul>
    <li><h2>Header</h2></li>
    <li>Price</li>
    <li>Description</li>
</ul>

一些事情：1）我试图针对元素进行定位，但在
    标签上使用“.pricelist”是一个选项。 2）如果我正确地认为“Header”很重要，那么您可以在
      和
    • 元素上使用定位将标题移动到最后一项以进行演示，但保持语义。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接