article

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

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<div>article标签</div>
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9(简称 IE9)于 2011 年 3 月 14 日发布.....</p>
</article>
</body> </html>

   aside

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

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<p>My family and I visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>
</body> </html>

 figure

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

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<p>上海卢浦大桥是当今世界第一钢结构拱桥,是世界上跨度最大的拱形桥。</p>
<figure>
<p>黄浦江上的的卢浦大桥</p>
<p>拍摄者:W3School 项目组,拍摄时间:2010 年 10 月</p>
<img src="img/bridge.jpg" width="350" height="250" />
</figure> </body> </html>

   nav

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

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<nav>
<a href="#">Java</a>
<a href="#">C#</a>
<a href="#">JavaScript</a>
</nav>
</body> </html>

   section

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

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<section>
<h1>Java</h1>
<p>
Java是一门语言!
</p>
</section>
<section>
<h1>C#</h1>
<p>
C#是一门语言!
</p>
</section>
<p>
C#是一门语言!
</p>
</body> </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. 2017-2018-2 20165336 实验四《Android开发基础》实验报告

    20165336 实验四 Android程序设计 一.实验报告封面 课程:Java程序设计 班级:1653班 姓名:康志强 学号:20165336 指导教师:娄嘉鹏 实验日期:2018年5月14日 实 ...

  2. git的配置操作

    git配置信息 一.配置git config git config user.name 'yourName' git config user.name 'yourEmail@gmail.com' 二. ...

  3. oracle中实现当前月减少或增加N个月

    add_months(last_day(trunc(sysdate)),N)N可以为正,表示增加:N可以为负,表示减少.

  4. Linux软件包安装

    rpm命令 命名方式  name-VERSION-release.arch.rpm 常见的arch: x86:   i386  i486    i586   i686 x86_64:   x64    ...

  5. 008-spring cache-缓存实现-03-springboot redis实现

    1.window下redis安装 https://www.cnblogs.com/bjlhx/p/7429811.html 2.pom <!-- 缓存 --> <dependency ...

  6. HTML5(Canvas Vedio Audio 拖动)

    1.Canvas    (在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字) HTML5 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. 标签只是图形 ...

  7. 20165236 《Java程序设计》第七周学习总结

    20165236 <Java程序设计>第七周学习总结 教材学习内容总结 第十一章  JDBC与MySQL数据库 1.MySQL数据库管理系统: MySQL数据库管理系统,简称MySQL,是 ...

  8. dfs模版

    dfs #include <stdio.h> #include <string.h> char Map[16][16]; int mv[16][16]; //mv[i][j] ...

  9. 19-Python3 函数

    def area(width,heigh): return width*heigh def print_wecome(name): print('welcome',name) print('Runoo ...

  10. [LeetCode] 441. Arranging Coins_Easy tag: Math

    You have a total of n coins that you want to form in a staircase shape, where every k-th row must ha ...