面试回来求解惑，如何写出优雅的html结构

Question

昨天去面了个公司，简单的交流后要求当场切一个移动端页面，类似与下面这张天猫的页面结构，最上面是个轮播图，中间是一个一个的card，在下面是一组tab三个分页，切到这里为止，不要求实现太多的交互，切出个布局就可以了。我完成之后主管看了看指出我的html结构不合理，嵌套层级过多之类的。回来之后我在想，怎么才算是优雅的html结构呢，除了多参考别人的结构之外有没有啥资料求推荐。附一个上半年我切的简单的静态页面，这个只做了移动端屏幕适配，pc的布局请无视，求点评缺点[https://vincentdd.github.io/cnChess/SPA.html][1]。

Answer 1

<!--轮播开始-->

<div class="slidebox">

<div class="item"></div>

<div class="item"></div>

</div>

<div class="list">

<div class="item">

<img src="" class="img" />

<div class="info">

<div class="title"></title>

<div class="aside">

<span class="label">双11</span>

<span class="price">￥299.0 <small>慢100减100</small></span>

</div>

<div class="desc">222想买</div>

<div class="right"><a>马上抢</a></div>

</div>

</div>

</div>