H5 新增页面结构标签

1.之前的布局全部使用div来布局

基本网页结构 ：

1. 头部 logo 搜索框 导航栏
2. 主体部分 商品展示 左右结构 左中右结
3. 尾部 赞助商信息 友情链接 版权信息 合作商

     <div class="header">
         <div class="nav"></div>
     </div>
     <div class="main">
        <div class="section">
            <div class="aside"></div>
            <div class="article"></div>
        </div>

        <div class="section">
            <div class="aside"></div>
            <div class="article"></div>
        </div>

        <div class="section">
            <div class="aside"></div>
            <div class="article"></div>
        </div>
     </div>
     <div class="footer"></div>

注意 : 全部使用div来布局的缺点

1. 不利于SEO (搜索引擎优化)
2. 布局没有一个统一的标准 都是直接使用类名来控制的(语义不明)

2.现在使用H5 新增页面结构标签来布局

H5专门规定的布局标签 ：

头部 header
导航区域 nav
主体部分 main
小模块 section
边栏框 aside
正文框 article
尾部区域 footer

<!-- 头部标签 -->
    <header>
        <nav></nav>
    </header>

    <!-- 主体部分 -->
    <main>
        <section>
            <aside></aside>
            <article></article>
        </section>
    </main>
    
    <!-- 尾部 -->
    <footer></footer>

优势 : 比div语义更明确
元素性质和div差不多 都是属于块级元素

图 :