• 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元素。

  • 相关阅读:
    Airflow 使用 Celery 时,如何添加 Celery 配置
    什么是唯品会JIT业务
    Linux 性能优化排查工具
    HttpClient 报错 Invalid cookie header, Invalid 'expires' attribute: Thu, 01 Jan 1970 00:00:00 GMT
    如何使用 Enterprise Architect 画 UML
    通过maven profile 打包指定环境配置
    Git 使用总结
    Git 分支模型
    本地Windows环境Dubbo搭建测试
    makefile
  • 原文地址:https://www.cnblogs.com/mudy/p/4823365.html
Copyright © 2020-2023  润新知