diff options
Diffstat (limited to 'files/zh-tw/web/html/element/br/index.html')
| -rw-r--r-- | files/zh-tw/web/html/element/br/index.html | 130 |
1 files changed, 130 insertions, 0 deletions
diff --git a/files/zh-tw/web/html/element/br/index.html b/files/zh-tw/web/html/element/br/index.html new file mode 100644 index 0000000000..2542c0182e --- /dev/null +++ b/files/zh-tw/web/html/element/br/index.html @@ -0,0 +1,130 @@ +--- +title: <br>（斷行元素） +slug: Web/HTML/Element/br +translation_of: Web/HTML/Element/br +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><br></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><br></code> 元素會在需要斷行的時候出現。在 <code><br></code> 之後的文字會從文字區域的下一行出現。</p> + +<div class="note"> +<p><strong>注意</strong>：不要用 <code><br></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><br></code> 元素有一個定義明確的用途：在文字區塊裡面建立斷行。因此它本身沒有尺寸或視覺輸出，基本上你做不了任何樣式化。</p> + +<p>你可以給 <code><br></code> 元素設置 {{cssxref("margin")}} 以增加文字之間的斷行大小，但這並不是正確的作法：你應該用 {{cssxref("line-height")}} 屬性做這件事情。</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: html notranslate">Mozilla Foundation<br> +1981 Landings Drive<br> +Building K<br> +Mountain View, CA 94043-0801<br> +USA +</pre> + +<p>以上 HTML 將顯示</p> + +<p>{{ EmbedLiveSample('示例', '100%', '90') }}</p> + +<h2 id="無障礙議題">無障礙議題</h2> + +<p>使用 <code><br></code> 元素<em>分段</em>不只作法不佳，對於使用輔具的人來說，也會是有問題的。螢幕閱讀器會念出該元素，但 <code><br></code> 裡面的內容是念不出來的。對於使用螢幕閱讀器的人來說，這可能是困惑與沮喪的體驗。</p> + +<p>請使用 <code><p></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><br /></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', '<br>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-br-element', '<br>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.2.1', '<br>')}}</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> |