zoukankan      html  css  js  c++  java
  • article元素设计网络新闻展示

    article元素用来表示文档、页面中独立的、完整的、可以独自被外部引用的内容。它可以是一篇文章博客或者报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件等。除了内容部分,一个article元素通常有它自己的标题,一般放在一个header元素里面,有时还有自己的脚注。当article元素嵌套使用的时候,内部的article元素内容必须和外部的article元素内容相关。article元素支持html5全局属性。
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" http-equiv="content-type" content="text/html"><!-- 注释-->
    <title>新闻</title>
    </head>
    <body>
    <article>
    <header>
    <h1>内蒙古农业大学</h1>
    <time>2015年9月20</time>
    </header>
    <p>
    内蒙古农业大学,在内蒙古自治区的首府呼和浩特市,是一座非常漂亮的学校
    </p>
    <footer>
    <p>http://www.imau.edu.cn</p>
    </footer>
    </article>
    </body>
    </html>


    这个示例在header元素中嵌入了文章的标题部分,在这部分中,文章的标题被镶嵌到h1元素中,文章的发表日期镶嵌在time元素中。在标题下部的p元素中,嵌入了文章的正文,在结尾处的footer元素中,嵌入了文章的著作权,作为脚注。整个示例的内容相对比较独立完整,因而使用article元素。
    article元素是乐意嵌套使用的,内层的内容在原则上需要与外层的内容关联。例如,对这篇文章的评论就可以使用嵌套article元素的方式,用来呈现评论的article元素被包含在整体内容的article元素里面。
    示例2 是在示例1的基础上演示如何实现article元素嵌套使用。
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" http-equiv="content-type" content="text/html"><!-- 注释-->
    <title>新闻</title>
    </head>
    <body>
    <article>
    <header>
    <h1>内蒙古农业大学</h1>
    <time pubdate = "pubdate">2015年9月20</time>
    </header>
    <p>
    内蒙古农业大学,在内蒙古自治区的首府呼和浩特市,是一座非常漂亮的学校
    </p>
    <footer>
    <p>http://www.imau.edu.cn</p>
    </footer>
    <section>
    <h2>评论</h2>
    <article>
    <header>
    <h3>张三</h3>
    <p>
    <time pubdate datetime="2015年9月20">一小时前</time>
    </p>
    </header>
    <p>ok</p>
    </article>
    <article>
    <header>
    <h3>李四</h3>
    <p>
    <time pubdate datetime="2015年9月20">一小时前</time>
    </p>
    </header>
    <p>good</p>
    </article>
    </section>
    </article>
    </body>
    </html>


    示例2中的内容比示例1中的内容更加完整,它添加了评论内容。整个内容比较独立、完整,因此对其使用article元素。

  • 相关阅读:
    Bzoj_1562 [NOI2009]变换序列
    Bzoj_1443 [JSOI2009]游戏Game
    Bzoj_3572 [Hnoi2014]世界树
    【python】按顺序排列组合输出字符串
    【python】通过LibreOffice把html文件转换成docx文件
    【python】判断一个地址是ipv4还是ipv6
    【python】判断一个字符串是否是数字
    【python】ImportError: cannot import name 'QWebView'
    【python】ModuleNotFoundError: No module named 'PyQt5.QtWebKitWidgets'
    【GNS3】Error 9: Unknown boot failure
  • 原文地址:https://www.cnblogs.com/mudy/p/4823365.html
Copyright © 2011-2022 走看看