zoukankan      html  css  js  c++  java
  • HTML中的figure和gigcaption标签

       参考自:anti-time的博客http://www.cnblogs.com/morning0529/p/4198494.html

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

    <li>
    <img src="" /><p>title</P>
    </li>

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

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

    实例代码:

    <figure>
    <p>黄浦江上的的卢浦大桥</p>
    <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
    </figure>

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


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

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

    <figure>
    <figcaption>黄浦江上的的卢浦大桥</figcaption>
    <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
    </figure>

    这样写更简便。

  • 相关阅读:
    模块 configparser subprocess 表格 的
    random, json, pickle, hashlib, hmac, shutil, shelve
    常用模块 1.时间模块 2.系统模块 3.项目开发目录规范
    GAN 教程记录
    matplotlib.pyplot展示MNIST图片
    机器学习算法辨别
    命令
    搭环境
    不对称分类的错误评估
    入侵检测数据集
  • 原文地址:https://www.cnblogs.com/liuyanping/p/5079026.html
Copyright © 2011-2022 走看看