Question

我有一个包含产品列表的页面。

我决定使用无序列表而不是div来显示产品，但是存在问题，因为我无法在<li>中插入其他块级元素来实现我想要的某些特定设计（带有背景，边框描述，浮动链接等的图像......）。

我的问题是：

使用<li>中的内联元素（例如<span>）来实现此类可视化是否可能并且语义正确？
使用div代替它（和H2，P标签）在语义上是否正确？
通常，您如何标记每个产品包含的产品列表：
1. 一张图片;
2. 产品名称;和
3. 链接“更多”。

提前致谢。

Answer 1

HTML最重要的部分是它具有语义意义。如果你想将内联元素显示为完全可以接受的块级元素，只要它背后的HTML是有意义的。这是能够将内容与演示文稿分开的重要部分。
通常，如果您可以将某些内容描述为列表，则应为HTML列表，<ul>，<ol>或<dl>。这不是一个严格的规则，而是一个很好的准则。如果您不想遵循该指南，那么可以使用<div>，只要您不将块级元素放在内联元素中。

保持标记尽可能简单我会说它应该如下所示：

<dl>
  <dt>Product name</dt>
  <dd>
    <img src="product.jpg" alt="Product name" />
    Description.
    <a class="read-more" href="#">Read more about Product name</a>
  </dd>
</dl>

有关样式的一些其他信息<dl> s Max Design's "Definition lists - misused or misunderstood?"列出了可能有用的不同样式。

Answer 2

<span>是“HTML的豆腐”，就像<div>一样。它通常可以插入任何地方，但如果你想确定，我会建议你试一试，然后在the W3C validation page上测试HTML。

或者甚至更好，如果您使用的是Firefox，请使用HTML Validator add-on for Firefox。我知道它仅适用于Windows，但在他们的网站上，还有适用于Linux和OS X的版本。
是
我会使用无序列表，就像你在这里做的那样，或Data List。

Answer 3

一种极端语义的方式将是dukevideo.com上使用的模型。

<ol>
   <li>
      <span id="lia">
         <span class="productImage">
            <a href="/Bikes/DVD/American-Chopper/American-Chopper-Series-1.aspx" title="American Chopper Complete Series 1">
               <img src="/images/imageCache/bddc1cee608a8fb5927d6521ff1f0eb0.jpg" alt="American Chopper Complete Series 1" />
            </a>
          </span>
          <span class="price">
          <dl class="prices">
            <dt class="hidden strikethru">Price:</dt>
            <dd class="price red">£29.36</dd>
            <dt class="hidden">Our Price:</dt>
            <dd class="price">£25.36</dd>
          </dl>
       </span>
       <span class="title">
          <a href="/Bikes/DVD/American-Chopper/American-Chopper-Series-1.aspx" title="American Chopper Complete Series 1">American Chopper Complete Series 1
          </a>
       </span>
     </span>
     <span id="lib">
       <input type="image" class="buyLink" src="/images/buy.png" alt="Add to Basket" id="AC1" name="buyProduct_AC1" value="buyProductAC1"  />
     </span>
  </li>

（在真实网站上，标记已被重新制作 - 并且无效。我的继任者是在LIs中唱DIV而不是SPAN）

这个语义标记很重，但是超级语义。搜索引擎或屏幕阅读器可以很好地工作。它允许我们以列表形式区分产品规格的各个部分。

希望这些类能够指示CSS正在做什么。例如。： * .hidden - 隐藏屏幕上的内容，但不会隐藏屏幕阅读器，搜索引擎 * .red - 使文字变红 * .strikethru - 罢工 - 通过文字，举例说明大幅降价 * .title - 更大胆的脸

阻止产品列表中的元素

3 个答案: