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 ...
随机推荐
- Razor模板引擎（C#版）语法
1.简介: Razor 是一种标记语法,可以让您将基于服务器的代码(Visual Basic 和 C#)嵌入到网页中. 基于服务器的代码可以在网页传送给浏览器时,创建动态 Web 内容.当一个网页被请 ...
- sudo: /etc/sudoers is mode 0640, should be 0440解决办法
ubuntu或者CentOS中,/etc/sudoer 的权限为 0440时才能正常使用,否则sudo命令就不能正常使用.出现类似:sudo: /etc/sudoers is mode 0640, s ...
- 别名的应用（New-Alias）
New-Alias -name appcmd -value $env:windir\system32\inetsrv\appcmd.exe 这样就可以在当前PS环境下直接使用appcmd了
- Flex 自动获取焦点 监听全局键盘事件
在mxml里监听addedToStage事件 protected function application1_addedToStageHandler(event:Event):void { this. ...
- 华为的JAVA面试题及答案（部分）
华为的JAVA面试题 (后记:没有想到华为的面试题就是非同一般,非常多题不是一眼就行看得出来,至少对我这种鸟来说是这样.对我个人来说,看看这种题,可能比看<Think In Java>都还 ...
- Android ListView快速定位（四）
方法四: 添加一个EditText,作为搜索框 + Filter 其实这个不算第四个方法,因为与第二个一样,主要是实现Filter. 但是对于EditText的监听,我以前也没有写过,所以也记录一下. ...
- unity3d NGUI多场景共用界面制作
1创建单独编辑UI的unity场景 UIScene.unity 用来做UI面界 ,创建Resources文件存放UI界面的prefab,代码里动态load资源仅仅能从Resources目录载入 2创建 ...
- linux文件 编辑常用 inux手把手vi ---针对文件操作
命令语法 说明 使用频率(1:常用;2一般:3:偶尔) 1.VI编辑器的启动与退出 VI编辑器的启动与退出 vi file1 新建一个文本文件名为file1 :q 退出,如果对缓存去进行过修改,则提 ...
- 2、netlink简介
Netlink 是一种特殊的 socket,它是 Linux 所特有的,类似于 BSD 中的AF_ROUTE 但又远比它的功能强大,目前在最新的 Linux 内核(2.6.14)中使用netlink ...
- iOS 符号表恢复 & 逆向支付宝
推荐序 本文介绍了恢复符号表的技巧,并且利用该技巧实现了在 Xcode 中对目标程序下符号断点调试,该技巧可以显著地减少逆向分析时间.在文章的最后,作者以支付宝为例,展示出通过在 UIAlertVie ...