html5中的增强元素—-figure元素和figcaption

我们知道在xhtml中,如果要给一个图片增加一些说明,我们都是文字环绕在图片的附近的方法,通过样式来控制文字的存放位置,但是其实对于图片的说明信息,通过都是差不多,每次都是这么来写代码,觉得挺无聊的!~

现在我们就可以通过html5里面的 figure和figcaption来控制显示哦!~ 但是当你只是使figure时,是看不到效果的,这个就好像在夏天是把你放在一个有空调的房子,你感觉和在外面是一样热,因为没打开空调啊!~ 呵呵,现在我们就打开“空调”试试。

输入代码:

—————————————————————-

<!DOCTYPE HTML>
<html>
<head>
<title>使用html5的自定义错误信息完成两次密码的验证</title>
<meta charset=”UTF-8″>
</head>
<body>
<img src=”http://gagahtml.sinaapp.com/wp-content/themes/weisaysimple/images/random/tb6.jpg”/>
<img src=”http://gagahtml-wordpress.stor.sinaapp.com/uploads/2012/05/xuanzhaun.jpg”/>
<figcaption>sanwen</ficaption>
</body>
</html>

—————————————————————————————————–

效果截图:

演示地址:http://www.cangzhang.com/wp-content/uploads/2012/08/figure.htm

共有 0 条评论

Top