在HTML5中，新增了9种常用的页面标签，详细介绍如下： 1．figure标签 figure标签是HTML5中新增的标签之一，表示一段独立的流内容（文本、图像）。 在使用figure标签时，标签的内容应该与主内容相关；但如果被删除时，则不应对文档流产生影响。 示例：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>figure标签使用</title> </head> <body> <p>桂林，位于广西东北部，是世界著名的旅游胜地和历史文化名城。地处漓江西岸，以盛产桂花、桂树成林而得名。</p> <figure> <p>桂林山水甲天下</p> <img src="gl1.jpg" width="300" height="155" /> </figure> </body> </html>在上述代码中，向figure标签中添加一段文字描述和图片，形成一个独立流单元。相当于一个div.
2．figcaption标签 figcaption标签位于figure标签内，用于定义figure标签的标题（caption）。在默认情况下，figcaption标签应该被置于figure标签的第一个或最后一个子标签的位置。 示例：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>figcaption标签应用</title> </head> <body> <p>少林寺，位于中国河南省郑州市登封的嵩山，是少林武术的发源地。</p> <figure> <figcaption>少林寺</figcaption> <img src="sl.jpg" width="388" height="296" /> </figure> </body> </html>从上述代码中可以看出，在figure标签中，使用figcaption标签为figure标签添加了一个“少林寺”标题。
3．details标签 在HTML5中，details标签主要用于描述文档或某个部分的细节。 它常与“summary”标签配合使用，可以为details标签定义标题。 在浏览器中运行时，该标题是可见的，当用户单击标题时，会显示出details标签中的内容。 在目前，只有在浏览器Chrome中才识别details标签。 下面通过一个在Chrome浏览器中运行的实例，来说明details标签的应用。 示例：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>details标签应用</title> </head> <body> <details> <summary>红旗渠</summary> <p>红旗渠是20世纪60年代，林县人民在极其艰难的条件下，从太行山腰修建的引漳入林工程。是全国重点文物保护单位，被世人称之为“人工天河”，在国际上被誉为“世界第八大奇迹”。</p> </details> </body> </html>在Chrome浏览器中，可以看出details标签中的内容，默认是没有显示的，只显示summary标签中的标题。
单击details标签中的标题“红旗渠”，details标签中的内容会自动显示。
4．mark标签 mark标签在HTML 5中，主要用于定义带有记号的文本。如果用户在编辑文本时，需要突出显示某文本，可以使用mark标签。 示例：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>mark标签</title> </head> <body> <p>今天，天气不错， <mark>心情</mark> 挺好的！</p> </body> </html>从上述代码中，使用mark标签设置“心情”文本为突出显示，默认背景颜色为黄色。
5．progress标签 在HTML5中，progress标签的作用是定义运行中的进度（进程）。 例如，可以使用progress标签来显示JavaScript中，耗费时间函数的进度。 progress标签的常用属性介绍如下： - max 数值 定义完成的值。 - value 数值 定义进程的当前值。
示例：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>progress标签应用</title> </head> <body> 项目的下载进度是： <progress value="20" max="100"> </progress> </body> </html>在上述代码中，添加一个项目下载进度条。定义当前完成进度为20，下载完成值为100
6．meter标签 在HTML中，meter标签主要用来表示范围已知，且可度量的等级标量或分数值，例如磁盘使用量比例、关键词匹配程度等。 需要注意的是，meter标签不可以用来表示那些没有已知范围的任意值，例如重量、高度，除非已经设定了它们值的范围。
meter标签属性介绍如下： - value 表示当前的实际值；如果不做指定，那么标签中的第一个数字就会被认为是其当前实际值。 - Min 当前的最小值；如不做指定则为0。 - Max 当前的最大值；如不做指定则为1；如果指定的最大值小于最小值，那么最小值会被认为是最大值。 - Low 当前的低值区；必须小于或等于max值；如果低值区数字小于最小值，那么它会被认为是最小值。 - High 当前的高值区。 Optimum 最佳值；其范围在最小值与最大值区间当中，并且可以处于高值区。
示例：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>meter标签应用</title> </head> <body> <p>11月份个人工作完成进度：</p> <p>付强： <meter value="10" optimum="100" high="90" low="10" max="100" min="0"> </meter> <span> 10% </span> </p> <p>张红： <meter value="60" optimum="100" high="90" low="10" max="100" min="0"> </meter> <span> 60% </span> </p> <p>王林： <meter value="89" optimum="100" high="90" low="10" max="100" min="0"> </meter> <span> 89% </span> </p> </body> </html>在上述代码中，以进度条的形式，显示3个人的工作进度。完成进度最高是100%，最低是0%。
7．menu标签 menu标签是HTML 5中重新启用的一个旧标记，在HTML 2时就已经存在。 在HTML 4时曾一度被废弃，而在HTML 5中重新恢复使用，并赋予了新的功能含义。 常与li列表标签结合使用，用来定义一个列表式的菜单。
其常用属性及描述如下： - autosubmit 如果为true，那么当表单控件改变时会自动提交。 - label 为菜单定义一个可见的标注。 - type 定义显示那种类型的菜单，默认值是 list。
示例：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>标签menu的使用</title> <style type="text/css"> body { font-size:12px; } menu { padding:0; margin:0; display:block; border: solid 1px #365167; width:100px } menu li { list-style-type:none; margin:2px; height:25px; width:80px } menu li:hover { border: solid 1px #7DA2CE; background-color:#CFE3FD } </style> </head> <body> <p>选择你喜欢的颜色：</p> <menu> <li><input type="checkbox" />红色</li> <li><input type="checkbox" />黄色</li> <li><input type="checkbox" />绿色</li> <li><input type="checkbox" />蓝色</li> </menu> </body> </html>上述代码是选择个人喜欢颜色的实例，先向页面添加menu标签，然后，在该标签中加入li列表标签。 最后添加css样式，实现某用户将鼠标移至某个li标签时，展示菜单中某选项被选中的效果。
8．command标签 Command标签是HTML 5中新增加重要标签，用于定义各种类型的按钮（包括命令按钮、单选择按钮、图片按钮）及复选框等。 利用该标记的url属性可以添加图片，并且实现图片按钮效果；
command标签的常用属性如下： - checked 定义是否被选中。仅用于radio或checkbox类型。 - disabled 定义command是否可用。 - icon 定义作为command来显示的图像的url。 - label command定义可见的 label。 - radiogroup groupname定义command所属的组名。仅在类型为radio时使用。 - type 定义该command的类型。默认是“command”。
Command标签如果与menu标签结合使用，可以实现弹出式的下拉菜单，当单击菜单中的某个选项时，将执行相应的操作。9．NAV标签 nav标签是页面的一个导航标签。 可以将具有导航性质的链接归纳在一块区域中，使页面的标签更有语义性。 示例：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>nav标签应用</title> </head> <body> <nav draggable="true"> <a href="http://www.baiduc.om ">百度</a> <a href="http://www.sina.com.cn">新浪</a> <a href="http://www.google.cn">谷歌</a> </nav> </body> </html>上述代码中，将三个链接放入nav标签中，形成一块区域。
嗯哈，就是这九种。过后应该还会整理一些新的东西。
