zoukankan      html  css  js  c++  java
  • HTML5学习笔记(<figure>)

    HTML <figure> 标签
    IE 9、Firefox、Opera、Chrome 和 Safari 支持 <figure> 标签。
    注释:IE 8 或更早版本的 IE 浏览器不支持 <figure> 标签。

    标签定义及使用说明
    <figure> 标签规定独立的流内容(图像、图表、照片、代码等等)。
    <figure> 元素的内容应该与主内容相关,同时元素的位置相对于主内容是独立的。如果被删除,则不应对
    文档流产生影响。

    这是菜鸟网站上的说明。
    那么让我们看看下这个<figure>的google翻译

     

    如图明显的解释作用了。
    这就是个语义化的div,语义作用就是翻译里的了。
    什么时候用这个呢?
    你所包裹的内容里有翻译这些东西,并且不写这些东西不会影响你的全文内容就可以写这个。
    与 aside有点类似吧,都是独立的,不同点就在于aside 和全文是有联系的。

    例子:

    <figure>
      <img src="sl.png" alt="The Pulpit Rock">
      <img src="sl.png" alt="The Pulpit Rock">
      <img src="sl.png" alt="The Pulpit Rock">
      <img src="sl.png" alt="The Pulpit Rock">
      <img src="sl.png" alt="The Pulpit Rock">
      <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
    </figure>

    结果:

    <figcaption> 标签为 <figure> 元素定义标题。

    <figcaption> 元素应该被置于 <figure> 元素的第一个或最后一个子元素的位置。

  • 相关阅读:
    SQL中利用脚本恢复数据库
    SQL中如何检查死锁
    三个有用的SQL辅助工具
    企业报销系统完整设计方案(三)
    企业报销系统完整设计方案(二)
    企业报销系统完整设计方案
    Crystal Report在.net中的两种显示方式
    cacti 流量图合并
    Centos 7 配置邮件发送
    Centos 7 Ntop 流量分析 安装
  • 原文地址:https://www.cnblogs.com/smileToMe/p/7828115.html
Copyright © 2011-2022 走看看