diff options
Diffstat (limited to 'files/pt-br/web/html/element/li/index.html')
| -rw-r--r-- | files/pt-br/web/html/element/li/index.html | 177 |
1 files changed, 177 insertions, 0 deletions
diff --git a/files/pt-br/web/html/element/li/index.html b/files/pt-br/web/html/element/li/index.html new file mode 100644 index 0000000000..b7f5b36150 --- /dev/null +++ b/files/pt-br/web/html/element/li/index.html @@ -0,0 +1,177 @@ +--- +title: <li> +slug: Web/HTML/Element/li +tags: + - Elementos + - Guía + - HTML + - Indentação + - Referencia + - listagem <li> + - menu+HTML +translation_of: Web/HTML/Element/li +--- +<h2 id="Resumo"><span style="font-size: 1.628em;">Resumo</span></h2> + +<p>O <strong><em>elemento</em></strong> <strong><em>HTML</em> <code style="font-style: normal;"><li></code></strong> (ou a Lista dos Itens de um elemento HTML) é usado para representar um item que faz parte de uma lista. Este item deve estar contido em um elemento pai: uma lista ordenada<code> </code>({{HTMLElement("ol")}}),<code> </code>uma lista desordenada<code> </code>({{HTMLElement("ul")}})<code>, </code>ou um menu<code> </code>({{HTMLElement("menu")}})<code> </code>e representa uma única entidade dessa lista. Em menus e listas desordenadas a relação de itens é exibida, normalmente, usando pontos de marcação (as bolinhas). Em listas ordenadas eles são, comumente, mostrados com algum <span class="short_text" id="result_box" lang="pt"><span>contador</span> <span>ascendente - como um número, ou letra - à sua esquerda.</span></span></p> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/Web/HTML/Content_categories">Categorias de conteúdo </a></dfn><span class="short_text" id="result_box" lang="pt"><span>Nenhuma</span></span>.</li> + <li><dfn>Conteúdo permitido</dfn> <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flutuantes</a>.</li> + <li><dfn>Omissão de etiquetas (<em>tags</em>)</dfn> <span id="result_box" lang="pt"><span>A</span> <span>etiqueta de fim</span> <span>pode</span> <span>ser</span> <span>omitida se esta for </span><span>imediatamente</span></span><span lang="pt"> <span>seguida</span> <span>por um outro</span> <span>elemento</span></span><code> </code>{{HTMLElement("li")}}<code>, </code>ou se <span class="short_text" id="result_box" lang="pt"><span>não houver</span> <span>mais conteúdo</span> <span>no seu</span> <span>elemento pai.</span></span></li> + <li><dfn>Elementos pai permitidos</dfn> Um elemento<code> </code>{{HTMLElement("ul")}},<code> </code>{{HTMLElement("ol")}}<code>, </code>ou<code> </code>{{HTMLElement("menu")}}. Embora seja um uso incomum, o obsoleto<code> </code>{{HTMLElement("dir")}}<code> pode</code> <code>ser</code> <code>pai, </code>também.</li> + <li><dfn>Interface DOM</dfn> {{domxref("HTMLLIElement")}}</li> +</ul> + +<h2 id="Atributos">Atributos</h2> + +<p>Este elemento inclui os <a href="/en-US/docs/Web/HTML/Global_attributes">atributos globais</a>.</p> + +<dl> + <dt>{{htmlattrdef("value")}}</dt> + <dd><span id="result_box" lang="pt"><span>Este atributo de</span></span><span lang="pt"><span> número inteiro</span> <span>indica o valor</span> <span>ordinal</span> <span>atual</span></span> do item na lista, definido pelo elemento<code> </code>{{HTMLElement("ol")}}.<code> </code>O único valor possível para este atributo é um número, ainda que a lista seja exibida com algarismos romanos, ou letras. A lista de itens que virá em seguida continuará a ser numerada a partir desta posição. O atributo <strong>value</strong> não tem significado para listas desordenadas<code> </code>({{HTMLElement("ul")}}),<code> </code>nem para menus<code> </code>({{HTMLElement("menu")}}). + <div class="note"><strong>Nota</strong>: Este atributo, abandonado na HTML4, foi reintroduzido na HTML5.</div> + + <div class="note"> + <p><strong>Nota:</strong> Antes de<code> </code>{{Gecko("9.0")}},<code> </code>os valores negativos eram, incorretamente, convertidos a 0. A partir de<code> </code>{{Gecko("9.0")}}<code> </code>todos os valores inteiros são analisados corretamente.</p> + </div> + </dd> + <dt>{{htmlattrdef("type")}} {{Deprecated_inline}}</dt> + <dd><span id="result_box" lang="pt"><span>A característica deste</span> <span>atributo é</span> <span>indicar o tipo</span> <span>de numeração</span></span>: + <ul> + <li><code>a</code>: letras minúsculas</li> + <li><code>A</code>: letras maiúsculas</li> + <li><code>i</code>: algarismos romanos minúsculos</li> + <li><code>I</code>: algarismos romanos maiúsculos</li> + <li><code>1</code>: números</li> + </ul> + <span id="result_box" lang="pt"><span>Este tipo</span> <span>substitui</span> <span>o utilizado pelo</span> <span>seu elemento pai</span></span><code> </code>{{HTMLElement("ol")}},<code> </code>qualquer que seja. + + <div class="note"><strong>Nota de utilização:</strong> Este atributo <span class="short_text" id="result_box" lang="pt"><span>foi preterido. Em seu lugar</span></span><span class="short_text" lang="pt"><span> use a propriedade </span></span>CSS<code> </code>{{cssxref("list-style-type")}}.</div> + </dd> +</dl> + +<h2 id="Exemplos">Exemplos</h2> + +<pre class="brush: html"><ol> + <li>primeiro item</li> + <li>segundo item</li> + <li>terceiro item</li> +</ol> +</pre> + +<p>A saída HTML acima será:</p> + +<ol> + <li>primeiro item</li> + <li>segundo item</li> + <li>terceiro item</li> +</ol> + +<pre class="brush: html"><ul> + <li>primeiro item</li> + <li>segundo item</li> + <li>terceiro item</li> +</ul></pre> + +<ul> + <li>primeiro item</li> + <li>segundo item</li> + <li>terceiro item</li> +</ul> + +<p>Para exemplos mais detalhados veja as páginas<code> </code><a href="/en-US/docs/Web/HTML/Element/ol#Examples"><ol></a><code> </code>e<code> </code><a href="/en-US/docs/Web/HTML/Element/ul#Examples"><ul></a>.</p> + +<h2 id="Specifications" name="Specifications">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Estado</th> + <th scope="col">Observação</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-li-element', '<li>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'the-li-element.html#the-li-element', '<li>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'lists.html#h-10.2', '<li>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_em_navegadores">Compatibilidade em navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th><span class="short_text" id="result_box" lang="pt"><span>Recurso</span></span></th> + <th> Chrome</th> + <th> Firefox (Gecko)</th> + <th> Internet Explorer</th> + <th> Opera</th> + <th> Safari</th> + </tr> + <tr> + <td>Suporte básico</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><span class="short_text" id="result_box" lang="pt"><span>Recurso</span></span></th> + <th> Android</th> + <th>Firefox Móvel (Gecko)</th> + <th>IE Móvel</th> + <th>Opera Móvel</th> + <th>Safari Móvel</th> + </tr> + <tr> + <td>Suporte básico</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Veja_também">Veja também:</h2> + +<ul> + <li>Outros elementos HTML parentes:<code> </code>{{HTMLElement("ul")}},<code> </code>{{HTMLElement("li")}},<code> </code>{{HTMLElement("menu")}}<code> </code>e o obsoleto<code> </code>{{HTMLElement("dir")}};</li> + <li>Propriedades CSS que podem ser úteis, especialmente para dar um charme ao elemento<code> <li></code>: + <ul> + <li>a propriedade<code> </code>{{cssxref("list-style")}},<code> </code><span class="short_text" id="result_box" lang="pt"><span>para escolher</span> <span>a maneira como os</span> posicionamentos <span>serão exibidos</span></span>,</li> + <li><a href="/Web/Guide/CSS/Counters">contadores CSS</a> <span class="short_text" id="result_box" lang="pt"><span>para controlar</span> <span>listas aninhadas</span> <span>complexas</span></span>,</li> + <li>a propriedade<code> </code>{{cssxref("margin")}},<code> </code>para controlar a indentação dos itens da lista.</li> + </ul> + </li> +</ul> + +<div>{{HTMLRef}}</div> |