当前位置:Web前端 > 其它> 正文

HTML5 <figure> 、<figcaption>标签

时间:2014-4-3类别:Web前端

HTML5 <figure> 、<figcaption>标签

HTML5 <figure> 、<figcaption>标签

一、Html5中figure标签

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

figure拥有一个子标签——figcaption标签。



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

所有主流浏览器都支持 <figure> 标签。
 

实例

  • 用作文档中插图的图像:
  •  
  • <figure> <p>黄浦江上的的卢浦大桥</p> <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /></figure>浏览器支持
  •  
  •  

    二、Html5中figcaptionHtml5中

     

    定义和用法

  • <figcaption> 标签定义 figure元素的标题(caption)。
  • "figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
  •  
  • 实例
  •  
  • <figure>
    <figcaption>黄浦江上的的卢浦大桥</figcaption>
    <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
    </figure>
  •  

    三、figure和figcaption的实例

     

    1、不带有标题的figure元素

  •  
  • HTML 代码   复制
  • 
    <!DOCTYPE> 
    <html> 
    <head> 
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
      <title>HTML5每日一练之figure新标签的应用-不带有标题的figure元素</title> 
    </head> 
    <body> 
      <figure> 
       <img src=""/> 
      </figure> 
    </body> 
    </html>
    
    		
  •  

    2、带有标题的figure元素

  •  
  • HTML 代码   复制
  • 
    <!DOCTYPE HTML> 
    <html> 
    <head> 
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
      <title>HTML5每日一练之figure新标签的应用-带有标题的figure元素</title> 
    </head> 
    <body> 
      <figure> 
       <img src=""/> 
       <figcaption>图片说明</figcaption> 
      </figure> 
    </body> 
    </html>
    
    		
  •  

    3、多个图片,同一个标题的figure元素

  •  
  • HTML 代码   复制
  • 
    <!DOCTYPE HTML> 
    <html> 
    <head> 
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
      <title>HTML5每日一练之figure新标签的应用-多个图片,同一个标题的figure元素</title> 
    </head> 
    <body> 
      <figure> 
       <img src="" /> 
       <img src=""/> 
       <img src=""/> 
       <figcaption>图片组合说明</figcaption> 
      </figure> 
    </body> 
    </html>
    
    		
  •  

    上一篇下一篇

    猜您喜欢

    热门推荐