博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML5学习笔记简明版(2):新元素之section,article,aside
阅读量:5327 次
发布时间:2019-06-14

本文共 2611 字,大约阅读时间需要 8 分钟。

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>标签的内容独立于文档的其余部分。

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

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

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

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

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

 

My Blog

My Blog Post

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

转载于:https://www.cnblogs.com/TomXu/archive/2011/12/07/2269032.html

你可能感兴趣的文章
python tkinter GUI绘制,以及点击更新显示图片
查看>>
C语言栈的实现
查看>>
SRM 628 DIV2
查看>>
2018-2019-2 20165314『网络对抗技术』Exp5:MSF基础应用
查看>>
SecureCRT的使用方法和技巧(详细使用教程)
查看>>
2018icpc徐州OnlineA Hard to prepare
查看>>
使用命令创建数据库和表
查看>>
【转】redo与undo
查看>>
wpf样式绑定 行为绑定 事件关联 路由事件实例
查看>>
Oracle事务
查看>>
String类中的equals方法总结(转载)
查看>>
标识符
查看>>
内存地址对齐
查看>>
创新课程管理系统数据库设计心得
查看>>
Could not resolve view with name '***' in servlet with name 'dispatcher'
查看>>
[转载] redis 的两种持久化方式及原理
查看>>
MyBaits学习
查看>>
管道,数据共享,进程池
查看>>
SDUTOJ3754_黑白棋(纯模拟)
查看>>
php中的isset和empty的用法区别
查看>>