HTML5学习笔记简明版（2）：新元素之section,article,aside-H5教程-PHP中文网

首页

web前端

H5教程

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

黄舟

Jan 21, 2017 pm 04:30 PM

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：

<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代表了一个文档内容的独立片段，例如，博客条目或报纸文章，23c3de37f2f9ebcb477c4a90aac6fffd标签的内容独立于文档的其余部分。

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

根据目前的规范，15221ee8cba27fc1d7a26c47a001eb9b元素有两种使用方法：

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

n 在23c3de37f2f9ebcb477c4a90aac6fffd之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(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>
            <!-- Since this aside is contained within an article, a parser

      should understand that the content of this aside is directly related

      to the article itself. -->
            <h1>Glossary</h1>
            <dl>
                <dt>Lorem</dt>
                <dd>ipsum dolor sit amet</dd>
            </dl>
        </aside>
    </article>
    <aside>
        <!-- This aside is outside of the article. Its content is related

    to the page, but not as closely related to the above article -->
        <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>

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

声明

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

H5和HTML5之间的连接：相似性和差异Apr 24, 2025 am 12:01 AM

H5和HTML5是不同的概念：HTML5是HTML的一个版本，包含新元素和API；H5是基于HTML5的移动应用开发框架。HTML5通过浏览器解析和渲染代码，H5应用则需要容器运行并通过JavaScript与原生代码交互。

H5代码的基础：密钥元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的关键元素包括、、、、、等，用于构建现代网页。1.定义头部内容，2.用于导航链接，3.表示独立文章内容，4.组织页面内容，5.展示侧边栏内容，6.定义页脚，这些元素增强了网页的结构和功能性。

HTML5和H5：了解常见用法Apr 22, 2025 am 12:01 AM

HTML5和H5没有区别，H5是HTML5的简称。1.HTML5是HTML的第五个版本，增强了网页的多媒体和交互功能。2.H5常用于指代基于HTML5的移动网页或应用，适用于各种移动设备。

HTML5：现代网络的基础（H5）Apr 21, 2025 am 12:05 AM

HTML5是超文本标记语言的最新版本，由W3C标准化。HTML5引入了新的语义化标签、多媒体支持和表单增强，提升了网页结构、用户体验和SEO效果。HTML5引入了新的语义化标签，如、、、等，使网页结构更清晰，SEO效果更好。HTML5支持多媒体元素和，无需第三方插件，提升了用户体验和加载速度。HTML5增强了表单功能，引入了新的输入类型如、等，提高了用户体验和表单验证效率。

H5代码：编写清洁有效的HTML5Apr 20, 2025 am 12:06 AM

如何写出干净高效的HTML5代码？答案是通过语义化标签、结构化代码、性能优化和避免常见错误。1.使用语义化标签如、等，提升代码可读性和SEO效果。2.保持代码结构化和可读性，使用适当缩进和注释。3.优化性能，通过减少不必要的标签、使用CDN和压缩代码。4.避免常见错误，如标签未闭合，确保代码有效性。