sections部分

http://www.w3.org/TR/html5/sections.html

标签:article

article标签用来表示页面中一段完整的可以自我包含的片段,具有可重用的特性。可以是一条贴子、杂志或报纸的文章、一篇博客、一条用户提交的评论,也可以是一个可交互的组件,甚至可以是任意独立的内容条目。

article标签是可以嵌套使用的,比如一篇文章之后的评论就可以嵌套放在表示文章的article元素之内。

范例:

<article>
    <header>
        <h1>文章标题</h1>
    </header>
    <p>文章正文</p>
</article>

标签:section

section标签表示文档或者应用当中的一个章节片断。章节片断可以带有自己的heading。

section可以用来表示文章的章节,一个标签页。一个网站的首页可以通过section分为介绍、新闻、联系方式等等部分。

section可以嵌套使用。

范例:

<article>
    <header>
        <h1>标题</h1>
    </header>
    <section>
        <h1>章节一标题</h1>
        <p>章节一段落</p>
    </section>
    <section>
        <h1>章节二标题</h1>
        <p>章节二段落</p>
    </section>
</article>

article还是section?

套用HTML5规范里的一句话:A section forms part of something else. An article is its own thing. 意思就是说section总是多次出现的,因为每个section是若干sections的一部分。而article很独立,一个页面可以只有一个article。

标签:nav

nav包含导航链接的片段。

范例:

<nav>
    <p><a href="/">Home</a>
    <p><a href="/biog.html">Bio</a>
    <p><a href="/discog.html">Discog</a>
</nav>

标签:aside

aside标签代表与正文内容无关的部分。可以是边栏上引述的文字内容,广告,也可以包含nav元素。判断是否使用aside标签就看其包含的内容是否属于住文档流中。

范例:

<h1>Music</h1>
<p>As any burner can tell you, the event has a lot of trance.</p>
<aside>You can buy the music we played at our <a href="buy.html">playlist page</a>.</aside>
<p>This year we played a kind of trance that originated in Belgium, Germany, and the Netherlands in the mid 90s.</p>

标签:header

header表示当前所在段落、章节的介绍性信息以及导航链接信息,一般情况下会包含h1-h6,但也可以不包含,也可以使用其他元素来表示其中内容。

强调一点,html中h1-h6是真正的标题(heading),header则是包含介绍性的信息(例如目录、搜索框、logo等),其中可以包含标题,也可以不包含。

范例:

<article>
    <header>
        <h1>Hard Trance is My Life</h1>
        <p>By DJ Steve Hill and Technikal</p>
    </header>
    <p>The album with the amusing punctuation has red artwork.</p>
</article>

标签:footer

footer标签表示页脚,通常包含文章的作者、相关信息的链接、版权信息等等。footer可以包含整段的附录信息、索引信息、版本更新记录、许可协议。footer通常都是出现在内容的最后,但也不一定。

范例:

<article>
    <h1>Hard Trance is My Life</h1>
    <p>The album with the amusing punctuation has red artwork.</p>
    <footer>
        <p>Artists: DJ Steve Hill and Technikal</p>
    </footer>
</article>

标签:address

address标签表示与article或者body所包含内容相关的联系信息。注意address并不是一般意义上的地址,除非这个地址与联系信息相关(例如文章里提到了某个地址,就不能用address标签来描述)。address只得包含联系信息。

范例:

<address>
    <a href="../People/Raggett/">Dave Raggett</a>,
    <a href="../People/Arnaud/">Arnaud Le Hors</a>,
 contact persons for the <a href="Activity">W3C HTML Activity</a>
</address>

每天学一点儿HTML5的新标签的更多相关文章

  1. HTML5部分新标签属性及DOM扩展元素

    HTML5定义了一系列新元素,如新语义标签.智能表单.多媒体标签等. 我们日常讨论的H5其实是一个泛称,它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台. ...

  2. HTML语义化:HTML5的新标签及IE5.5~9的部分兼容方案

    一.前言 本文将介绍HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理. 目录一坨: 二.语义化标签:article.aside.t ...

  3. HTML5的新标签之一的Canvas

    一. <canvas>简介(了解) 1. 什么是canvas: 是HTML5提供的一种新标签 <canvas></canvas>  英 ['kænvəs]  美 [ ...

  4. html5的新标签

    header,section,footer,aside,nav,main,article,figure 在使用的时候,需要先把这个元素变为块级元素,确保在老的浏览器里面可以使用.因为在浏览器检测到未知 ...

  5. html5shiv主要解决IE6-8 无法识别HTML5的新标签,父节点不能包裹子元素,以及应用CSS样式

    html5shivehtml5shiv主要IE6-8解决:1,HTML5提出的新的元素不被IE6-8识别.2,这些新元素不能作为父节点包裹子元素,3,并且不能应用CSS样式.让CSS 样式应用在未知元 ...

  6. HTML5的新标签-整体布局

    过去:<div class="header"> <div class="hgroup"> <h1>....</h1&g ...

  7. 学习HTML5之新特性标签一览(详细)

    HTML5又2008年诞生,HTML5大致可以等同于=html+css3+javascriptapi.... so --->支持css3强大的选择器和动画以及javascript的新的函数 先来 ...

  8. HTML5新标签的兼容性处理

    普通浏览器 普通不支持HTML5新标签的浏览器 -- 能正常解析,但会当初成 inline 元素对待 在不支持HTML5新标签的浏览器里,会将这些新的标签解析成行内元素(inline)对待,所以我们只 ...

  9. HTML5的新语义化的标签

    在HTML5之前采用HTML+CSS文档结构写法 [ID选择器说明 id选择器——用于标识页面上特定元素(比如站点导航.页眉.页脚)而且必须唯一; 也可以用来标识持久结构性元素(如主导航.内容区域)] ...

随机推荐

  1. VMware中,该如何理解桥接网络与NAT 网络模式

    原创 2016年11月16日 23:26:34,原文地址如下: http://blog.csdn.net/u010801439/article/details/53193113 首先,我在VMware ...

  2. mongodb 如何区分大小写

    mongodb是区分大小写的,在做mongodb数据库操作是经常使用toUpperCase()等方法将value转换为大写存到数据库中 e.g. 在做数据库模糊查询时语句如下 db.COLLECTIO ...

  3. 含有不等式约束的优化问题——KKT条件

    优化问题: 其中, 定义:对于一个不等式约束,如果,那么称不等式约束是处起作用的约束. 定义:设满足,设为起作用不等式约束的下标集: 如果向量:是线性无关的,则称是一个正则点. 下面给出某个点是局部极 ...

  4. 分割List为指定size

    背景 老项目,用的原生的JDBC,获取连接,预编译...然后业务需要要更新很多条数据,我就写了条件为 ——IN()... 根据传入的 list 的 size 循环的给sql语句拼接上“ ? ”为了之后 ...

  5. win7计算机右键属性打不开窗口的解决方法

    原文:http://www.jb51.net/os/windows/169200.html win7计算机右键属性打不开窗口的解决方法 在鼠标右击win7桌面计算机选择属性的时候却发现打不开属性窗口, ...

  6. 温故而知新-正则单词和strlen

    1 正则表达式用\b表示单词的开始和结束 \bblog\b 正则查找blog这个单词 2 关于strlen的汉字问题 在utf8格式下  strlen('汉字')=6 在gbk格式下 strlen(' ...

  7. 53. sql2005“备份集中的数据库备份与现有的xx数据库不同”解决方法

    RESTORE DATABASE LiveBOS_KeJiFROM DISK = 'D:\LiveBOS_KeJi_backup_201503090000.bak' --bak文件路径with rep ...

  8. 34. CentOS-6.3安装配置Apache2.2.6

    安装说明 安装环境:CentOS-6.3安装方式:源码编译安装 软件:httpd-2.2.6.tar.gz  | pcre-8.32.tar.gz | apr-1.4.6.tar.gz | apr-u ...

  9. YII assets使用

    为什么用YII assets 1.assets的作用是方便模块化,插件化的,一般来说出于安全原因不允许通过url访问protected下面的文件 ,但是我们又希望将module单独出来,所以需要使用发 ...

  10. 机器学习入门-数值特征-数字映射和one-hot编码 1.LabelEncoder(进行数据自编码) 2.map(进行字典的数字编码映射) 3.OnehotEncoder(进行one-hot编码) 4.pd.get_dummies(直接对特征进行one-hot编码)

    1.LabelEncoder() # 用于构建数字编码 2 .map(dict_map)  根据dict_map字典进行数字编码的映射 3.OnehotEncoder()  # 进行one-hot编码 ...