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. linux 源码安装 mono

    $ yum install bison gettext glib2 freetype fontconfig libpng libpng-devel libX11 libX11-devel glib2- ...

  2. 一步步搭建 Spring Boot maven 框架的工程

    摘要:让Spring应用从配置到运行更加快速,演示DIY Spring Boot 框架时,如何配置端口号,如何添加日志. Spring Boot 框架帮助开发者更容易地创建基于Spring的应用程序和 ...

  3. debian下配置nginx缓存

    root权限下 新建/usr/nginx/cache/webpages目录 在/etc/nginx/sites-available下找到自己所需配置的文件,打开文件后在开头加上proxy_cache_ ...

  4. php 关于时间函数

    1. 设置时区 date_default_timezone_set() 和 putenv() 让时间安全地设置就,输入如下代码: date_default_timezone_set('UTC'); / ...

  5. python-面向对象-07_继承

    继承 目标 单继承 多继承 面向对象三大特性 封装 根据 职责 将 属性 和 方法 封装 到一个抽象的 类 中 继承 实现代码的重用,相同的代码不需要重复的编写 多态 不同的对象调用相同的方法,产生不 ...

  6. Python3学习之路~6.7 经典类和新式类的继承顺序

    在Python中,经典类(class Person:)和新式类(class Person(object):)的主要区别就是体现在多继承的顺序上. Python 2.x中默认都是经典类,只有显式继承了o ...

  7. dxCameraControl控件(拍照)

    拍照演示 主要属性设置 Active:True DeviceIndex:设备号,默认为0 其他方法 procedure Capture; //捕获 procedure Pause; //暂停 proc ...

  8. 关于Go，你可能不注意的7件事

    转自: https://tonybai.com/2015/09/17/7-things-you-may-not-pay-attation-to-in-go/ Go以简洁著称,但简洁中不乏值得玩味的小细 ...

  9. Java知识点-判断null、空字符串和空格

    Java知识点-判断null.空字符串和空格 // 判断headerKey是否为null,空字符串或者空格 if (headerKey != null && headerKey.len ...

  10. 【Java】-NO.16.EBook.4.Java.1.004-【疯狂Java讲义第3版 李刚】- 内部类

    1.0.0 Summary Tittle:[Java]-NO.16.EBook.4.Java.1.004-[疯狂Java讲义第3版 李刚]- 内部类 Style:EBook Series:Java S ...