0

在使用 XHTML 编码多年后，我终于开始使用 HTML5 来构建一个简单的投资组合网站。

我正在构建的网站在主页上显示 12 个缩略图。当您滚动缩略图时，它会显示一个标题。图片和标题都链接到帖子。

旧的 XHTML 方式

<div class="thumb">
<a href="portfolio_1" title="Portfolio item 1"><img width="225" height="150" src="images/thumb_1.jpg" alt="Portfolio item 1" /></a>
<h3><a href="portfolio_1" title="Portfolio item 1">Portfolio item 1</a></h3>
</div>

新方式

<ol>
<li class="thumb">
<article>    
<figure>
<a href="portfolio_1" title="Production test 8"><img width="225" height="150"   src="images/thumb_1.jpg" alt="Portfolio item 1" /></a>
<figcaption><a href="portfolio_1" title=""><h3>Portfolio item 1</h3></a></figcaption>
</figure>
</article>
</li>
</ol>

对于新代码，我为每个投资组合项目使用了一个列表。在列表中，我创建了一篇文章，然后将图形标签用于图像和图像标题。

我的问题 这是 HTML5 语义矫枉过正吗？有比原始 XHTML 版本更多的代码，我想知道完全放开列表是否更好。

期待您的反馈。

4

1 回答 1

0

首先，不需要article标签；这是一个图像，而不是一个文本块。

其次，除非您有多个样式列表（除了您的nav li），否则您不需要类样式，只需要您的常规样式ol li {}，因此无需对列表进行分类。

最后，我刚刚通过 W3.org 验证器运行了一个页面，并被告知不能将数字放在有序列表中。没有给出任何理由，所以我不能说为什么，但正如 robertc 所说，你的旧 XHTML 方法现在和永远都可以正常工作（只需使用 HTML5 doctype）。

PS，当使用 HTML5 doctype 时，您的img标签可以简化，并figcaption添加以生成可搜索的标题：

figure

<img src="images/cache.png" alt="alternative text">
    <figcaption>captionated text</figcaption>

/figure

于 2014-04-14T16:33:24.170 回答