files/zh-tw/web/html/element/br/index.html


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

---
title: <br>（斷行元素）
slug: Web/HTML/Element/br
translation_of: Web/HTML/Element/br
---
<div>{{HTMLRef}}</div>

<p><strong>HTML <code>&lt;br&gt;</code> 元素</strong>會產生文字的斷行（carriage-return、CR 或是確認鍵）。此元素主要用於斷行有所意義的時候，像是寫詩或寫住址。</p>

<div>{{EmbedInteractiveExample("pages/tabbed/br.html", "tabbed-standard")}}</div>

<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>

<p>如上所示，<code>&lt;br&gt;</code> 元素會在需要斷行的時候出現。在 <code>&lt;br&gt;</code> 之後的文字會從文字區域的下一行出現。</p>

<div class="note">
<p><strong>注意</strong>：不要用 <code>&lt;br&gt;</code> 建立段落間距：這種情況下要用 {{htmlelement("p")}} 把它們包起來，並使用 <a href="/zh-TW/docs/CSS">CSS</a> {{cssxref('margin')}} 屬性控制間距大小。</p>
</div>

<h2 id="屬性">屬性</h2>

<p>這個元件屬性含有<a href="/zh-TW/docs/HTML/Global_attributes">全域屬性</a>。</p>

<h3 id="棄用屬性">棄用屬性</h3>

<dl>
 <dt>{{htmlattrdef("clear")}}</dt>
 <dd>指示中斷後下一行的開始位置。</dd>
</dl>

<h2 id="使用_CSS_樣式化">使用 CSS 樣式化</h2>

<p><code>&lt;br&gt;</code> 元素有一個定義明確的用途：在文字區塊裡面建立斷行。因此它本身沒有尺寸或視覺輸出，基本上你做不了任何樣式化。</p>

<p>你可以給 <code>&lt;br&gt;</code> 元素設置 {{cssxref("margin")}} 以增加文字之間的斷行大小，但這並不是正確的作法：你應該用 {{cssxref("line-height")}} 屬性做這件事情。</p>

<h2 id="示例">示例</h2>

<pre class="brush: html notranslate">Mozilla Foundation&lt;br&gt;
1981 Landings Drive&lt;br&gt;
Building K&lt;br&gt;
Mountain View, CA 94043-0801&lt;br&gt;
USA
</pre>

<p>以上 HTML 將顯示</p>

<p>{{ EmbedLiveSample('示例', '100%', '90') }}</p>

<h2 id="無障礙議題">無障礙議題</h2>

<p>使用 <code>&lt;br&gt;</code> 元素<em>分段</em>不只作法不佳，對於使用輔具的人來說，也會是有問題的。螢幕閱讀器會念出該元素，但 <code>&lt;br&gt;</code> 裡面的內容是念不出來的。對於使用螢幕閱讀器的人來說，這可能是困惑與沮喪的體驗。</p>

<p>請使用 <code>&lt;p&gt;</code> 元素搭配 CSS 屬性如 {{cssxref("margin")}} 來控制間距大小。</p>

<h2 id="技術摘要">技術摘要</h2>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/zh-TW/docs/HTML/Content_categories">內容類型</a></th>
   <td><a href="/zh-TW/docs/HTML/Content_categories#Flow_content">流型內容</a>、<a href="/zh-TW/docs/HTML/Content_categories#Phrasing_content">段落型內容</a>。</td>
  </tr>
  <tr>
   <th scope="row">允許內容</th>
   <td>無，這是個{{Glossary("空元素")}}.</td>
  </tr>
  <tr>
   <th scope="row">標籤省略</th>
   <td>絕對要有開啟標籤，也絕不能關閉標籤。在 XHTML 文件內，要把這個元素寫成 <code>&lt;br /&gt;</code>.</td>
  </tr>
  <tr>
   <th scope="row">允許父元素</th>
   <td>任何接受<a href="/zh-TW/docs/HTML/Content_categories#Phrasing_content">段落型內容</a>的元素</td>
  </tr>
  <tr>
   <th scope="row">允許的 ARIA roles</th>
   <td>所有</td>
  </tr>
  <tr>
   <th scope="row">DOM 介面</th>
   <td>{{domxref("HTMLBRElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="規範">規範</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">規範</th>
   <th scope="col">狀態</th>
   <th scope="col">註解</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-br-element', '&lt;br&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-br-element', '&lt;br&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.2.1', '&lt;br&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="瀏覽器相容性">瀏覽器相容性</h2>


<p>{{Compat("html.elements.br")}}</p>

<h2 id="參見">參見</h2>

<ul>
 <li>{{HTMLElement("address")}} 元素</li>
 <li>{{HTMLElement("p")}} 元素</li>
 <li>{{HTMLElement("wbr")}} 元素</li>
</ul>

<div>{{HTMLRef}}</div>