HTML5学习笔记简明版(2):新元素之section,article,aside

section

section元素描绘的是一个文档或者程序里的普通的section节,一般来说一个section包含一个head和一个content内容块。section可以表示成一个小节,或者tab页面里的一个tab下的box块。一个页面里可以拆分成多个section,分别代表introduction, news items和contact information。

如果元素的内容集中到一起显示可以表达相应的意思的话,那就可以定义成article元素,而没必要使用section元素。

section元素不是一般的容器元素,所以如果一个元素需要定义相应的style或者script脚本的话,那推荐使用div元素,section的使用条件是确保这个元素的内容能够明确地展示在文档的大纲里。

下面的例子代码来自苹果网站页面的一部分,代码里包含了2个短小的section:

  1.     
            

    Apples

            

    Tasty, delicious fruit!

        
        

    The apple is the pomaceous fruit of the apple tree.

        
            

    Red Delicious

            

    These bright red apples are the most common found in many supermarkets.

        
        
            

    Granny Smith

            

    These juicy, green apples make a great filling for apple pies.

        

登录后复制

可以看到,在section里可以任意使用h1元素,而不用考虑这个section是顶级的,还是二级或者三级元素。

下面的代码是一个毕业典礼的页面,包含2个section,一个是显示将要毕业人的名单,一个是显示毕业典礼的形式。

立即学习“前端免费学习笔记(深入)”;

  1. nbsp;Html>    <span class="typ">Graduation</span><span class="pln"> </span><span class="typ">Ceremony</span><span class="pln"> </span><span class="typ">Summer</span><span class="pln"> </span><span class="lit">2022</span>    

    Graduation

        
            

    Ceremony

            

    Opening Procession

            

    Speech by Validactorian

            

    Speech by Class President

            

    Presentation of Diplomas

            

    Closing Speech by Headmaster

        
        
            

    Graduates

            
                  
    • Molly Carpenter
    •             
    • Anastasia Luccio
    •             
    • Ebenezar McCoy
    •             
    • Karrin Murphy
    •             
    • Thomas Raith
    •             
    • Susan Rodriguez
    •         
        

登录后复制

article

article代表了一个文档内容的独立片段,例如,博客条目或报纸文章,标签的内容独立于文档的其余部分。

article 是一个特殊的 section 标签,它比 section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。一般来说, article 会有标题部分(通常包含在 header 内),有时也会 包含 footer 。虽然 section 也是带有主题性的一块内容,但是无论从结构上还是内容上来说,article 本身就是独立的、完整的。

当 article 内嵌 article 时,原则上来说,内部的 article 的内容是和外层的 article 内容是相关的。例如,一篇博客文章中,包含用户提交的评论的 article 就应该潜逃在包含博客文章 article 之中。

  1. Safari 5 released
    7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC,Apple announced the release of Safari 5 for Windows and Mac......

登录后复制

aside

HTML5提供的元素标签用来表示当前页面或文章的附属信息部分,可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组,以及其他类似的有别与主要内容的部分。

根据目前的规范,元素有两种使用方法:

n 被包含在中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的引用、词汇列表等。

n 在之外使用,作为页面或站点全局的附属信息部分;最典型的形式是侧边栏(sidebar),其中的内容可以是友情链接、附属导航或广告单元等。

下面的代码示例综合了以上两种使用方法:

  1.     
            

    My Blog

        
        
            

    My Blog Post

            

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor            incididunt ut labore et dolore magna aliqua.

                
        

登录后复制

以上就是HTML5学习笔记简明版(2):新元素之section,article,aside的内容,更多相关内容请关注PHP中文网(www.php.cn)!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

点点赞赏,手留余香

给TA打赏
共0人
还没有人赞赏,快来当第一个赞赏的人吧!
    编程技术

    HTML5学习笔记简明版(5):input的type超级类型

    2025-4-1 8:29:33

    编程技术

    超酷创意分段式SVG文字动画特效

    2025-4-1 8:31:31

    0 条回复 A文章作者 M管理员
    欢迎您,新朋友,感谢参与互动!
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    私信列表
    搜索