Html5新结构标签

Html5是Html的第五代新标准，Html5的出现，使一些标签具有了语义化，下面对Html5的新标签进行汇总

语义化的好处？

        1. 去掉样式后文章的结构可以清晰呈现

        2. 有益于SEO（搜索引擎优化）

        3. 便于团队开发和维护

结构标签

结构标签可以理解为有语义的div

前7个标签在写文章结构时使用即可

• article
  • 定义文章
  • 使用：论坛帖子、博客文章、新闻故事、评论...
• aside
  • 定义文章的侧边栏
• nav
  • 定义导航部分
• header
  • 定义section或者document页眉
  • 使用：文章介绍内容、导航链接器的容器...
• footer
  • 定义section或者document页脚
  • 使用：文裆创建者姓名、文档的版权信息、使用条款的链接、联系信息...
• main
  • 定义文档的主体部分
• section
  • 定义文档中的某个区域
  • 使用：章节、头部、底部...
• details
  • 定义展开详细内容
  • 只有safari和chrome支持
• figure
  • 定义一组某提元素及文字
  • figcaption  定义figure的caption

---

details 的外表样式单一，其功能可以用JavaScript实现，这个标签也不常用

        <details>
            <p>这是一个详情展开</p>
        </details>

---

 figure 标签类似于图文组合，但不常用，了解即可

        <figure>
            <img src="avatar.jpg" alt="" width="100">
            <figcaption>这是小狸</figcaption>
        </figure>