美文网首页
09 【案例】HTML :内容分区元素

09 【案例】HTML :内容分区元素

作者: Toyou2018 | 来源:发表于2018-02-15 15:30 被阅读0次

一、内容分区元素
将文档的内容从逻辑上进行组织划分。

二、分类
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节目页面的主体写出来

相关文章

  • 09 【案例】HTML :内容分区元素

    一、内容分区元素将文档的内容从逻辑上进行组织划分。 二、分类1.article文档、页面、应用或网站中独立分配或可...

  • 内容分区(HTML元素)

    内容分区 address 元素 地址:https://developer.mozilla.org/zh-CN/do...

  • HTML5 标签列表

    根元素 文档元数据 内容分区 脚本 文本内容 文字形式 编辑 嵌入内容 表格 表单 交互元素 HTML5 标签列表 参考

  • 内容分区元素

    1.article 文档、页面、应用或者网站中可独立分配或可复用的结构使用场景 文章(博客或报刊)论坛帖子独立内容...

  • div与span

    元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器,它在语义上不代表任何特定类型的内容,它可以被用来对...

  • HTML 常用的标签

    元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器,它在语义上不代表任何特定类型的内容,它可以被用来对...

  • HTML

    根元素 文档元数据 内容分区 内容分区元素允许你将文档内容从逻辑上进行组织划分。使用包括页眉(header)、页脚...

  • 2018-09-28

    元素内容的操作:1.文本内容2.HTML内容 text()文本内容 HTML()html内容 对元素的值的...

  • DOM

    获取元素内容最简单的方法:innerHTML 属性 访问HTML元素的方法 改变HTML元素内容 改变HTML样式...

  • 11-jquery 获取元素的内容

    获取元素的内容 作者:曾庆林 html()方法 Html():获取匹配元素集合中第一个元素的HTML内容 html...

网友评论

      本文标题:09 【案例】HTML :内容分区元素

      本文链接:https://www.haomeiwen.com/subject/boljtftx.html