一、内容分区元素
将文档的内容从逻辑上进行组织划分。
二、分类
1.article
文档、页面、应用或网站中独立分配或可复用的结构
场景:
-文章(博客或者报刊)
-论坛帖子
-用户评论
-独立插件
-任何独立的内容
一般 article元素都有标题(header),脚注(footer)并且可以嵌套(比如博客及其评论,内容必须是有关联的)
2.section
对网站或者应用程序中页面上的内容进行分块
-有主题的内容
-一般都会有标题
场景:
-文章的章节
-Tab的内容
3.div
无任何语义
场景:
-内容容器
-样式
三者的区别:
div(无任何语义)、section(主题性的内容)、article(完整的独立的内容)
4.nav
含有多个超链接的区域(其他页面、页面内部其他部分、一个页面可以有多个nav),注意是页面的主要区域才使用nav。
场景:
-传统导航
-侧边栏导航
-页内导航
5.aside
表示一个和其余页面内容几乎无关的部分
场景:
-包含在article元素中作为主要内容的附属信息
参考资料、名词解释、相关引用、个人资料
-article元素之外,页面或者站点全局的附属信息
侧边栏、广告
6.header
概括性的内容(可能包含标题元素,或者其他元素,如logo、分节头部、搜索表单等)
场景:
-页面头部
标题元素:h1-h6,用于描述该节的主题,重要程度依次递减
7.footer
章节内容或者根节点元素的页脚
场景:
-文章作者(在article中)
-相关阅读链接
-版权
案例:
用内容分区元素将网易云音乐DJ节目页面的主体写出来