HTML5   发布时间:2022-04-25  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了什么是在HTML5中显示单个项目组合项目的最具语义的方式?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
当然有几个讨论和正确使用 html5< figure>的问题.元素,但他们都没有我的问题的具体答案.

这是关于显示投资组合项目的一般性问题.当然,你可以这样做:@H_696_7@

<ul>
  <li>
    <h1>Project title</h1>
    <img src="#"/>
    <p>a short description</p>
  </li>
</ul>

要么@H_696_7@

<div class="portfolio-item">
  <h1>Project title</h1>
  <img src="#"/>
  <p>a short description</p>
</div>

当然还有十几种其他方式来描述单个项目,但是如果你将整个项目包装成< article>,我想知道它是否是有效的语义HTML5.元素和图片成< figure>元件.虑以下示例@H_696_7@

<article class="portfolio-item">
  <h1>Project title</h1>
  <figure>
    <img src="#">
    <figcaption>a short description</figcaption>
  </figure>
  <a href="#"> View details</a>
</article>

如果没有,那么显示它们的最具语义的方式是什么?@H_696_7@

解决方法

我个人认为使用数字对于描述/图像来说不是一个好主意.然我会说你以有效的方式使用它,但我不一定将它定义为带有标题的数字,因此我发现调用因此并不是特别具有语义性.我觉得figure / figcaption标签最适用于图表之类的东西.在你的情况下,我认为你可能最好只是把图像放在它自己的,并在< p>中的简短描述.标记(正如您在第二个示例中所做的那样).

我还将标题放在< header>中标签.@H_696_7@

我就是这样做的,作为文章列表:@H_696_7@

<ul>
  <li>
    <article class="portfolio-item">
      <header>
        <h1>Project title</h1>
      </header>
      <img src="#">
      <p>a short description</p>
      <a href="#"> View details</a>
    </article>
  </li>
  <li>
    etc...
  </li>
</ul>
@H_944_37@

大佬总结

以上是大佬教程为你收集整理的什么是在HTML5中显示单个项目组合项目的最具语义的方式?全部内容,希望文章能够帮你解决什么是在HTML5中显示单个项目组合项目的最具语义的方式?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。