aboutsummaryrefslogtreecommitdiff
path: root/files/ca/web/html/element/li/index.html
blob: 39cd6ce0b55358e2c13a52e77914b8a252d76843 (plain)
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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
---
title: <li>
slug: Web/HTML/Element/li
tags:
  - Element
  - HTML
  - HTML grouping content
  - Reference
translation_of: Web/HTML/Element/li
---
<p>{{HTMLRef}}</p>

<p>L'<strong>element HTML <code>&lt;li&gt;</code></strong> (o <em>Element HTML Llista d'elements</em> ) s'utilitza per representar un element d'una llista. Ha d'estar contingut en un element pare: una llista ordenada ({{HTMLElement("ol")}}), una llista desordenada ({{HTMLElement("ul")}}), o un menú ({{HTMLElement("menu")}}). En els menús i les llistes desordenades, els elements de la llista es mostren normalment amb vinyetes. En les llistes ordenades, en general es mostren amb un comptador ascendent a l'esquerra, com ara un número o una lletra.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categories de contingut</a></th>
   <td>Cap.</td>
  </tr>
  <tr>
   <th scope="row">Contingut permès</th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Contingut dinàmic</a>.</td>
  </tr>
  <tr>
   <th scope="row">Omissió de l'etiqueta</th>
   <td>L'etiqueta final es pot ometre si l'element de la llista és seguida immediatament per un altre element {{HTMLElement ("li")}}, o si no hi ha més contingut en el seu element pare.</td>
  </tr>
  <tr>
   <th scope="row">Elements pares permesos</th>
   <td>Un {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, o un element {{HTMLElement("menu")}}. Tot i que no és un ús conforme, el obsolet {{HTMLElement ("dir")}} també pot ser un pare.</td>
  </tr>
  <tr>
   <th scope="row">Interfície DOM</th>
   <td>{{domxref("HTMLLIElement")}}</td>
  </tr>
  <tr>
   <th scope="row">Element type</th>
   <td>Block</td>
  </tr>
 </tbody>
</table>

<h2 id="Atributs">Atributs</h2>

<p>Aquest element inclou els <a href="/en-US/docs/Web/HTML/Global_attributes">atributs globals</a>.</p>

<dl>
 <dt>{{htmlattrdef("value")}}</dt>
 <dd>Aquest atribut enter indica el valor ordinal actual de l'element de la llista definida per l'element {{HTMLElement("ol")}} . L'únic valor permès per a aquest atribut és un nombre, fins i tot si la llista es visualitza amb números o lletres romanes. Els element de la llista que segueixen a aquest continuen la numeració des del conjunt de valors. L'atribut <strong>value</strong> no té sentit per a llistes desordenades ({{HTMLElement("ul")}}) o per menús ({{HTMLElement("menu")}}).
 <div class="note"><strong>Nota</strong>: Aquest atribut es va desaprovar en HTML 4, però es va tornar a introduir en HTML5.</div>

 <div class="note">
 <p><strong>Nota:</strong> Abans de {{Gecko ("9.0")}}, els valors negatius es convertien incorrectament a 0. A partir de {{Gecko ("9.0")}} tots els valors enters s'analitzen correctament.</p>
 </div>
 </dd>
 <dt>{{htmlattrdef("type")}} {{Deprecated_inline}}</dt>
 <dd><span id="result_box" lang="ca"><span>Aquest</span> <span>atribut</span> <span>de caràcter</span> <span>indica el tipus</span> <span>de numeració</span></span>:
 <ul>
  <li><code>a</code>: lletres minúscules</li>
  <li><code>A</code>: lletres majúscules</li>
  <li><code>i</code>: Nombres romans en minúscules</li>
  <li><code>I</code>: Nombres romans en majúscules</li>
  <li><code>1</code>: nombres</li>
 </ul>
 Aquest tipus anul·la la utilitzada per el seu element matriu  {{HTMLElement("ol")}}, si n'hi ha.

 <div class="note"><strong>Nota d'ùs:</strong> Aquest atribut ha estat desaprovat: utilitzar la propietat CSS {{cssxref("list-style-type")}} en el seu lloc.</div>
 </dd>
</dl>

<h2 id="Exemples">Exemples</h2>

<pre class="brush: html">&lt;ol&gt;
    &lt;li&gt;first item&lt;/li&gt;
    &lt;li&gt;second item&lt;/li&gt;
    &lt;li&gt;third item&lt;/li&gt;
&lt;/ol&gt;
</pre>

<p>El HTML anterior es mostrarà:</p>

<ol>
 <li>first item</li>
 <li>second item</li>
 <li>third item</li>
</ol>

<pre class="brush: html">&lt;ol type="I"&gt;
    &lt;li value="3"&gt;third item&lt;/li&gt;
    &lt;li&gt;fourth item&lt;/li&gt;
    &lt;li&gt;fifth item&lt;/li&gt;
&lt;/ol&gt;
</pre>

<p>El HTML anterior es mostrarà:</p>

<ol start="3" style="list-style-type: upper-roman;">
 <li>third item</li>
 <li>fourth item</li>
 <li>fifth item</li>
</ol>

<pre class="brush: html">&lt;ul&gt;
    &lt;li&gt;first item&lt;/li&gt;
    &lt;li&gt;second item&lt;/li&gt;
    &lt;li&gt;third item&lt;/li&gt;
&lt;/ul&gt;</pre>

<ul>
 <li>first item</li>
 <li>second item</li>
 <li>third item</li>
</ul>

<p><span id="result_box" lang="ca"><span>Per</span> <span>obtenir</span> <span>exemples</span> <span>més</span> <span>detallats</span><span>, consulteu</span><span> les pàgines</span></span> <a href="/en-US/docs/Web/HTML/Element/ol#Examples">&lt;ol&gt;</a> i <a href="/en-US/docs/Web/HTML/Element/ul#Examples">&lt;ul&gt;</a>.</p>

<h2 id="Specifications" name="Specifications">Especificacions</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentari</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-li-element', '&lt;li&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-li-element', '&lt;li&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'lists.html#h-10.2', '&lt;li&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td>L'atribut <code>type</code> està desaprovat.</td>
  </tr>
 </tbody>
</table>

<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.0")}}</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>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Veure">Veure</h2>

<ul>
 <li><span class="short_text" id="result_box" lang="ca"><span>Altres elements</span> <span>HTML</span> <span>relacionats amb</span> <span>llistes</span></span> : {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}}, i el obsolet {{HTMLElement("dir")}};</li>
 <li>Propietats CSS que poden ser especialment útils per donar estil l'element <code>&lt;li&gt;</code>:
  <ul>
   <li>La propietat {{cssxref("list-style")}}, per a triar la forma de visualització de l'ordinal,</li>
   <li><a href="/Web/Guide/CSS/Counters">Comptadors CSS</a>, per gestionar llistes niades complexes,</li>
   <li>la propietat {{cssxref("margin")}}, per controlar la sagnia de l'element de la llista..</li>
  </ul>
 </li>
</ul>

<div> </div>