分组元素用于对页面中的内容进行分组。

figure元素和figcaption元素

  • figure元素用于定义独立的流内容(图像、图表、照片、代码等),一般指一个独立的单元。figure元素的内容应该与主内容相关,但如果被删除,也不会对文档流产生影响
  • figcaption元素用于为figure元素组添加标题,一个figure元素内最多允许使用一个figcaption元素,该元素应该放在figure元素的第一个或最后一个子元素的位置。
<p>被称作“第四代体育馆”</p>
<figure>
<figcaption>北京鸟巢</figcaption>
<p>拍摄者:张三,拍摄时间:2019年9月15日 17:42:12</p>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568550641218&di=3d4dc50f7b0fe9a2ed3a8b25198b3730&imgtype=0&src=http%3A%2F%2Fm.tuniucdn.com%2Ffb2%2Ft1%2FG1%2FM00%2F0C%2F9D%2FCii9EFbQJa2IV2ubAAIUZv3TCucAACUQgCQyfAAAhR-415_w500_h280_c1_t0.jpg"
alt="">
</figure>

hgroup元素

hgroup元素用于将多个标题(主标题和副标题或者子标题)组成一个标题组,通常它与h1~h6元素组合使用。通常,将hgroup元素放在header元素中。

在使用hgroup元素时要注意以下几点:

  • 如果只有一个标题元素不建议使用hgroup元素。
  • 当出现一个或者一个以上的标题与元素时,推荐使用hgroup元素作为标题元素。
  • 当一个标题包含副标题、section或者article元素时,建议将hgroup元素和标题相关元素存放到header元素容器中。
<header>
<hgroup>
<h1>我的个人网站</h1>
<h2>我的个人作品</h2>
</hgroup>
<p>开心快乐每一天</p>
</header>

h5中的分组元素figure、figcaption、hgroup元素介绍的更多相关文章

  1. html5--2.9新的布局元素(6)-figure/figcaption

    html5--2.9新的布局元素(6)-figure/figcaption 学习要点 了解figure/figcaption元素的语义和用法 通过实例理解figure/figcaption元素的用法 ...

  2. html5的figure/figcaption讲解及实例

    html5的figure/figcaption讲解及实例 一.总结 一句话总结: figure元素:用来包着媒体资源,比如图片图表:是一个[媒体组合元素],也就是对其他的媒体元素进行组合,比如:图像. ...

  3. HTML5之新增的元素和废除的元素 (声明:内容节选自《HTML 5从入门到精通》)

    新增结构元素: section元素 section元素定义文档或应用程序中的一个区段,比如章节.页眉.页脚或文档中的其他部分.它可以与h1,h2,h3,h4,h5,h6元素结合起来使用,标示文档结构. ...

  4. 04. H5标签有哪些?行内元素有哪些?块级元素有哪些?空(void)元素有哪些?行内元素和块级元素有什么区别?你工作中常用标签有什么?

    4. H5标签有哪些? 2)行内元素有哪些? a - 锚点 em - 强调 img - 图片 font - 字体设定 ( 不推荐 ) i - 斜体 input - 输入框 3)块级元素有哪些? add ...

  5. 《Web开发中块级元素与行内元素的区分》

    一.块级元素的特性: 占据一整行,总是重起一行并且后面的元素也必须另起一行显示. HTML中块级元素列举如下: address(联系方式信息) article(文章内容) aside(伴随内容) au ...

  6. html5中新增的元素和废除的元素

    一.新增的结构元素 1.section元素表示页面中的一个内容区块,比如章节.页眉.页脚或页面中的其他部分.它可以与h1.h2.h3.h4.h5.h6等元素结合起来使用,标示文档结构. h5中的代码事 ...

  7. HTML5新增的非主体元素header元素、footer元素、hgroup元素、adress元素

    ---恢复内容开始--- header header元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但是也可以包含其他内容,例如数据表格.搜索表单或相关的lo ...

  8. 创建图 figure & figcaption

    如报纸.杂志.报告等其他媒介上看到过图.通常,图是由页面上的文本引述出. 在HTML5出现之前,没有专门实现这个目的的元素,因此一些开发人员想出了他们自己的解决办法(通常会使用不那么理想的.没有语义的 ...

  9. HTML<figure> <figcaption> 标签定义图文并茂

    本来想分两篇文章来解释说明figure.figcaption的,但是这俩个标签都是定义图文的,所以我们合起来讲解,大家更能容易接受. 大家在写xhtml.html中常常用到一种图片列表,图片+标题 或 ...

随机推荐

  1. 【洛谷4542】 [ZJOI2011]营救皮卡丘(最小费用最大流)

    传送门 洛谷 Solution 这是一道神仙题! 考虑这个东西是个啥. emmm,如果两个点要到达,一定不能经过比他们大的. 所以Floyd搞定两点距离然后费用流跑一遍就是答案了! 代码实现 /* m ...

  2. Django环境搭建win(二)

    Django 1.11.x 支持 Python 2.7, 3.4, 3.5 和 3.6,17年4月4号 已经发布(长期支持版本 LTS) win7下: 一.使用pip安装 1.首先要安装pip 2.p ...

  3. FileZilla 客户端连接vsftp无法访问 Received unexpected end-of-file from SFTP server 解决之路

    首先在win通过ftp连接centos过程中,出现了2个问题,现在对此记录一下,方便后人遇到问题进行查阅 1.由于加密协议不同,需要在ftp客户端设置一下,支持ssh模式,具体自行百度: 2.在设置完 ...

  4. LVS之DR模式

    目录: 网络环境 LVS服务器网络配置 LVS服务器添加ipvs规则 RS服务器配置 访问验证 抓包分析 注意事项 [网络环境] 网络拓扑结构如下表: 服务器 类型 网卡 IP MAC 说明 v_me ...

  5. Go之GOPATH与工作空间

    来自: GOPATH与工作空间 GOPOATH 设置 go 命令依赖一个重要的环境变量:$GOPATH 在类 Unix 环境下大概这样设置: exprt GOPATH=/home/apple/mygo ...

  6. legend3---8、烦请节约时间

    legend3---8.烦请节约时间 一.总结 一句话总结: 时间不要浪费在垃圾情绪和无效社交上面. 1.商标不能以个人的名义注册? 可以先注册个体工商户,然后再可以注册商标 2.注册一个商标大概花多 ...

  7. antd源码分析之——标签页(tabs 3.Tabs的滚动效果)

    由于ant Tabs组件结构较复杂,共分三部分叙述,本文为目录中第三部分(高亮) 目录 一.组件结构 antd代码结构 rc-ant代码结构 1.组件树状结构 2.Context使用说明 3.rc-t ...

  8. Mac下持续集成-自动发送邮件

    找到下面这项填写邮件地址 注意下面绿色标记的邮箱要和上面的一致,否则会报错 如果两个绿色标记的邮箱不一致会报这样的错: ---------------------------------------- ...

  9. LC 638. Shopping Offers

    In LeetCode Store, there are some kinds of items to sell. Each item has a price. However, there are ...

  10. RecoderUtils录音工具类

    import android.media.MediaRecorder; import android.os.Environment; import java.io.File; import java. ...