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

本文共 2531 字,大约阅读时间需要 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.

转载地址:http://sozul.baihongyu.com/

你可能感兴趣的文章
推荐一款免费的AD审计工具------Netwrix AD变更通知工具
查看>>
Xcode8控制台输出大量无用信息的解决方案
查看>>
【简单的留言本】用HTML新增的数据库实现
查看>>
asp.net4 报 “请求的内容似乎是脚本,因而将无法由静态文件处理程序来处理”...
查看>>
OpnAI将可预测序列中下一段文字、图像和语音
查看>>
PowerQuery与PowerPivot将引爆你的桌面级数据分析:能量巨大,超出你想象!
查看>>
钱找上门来了,你做好准备了吗?(采购成熟稳定软件模块、按统一要求修正)...
查看>>
硬盘无法访问由于IO设备错误,无法运行此项请求,里面的资料怎么寻回
查看>>
老友记台词笔记S0101-ijk英语
查看>>
LAMP环境搭建WordPress博客
查看>>
Oracle 数据库 数据文件 表 表空间 用户的关系(转)
查看>>
22.jvm参数优化
查看>>
sqlite 数据类型
查看>>
数据库管理
查看>>
SQL收缩数据库
查看>>
Linux基本防护措施
查看>>
Android 日志级别总结
查看>>
生产环境部署NodeJs最佳实践
查看>>
2t3ik与ddgs挖矿病毒处理
查看>>
基于K8S部署fission函数即服务
查看>>