1、header

<header> 标签定义文档的页眉(介绍信息)。

2、nav

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

3、article

<article> 标签定义外部的内容。

外部内容可以是来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本。亦或是来自其他外部源内容。

4、footer

<footer> 标签定义文档或节的页脚。

<footer> 元素应当含有其包含元素的信息。

页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

您可以在一个文档中使用多个 <footer> 元素。

5、aside

使用例子:页面侧边栏、广告、友情链接、文章引语(内容摘要)。

6、section

一个主题性的内容分组,通常包含一个头部(header),可能还包含一个尾部(footer)。

div与section的比较:div应用更广泛,只要你想为一个区域定义一个样式,就可以使用div标签,section包含的内容是一个更明确的主题,通常有标题区域。

7、main

显示页面的主体内容,每个页面只能包含一个main标签main标签中不包含网站标题、logo、主导航、版权声明等信息。

8、figure

用于对元素进行组合

9、<figcaption> 标签定义 figure 元素的标题,"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

html5新增语义标签的更多相关文章

  1. html5 新增语义标签

    一份模板: <body> <header> <hgroup> <h1>Page title</h1> <h2>Page subt ...

  2. 浅谈html语义化标签,Html5新增语义化标签

    Html语义化标签,Html5新增语义化标签 自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全. 希望大家有新的见解可以给我留言,我会补充上去,谢谢大家 1.什么是语义化标签? ...

  3. HTML5新增Canvas标签及对应属性、API详解(基础一)

    知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...

  4. HTML5新增video标签及对应属性、API详解

    知识说明: 比不上很牛的前端开发人员,但自始至终明白“万丈高楼平地起”,基础最重要,初学HTML5,稳固基础第一步,把最基本的整理下来,留下自己学习的痕迹.HTML5新增的video标签,将其属性以及 ...

  5. HTML5新增结构标签

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

  6. HTML5新增的标签与属性

    一.关于DTD HTML5 不基于 SGML,所以不需要引用 DTD(HTML 4.01 基于 SGML) 二.HTML5结构标签 <header> 标记定义一个页面或一个区域的头部 &l ...

  7. HTML5新增的标签及使用

    HTML5和HTML其实是很相似的,但是有些内容有发生了改变,今天我学习了一下HTML5发现还是挺好学的,只要有html+css基础就可以,今天知识看了下新的标签. 一.定义文档类型 在文件的开头总是 ...

  8. html5新增语义化标签

    注意:body.section.nav 需要h1-h6. div.header则不需要. 1):<article> 显示一个独立的文章内容. 例如一篇完整的论坛帖子,一则网站新闻,一篇博客 ...

  9. HTML5之语义标签

    在HTML5标准中,新加了几个用于增添页面语义的标签,这些标签有:article.section.nav和aside等.与别的大多数标签不 同,浏览器在解释渲染这些标签的时候仅仅把它作为普通的div块 ...

随机推荐

  1. Gulp探究折腾之路(I)2

    文/晚晴幽草(简书作者)原文链接:http://www.jianshu.com/p/9768a4dc7cf7著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 前言: gulp是前端开发过 ...

  2. ACM: 限时训练题解- Travelling Salesman-最小生成树

    Travelling Salesman   After leaving Yemen, Bahosain now works as a salesman in Jordan. He spends mos ...

  3. [Cocos2d-x For WP8]矩形碰撞检测

    在游戏中我们通常会涉及到两个精灵之间的碰撞的计算,那么在Cocos2d-x里面我们通常会用矩形碰撞检测来计算两个精灵在运动的过程中是否碰撞到了.原理很简单,就是当运动的时候通过精灵的矩形坐标进行遍历来 ...

  4. 【POJ】3071 Football

    http://poj.org/problem?id=3071 题意:2^n支队伍进行淘汰赛,每一轮都是第一个与第二个,第三个与第四个比赛,给出了这些人之间的胜率,赢了的进入下一轮,相对位置不变.一共n ...

  5. 【POJ】3133 Manhattan Wiring

    http://poj.org/problem?id=3133 题意:n×m的网格,有2个2,2个3,他们不会重合.还有障碍1.现在求2到2的路径和3到3的路径互不相交的最短长度-2.(2<=n, ...

  6. CF 66D. Petya and His Friends

    题目链接 java的水题,特判啊...依旧无法1Y. import java.util.*; import java.math.*; public class Main { public static ...

  7. bug: 在使用HMSegmentedControl时,设置selectionIndicatorEdgeInsets对左右边界没有用

    若设置了    self.tabSegmented.selectionStyle = HMSegmentedControlSelectionStyleFullWidthStripe; 则必须使用sel ...

  8. 整理iOS9适配

    整理iOS9适配 本文主要是说一些iOS9适配中出现的坑,如果只是要单纯的了解iOS9新特性可以看瞄神的开发者所需要知道的 iOS 9 SDK 新特性.9月17日凌晨,苹果给用户推送了iOS9正式版, ...

  9. A quick tour of JSON libraries in Scala

    A quick tour of JSON libraries in Scala Update (18.11.2015): added spray-json-shapeless libraryUpdat ...

  10. thinkphp多模板布局设置!!

    首先开启模板布局要在配置文件添加: 'LAYOUT_ON'=>true, 'LAYOUT_NAME'=>'layout', 如果需要设置多个布局模板,就要先关闭上面的LAYOUT_ON,也 ...