• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML5学习笔记简明版(2):新元素之section,article,aside

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

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含HTML5,新元素,section等相关知识,匿名希望在学习及工作中可以帮助到您

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代表了一个文档内容的独立片段,例如,博客条目或报纸文章,<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>
            <!-- 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的内容,更多相关内容请关注微课江湖()!

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2018-12-03基于HTML5 Canvas实现视频破碎重组特效
  • 2018-12-03html5 postMessage解决跨域、跨窗口消息传递方案
  • 2018-12-03都说H5游戏好开发,但是开发之后怎么办,渠道怎么找?目前国内H5游戏现状如何,未来又如何规划?
  • 2018-12-03HTML5应用-欢乐老虎机的实现代码
  • 2018-12-03详解HTML5 录音遇到的坑
  • 2018-12-03HTML5之10 __使用 Canvas API创建 热点图
  • 2018-12-03HTML5开发实例-3D全景(ThreeJs全景Demo) 详解(图)
  • 2018-12-03MUI顶部选项卡的用法
  • 2018-12-03在HTML5中如何提高网站前端性能的示例代码分析
  • 2018-12-03HTML5 js实现拖拉上传文件功能

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • html5新增标签--nav标签介绍
    • Html5学习之旅-html5的留言记事本开发(17)
    • 以HTML5现在的技术条件,能出《刀塔传奇》这种效果的游戏吗?有哪些大公司在开发HTML5的中重度游戏项目?
    • Android使WebView支持HTML5 Video全屏播放的方法分享(图)
    • html5 更新图片颜色示例代码
    • html5 canvas绘制爱心的方法示例
    • HTML5第三天笔记
    • html5 embed标签的loop属性是怎么用的?embed标签的属性总结!
    • 2015年web前端开发行业的牛人有哪些?
    • 用 HTML5 可以实现二维码扫描识别的功能吗?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有