From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/html/element/figure/index.html | 161 +++++++++++++++++++++++++ 1 file changed, 161 insertions(+) create mode 100644 files/zh-cn/web/html/element/figure/index.html (limited to 'files/zh-cn/web/html/element/figure/index.html') diff --git a/files/zh-cn/web/html/element/figure/index.html b/files/zh-cn/web/html/element/figure/index.html new file mode 100644 index 0000000000..5c2e101c81 --- /dev/null +++ b/files/zh-cn/web/html/element/figure/index.html @@ -0,0 +1,161 @@ +--- +title:
：可附标题内容元素 +slug: Web/HTML/Element/figure +tags: + - Element + - HTML + - HTML grouping content + - Reference +translation_of: Web/HTML/Element/figure +--- +
{{HTMLRef}}
+ +

HTML <figure> 元素代表一段独立的内容, 经常与说明（caption） {{HTMLElement("figcaption")}} 配合使用, 并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。

+ +
{{EmbedInteractiveExample("pages/tabbed/figure.html","tabbed-shorter")}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
内容分类Flow content, sectioning root, palpable content.
允许的内容A {{HTMLElement("figcaption")}} element, followed by flow content; or flow content followed by a {{HTMLElement("figcaption")}} element; or flow content.
标签省略{{no_tag_omission}}
允许的父元素所有接受 Flow content 的元素
允许的 ARIA roles{{ARIARole("group")}}, {{ARIARole("presentation")}}
DOM 实例{{domxref("HTMLElement")}}
+ +

属性

+ +

此元素只包含 全局属性。

+ +

使用说明

+ + + +

例子

+ +

图像

+ +
<!-- Just an image -->
+<figure>
+  <img
+  src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
+  alt="A robotic monster over the letters MDN.">
+</figure>
+
+<!-- Image with a caption -->
+<figure>
+  <img
+  src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
+  alt="A robotic monster over the letters MDN.">
+  <figcaption>MDN Logo</figcaption>
+</figure>
+
+ +
{{EmbedLiveSample("Images", "100%", 250)}}
+ +

代码段

+ +
<figure>
+  <figcaption>Get browser details using <code>navigator</code>.</figcaption>
+  <pre>
+function NavigatorExample() {
+  var txt;
+  txt = "Browser CodeName: " + navigator.appCodeName;
+  txt+= "Browser Name: " + navigator.appName;
+  txt+= "Browser Version: " + navigator.appVersion ;
+  txt+= "Cookies Enabled: " + navigator.cookieEnabled;
+  txt+= "Platform: " + navigator.platform;
+  txt+= "User-agent header: " + navigator.userAgent;
+}</pre>
+</figure>
+ +
{{EmbedLiveSample("Code_snippets", "100%", 250)}}
+ +

引用内容

+ +
<figure>
+  <figcaption><cite>Edsger Dijkstra:</cite></figcaption>
+  <blockquote>If debugging is the process of removing software bugs,
+  then programming must be the process of putting them in.</blockquote>
+</figure>
+
+ +
{{EmbedLiveSample("Quotations")}}
+ +

诗歌

+ +
<figure>
+  <p style="white-space:pre">
+Bid me discourse, I will enchant thine ear,
+  Or like a fairy trip upon the green,
+Or, like a nymph, with long dishevell'd hair,
+  Dance on the sands, and yet no footing seen:
+Love is a spirit all compact of fire,
+  Not gross to sink, but light, and will aspire.</p>
+  <figcaption><cite>Venus and Adonis</cite>,
+    by William Shakespeare</figcaption>
+</figure>
+ +
{{EmbedLiveSample("Poems", "100%", 250)}}
+ +

规范

+ + + + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG', 'semantics.html#the-figure-element', '<figure>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'grouping-content.html#the-figure-element', '<figure>')}}{{Spec2('HTML5 W3C')}}
+ +

浏览器兼容性

+ + + +

{{Compat("html.elements.figure")}}

+ +

参见

+ + -- cgit v1.2.3-54-g00ecf