article代表一个在文档、页面或者网站中自成一体的内容

其目的是为了让开或重用

譬如论坛的帖子、博客的文章、一片用户的评论、一个互动的widget小工具

article 会有一个标题（通常在header里），会有一个footer页脚

如果在aritcle内部再嵌套article

那就代表的article是与它外部的内容有关联，如博客文章下面的评论

标准article元素的用法：

  1. <article>
  2.  <h1>文章标题</h1>
  3.  <p>文章内容</p>
  4.  <footer>
  5.      <p><small>版权</small></p>
  6.   </footer>
  7. </article>
    效果如下
  8.  
  9. 例如：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title> article </title>
  6. </head>
  7. <body>
  8.     <article>
  9.         <header>
  10.             <h1>王者荣耀</h1>
  11.         </header>
  12.         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid esse odio quam quo repellat? Accusamus
  13.             atque, dicta dolore iste maxime odio odit sequi suscipit tempora ut. Aspernatur officia placeat
  14.             quibusdam!</p>
  15.         <p>Amet eos esse nisi numquam obcaecati quos repellat saepe. Ab alias aliquam assumenda consequuntur cumque
  16.             debitis, deserunt, enim expedita in molestias mollitia voluptatum! Cumque dicta laborum magni maiores
  17.             recusandae repudiandae!</p>
  18.         <p>Deleniti distinctio, eveniet magnam maiores odio officiis provident reprehenderit. Aliquid eius, enim
  19.             expedita labore magnam odit quae quaerat quisquam tempore voluptates? Cupiditate error nisi quaerat ratione
  20.             reiciendis sed soluta voluptas.</p>
  21.         <footer>
  22.  
  23.             &copy; 2017
  24.         </footer>
  25.  
  26.     </article>
  27. </body>
  1.  

效果如下：

  1.  

article标准用法的更多相关文章

  1. @GeneratedValue 四种标准用法为TABLE,SEQUENCE,IDENTITY,AUTO.

    一.JPA通用策略生成器 通过annotation来映射hibernate实体的,基于annotation的hibernate主键标识为@Id, 其生成规则由@GeneratedValue设定的.这里 ...

  2. redis连接池的标准用法：

    from .conf import HOST, PORT, POOL_NAME import redis redis_pool = redis.ConnectionPool(host=HOST, po ...

  3. C# IEnumerable，Lambda表达式和 Parallel并行编程的用法

    以前一直主要做C++和C方面的项目,对C#不太了解熟悉,但听说不难,也就一直没有在意学习C#方面的知识.今天有个C#项目,需要做些应用的扩展,同时修改一些bug.但看了C#代码,顿时觉得有些不适应了. ...

  4. ShellExecute的各种用法

    一.利用系统默认的邮件收发器发送电子邮件 Uses ..., ShellAPI; Var lpHwnd: HWND; lpOperation, lpFile, lpParameters, lpDire ...

  5. 详解HTML5中的<aside>元素与<article>元素

    <aside>元素HTML<aside>元素表示一个页面的一部分, 它的内容跟这个页面的其它内容的关联性不强,或者是没有关联,单独存在.<aside>元素通常显示成 ...

  6. label 和 legend标签的用法

    label 和 legend标签的用法 label标准用法: 一般浏览器都支持 一般而言,label标签位于表单元素的前面或者后面,为控件提供说明文字 <label for="user ...

  7. Delphi ShellExecute的用法

    请在interface处uses句中加入ShellAPI 有三个API函数可以运行可执行文件WinExec.ShellExecute和CreateProcess.1.CreateProcess因为使用 ...

  8. C# 当中 LINQ 的常规用法(Lambda 方式)

    仅以本篇博文记录 LINQ 相关操作的基本知识,原型参考自 MSDN 相关知识,中间加以自己的理解与 DEMO. 1. IEnuemrable<T>.Select() Select 方法比 ...

  9. MySQL中INSERT的一般用法

    原文链接:http://www.blogjava.net/midnightPigMan/archive/2014/12/15/421406.html MySQL中INSERT的一般用法 INSERT语 ...

随机推荐

  1. （转）Java锁、自旋锁、CAS机制

    转自:http://www.jb51.net/article/55381.htm 转自:http://blog.csdn.net/aesop_wubo/article/details/7537278 ...

  2. （转）Unity笔记之编辑器（Foldout、HelpBox、InspectorTitlebar、Slider、MinMaxSlid ...

    1. Foldout.HelpBox 折叠菜单,大家都知道,不具体解释了,直接代码.因为折叠菜单中必然是有内容才能看到效果,所以顺带把HelpBox(提示框)也说了. [code]csharpcode ...

  3. windows 中 Eclipse 打开当前文件所在文件夹

    默认情况下使用eclipse打开当前文件所在文件夹很麻烦,需要右键点击 Package Explorer 中的节点选择属性,然后复制路径,再打开资源管理器,然后再把路径粘贴进去.而MyEclipse一 ...

  4. ICE新手入门版

    1.ICE是什么?  网络通信引擎ICE(Internet Communications Engine)是Zero C公司的分布式系统开发专家实现的一种新的高性能的面向对象中间件平台.从根本上说, I ...

  5. Linux下的Make与Makefile

    原文转载自:http://www.cpplive.com/html/1776.html 另外一个不错的博客http://bbs.chinaunix.net/thread-1950588-1-1.htm ...

  6. PAT 1013 Battle Over Cities(并查集)

    1013. Battle Over Cities (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue It ...

  7. Kubernetes资源创建yml语法

    前言 在是用kubernetes中,我们对资源的创建大部分都是通过 1 kubelet create -f RESOURCE.yaml 刚开看的时候不免有一些迷茫,看不懂语法,不知道怎么写:今天本文就 ...

  8. English Grammar

    What is Grammar?  

  9. Powershell运行Invoke-Sqlcmd命令的先决条件

    运行Invoke-Sqlcmd命令,使用这个命令需满足如下条件: 1.在运行服务器中安装SQL Server 2008 R2 Management ObjectsI 2.在运行命令 invoke-sq ...

  10. 微信支付 301 500 php 7 simplexml_load_string

    w simplexml_load_string http://stackoverflow.com/questions/35593521/php-7-simplexml