H5新标签 定义图文并茂的html5新标签-figure、figcaption

本来想分两篇文章来解释说明figurefigcaption的,但是这俩个标签都是定义图文的,所以我们合起来讲解,大家更能容易接受。

大家在写xhtml、html中常常用到一种图片列表,图片+标题或者图片+标题+简单描述。以前的常规写法:


  • title


  • 而在html5中有了新标签更能语义化的定义出这中图片列表,那就是figure标签。

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

    实例代码:


    黄浦江上的的卢浦大桥




    figure用来代替原来li标签,P标签谁来取代呢?答案就是:figcaption


    w3c赋予的定义:figcaption 标签定义 figure 元素的标题(caption)。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

    那么上面的代码就变成了:


    黄浦江上的的卢浦大桥


    这是个非常易于理解的标签,其用法也非常清楚。即便是简单,这里也建议大家亲自动手写下。

    【代码示例】

    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)title> 
    head>
    <body>
    <p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.p>
    <figure>
      <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
      <figcaption>Fig.1 - A view of the pulpit rock in Norway.figcaption>
    figure>
    body>
    html>

    【效果图】

    H5新标签 定义图文并茂的html5新标签-figure、figcaption_第1张图片

    【代码示例2】

    标签用于帮助我们更具体地声明文档的内容。在引入这个元素之前,我们无法确定内容与信息的关系,只能确定内容的自包含关系,例如,插图、图像、视频等。通常,这些元素属于重要内容,但是可以删除而不影响或破坏文档流。如果出现这些信息,就可以使用
    标签来标识这些信息(见代码清单1-18)。

    代码清单1-18:使用

    元素




     
     
     
     This text is the title of the document
     


     


      

    This is the main title of the website


     

     
     

      

       

        

         

    Title of post One


         

    subtitle of the post One


        

        

    posted 12-10-2011


       

       This is the text of my first post
       

             

         This is the image of the first post
        

       

       

        

    comments (0)


       

      

      

       

        

         

    Title of post Two


         

    subtitle of the post Two


        

        

    posted 12-15-2011


       

       This is the text of my second post
       

        

    comments (0)


       

      

     

     
     

      Copyright © 2010-2011
     


    在代码清单1-18中,在第一篇文章的正文之后插入了一幅图像()。这是一种常用做法,经常可以使用图像或视频来丰富文字。

    标签可以实现这些可视化补充,以区分它们与其他重要信息的关系。

    此外,在代码清单1-18中,在

    元素中还有一个元素。通常,图像或视频等信息单元位于简短文字之下。HTML5有一个元素可以显示和标识这种描述性标题。

    标签用于显示与
    相关的标题,并且在元素及其内容之间建立关系。


    你可能感兴趣的:(H5前端开发)