1 Star 0 Fork 1

小弟调调 / html-tutorial

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
figure.md 2.01 KB
一键复制 编辑 原始数据 按行查看 历史
小弟调调 提交于 2022-04-30 01:50 . doc: add tag document.

HTML <figure> 标签

示例

使用 <figure> 元素标记文档中的照片,并使用 <figcaption> 元素定义照片的标题:

<figure>
  <img src="../assets/editors-006.png" alt="Trulli" height="120">
  <figcaption>图.1 - 第一个HTML页面</figcaption>
</figure>

定义和用法

<figure> 标签指定了独立的内容,如插图、图表、照片、代码列表等。

<figure> 元素的内容与主流程相关,但它的位置与主流程无关,如果移除它不应该影响文档的流程。

提示: <figcaption> 元素用于为 <figure> 元素添加标题。

浏览器支持

表中的数字指定了完全支持该元素的第一个浏览器版本。

Element chrome edge firefox safari opera
<figure> 8.0 9.0 4.0 5.1 11.0

全局属性

<figure> 标签支持 HTML 中的全局属性

事件属性

<figure> 标签支持 HTML 中的事件属性

更多示例

使用 CSS 设置 <figure> 和 <figcaption> 的样式:

<html>
<head>
<style>
figure { border: 1px #cccccc solid; padding: 4px; margin: auto; }
figcaption {
  background-color: black;
  color: white;
  font-style: italic;
  padding: 2px;
  text-align: center;
}
</style>
</head>
<body>
  <figure>
    <img src="../assets/editors-006.png" alt="Trulli" height="230">
    <figcaption>图.1 - 第一个HTML页面</figcaption>
  </figure>
</body>
</html>

默认 CSS 设置

大多数浏览器将显示具有以下默认值的 <figure> 元素:

figure {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/jaywcjlove/html-tutorial.git
git@gitee.com:jaywcjlove/html-tutorial.git
jaywcjlove
html-tutorial
html-tutorial
main

搜索帮助