Question

在使用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版本更多的代码，我想知道完全放弃列表是否更好。

期待您的反馈。

Answer 1

首先，不需要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

在<li>列表中使用<article>和<figure> </li> </figure> </article>

1 个答案: