files/zh-tw/web/html/element/hr/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
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

---
title: <hr>
slug: Web/HTML/Element/hr
tags:
  - HTML
  - 元素
  - 參考
translation_of: Web/HTML/Element/hr
---
<p>{{HTMLRef}}</p>

<p><strong>HTML </strong>的<strong> <code>&lt;hr&gt;</code> 元素</strong>代表在段落層級的焦點轉換（如故事中的場景轉換或某個小節裡的主題移轉）。在之前的 HTML 版本，它代表著一條水平標線。在視覺瀏覽器裡，它現在可能還是以水平標線的型式呈現；但它已經被重新定義為一個語義上的用詞，而不是呈現上的。</p>

<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）" title="HTML/Content categories#Flow content">流內容</a>.</td>
  </tr>
  <tr>
   <th scope="row">Permitted content</th>
   <td>否。這是個 {{Glossary("empty element")}}.</td>
  </tr>
  <tr>
   <th scope="row">標籤省略</th>
   <td>一定要有起始標籤、同時絕不能有結束標籤</td>
  </tr>
  <tr>
   <th scope="row">Permitted parent elements</th>
   <td>任何允許<a href="/zh-TW/docs/HTML/Content_categories#流內容（Flow_content）" title="HTML/Content categories#Flow content">流內容</a>的元素。</td>
  </tr>
  <tr>
   <th scope="row">DOM interface</th>
   <td>{{domxref("HTMLHRElement")}}</td>
  </tr>
 </tbody>
</table>

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

<p>這個元素支持<a href="https://developer.mozilla.org/zh-TW/docs/HTML/Global_attributes">全域屬性</a>。</p>

<dl>
 <dt>{{htmlattrdef("align")}} {{deprecated_inline}}</dt>
 <dd>設罝頁面上標線的對齊方式。如果沒有指定，預設值是：<code>left。</code></dd>
 <dt>{{htmlattrdef("color")}} {{Non-standard_inline}}</dt>
 <dd>用色彩名或16進位值設罝標線的顏色。</dd>
 <dt>{{htmlattrdef("noshade")}} {{deprecated_inline}}</dt>
 <dd>設置這個標線沒有陰影。</dd>
 <dt>{{htmlattrdef("size")}} {{deprecated_inline}}</dt>
 <dd>設置標線的高度，單位是 px。.</dd>
 <dt>{{htmlattrdef("width")}} {{deprecated_inline}}</dt>
 <dd>設置標線的長度，單位是 px；或者也可以用頁面寛度的百分比 (%)表示。</dd>
</dl>

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

<pre class="brush: html">&lt;p&gt;This is the first paragraph of text.
This is the first paragraph of text.
This is the first paragraph of text.
This is the first paragraph of text.

&lt;hr&gt;

&lt;p&gt;This is second paragraph of text.
This is second paragraph of text.
This is second paragraph of text.
This is second paragraph of text.
</pre>

<p>上面的 HTML會輸出：</p>

<p>This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text.</p>

<hr>
<p>This is second paragraph of text. This is second paragraph of text. This is second paragraph of text. This is second paragraph of text.</p>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-hr-element', '&lt;hr&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Definition of the <code>hr</code> element</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'rendering.html#the-hr-element-0')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Suggested default rendering of the <code>hr</code> element</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-hr-element', '&lt;hr&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.3', '&lt;hr&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td>The <code>align</code>, <code>noshade</code>, <code>size</code> and <code>width</code> attributes are deprecated</td>
  </tr>
 </tbody>
</table>

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

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="參照_（see_also)">參照 （see also)</h2>

<ul>
 <li>{{HTMLElement('p')}}</li>
</ul>