分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

HTML5学习笔记(<figure>)

发布时间:2023-09-06 01:24责任编辑:白小东关键词:HTML

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

HTML5学习笔记(<figure>)

原文地址:http://www.cnblogs.com/smileToMe/p/7828115.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved