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

Question

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

Answer 1

<!-- 轮播 -->
<div class="slider-box">
    <div class="is-slider-img">轮播1</div>
    <div class="is-slider-img">轮播2</div>
    <div class="is-slider-img">轮播3</div>
</div>

<!-- 卡片栏 -->
<ul class="list-box">
    <li class="card">
        <div class="is-item">
            <img src=xxx.png />
            <div class="card-info">
                <p class="is-title">nike鞋限货抢购nike鞋限货抢购nike鞋限货抢购</p>
                <p class="is-sub-info">
                    <span class="">双十一</span>
                    <span>￥699.50<em>（满300减100）</em></span>
                    <span>255555人想买</span>
                </p>
                <a class="button pull-right">马上抢！</a>
            </div>
        </div>
    </li>
</ul>

Answer 2

<!--轮播开始-->
<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>

Answer 3

这图一看就是手淘 Flexible 的例子，可以看看原文的实现，https://github.com/amfe/artic...