HTML5 HTML5之figure新标签的应用

[复制链接]
建站高手 发表于 2015-9-8 20:47:00 [HTML5] 显示全部楼层 |阅读模式 上一主题 下一主题

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
figure元素是一种元素的组合,可带有标题(可选)。figure标签用来表示网页上一块独立的内容,将其从网页上移除后不会对网页上的其他内容产生影响。figure所表示的内容可以是图片、统计图或代码示例。

figure用友一个子标签——figcaption标签。

注意:一个figure元素内最多只允许放置一个figcaption元素,其他元素可无限放置。

案例1:不带有标题的figure元素

<!DOCTYPE HTML>
<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                <title>HTML5之figure新标签的应用-不带有标题的figure元素</title>
        </head>
        
        <body>
                <figure>
                            <img alt="W3C,zb7com" src="http://www.zb7.com/template/zb7/images/logo/logo.png"/>
                </figure>
        </body>
</html>

案例2:带有标题的figure元素:
<!DOCTYPE HTML>
<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                <title>HTML5之figure新标签的应用-带有标题的figure元素</title>
        </head>
        
        <body>
                <figure>
                            <img alt="W3C,zb7com" src="http://www.w3cfuns.com/template/zb7com/images/logo/logo.png"/>
                        <figcaption>zb7com</figcaption>
                </figure>
        </body>
</html>

案例3:多个图片,同一个标题的figure元素:
<!DOCTYPE HTML>
<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                <title>HTML5之figure新标签的应用-多个图片,同一个标题的figure元素</title>
        </head>
        
        <body>
                <figure>
                            <img alt="W3C,zb7com" src="http://www.zb7com.com/template/zb7com/images/logo/logo.png"/>
                            <img alt="前端工具箱" src="data/attachment/common/ee/common_185_icon.png"/>
                            <img alt="每日一练" src="data/attachment/common/04/common_180_icon.png"/>
                            <figcaption>zb7com打造Web前端开发权威社区!</figcaption>
                </figure>
        </body>
</html>





上一篇:CSS需注意的一点技巧
下一篇:HTML5之details展开收缩标签的应用
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表