zoukankan      html  css  js  c++  java
  • 创建图 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里面,不能单独出现在其他位置。

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

  • 相关阅读:
    个人笔记 给hover 伪类 恢复默认值
    vue 正则判断
    音乐播放器封装
    jq封装插件,简单dome
    功能齐全轮播
    vue 前端判断输入框不能输入0 空格。特殊符号。
    jq 下拉框
    IPC : 进程间通信方式
    内存
    const char* str 与char str[10]
  • 原文地址:https://www.cnblogs.com/Charons/p/11124128.html
Copyright © 2011-2022 走看看