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元素。
article元素设计网络新闻展示的更多相关文章
- 详解HTML5中的<aside>元素与<article>元素
<aside>元素HTML<aside>元素表示一个页面的一部分, 它的内容跟这个页面的其它内容的关联性不强,或者是没有关联,单独存在.<aside>元素通常显示成 ...
- section元素与div、article元素的区别
section元素是对网站或应用程序中页面上的内容进行分块,一个section元素通常有标题和内容组成.但section元素并非一个普通的容器元素,当一个容器需要直接定义样式或通过脚本定义行为时,推荐 ...
- 八（第一篇）、主体结构元素——article元素、section元素
article元素 article元素代表文档.页面或应用程序中独立的.完整的.可以独自被外部引用的内容. 他可以是一篇博客或者报刊中的文章,一篇轮胎帖子.一段用户评论或独立的插件,或其他任何独立的插 ...
- article元素以及section
<p>发表日期:<time pubdate="pubdate">2015/10/30</time></p> article元素有自己 ...
- HTML5<article>元素
HTML5<article>元素用来定义页面文档的独立内容. 实例: <article class="pageArticle"> <h2>art ...
- django权限二(多级菜单的设计以及展示)
多级权限菜单设计级标题栏 我们现在只有数据展示,要进入其他url还需要手动的输入路径,非常的麻烦,所以我们要设计 一个导航栏以及侧边多级菜单栏,这个展示是通过stark组件的设计的增删改查页面,而 每 ...
- section和article元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 怎样进行Android UI元素设计
Android UI元素里面包含了许多的内容,比如:该平台由操作系统.中间件.用户界面和应用软件组成,一个应用程序要想受用户喜爱,那么UI可不能差. Android为相似的编程名词引入了一些新的术语, ...
- 2.10.1 article元素
嵌套 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <titl ...
随机推荐
- nyoj 44 子串和
子串和 时间限制:5000 ms | 内存限制:65535 KB 难度:3 描述 给定一整型数列{a1,a2...,an},找出连续非空子串{ax,ax+1,...,ay},使得该子序列的和最 ...
- [iOS基础控件 - 5.4] 广告分页代码(UIScrollView制作)
A.概念 例子就是桌面的APP列表,当APP数量超过一个屏幕,自动进行分页 B.实现思路 1.创建一个UIScrollView,这里设置为宽度跟屏幕相同,高度1/4屏幕高度左右 2.使用代码在UI ...
- 74HC595 for STM32 源代码【worldsing笔记】
74HC595是硅结构的CMOS器件, 兼容低电压TTL电路,遵守JEDEC标准. 74HC595是具有8位移位寄存器和一个存储器,三态输出功能. 移位寄存器和存储器是分别的时钟. 数据在SHcp(移 ...
- C++学习笔记（五）：指针和引用
声明指针: //指针声明 * 号左右的空格是可选的,下面的定义都是正确的 int *pointer1; int* pointer2; int*pointer3; int * pointer4; //注 ...
- ASP.NET线程与异步
什么是线程? 线程简单来说就是一种数据结构,用来管理这个程序的执行状态,其中包括 1.线程核心对象->寄存器的状态 2.线程环境块,是一块用户模式下的内存,包含线程的异常处理链的头部.线程的局部 ...
- Android设计模式系列--观察者模式
观察者模式,是一种非常常见的设计模式,在很多系统中随处可见,尤其是涉及到数据状态发生变化需要通知的情况下.本文以AbstractCursor为例子,展开分析.观察者模式,Observer Patter ...
- Asp.net中使用资源文件实现网站多语言
首先需要新建一个ASP.NET Web Application.然后右键项目文件Add->Add ASP.NET Folder->App-GlobalResources. 新建好资源文件夹 ...
- iOS UICollectionView基础
转载自:http://www.cnblogs.com/wayne23/p/4013522.html 初始化部分: UICollectionViewFlowLayout *flowLayout= [[ ...
- Codeforces Round #323 (Div. 1) B. Once Again... 暴力
B. Once Again... Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/582/probl ...
- 王帅：深入PHP内核
[问底]王帅:深入PHP内核(三)——内核利器哈希表与哈希碰撞攻击 [问底]王帅:深入PHP内核(二)——SAPI探究 [问底]王帅:深入PHP内核(一)——弱类型变量原理探究