-
Notifications
You must be signed in to change notification settings - Fork 8k
/
index.md
172 lines (139 loc) · 4.52 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
---
title: <figure>:可選標題的圖片元素
slug: Web/HTML/Element/figure
---
{{HTMLSidebar}}
**`<figure>`** [HTML](/zh-TW/docs/Web/HTML) 元素代表自包含內容,可能具有可選的標題,可以使用 {{HTMLElement("figcaption")}} 元素指定。該圖片、其標題和其內容被引用為一個單一單位。
{{EmbedInteractiveExample("pages/tabbed/figure.html","tabbed-shorter")}}
## 屬性
該元素僅包括[全域屬性](/zh-TW/docs/Web/HTML/Global_attributes)。
## 使用注意事項
- 通常 `<figure>` 是文件主流中引用的圖片、插圖、圖表、程式碼片段等,但可以移動到文件的其他部分或附錄,而不影響主流。
- 可以通過在其中插入 {{HTMLElement("figcaption")}}(作為第一個或最後一個子元素)來將標題與 `<figure>` 元素連結起來。在圖片中找到的第一個 `<figcaption>` 元素被呈現為圖片的標題。
- `<figcaption>` 為父級 `<figure>` 提供了{{glossary("accessible description", "無障礙描述")}}。
## 範例
### 圖片
```html
<!-- Just an image -->
<figure>
<img src="favicon-192x192.png" alt="The beautiful MDN logo." />
</figure>
<!-- Image with a caption -->
<figure>
<img src="favicon-192x192.png" alt="The beautiful MDN logo." />
<figcaption>MDN Logo</figcaption>
</figure>
```
#### 結果
{{EmbedLiveSample("圖片", "100%", 375)}}
### 程式碼片段
```html
<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 + "; ";
console.log("NavigatorExample", txt);
}
</pre>
</figure>
```
#### 結果
{{EmbedLiveSample("程式碼片段", "100%", 250)}}
### 引用
```html
<figure>
<figcaption><b>Edsger Dijkstra:</b></figcaption>
<blockquote>
If debugging is the process of removing software bugs, then programming must
be the process of putting them in.
</blockquote>
</figure>
```
#### 結果
{{EmbedLiveSample('引用')}}
### 詩歌
```html
<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 dishevelled 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("詩歌", "100%", 250)}}
## 技術摘要
<table class="properties">
<tbody>
<tr>
<th scope="row">
<a href="/zh-TW/docs/Web/HTML/Content_categories"
>內容類型</a
>
</th>
<td>
<a href="/zh-TW/docs/Web/HTML/Content_categories#流內容"
>流內容</a
>、<a href="/zh-TW/docs/Web/HTML/Content_categories#捫及內容"
>捫及內容</a
>。
</td>
</tr>
<tr>
<th scope="row">允許內容</th>
<td>
一個 {{HTMLElement("figcaption")}} 元素,後跟<a href="/zh-TW/docs/Web/HTML/Content_categories#流內容"
>流內容</a
>;或者流內容後跟一個
{{HTMLElement("figcaption")}} 元素;或者流內容。
</td>
</tr>
<tr>
<th scope="row">標籤省略</th>
<td>不允許,開始和結束標籤都是必須的。</td>
</tr>
<tr>
<th scope="row">允許的父元素</th>
<td>
任何接受<a href="/zh-TW/docs/Web/HTML/Content_categories#流內容"
>流內容</a
>的元素。
</td>
</tr>
<tr>
<th scope="row">隱含的 ARIA 角色</th>
<td>
<a href="/zh-TW/docs/Web/Accessibility/ARIA/Roles/figure_role"
>figure</a
>
</td>
</tr>
<tr>
<th scope="row">允許的 ARIA 角色</th>
<td>
除了 <a href="/zh-TW/docs/Web/HTML/Element/figcaption">figcaption </a
> 後代:<a href="https://www.w3.org/TR/html-aria/#dfn-any-role">任何</a>,否則不允許角色
</td>
</tr>
<tr>
<th scope="row">DOM 介面</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
## 規範
{{Specifications}}
## 瀏覽器相容性
{{Compat}}
## 參見
- {{HTMLElement("figcaption")}} 元素。