1. <figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。

　　　　<figure> 元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。

　　　　<figcaption> 标签为 <figure> 元素定义标题。

　　　　<figcaption> 元素应该被置于 <figure> 元素的第一个或最后一个子元素的位置。

IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 <article> 标签。

注释： IE 8 或更早版本的 IE 浏览器不支持 <article> 标签。

<!DOCTYPE html>

<html>

<body>

<p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>

<figure>

  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">

  <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>

</figure>

</body>

</html>

　　

　　2.<aside> 标签定义 <article> 标签外的内容。

　　　　aside 的内容应该与附近的内容相关。

　　　　<aside> 的的内容可用作文章的侧栏。

IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 <aside> 标签。

注释： IE 8 或更早版本的 IE 浏览器不支持 <aside> 标签。

　 3.<command> 标签可以定义用户可能调用的命令（比如单选按钮、复选框或按钮）。

　　　　目前，主流浏览器都不支持 <command> 标签。

　　　　注释：只有 IE 9 支持 <command> 标签，其他之前版本或者之后版本的 IE 浏览器不支持 <command> 标签。

　 4.<details> 标签规定了用户可见的或者隐藏的需求的补充细节。

　　<details> 标签用来供用户开启关闭的交互式控件。任何形式的内容都能被放在 <details> 标签里边。

　　<details> 元素的内容对用户是不可见的，除非设置了 open 属性。

<!DOCTYPE html>

<html>

<body>

<details open>

<summary>Copyright 1999-2011.</summary>

<p> - by Refsnes Data. All Rights Reserved.</p>

<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>

</details>

<p><b>Note:</b> The details tag is currently only supported in Chrome and in Safari

6.</p>

</body>

</html>

　　

只有 Chrome 和 Safari 6 支持 <details> 标签。

提示：与 <summary> 标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。

<!DOCTYPE html>

<html>

<body>

<details >

<summary>Copyright 1999-2011.</summary>

<p> - by Refsnes Data. All Rights Reserved.</p>

<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>

</details>

<p><b>Note:</b> The details tag is currently only supported in Chrome and in Safari

6.</p>

</body>

</html>

　　

　　5.<footer> 标签定义文档或者文档的一部分区域的页脚。　

　　<footer> 元素应该包含它所包含的元素的信息。

　　在典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。

　　在一个文档中，您可以定义多个 <footer> 元素。

IE 9、Firefox、Opera、Chrome 和 Safari 支持 <footer> 标签。

注释：IE 8 或更早版本的 IE 浏览器不支持 <footer> 标签。

　　6.<header> 标签定义文档或者文档的一部分区域的页眉。

　　<header> 元素应该作为介绍内容或者导航链接栏的容器。

　　在一个文档中，您可以定义多个 <header> 元素。

注释：<header> 标签不能被放在 <footer>、<address> 或者另一个 <header> 元素内部。

　　7.<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <mark> 标签。

<!DOCTYPE html>

<html>

<body>

<article>

  <header>

    <h1>Internet Explorer 9</h1>

    <p><time pubdate datetime="2011-03-15"></time></p>

  </header>

  <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to

  the  public on March 14, 2011 at 21:00 PDT.....</p>

</article>

</body>

</html>

　　8.<meter> 标签定义度量衡。仅用于已知最大和最小值的度量。

比如：磁盘使用情况，查询结果的相关性等。

注意： <meter> 不能作为一个进度条来使用， 进度条 <progress> 标签。

Firefox、Opera、Chrome 和 Safari 6 支持 <meter> 标签。

<!DOCTYPE html>

<html>

<body>

<p>Display a gauge:</p>

<!--high 属性规定度量的值位于哪个点，被界定为高的值。-->

<!--high 属性的值必须小于 max 属性的值，且必须大于 low 和 min 属性的值。-->

<!--optimum 属性规定度量值被界定为最优值的范围。-->

<!--value 属性是必需的，规定度量的当前值。value 属性的值必须介于 min 和 max 属性的值中间。-->

<meter value="2" min="0" max="10">2 out of 10</meter><br>

<meter value="0.6">60%</meter>

<p><strong>Note:</strong> The meter tag is not supported in Internet Explorer.</p>

</body>

</html>

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

目前大多数浏览器支持 <nav> 标签。

并不是所有的 HTML 文档都要使用到 <nav> 元素。<nav> 元素只是作为标注一个导航链接的区域。

在不同设备上（手机或者PC）可以制定导航链接是否显示，以适应不同屏幕的需求。

<!DOCTYPE html>

<html>

<body>

<nav>

　　<a href="/html/">HTML</a> |

　　<a href="/css/">CSS</a> |

　　<a href="/js/">JavaScript</a> |

　　<a href="/jquery/">jQuery</a>

</nav>

</body>

</html>

　　10.<progress> 标签定义运行中的任务进度（进程）。

提示：请将 <progress> 标签与 JavaScript 一起使用来显示任务的进度。

注释：<progress> 标签不适合用来表示度量衡（例如，磁盘空间使用情况或相关的查询结果）。表示度量衡，请使用 <meter> 标签代替。

max 属性规定任务总共需要多少工作。value 属性规定已经完成多少任务。

<!DOCTYPE html>

<html>

<body>

Downloading progress:

<progress value="22" max="100">

</progress>

<p><strong>Note:</strong> The progress tag is not supported in Internet Explorer 9 and earlier versions.</p>

</body>

</html>

　　11.<ruby> 标签定义 ruby 注释（中文注音或字符）。

　　在东亚使用，显示的是东亚字符的发音。

　　将 <ruby> 标签与 <rt> 和 <rp> 标签一起使用： 
　　<ruby> 元素由一个或多个需要解释/发音的字符和一个提供该信息的 <rt> 元素组成，还包括可选的 <rp> 元素，定义当浏览器不支持 "ruby" 元素时显示的内容。

IE 9+、Firefox、Opera、Chrome 和 Safari 支持 <ruby> 标签。

注释：IE 8 或更早版本的 IE 浏览器不支持 <ruby> 标签。

<!DOCTYPE html>

<html>

<body>

<ruby>

  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>

  字 <rp>(</rp><rt>ji</rt><rp>)</rp>

</ruby>

</body>

</html>

　　12.<section> 标签定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。

IE 9+、Firefox、Opera、Chrome 和 Safari <section> 标签。

注释：IE 8 或更早版本的 IE 浏览器不支持 <section> 标签。

<!DOCTYPE html>

<html>

<body>

<section>

  <h1>WWF</h1>

  <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>

</section>

<section>

  <h1>WWF's Panda symbol</h1>

  <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>

</section>

</body>

</html>

　　13<wbr> (Word Break Opportunity) 标签规定在文本中的何处适合添加换行符。

提示：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 <wbr> 元素来添加 Word Break Opportunity（单词换行时机）。

所有主流浏览器都支持 <wbr> 标签，除了 Internet Explorer。

<!DOCTYPE html>

<html>

<body>

<p>Try to shrink the browser window, to view how the word "XMLHttpRequest" in

the paragraph below will break:</p>

<p>To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object.</p>

<p><b>Note:</b> The &lt;wbr&gt; tag is not supported in IE.</p>

</body>

</html>

　　

HTML5新元素的更多相关文章

  1. *HTML5 新元素

    HTML5 新元素 自1999年以后HTML 4.01 已经改变了很多,今天,在HTML 4.01中的几个已经被废弃,这些元素在HTML5中已经被删除或重新定义. 为了更好地处理今天的互联网应用,HT ...

  2. HTML5 新元素、HTML5 Canvas

    HTML5 新元素 自1999年以后HTML 4.01 已经改变了很多,今天,在HTML 4.01中的几个已经被废弃,这些元素在HTML5中已经被删除或重新定义. 为了更好地处理今天的互联网应用,HT ...

  3. Html5学习2（Html表格、Html列表、Html5新元素、Canvas （坐标、路径、画圆、文本、渐变、图像））

    Html表格 1.表格中的表头:<th></th>.其中表头部分字体加粗,颜色深绿色 <h4>水平标题:</h4> <table border=& ...

  4. HTML5: HTML5 新元素

    ylbtech-HTML5: HTML5 新元素 1.返回顶部 1. HTML5 新元素 自1999年以后HTML 4.01 已经改变了很多,今天,在HTML 4.01中的几个已经被废弃,这些元素在H ...

  5. HTML5学习笔记1 HTML5 新元素

    自1999年以后html4.0已经改变了很我,今天,在html4.01中的几个已经被废弃,这些元素在html5中已经被删除或重新定义. 为了更好地处理今天的互联网应用,html5添加了很多新元素及功能 ...

  6. HTML5+CSS3学习笔记（二） 页面布局：HTML5新元素及其特性

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...

  7. 随堂笔记之正则与HTML5新元素

    在进入主题前,先插个网站https://www.processon.com/ ProcessOn是一个在线协作绘图平台,为用户提供最强大.易用的作图工具! 它可以很方便的在线简单绘制一些东西,让自己去 ...

  8. html5新元素练习（1）

    1, <nav>  是专门由于菜单导航,链接导航的元素 2,  <header> 主体页面的头部,与head不同,它的内容可以显示出来 3,  <footer>页面 ...

  9. HTML5 新元素之VIDEO标签的js操作

    本文参考w3school的HTML DOM Video 对象. Video 对象属性 属性 描述 audioTracks 返回表示可用音频轨道的 AudioTrackList 对象. autoplay ...

随机推荐

  1. sql 事务和回滚

    (1) set ANSI_NULLS ON --见图1 set QUOTED_IDENTIFIER ON go ALTER proc [dbo].[procname] as begin begin t ...

  2. B - Numbers That Count

    Description        "Kronecker's Knumbers" is a little company that manufactures plastic di ...

  3. C++细节系列（零）：零散记录

    老规矩:记录细节,等待空余,再进行整理. 1:const,static,const static成员初始化. 1.const成员:只能在构造函数后的初始化列表中初始化 2.static成员:初始化在类 ...

  4. http协议说明

    今天公司有同事让我给他讲一讲http..然后自己写了一个示例代码,这如果都看不懂.那我也没办法了.... <?php //这里服务器以apache举例.nginx.iis.他们实际上处理方式的都 ...

  5. c#中override重写和new隐藏

    最近学习c#,昨晚看书看到多态.由于个人本身是从事java开发,于是拿来做对比便是自然的. 进入主题吧. c#中,子类要重写基类的方法,必须要基类声明中带有virtual关键字方法或者带有abstra ...

  6. Samba服务器

    Windows操作系统下:DOC命令下:netstat -an查看端口 (一)简介 文件服务器 (二)端口 smbd: 为clinet提高资源访问 tcp  139  445    (类似于windo ...

  7. MYSQL 加密的 3 类方法

    背景: 若你想要储存一些由可能包含任意字节值的加密函数返回的结果,使用BLOB列而不是 CHAR 或VARCHAR 列,从而避免由于结尾空格的删除而改变一些数据值的潜在问题. 这一句话来自官方文件,记 ...

  8. Linux下Nginx+PHP 简单安装配置

    测试环境 Linux 2.6.18nginx-1.0.4 http://www.nginx.org/php-5.3.6 http://www.php.net/ 一,安装Nginxwget http:/ ...

  9. 山寨QQ音乐的布局（一）

    学了两天IOS趁着还没忘光,巩固一下所学知识想做点东西,由于自己的设计能力有限,所以就山寨一下吧,说到山寨怎么能忘了腾讯呢,今天发现QQ音乐的设计风格是扁平化的,小清新风格,所以就山寨一下它吧.. 由 ...

  10. linux之模拟简单登录的脚本

    脚本如下: 运行结果: