• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > html5 figure和figcaption的使用方法

html5 figure和figcaption的使用方法

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含html5,figure,figcaption等相关知识,匿名希望在学习及工作中可以帮助到您
这篇文章主要介绍了html5 figure和figcaption的使用方法的相关资料,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

figure标签和figcaption标签是html5新增的语义化标签。

figure标签,html5语义化标签。

用于规定独立的流内容(图像、图表、照片、代码等等)。

figcaption标签,html5语义化标签。

与figure配套使用,用于标签定义figure元素的标题。

用figure和figcaption标签的好处

搜索引擎搜索到figure的时候会知道,这里存放的是图片、图表、照片、代码等媒体,不不会认为这里存放的是文章等其他东西。搜索引擎搜索的时候更快捷更便利。
另一方面程序员在看的时候,看到这个标签的时候,就会知道,这里存在的就是图片等媒体,便于阅读。

下面用图简单描述下这两个标签的使用方法

案例1:

不带有标题的figure元素:

<figure>
    <img alt="脚本之家" src="logo.png"/>
</figure>

案例2:

带有标题的figure元素:

<figure>
    <img alt="脚本之家" src="logo.png"/>
    <figcaption>脚本之家,脚本之家是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料</figcaption>
</figure>

案例3:

多个图片,同一个标题的figure元素:

<figure>
    <img alt="脚本之家1" src="logo1.png"/>
    <img alt="脚本之家2" src="logo2.png"/>
    <img alt="脚本之家3" src="logo3.png"/>
    <figcaption>脚本之家,脚本之家是国内专业的网站建设资源、脚本编程学习类网站,提供asp、php、asp.net、javascript、jquery、vbscript、dos批处理、网页制作、网络编程、网站建设等编程资料</figcaption>
</figure>

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问Html5视频教程!

相关推荐:

php公益培训视频教程

HTML5图文教程

HTML5在线手册

以上就是html5 figure和figcaption的使用方法的详细内容,更多请关注微课江湖其它相关文章!

您可能想查找下面的文章:

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2018-12-03HTML5-XMLHttpRequest Level 2概述详解
  • 2018-12-03乐车邦app 前端用的什么框架和技术?
  • 2018-12-03招聘时如何鉴定WEB前端和后端程序员的能力?
  • 2018-12-03HTML5实践-使用css装饰图片画廊的代码分享(二)
  • 2018-12-03怎么禁止vue计算属性自带的缓存功能
  • 2018-12-03IDEA如何安装vue开发插件安装图文教程
  • 2018-12-03如何用HTML5的Canvas制作3D动画效果
  • 2018-12-03html5怎么实现图片转圈的动画效果
  • 2017-08-06详解HTML5通讯录获取指定多个人的信息
  • 2017-08-06HTML5 Canvas中使用用路径描画圆弧

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • svg标签:<text >标签和<tspan>标签的应用(代码)
    • 浅谈利用缓存来优化HTML5 Canvas程序的性能
    • html5中JavaScript removeChild 删除所有节点_html5教程技巧
    • 浅谈h5增强了哪些页面元素
    • 快速掌握前端开发技巧
    • 基于Vue全家桶开发的前端组件管理平台
    • canvas可以替代html与css了吗?
    • 使用HTML5做个画图板的方法介绍
    • 25岁如花的年纪自学前端是明智的选择么? 这几天正犹豫要不要辞职,希望知友能给点意见,先行谢过?
    • html5实现留言板的代码实例分享

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有