PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

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

黄舟
黄舟 原创
2017-01-21 16:30:22 1547浏览

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:

    
        

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,一个是显示将要毕业人的名单,一个是显示毕业典礼的形式。




    Graduation Ceremony Summer 2022

    

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 之中。

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提供的

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。