diff options
Diffstat (limited to 'files/ca/web/html/element/ul/index.html')
| -rw-r--r-- | files/ca/web/html/element/ul/index.html | 181 |
1 files changed, 181 insertions, 0 deletions
diff --git a/files/ca/web/html/element/ul/index.html b/files/ca/web/html/element/ul/index.html new file mode 100644 index 0000000000..d05eef98c9 --- /dev/null +++ b/files/ca/web/html/element/ul/index.html @@ -0,0 +1,181 @@ +--- +title: <ul> +slug: Web/HTML/Element/ul +tags: + - Element + - HTML + - HTML grouping content + - Reference +translation_of: Web/HTML/Element/ul +--- +<p>L'<strong>element HTML</strong> (<em>llista desordenada</em>) <strong><code><ul></code></strong> representa una llista desordenada d'elements, és a dir, un recull d'elements que no tenen un ordre numèric, i el seu ordre a la llista no té sentit. En general, els elements d'una llista desordenada es mostren amb una vinyeta, que pot ser de diverses formes, com un punt, un cercle o un quadrat. L'estil de la vinyeta no està definit en la descripció HTML de la pàgina, sinó en la seva CSS associada, mitjançant la propietat {{ cssxref("list-style-type") }}.</p> + +<p>No hi ha limitació en la profunditat i l'alternança de les llistes niades definides amb els elements {{ HTMLElement("ol") }} i {{ HTMLElement("ul") }}.</p> + +<div class="note"><strong>Nota d'ùs: </strong> Els elements {{ HTMLElement("ol") }} i {{ HTMLElement("ul") }} ambdós representen una llista d'elements. Es diferencien en que, amb l'element {{HTMLElement ("ol")}}, l'ordre és significatiu. Com a regla general per determinar quin d'ells utilitzar, tracteu de canviar l'ordre dels elements de la llista; si canvia el significat teniu que utilitzar l'element {{ HTMLElement("ol") }}, en cas contrari podeu usar {{ HTMLElement("ul") }}.</div> + +<h2 id="Context_d'ùs">Context d'ùs</h2> + +<table class="properties"> + <tbody> + <tr> + <td><a href="/en/HTML/Content_categories" title="en/HTML/Content categories">Categories de contingut</a></td> + <td><a href="/en/HTML/Content_categories#flow_content" title="en/HTML/Content categories#Flow content">Contingut dinàmic</a></td> + </tr> + <tr> + <td>Contingut permès</td> + <td>zero o més elements {{ HTMLElement("li") }}, <span id="result_box" lang="ca"><span>que al seu torn</span> <span>contenen sovint</span> <span>niats</span></span> elements {{ HTMLElement("ol") }} o {{ HTMLElement("ul") }}.</td> + </tr> + <tr> + <td>Omissió de l'etiqueta</td> + <td>cap, tant l'etiqueta inicial com l'etiqueta final són obligatories</td> + </tr> + <tr> + <td>Elements pares permesos</td> + <td>Qualsevol element que accepti contingut dinàmic</td> + </tr> + <tr> + <td>Interfície DOM</td> + <td>{{domxref("HTMLUListElement")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Atributs">Atributs</h2> + +<dl> +</dl> + +<p>Aquest element inclou els<span style="line-height: 21px;"> </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">atributs globals</a><span style="line-height: 21px;">.</span></p> + +<dl> + <dt>{{ htmlattrdef("compact") }}{{ Deprecated_inline() }}</dt> + <dd>Aquest atribut booleà dona entendre que la llista hauria de representar-se en un estil compacte. La interpretació d'aquest atribut depèn de l'agent d'usuari i no funciona en tots els navegadors. + <div class="note"><strong>Nota d'ùs: </strong>No utilitzeu aquest atribut, ja que ha quedat en desús: l'element {{ HTMLElement("ul") }} s'ha de donar estil amb <a href="https://developer.mozilla.org/en/CSS" title="en/CSS">CSS</a> . Per donar un efecte similar com l'atribut <code>compact</code>, la propietat <a href="https://developer.mozilla.org/en/CSS" title="en/CSS">CSS</a> <a href="https://developer.mozilla.org/en/CSS/line-height" title="en/CSS/line-height">line-height</a> es pot utilitzar amb un valor del 80%.</div> + </dd> +</dl> + +<dl> + <dt>{{ htmlattrdef("type") }}{{ Deprecated_inline() }}</dt> + <dd>S'utilitza per definir l'estil de vinyeta de la llista. Els valors definits en <a href="/en/HTML3.2" title="en/HTML3.2">HTML3.2</a> i la versió de transició d'<a href="/en/HTML4.01" title="en/HTML4.01">HTML 4.0/4.01</a> són<span style="font-family: monospace;">:</span> + <ul> + <li><code>circle</code>,</li> + <li><code>disc</code>,</li> + <li>and <code>square</code>.</li> + </ul> + + <p>Un quart tipus de vinyeta s'ha definit en la interfície WebTV, però no tots els navegadors el suporten: <code>triangle.</code></p> + + <p>Si no està present i no s'aplica la propietat CSS {{ cssxref("list-style-type") }} a l'element, l'agent d'usuari pot decidir utilitzar un tipus de vinyetes depenent del nivell d'anidament de la llista.</p> + + <div class="note"><strong>Nota d'ùs:</strong> No utilitzeu aquest atribut, ja que ha quedat desaprovat; utilitzeu la propietat CSS {{ cssxref("list-style-type") }} en el seu lloc.</div> + </dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_senzill">Exemple senzill</h3> + +<pre class="brush: html"><ul> + <li>first item</li> + <li>second item</li> + <li>third item</li> +</ul> +</pre> + +<p>Sortida de l'anterior HTML:</p> + +<ul> + <li>first item</li> + <li>second item</li> + <li>third item</li> +</ul> + +<h3 id="Llistes_niades">Llistes niades</h3> + +<pre class="brush: html"><ul> + <li>first item</li> + <li>second item <!-- Look, the closing </li> tag is not placed here! --> + <ul> + <li>second item first subitem</li> + <li>second item second subitem <!-- Same for the second nested unordered list! --> + <ul> + <li>second item second subitem first sub-subitem</li> + <li>second item second subitem second sub-subitem</li> + <li>second item second subitem third sub-subitem</li> + </ul> + </li> <!-- Closing </li> tag for the li that contains the third unordered list --> + <li>second item third subitem</li> + </ul> + </li> <!-- Here is the closing </li> tag --> + <li>third item</li> +</ul></pre> + +<p>Sortida de l'anterior HTML:</p> + +<ul> + <li>first item</li> + <li>second item + <ul> + <li>second item first subitem</li> + <li>second item second subitem + <ul style=""> + <li>second item second subitem first sub-subitem</li> + <li>second item second subitem second sub-subitem</li> + <li>second item second subitem third sub-subitem</li> + </ul> + </li> + + <li>second item third subitem</li> + </ul> + </li> + + <li>third item</li> +</ul> + +<h3 id="Niar_<ul>_i_<ol>">Niar <ul> i <ol></h3> + +<pre class="brush: html"><ul> + <li>first item</li> + <li>second item <!-- Look, the closing </li> tag is not placed here! --> + <ol> + <li>second item first subitem</li> + <li>second item second subitem</li> + <li>second item third subitem</li> + </ol> + </li> <!-- Here is the closing </li> tag --> + <li>third item</li> +</ul> +</pre> + +<p>Sortida de l'anterior HTML:</p> + +<ul> + <li>first item</li> + <li>second item + <ol> + <li>second item first subitem</li> + <li>second item second subitem</li> + <li>second item third subitem</li> + </ol> + </li> + <li>third item</li> +</ul> + +<h2 id="Veure">Veure</h2> + +<ul> + <li>Altres elements HTML relacionats amb llistes: {{ HTMLElement("ol") }}, {{ HTMLElement("li") }}, {{ HTMLElement("menu") }} i el obsolet {{ HTMLElement("dir") }};</li> + <li><span id="result_box" lang="ca"><span>Propietats CSS</span> <span>que poden ser</span> <span>especialment</span> <span>útils</span> <span>per a l'estil</span> <span>de l'element</span> <span><</span><span>ul</span><span>></span><span>:</span></span> + <ul> + <li>la propietat <a href="/en/CSS/list-style" title="en/CSS/list-style">list-style</a>, útil per triar la forma en què es mostra l'ordinal,</li> + <li><a href="/en/CSS_Counters" title="en/CSS_Counters">CSS counters</a>, <span id="result_box" lang="ca"><span>útil per</span> <span>gestionar</span> <span>llistes</span> <span>niades</span> <span>complexes,</span></span></li> + <li>la propietat <a href="/en/CSS/line-height" title="en/CSS/line-height">line-height</a>, <span id="result_box" lang="ca"><span>útil</span> <span>per simular</span> l'atribut obsolet </span>{{ htmlattrxref("compact", "ul") }},</li> + <li>la propietat <a href="/en/CSS/margin" title="en/CSS/margin">margin</a>, <span id="result_box" lang="ca"><span>útil</span> <span>per controlar</span> la </span> sagnia <span lang="ca"><span> de la</span> <span>llista</span></span>.</li> + </ul> + </li> +</ul> + +<p>{{ languages({ "en":"en/HTML/Element/ul", "de":"de/HTML/Element/ul", "ja":"ja/HTML/Element/ul", "pl":"pl/HTML/Element/ul"}) }}</p> + +<p>{{ HTMLRef }}</p> |