article

   <article> 标签定义独立的内容

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title></title>
  7.     </head>
  8.  
  9.     <body>
  10.         <div>article标签</div>
  11.         <article>
  12.             <h1>Internet Explorer 9</h1>
  13.             <p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p>
  14.         </article>
  15.     </body>
  16.  
  17. </html>

   aside

   <aside> 标签定义 <article> 标签外的内容，aside 的内容应该与附近的内容相关

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title></title>
  7.     </head>
  8.  
  9.     <body>
  10.         <p>My family and I visited The Epcot center this summer.</p>
  11.         <aside>
  12.             <h4>Epcot Center</h4>
  13.             <p>The Epcot Center is a theme park in Disney World, Florida.</p>
  14.         </aside>
  15.     </body>
  16.  
  17. </html>

 figure

   <figure> 标签规定独立的流内容（图像、图表、照片、代码等等），figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title></title>
  7.     </head>
  8.  
  9.     <body>
  10.         <p>上海卢浦大桥是当今世界第一钢结构拱桥，是世界上跨度最大的拱形桥。</p>
  11.         <figure>
  12.             <p>黄浦江上的的卢浦大桥</p>
  13.             <p>拍摄者：W3School 项目组，拍摄时间：2010 年 10 月</p>
  14.             <img src="img/bridge.jpg" width="350" height="250" />
  15.         </figure>
  16.  
  17.     </body>
  18.  
  19. </html>

   nav

   <nav> 标签定义导航链接的部分

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title></title>
  7.     </head>
  8.  
  9.     <body>
  10.         <nav>
  11.             <a href="#">Java</a>
  12.             <a href="#">C#</a>
  13.             <a href="#">JavaScript</a>
  14.         </nav>
  15.     </body>
  16.  
  17. </html>

   section

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title></title>
  7.     </head>
  8.  
  9.     <body>
  10.         <section>
  11.             <h1>Java</h1>
  12.             <p>
  13.                 Java是一门语言!
  14.             </p>
  15.         </section>
  16.         <section>
  17.             <h1>C#</h1>
  18.             <p>
  19.                 C#是一门语言！
  20.             </p>
  21.         </section>
  22.         <p>
  23.             C#是一门语言！
  24.         </p>
  25.     </body>
  26.  
  27. </html>

HTML标签-----article、aside、figure、nav和section的更多相关文章

  1. html-5 --html5教程article、footer、header、nav、section使用

    header header元素是一种具有引导和导航作用的辅助元素.通常,header元素可以包含一个区块的标题(如h1至h6,或者hgroup元素标签),但也可以包含其他内容,例如数据表格.搜索表单或 ...

  2. HTML5新增标签

    section标签  <section>标签,定义文档中的节.比如章节.页眉.页脚或文档中的其它部分.一般用于成节的内容,会在文档流中开始一个新的节.它用来表现普通的文档内容或应用区块,通 ...

  3. HTML5新增结构标签

    引言 在本节中,笔者将向大家讲述三部分内容,分别介绍HTML5时代的召唤,跟HTML4的区别,以及HTML5中带来的新的结构标签. HTML5时代的召唤 HTML4与HTML5的区别 HTML5新结构 ...

  4. h5新增html标签语义

    H5新增常用标签<body> <header>...</header> <nav>...</nav> <article> < ...

  5. HTML5的新结构标签

    在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式.而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介绍的容器等等.也 ...

  6. HTML5学习之新增标签

    转自:http://www.cnblogs.com/fly_dragon/archive/2012/05/25/2516142.html 作者:FlyDragon 一.引言 在本节中,笔者将向大家讲述 ...

  7. ie8下面版本号（包含ie8）的浏览器不支持html5标签属性解决方式（Modernizr 2.6.2插件的使用）

    我这边申明下:我写这篇日志主要是想然ie8可以支持html5的个别标签闭合,并不能让ie全然支持html5.我之前写的可能会误导非常多同学.希望大家能明确. 今天脑抽想用html5标签设计一个网页.我 ...

  8. html5学习笔记（1）-新标签

    最近在做的项目中用到了Html5的部分标签,经师父提醒感觉自己用section的次数多的有点过分,今天去找了一篇HTML5新标签的使用方法,特意贴了上来,感谢原作者的分享,方便以后自己使用~~~ HT ...

  9. 对HTML的理解及常用标签使用介绍--来自我的百度前端技术学院的笔记

    HTML是什么,HTML5是什么? ——HTML:超文本标记语言,一种用于创建网页的标准标记语言: ——HTML5:目前最新的HTML标准,包含新的元素.属性.行为,基于它们的功能特征将他们分成不同的 ...

随机推荐

  1. 以CENTOS6.8系统为例部署ORACLE11g RAC和DNS配置

    本文所需要的全部文档均位于文末附录中 本文章以两个节点为例进行安装 在virtual box创建虚拟机时,网卡1为桥接网卡,网卡二为仅主机模式 创建两块磁盘,模式设置为可共享,都添加到两个虚拟机中 在 ...

  2. 20165225 2017-2018-2《Java程序设计》课程总结

    20165225 2017-2018-2<Java程序设计>课程总结 - 每周作业链接汇总: 预备作业一:我期待的师生关系 预备作业二:学习基础和C语言基础调查 预备作业三:linux安装 ...

  3. Guava cache 示例

    pom.xml <!-- guava --> <dependency> <groupId>com.google.guava</groupId> < ...

  4. Java基础知识之集合

    Collection集合 特点:长度可变,只能存储引用类型,可以存储不同的类型的元素 list 特点:元素有序(存储和取出的顺序一致),元素可以重复.list除了可以用迭代器循环遍历之外,因为其是有序 ...

  5. 【Python全栈-JavaScript】JavaScript入门

    JavaScript基础知识点 一.JavaScript概述 参考:http://www.w3school.com.cn/b.asp JavaScript的历史 1.1992年Nombas开发出C-m ...

  6. Git 常用命令和统计代码量

    摘要 分享Git日常操作中常用的命令,分享如何统计在项目中贡献的代码量. 下面列出Git bash常用命令. 1. git clone **(项目地址) 克隆一个git项目到本地,将git项目拉取到本 ...

  7. 显示隐藏火车头快捷键Ctrl+t

    今天ytkah在使用火车头的时候也使用了Photoshop,用了组合键Ctrl+t来进行调整图层的大小,可能多按了几次的缘故吧,触发了火车头的隐藏老板键,找了半天也找到,因为当时编辑的任务还没保存,不 ...

  8. Hadoop 尝试

    一. 使用环境Ubuntu 安装Hadoop需要的软件 命令: $ sudo apt-get install ssh $ sudo apt-get install rsync 提示错误: 错误原因: ...

  9. shell中expect介绍

    expect介绍 借助Expect处理交互的命令,可以将交互 过程如:ssh登录,ftp登录等写在一个脚本上,使之自动化完成.尤其适用于需 要对多台服务器执行相同操作的环境中,可以大大提高系统管理人员 ...

  10. 封装||property

    封装 封装:主要是指在类的定义阶段将,以__开头的属性名进行变形..例如:__name ==> _People__name 封装的主要特点: 1.在类外部无法直接__name,想要在外部调用可以 ...