4

我仍然对在 html 5 中使用“部分”感到非常困惑。我只是想知道以下哪种解决方案更好。列表中的内容彼此不相关。所以我必须给他们每个人一个部分还是我必须把它们都放在一个部分中。见下文：

解决方案一：

<ul>
<li>
    <section>
        <header>
            <h2>Services</h2>
        </header>
        <img src="img/foto/testpic1.jpg" alt="" title="" border="0"/>
        <p>This is text</p>
    </section>
</li>
<li>
    <section>
        <header>
        <h2>Products</h2>
        </header>
        <img src="img/foto/testpic2.jpg" alt="" title="" border="0"/>
        <p>This is text</p>
    </section>
</li>
<li>
    <section>
        <header>
        <h2>Contacts</h2>
        </header>
        <img src="img/foto/testpic3.jpg" alt="" title="" border="0"/>
        <p>This is text</p>
    </section>
</li>
</ul>

解决方案二：

<section>
<ul>
    <li>
        <header>
            <h2>Services</h2>
        </header>
        <img src="img/foto/testpic1.jpg" alt="" title="" border="0"/>
        <p>This is text</p> 
    </li>
    <li>
        <header>
            <h2>Products</h2>
        </header>
        <img src="img/foto/testpic2.jpg" alt="" title="" border="0"/>
        <p>This is text</p> 
    </li>
    <li>
        <header>
            <h2>Contacts</h2>
        </header>
        <img src="img/foto/testpic3.jpg" alt="" title="" border="0"/>
        <p>This is text</p>
    </li>
</ul>
</section>
4

2 回答 2

2

我不确定为什么您首先需要列表 ( <ul>)。我会删除它，因为仅将它用于实际列表（或类似列表的元素，即菜单）是有意义的，而这里不是这种情况。

现在关于<section>. 根据规格：

该<section>元素表示文档或应用程序的通用部分。在这种情况下，部分是内容的主题分组，通常带有标题。

这消除了您的解决方案＃2。

更多的：

当联合元素的内容有意义时，鼓励作者使用<article>元素而不是元素。<section>

所以在你的情况下，我这样做：

<article>
    <header>
        <h2>Services</h2>
    </header>
    <img src="img/foto/testpic1.jpg" alt="" title="" border="0"/>
    <p>This is text</p> 
</article>
<article>
    <header>
        <h2>Products</h2>
    </header>
    <img src="img/foto/testpic2.jpg" alt="" title="" border="0"/>
    <p>This is text</p> 
</article>
<article>
    <header>
        <h2>Contacts</h2>
    </header>
    <img src="img/foto/testpic3.jpg" alt="" title="" border="0"/>
    <p>This is text</p>
</article>

如果你需要一个用于样式目的的包装器 - 你可以使用好的 ol'<div>

该<section>元素不是通用容器元素。当出于样式目的或为了方便编写脚本而需要元素时，鼓励作者改用该<div>元素。

截面元素_

有关主题的文章

于 2012-11-29T17:24:26.687 回答
0

<section>并且<div>相似之处在于它们都用于切片。不同之处在于，如果预期的部分是为了样式，<div>应该使用......但如果该部分是字面上的内容，那么使用<section>. 看看下面的报价：

“当一个元素仅用于样式目的或方便编写脚本时，鼓励作者使用 div 元素代替……一般规则是，只有当元素的内容明确列出时，section 元素才是合适的……~ WHATWG” </p>

请注意，一般的想法<section>是列出内容，例如<li>. 然而，后者更适合子弹指向……而前者更适合博客文章等。

所以，我真的不推荐你的任何一个解决方案。您应该使用类似于以下内容的内容：

<div class="blog">
    <article class="post">
        <h2 class="post-title">Services</h2>
        <img src="img/foto/testpic1.jpg" alt="" title="" border="0"/>
        <p class="post-excerpt">This is text</p>
    </article>
    <article class="post">
        <h2 class="post-title">Products</h2>
        <img src="img/foto/testpic2.jpg" alt="" title="" border="0"/>
        <p class="post-excerpt">This is text</p>
    </article>
    <article class="post">
        <h2 class="post-title">Contacts</h2>
        <img src="img/foto/testpic3.jpg" alt="" title="" border="0"/>
        <p class="post-excerpt">This is text</p>
    </article>
</div>

我希望这会有所帮助。一切顺利。

[参考：https ://azizecomm.wordpress.com/2016/01/04/html5-section-vs-div /]

于 2016-01-04T03:14:02.270 回答