位置:首页 > 软件操作教程 > 编程开发 > HTML > 问题详情

HTML5 定义文章块

提问人:刘团圆发布时间:2020-11-20

    ■知识点

    article表示文章块,用来标识页面中一块完整的、独立的、可以被转发的内容,如报纸文章、论坛帖子、用户评论、博客条目等。提示,一些交互式小部件或小工具,或任何其他可独立的内容,原则上都可以作为article块,如日期选择器组件。

    ■实例设计

【示例1】下面的示例演示了 article元素的应用。

<header role="banner">

    <nav role="navigation”> [包含多个链接的 ul]</nav>

</header>

<main role="main">

    <article>

        <hl id="news">区块链“时代号”列车驶来</h1>

        <p>对于精英们来说,这个春节有点特殊。</p>

        <p>他们身在视营心在汉,他们被区块链搅动得燥热难耐,在兴奋、焦虑、恐慌、质疑中度过一个漫长春节。</p>

        <h2 id="subl">l.三点钟无眠</h2>

        <p><img src="images/0001. jpg" width="200" />春节期间,一个大姥云集的区块链群建立,因为有蔡文胜、薛蛮子、徐小平等人的参与,群被封上了 “市值万亿”。这个名为“三点钟无眠区块链”的群,搅动了一池春水。</p>

        <h2 id="sub2">2.被碾压的春节</h2>

        <p>...</p>

    </article>

</main>

    为了精简,本示例对文章内容进行了缩写,略去了与上一节相同的nav代码。尽管在这个示例里只有段落和图像,但article可以包含各种类型的内容。

    可以将article嵌套在另一个article中,只要里面的article与外面的article是部分与整体的关系。一个页面可以有多个article元素。例如,博客的主页通常包括几篇最新的文章,其中每一篇都是其自身的articleo —个article可以包含一个或多个section元素。在article里包含独立的hl〜h6元素。

    【示例2】示例1只是使用article的一种方式,下面看看其他的用法。本示例展示了对基本的新闻报道或报告进行标记的方法。注意footer和address元素的使用。这里,address只应用于其父元素article (即这里显示的article),而非整个页面或任何嵌套在那个article里面的article。

    <article>

    <hl id="news">区块链“时代号”列车驶来</hl>

    <P>对于精英们来说,这个春节有点特殊。</P>

    <!--文章的页脚,并非页面级的页脚 -->

    <footer>

        <p>出处说明</p>

        <address>

        访问网址<a href="https : //www.huxiu.com/article/233472.html">虎嗅</a> 

        </address>

    </footer>

</article>

    【示例3】下面的示例展示了嵌套在父元素article里面的article元素。该示例中嵌套的article是用户提交的评论,就像在博客或新闻网站上见到的评论部分。该示例还显示了 section元素和time元素的用法。这些只是使用article及有关元素的几个常见方式。

<article>

    <hl id="news">区块链“时代号”列车驶来</hl>

    <P>对于精英们来说,这个春节有点特殊。</p>

    <section>

        <h2> 读者评论</112>

        <article>

            <footer〉发布时间

                <time datetime=n2018-02-20n>2018-2-20</time>

            </footer>

            <p>评论内容</p>

        </article>

        <article〉[下一则评论]〈/article〉

    </section>

</article>

每条读者评论都包含在一个article里,这些article元素则嵌套在主article里。

继续查找其他问题的答案?

发表评论(共0条评论)
请自觉遵守互联网相关政策法规,评论内容只代表网友观点,发表审核后显示!

2021年国家电网校园招聘考试直播课程通关班

  • 讲师:刘萍萍 / 谢楠
  • 课时:160h
  • 价格 4580

特色双名师解密新课程高频考点,送国家电网教材讲义,助力一次通关

配套通关班送国网在线题库一套

课程专业名称
讲师
课时
查看课程

2020年解放军文职招聘考试全程直播课

杜老师139课时试听目录

2021级国家电网招聘考试管理专业知识精讲班直播课

黎老师160小时试听目录

2021级国家电网招聘考试其它工学类专业题海练习班直播课

贺老师160小时试听目录

2021级国家电网招聘考试金融专业知识精讲班直播课

钟老师140小时试听目录

2021级国家电网招聘考试计算机专业知识精讲班直播课

杜老师160小时试听目录

2021级国家电网招聘考试通信专业知识精讲班直播课

李老师350小时试听目录

2021级国家电网招聘考试财会专业知识精讲班直播课

王老师120小时试听目录

2021级国家电网招聘考试研究生题海班直播课程

严老师180小时试听目录

2021级国家电网招聘考试研究生电气专业知识精讲班直播课

彭老师160小时试听目录

2021级国家电网招聘考试本科电气专业考前押题班录播课

蒋老师168h试听目录

2021级国家电网招聘考试本科电气专业题海训练班直播课

谷老师165小时试听目录

2021级国家电网招聘考试本科电气专业知识精讲班直播课

严老师160小时试听目录

2021级国家电网招聘考试专科电气专业考前押题班直播课

王老师150小时试听目录

2021级国家电网招聘考试专科电气专业知识题海训练直播课

杨老师146小时试听目录

2021级国家电网招聘考试专科电气专业知识精讲班直播课

崔老师180小时试听目录

2020年湖南中烟公司招聘考试技术工人二岗直播课

刘老师140小时试听目录

2020年湖南中烟公司招聘考试生成车间工人考试直播课

王老师125小时试听目录

2020年湖南中烟公司招聘考试技术工人一岗直播课

李老师140小时试听目录

2020年湖南中烟公司招聘直播课程(协议班)

崔莹莹168h试听目录

2020湖南农村信用社招聘笔试培训(协议保过班)

谢楠200h试听目录

2020军队文职招聘考试面试培训(协议保过班)

刘萍萍124h试听目录

2021国家电网招聘考试录播视频课程

  • 讲师:崔莹莹 / 刘萍萍
  • 课时:180h
  • 价格 3580

特色解密新课程高频考点,免费学习,助力一次通关

配套全套国网视频课程免费学习

课程专业名称
讲师
课时
查看课程

2021级国家电网招聘考试管理类专业知识精讲班录播课

王老师150小时试听目录

2021级国家电网招聘考试其它工学类专业题海练习班录播课

谷老师148小时试听目录

2021级国家电网招聘考试其它工学类专业知识精讲班录播课

夏老师150小时试听目录

2021级国家电网招聘考试其它专业题海练习班录播课

刘老师125小时试听目录

2021级国家招聘考试其它专业题海练习班录播课

李老师140小时试听目录

2021级国家电网招聘考试其它专业知识精讲班录播课

贾老师120小时试听目录

2021级国家电网招聘考试金融专业知识精讲班录播课

王老师140小时试听目录

2021级国家电网招聘考试通信专业知识精讲班录播课

黄老师188小时试听目录

2021级国家电网招聘考试计算机专业知识精讲班录播课

谷老师120小时试听目录

2021级国家电网招聘考试财会专业考前押题班录播课

夏老师15小时试听目录

2021级国家电网招聘考试财会专业题海练习班录播课

杨老师180小时试听目录

2021级国家电网招聘考试财会专业知识精讲班录播课

蒋老师156小时试听目录

2021级国家电网招聘考试研究生电气考前押题班录播课

谷老师12小时试听目录

2021级国家电网招聘考试研究生电气专业题海练习班录播课

李老师170小时试听目录

2021级国家电网招聘考试研究生电气专业知识精讲班录播课

崔老师150试听目录

2021级国家电网招聘考试本科电气专业考前押题班录播课

王老师120小时试听目录

2021级国家电网招聘考试本科电气题海练习班录播课

王老师158小时试听目录

2021级国家电网招聘考试本科电气专业知识精讲班录播课

谷老师170小时试听目录

2021级国家电网招聘考试专科电气专业考前押题班录播课

蒋老师12小时试听目录

2021级国家电网招聘考试专科电气专业题海练习班录播课

崔老师150小时试听目录

2021级国家电网招聘考试专科电气专业知识精讲班录播课

王老师180小时试听目录

在线题库
在线报名
  • 报考专业:
    *(必填)
  • 姓名:
    *(必填)
  • 手机号码:
    *(必填)
返回顶部