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> 元素的第一个或最后一个子元素的位置。

  • 相关阅读:
    yum 本地 网络 openstack
    docker 负载均衡
    tomcat + nginx 负载均衡 动静分离 session会话配置
    K8S Ingress 之 traefik-ingress-controller
    CentOS7安装和配置rsync+inotify
    DAS,NAS,SAN在数据库存储上的应用
    inotify+rsync实现实时同步
    NFS网络文件系统
    CentOS7下rsync服务的基本详解和使用
    LVM--逻辑卷管理
  • 原文地址:https://www.cnblogs.com/smileToMe/p/7828115.html
Copyright © 2011-2022 走看看