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元素来显示一个红色的矩形