• 创建图 figure & figcaption


    报纸、杂志、报告等其他媒介上看到过图。通常,图是由页面上的文本引述出。

    HTML5出现之前,没有专门实现这个目的的元素,因此一些开发人员想出了他们自己的解决办法(通常会使用不那么理想的、没有语义的div元素)。

    通过引入figurefigcaptionHTML5改变了这种情况。

    图可以是图表、照片、图形 、插图、代码片段,以及其他类似的独立内容。

    可以由页面上的其他内容引出figure,figcaptionfigure的标题,可选,出现在figure内容的开头或结尾处。

    创建图及其标题的步骤:

    (1) 输入<figure>

    (2) 作为可选步骤,输入<figcaption>始图的标题。

    (3) 输入标题文字。。

    (4) 添加图像、视频、数据表格等内容的代码创建图。

    (5) 输入</figure>

    例如:

     1 <body>
     2 
     3 <article>
     4     <h1>2013 Revenue by Industry</h1>
     5 
     6     <p>. . . [report content] . . .</p>
     7 
     8     <figure>
     9         <figcaption><b>Figure 3:</b> Breakdown of Revenue by Industry</figcaption>
    10         
    11         <img src="img/chart-revenue.png" width="180" height="143" alt="Revenue chart: Clothing 42%, Toys 36%, Food 22%" />
    12     </figure>
    13 
    14     <p>As Figure 3 illustrates, . . . </p>
    15 
    16     <p>. . . [more report content] . . .</p>
    17 </article>
    18 
    19 </body> 

    ******************************************************************************************************************

    提示:

    figure元素可以包含多个内容块。

    如图中可以包含两个图表:一个表示收入 ,一个表示利润。

    不过要记住,不管figure里有多少内容,只允许有一个figcaption

    *******************************************************************************************************************

    ******************************************************************************************************************

    提示:

    不要简单地将figure作为在文本中嵌入独立内容实例的方法

    这种情况下,通常更适合用aside元素。

    ************************************************************************************

    ******************************************************************************************************************

    提示:

    可选的figcaption必须与其他内容一起包含在figure里面,不能单独出现在其他位置。

    ************************************************************************************

  • 相关阅读:
    【python cookbook】【数据结构与算法】4.找到最大或最小的N个元素
    【python cookbook】【数据结构与算法】3.保存最后N个元素
    oracle sql语言模糊查询--通配符like的使用教程
    oracle decode处理被除数为0 的情况
    握草
    oracle if else 判断
    Procdure for wanfo business report
    [转]Oracle 阳历转农历
    阴阳历互相转换方法
    [转]解决crystal report水晶报表在浏览器提示bobj未定义的错误
  • 原文地址:https://www.cnblogs.com/Charons/p/11124128.html
Copyright © 2020-2023  润新知