美文网首页
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 :内容分区元素

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