HTML标签-----article、aside、figure、nav和section

   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>

原文地址:https://www.cnblogs.com/fengfuwanliu/p/10221199.html

时间: 2024-10-18 01:30:24

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

HTML5中section、article、figure的区别及使用介绍

html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>河南焦作景点介绍</title> <link type="text/css" rel="stylesheet" href="css.css"> </head>

HTML5 中 div 和section以及 article 的不同之处

HTML5 中 div section article 的区别 刚刚开始接触 HTML5 时,对它的标签很不适应,甚至一度有点反感.尤其是对 div.section.article 这几个标签,实在弄不清楚应该使用在什么场合下.div标签这个标签是我们见得最多.用得最多的一个标签.本身没有任何语义,用作布局以及样式化. section标签与 div 的无语义相对,简单地说 section 就是带有语义的 div 了,但是千万不要觉得真得这么简单.section 表示一段专题性的内容,一般会带有标

HTML5的新结构标签

在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式.而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文 章内容容器,或者是导航模块的容器,或者是作者介绍的容器等等.也就是说整个HTML文档结构定义不清晰,HTML5中为了解决这个问题,专门添加了:页 眉.页脚.导航.文章内容等跟结构相关的结构元素标签. 在讲这些新标签之前,我们先看一个普通的页面的布局方式: 上图中我们非常清晰的看到了,一个普通的页面,会有头部,导航,文章内容,还有附着的右边栏,还有底部等模块,

让IE6\IE7\IE8支持HTML5标签

<!–[if IE]> <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script> < ![endif]–> 引用以上google的JS(下载下来引用本地的也一样的)放在页面的head区域,注意一定要放在head区域不然将会失效,因为必须在浏览器解析这个元素前执行这个JS,所以不能放在页面的其他地方.最后在css申明下这些H5的标签article,aside,dialo

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

我这边申明下:我写这篇日志主要是想然ie8可以支持html5的个别标签闭合,并不能让ie全然支持html5.我之前写的可能会误导非常多同学.希望大家能明确. 今天脑抽想用html5标签设计一个网页.我本人用的是火狐浏览器,都弄好后我发现一个非常严重的问题.除了ie9下面的浏览器都不能支持html5标签(article,aside,dialog,footer,header,section,footer,nav,figure,menu). 我上网找了好多中方法.有网友说使用 <!--[if lt I

html5学习笔记(1)-新标签

最近在做的项目中用到了Html5的部分标签,经师父提醒感觉自己用section的次数多的有点过分,今天去找了一篇HTML5新标签的使用方法,特意贴了上来,感谢原作者的分享,方便以后自己使用~~~ HTML5时代的召唤 上一代的HTML的标准: HTML 4.01 和 XHTML 1.0 距离今天已经发布了10多年了,而Web端的应用也已经翻天覆地的变换.而且Web前端没有一个统一的通用的互联网标准,各个浏览器间拥有太多的不兼容,在维护这些浏览器兼容性浪费了太多的时间.再有就是之前的多媒体操作.动

ie8以下版本(包括ie8)的浏览器不支持html5标签属性解决方案(Modernizr 2.6.2插件的使用)

今天脑抽想用html5标签设计一个网页,我本人用的是火狐浏览器,都弄好后我发现一个很严重的问题,除了ie9以下的浏览器都不能支持html5标签(article,aside,dialog,footer,header,section,footer,nav,figure,menu). 我上网找了好多中方法,有网友说使用 <!--[if lt IE9]> <script> (function() { if (! /*@[email protected]*/ 0) return; var e

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

HTML是什么,HTML5是什么? --HTML:超文本标记语言,一种用于创建网页的标准标记语言: --HTML5:目前最新的HTML标准,包含新的元素.属性.行为,基于它们的功能特征将他们分成不同的组别: * 语义:能够让你更恰当地描述你的内容是什么: * 连通性:能够让你和服务器之间通过创新的技术方法进行通信: * 离线&存储:能够让网页在客户端本地存储数据更高效地离线运行: * 多媒体:使用video和audio成为了所有web中的一等公民: * 2D/3D绘图&效果:提供了一个更加

5.8 HTML5新结构标签

在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式.而搜索引擎去抓取页面的内容的时候,它只能猜测 你的某个Div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介绍的容器等等.也就是说整个HTML文档结构定义不清晰,HTML5中为了解 决这个问题,专门添加了:页眉.页脚.导航.文章内容等跟结构相关的结构元素标签. 在讲这些新标签之前,我们先看一个普通的页面的布局方式: 上图中我们非常清晰的看到了,一个普通的页面,会有头部,导航,文章内容,还有附着的右边栏,还有底部等模块,