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

原文地址:https://www.cnblogs.com/mudy/p/4823365.html