2

我想问一下使用'ul'的正确方法是什么？可以使用“ul”列出一些图像横幅吗？前任。我有 3 个带有标题的图像横幅，并且都向左浮动。我以前每次都会遇到这种情况，我想出的方法是第一个使用'ul'的标记。

是否可以使用以下标记：

<section class="banners">
   <ul>
      <li>
         <figure>
             <a href="#">
                  <img src="" width="" height="" alt="" />
               </a>
         </figure>
         <a href="#">title here</a>
      </li>
      <li>
         <figure>
             <a href="#">
                <img src="" width="" height="" alt="" />
             </a>
         </figure>
         <a href="#">title here</a>
      </li>
      <li>
         <figure>
         <a href="#">
            <img src="" width="" height="" alt="" />
         </a>
         </figure>
         <a href="#">title here</a>
      </li>
     </ul>
    </section>

或者我应该使用：

   <section class="banners">
       <figure>
           <a href="#">
               <img src="" width="" height="" alt="" />
           </a>
           <figcaption>
               <a href="#">title here</a>
           </figcaption>
        </figure>
        <figure>
           <a href="#">
               <img src="" width="" height="" alt="" />
           </a>
               <figcaption>
                   <a href="#">title here</a>
               </figcaption>
         </figure>
         <figure>
           <a href="#">
               <img src="" width="" height="" alt="" />
           </a>
               <figcaption>
                   <a href="#">title here</a>
               </figcaption>
         </figure>
     </section>

它们都代表语义编码吗？

这是图像横幅的示例 在此处输入图像描述

4

1 回答 1

2

由于 HTML5 规范如此反复无常，而且语义在实际中似乎并没有发挥重要作用，所以很难说。但是，根据您的图像，这看起来像是一个导航部分。因此，您可能希望将其与<nav>.

<ul>规格：http
<figure> ://www.w3.org/TR/html5/grouping-content.html#the-ul-element规格： http: //www.w3.org/TR/html5/grouping-content.html#the -数字元素

我不认为这些有多大帮助。它们都用于对内容进行分组。顺序无关紧要<ul>。

从我读过的内容来看，在我看来，它的目的<figure>是用于文档注释——描述相关图像等。规范特别指出这些可以移动到其他地方，比如附录，但这似乎不是适用于您的情况。

我认为<figure>这里不合适。相反，使用<nav>. 如果需要，您可以使用<ul>for 样式——它没有提供太多语义含义（只是一个有点通用的分组内容元素）。

于 2013-02-27T03:47:52.793 回答