下拉分区html,09 【案例】HTML :内容分区元素

一、内容分区元素

将文档的内容从逻辑上进行组织划分。

二、分类

1.article

文档、页面、应用或网站中独立分配或可复用的结构

场景：

-文章(博客或者报刊)

-论坛帖子

-用户评论

-独立插件

-任何独立的内容

一般 article元素都有标题(header)，脚注(footer)并且可以嵌套(比如博客及其评论，内容必须是有关联的)

article

2.section

对网站或者应用程序中页面上的内容进行分块

-有主题的内容

-一般都会有标题

场景：

-文章的章节

-Tab的内容

section

3.div

无任何语义

场景：

-内容容器

-样式

div

三者的区别：

div(无任何语义)、section(主题性的内容)、article(完整的独立的内容)

4.nav

含有多个超链接的区域(其他页面、页面内部其他部分、一个页面可以有多个nav)，注意是页面的主要区域才使用nav。

场景：

-传统导航

-侧边栏导航

-页内导航

nav

5.aside

表示一个和其余页面内容几乎无关的部分

场景：

-包含在article元素中作为主要内容的附属信息

参考资料、名词解释、相关引用、个人资料

-article元素之外，页面或者站点全局的附属信息

侧边栏、广告

aside

6.header

概括性的内容(可能包含标题元素，或者其他元素，如logo、分节头部、搜索表单等)

场景：

-页面头部

header

标题元素：h1-h6，用于描述该节的主题，重要程度依次递减

7.footer

章节内容或者根节点元素的页脚

场景：

-文章作者(在article中)

-相关阅读链接

-版权

footer

案例：

用内容分区元素将网易云音乐DJ节目页面的主体写出来