何时使用“ Div”以及何时使用“ li”

时间:2019-06-23 12:07:27

标签: html html-lists

我正在网站上创建一个技能部分,该部分正在内嵌显示。我可以使用li代替div来渲染它,那么li优于div的优势是什么。我可以使用div轻松渲染它。

随着Div:

.skills {
  
  display:flex;
  
}
.skill 
{
  padding: 5px;
}
<div class="skills" style="--animState:playing;">
   <div class="skill skill--code" style="--p:92%">
      <div class="bar"></div>
      <span>HTML5 CSS3</span>
   </div>
   <div class="skill skill--code" style="--p:83%">
      <div class="bar">
      </div>
      <span>JavaScript</span>
   </div>
   <div class="skill skill--code" style="--p:65%">
      <div class="bar"></div>
      <span>NodeJS</span>
   </div>
   <div class="skill skill--code" style="--p:52%">
      <div class="bar"></div>
      <span>Java</span>
   </div>
   <div class="skill skill--soft" style="--p:87%">
      <div class="bar"></div>
      <span>Adobe Photoshop</span>
   </div>
   <div class="skill skill--soft" style="--p:62%">
      <div class="bar"></div>
      <span>Adobe Premiere</span>
   </div>
   <div class="skill skill--soft" style="--p:53%">
      <div class="bar"></div>
      <span>Adobe Illustrator</span>
   </div>
</div>

ul.skills {
  list-style:none;
  display:flex;
}

.skills li
{
  padding: 5px;
}
<section>
  
  <ul class="skills">
    <li>
      Html Css 
    </li>
    <li>
      JS
    </li>
    <li>
      PHP  
    </li>
  </ul>
  
</section>

两者都给出相同的结果,所以我应该使用什么,什么时候应该使用什么?

0 个答案:

没有答案