Item de Lista HTML: Dominando Listas Não Ordenadas e Ordenadas

Introdução

Listas HTML são usadas para exibir itens em formato de lista e desempenham um papel crucial no desenvolvimento web. A tag HTML li é usada para definir um item em uma lista. A tag li é usada com as tags ul ou ol, e é perfeita para criar listas não ordenadas e ordenadas. Este laboratório fornecerá orientação passo a passo sobre como criar listas HTML usando a tag li.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 97%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Criar uma lista não ordenada

Podemos criar uma lista não ordenada usando a tag HTML ul. Para adicionar itens à lista, devemos usar a tag li. Vamos criar uma lista não ordenada com três itens.

<!-- index.html -->

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

No código acima, usamos a tag ul para criar uma lista não ordenada e a tag li para definir cada item na lista.

Criar uma lista ordenada

Criar uma lista ordenada é muito semelhante a criar uma lista não ordenada, com a única diferença sendo o uso da tag ol em vez da tag ul. Vamos criar uma lista ordenada com três itens.

<!-- index.html -->

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

No código acima, usamos a tag ol para criar uma lista ordenada e a tag li para definir cada item na lista.

Adicionando atributos à tag li

A tag li suporta diversos atributos que podem ser usados para modificar o estilo do marcador do item da lista. Um atributo que é comumente usado é o atributo type, que pode ser usado para alterar o marcador do item da lista. Vamos atualizar a lista não ordenada do passo 1 usando o atributo type.

<!-- index.html -->

<ul>
  <li type="circle">Item 1</li>
  <li type="disc">Item 2</li>
  <li type="square">Item 3</li>
</ul>

No código acima, usamos o atributo type para adicionar diferentes marcadores aos itens da lista. Usamos o valor circle para tornar o marcador um círculo não preenchido, o valor disc para tornar o marcador um círculo preenchido e o valor square para tornar o marcador um quadrado preenchido.

Listas aninhadas

Podemos aninhar múltiplas listas dentro de uma única lista. Vamos criar uma lista ordenada e adicionar uma lista não ordenada dentro do segundo item da lista ordenada.

<!-- index.html -->

<ol>
  <li>Item 1</li>
  <li>
    Item 2
    <ul>
      <li>Sub-item 1</li>
      <li>Sub-item 2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ol>

No código acima, usamos a tag ul para criar uma lista não ordenada e a tag li para definir cada item na lista. Também aninhamos uma lista não ordenada dentro do segundo item da lista ordenada.

Resumo

Neste laboratório, aprendemos como criar listas HTML usando a tag li. Começamos criando uma lista não ordenada usando a tag ul e a tag li. Em seguida, criamos uma lista ordenada usando a tag ol e a tag li. Também aprendemos como adicionar atributos à tag li para modificar o estilo do marcador do item da lista. Finalmente, aprendemos como aninhar múltiplas listas dentro de uma única lista.