其他类型的标签

1.figure和figcaption标签

figure标签规定独立的流内容（图像、图表、照片、代码等等）figure元素的内容应该与主内容相关，但如果被删除，则不应对文档产生影响。

figcaption定义figure元素的标题（caption）“figcaption”元素应该被置于“figure”元素的第一个或者最后一个元素的位置。

?

1

2

3

4

<figure>                               

     <img src="images/1.jpg">                            

     <figcation>壁纸</figcation>                         

</figure>

2.datails和sunmary标签

details标签用于描述文档某部分的细节

summary标签作为details的标题，标题是可见的，用户点击标题时，会显示出datails的详细内容，默认打开的。

?

1

2

3

4

<details>

       <summary>html5</summary>

       <p>内容</p>

</details>

3.progress和meter标签

progress属性用于描述一个进度条，value表示进度的当前值，max表示总进度。

meter它的结构类似于progress控件，都是设置一个max参数，使用value来显示指定的结果，但它比progress多了几个参数，还可以设置min表示最低值，还可以设置high、low、optimum，这些参数用来描述数据的状态。

meter属性：

value       在元素中表现出来的实际数量值，该属性缺省值为0，可以给该属性指定浮点数小数值。

min          指定规定的范围时允许使用的最小值，该属性缺省值为0，设置最小值时，值不可小于0.

max         指定规定的范围时允许使用的最大值，如果设定该属性值小于min时，那么浏览器会把min设为最大值，max属性                   缺省值为1

low          规定范围的下限值，必须小于或等于max属性值，同样的，如果low值小于min值时，那么浏览器会把min属性值设                 为low属性值。

high         规定范围的上限值，如果该属性值小于low属性值，那么把low属性值视为high属性值，同样的，如果high属性值                   大于max属性值时，浏览器会把max属性值设为high属性值。

optimum  设置最佳值，属性必须在min属性和max属性之间，可以大于high属性值。

?

1

<meter min="0" max="100" value="30" low="50" high="80" optimum="100"></meter>

4.mark标签、cite标签、small标签和time标签

mark突出显示部分文字

?

1

<p>在元素中表现出来的<mark>实际数量值</mark>，该属性缺省值为0，可以给该属性指定浮点数小数值。</p>

cite标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。

?

1

<p>在元素中表现出来的<cite>实际数量值</cite>，该属性缺省值为0，可以给该属性指定浮点数小数值。</p>

small和big标签缩小和放大一个字号，从理论上说，它们是纯碎性的表示性元素，使用它们已取得“按照重要性加权”的视觉效果。

5.time标签

定义时间或者日期，或者两者

?

1

<p>记得<time datetime="2015-11-11">光棍节要上天猫哦</p>

6.canvas标签

定义图形，绘制路径，矩形，圆形，字符以及添加图像方法

canvas元素本身没有绘图能力，所以绘制工作必须在javascript内部完成

?

1

2

3

4

5

6

7

<canvas id="myCanvas"></canvas>

<script type="text/javascript">

        var canvas=ducument.getElementById('myCanvas');

        car ctx=canvas.getContext('2d');

        cxt.fillStyle='#FF0000';

        cxt.fillRect(0,0,80,100);

</script>

通过canvas元素来显示一个红色的矩形