首页 文章

阻止产品列表中的元素

提问于
浏览
0

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

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

我的问题是:

  • 使用 <li> 中的内联元素(例如 <span> )来实现这样的可视化是否可能和语义正确?

  • 使用div代替它(和H2,P标签)在语义上是否正确?

  • 通常,您如何标记每个产品包含的产品列表:

  • 一张图片;

  • 产品名称;和

  • 一个链接"more" .

提前致谢 .

3 回答

  • 0

    一种极端语义的方式将是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正在做什么 . 例如:* . 隐藏 - 隐藏屏幕上的内容,但不隐藏屏幕阅读器,搜索引擎* .red - 使文本变为红色* .strikethru - 罢工 - 通过文本,以说明大幅降价* .title - 更大胆的脸

  • 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?"有一个可能有用的不同样式列表 .

  • 0
    • <span> 是"tofu of HTML",就像 <div> 一样 . 它通常可以插入任何地方,但如果你想确定,我建议你试一试,然后在the W3C validation page上测试HTML .

    或者甚至更好,如果您使用的是Firefox,请使用HTML Validator add-on for Firefox . 我知道它仅适用于Windows,但在他们的网站上,还有适用于Linux和OS X的版本 .

    • 是的 .

    • 我会使用无序列表,就像你在这里做的那样,或Data List .

相关问题