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

  • 相关阅读:
    (转)基于svnserve的服务器,权限文件authz配置的常见问题及解答
    How to merge two images into one using Actionscript
    Flash builder 4 (Flex builder 4) 正式版序列号生成器
    Linux安全配置步骤简述
    linux运行级别查看并更改研究
    Flex(flash)检测摄像头的3种状态(是否被占用,没安装摄像头,正常)
    推荐几个Adobe Flex Builder 3的插件(代码格式化和fms服务器通讯文件(main.asc)编写)
    OldHawk TODO on Unrealircd
    install flashpolicyd
    (转)谈linux安全设置
  • 原文地址:https://www.cnblogs.com/mudy/p/4823365.html
Copyright © 2011-2022 走看看