HTML5学习笔记简明版（2）：新元素之section,article,aside

教程管理员发布于2023-09-27 12:01 HTML教程 139

简介：

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：

<!doctype html> <title>SVG in text/html </title> <p> A green circle: <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg> </p> <article> <hgroup> <h1>Apples</h1> <h2>Tasty, delicious fruit!</h2> </hgroup> <p>The apple is the pomaceous fruit of the apple tree.</p> <section> <h1>Red Delicious</h1> <p>These bright red apples are the most common found in many supermarkets.</p> </section> <section> <h1>Granny Smith</h1> <p>These juicy, green apples make a great filling for apple pies.</p> </section> </article>

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

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

<!DOCTYPE Html>

<html>

<head>

   <title>Graduation Ceremony Summer 2022</title>

</head>

<body>

  <h1>Graduation</h1>

  <section>

   <h1>Ceremony</h1>

   <p>Opening Procession</p>

   <p>Speech by Validactorian</p>

   <p>Speech by Class President</p>

   <p>Presentation of Diplomas</p>

   <p>Closing Speech by Headmaster</p>

 </section>

 <section>

  <h1>Graduates</h1>

  <ul>

    <li>Molly Carpenter</li>

    <li>Anastasia Luccio</li>

    <li>Ebenezar McCoy</li>

    <li>Karrin Murphy</li>

    <li>Thomas Raith</li>

    <li>Susan Rodriguez</li>

 </ul>

 </section>

</body>

</html>

article

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

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

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

<article> <a href="http://www.apple.com">Safari 5 released</a>

<br /> 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...... </article>

aside

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

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

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

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

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

<body> <header> <h1>My Blog</h1> </header> <article> <h1>My Blog Post</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <aside> 

<h1>Glossary</h1> <dl> <dt>Lorem</dt> <dd>ipsum dolor sit amet</dd> </dl> </aside> </article> <aside>  <h2>Blogroll</h2> <ul> <li><a href="#">My Friend</a></li> <li><a href="#">My Other Friend</a></li> <li><a href="#">My Best Friend</a></li> </ul> </aside> </body>

原文地址

本文转自Work Hard Work Smart博客园博客，原文链接：http://www.cnblogs.com/linlf03/archive/2011/12/26/2301708.html，如需转载请自行联系原作者

标签：#阿里 #简明 #开发者 #学习笔记 #新元素 #社区

上一篇：《HTML5 开发实例大全》——1.33 实现拖曳和拖放处理
下一篇：学习HTML笔记53

HTML5学习笔记简明版（2）：新元素之section,article,aside

section

article

aside

相关推荐

会员中心

下载中心

图片素材

关注微信

关于我们

QQ在线客服

关注微信领优惠