Todos os tipos de lista em HTML5 estão intimamente relacionados. O tipo mais simples e mais comum de lista é uma lista não ordenada. Você também pode usar listas ordenadas e listas aninhadas em HTML.

Olhe para uma lista não ordenada

Olhe para a página simples. Além de um par de cabeçalhos, que tem uma lista de informações.

Video: HTML5 & CSS3 - 04 Lista ordenada e não ordenada

Esta lista de navegadores tem algumas características visuais interessantes:

• Os itens são recuadas. Há algum espaço extra entre a margem esquerda e no início de cada item da lista.

• Os elementos da lista tem balas. Esse pequeno ponto na frente de cada item é um bala. Balas são comumente usados ​​em listas não ordenadas como este.

  

• Cada item começa uma nova linha. Quando um item da lista é apresentado, é mostrado em uma nova linha.

Essas características ajudam a ver que você tem uma lista, mas eles são comportamentos apenas padrão. Definindo algo como uma lista não forçá-lo a procurar um determinado caminho- os padrões apenas ajudá-lo a ver que esses itens são de fato parte de uma lista.

Lembre-se a idéia central de HTML aqui. Você não está realmente descrevendo como as coisas Veja, mas o que eles significar. Você pode alterar a aparência mais tarde, quando você descobrir CSS, por isso não fique muito preso na aparência particular das coisas. Por enquanto, apenas reconhecer que HTML pode construir listas, e certifique-se que você sabe como usar os vários tipos.

Video: HTML5 e CSS3 - 13 Construindo o site do projeto agenda Turbo - Parte 2

Como construir uma lista não ordenada

As listas são feitas com dois tipos de tags. Uma tag rodeia a lista inteira e indica o tipo geral da lista. Este primeiro exemplo demonstra uma lista não ordenada, que é cercada pelo par.

Nota: Recuo todo o código dentro do conjunto é comum. A lista não ordenada pode ir no corpo principal.

Dentro do conjunto é um número de itens da lista. Cada elemento da lista é armazenada entre um (item da lista) e uma tag. Normalmente, cada par vai em sua própria linha do código-fonte, embora você pode fazer um item da lista, contanto que você quiser.

Você pode mudar a bala para todos os tipos de outras imagens, incluindo círculos, quadrados, e até mesmo imagens personalizadas.

O código para a lista não ordenada é bastante simples:

Listas básicas
Os navegadores da Web comuns
Raposa de fogo
cromada
Internet Explorer
Ópera
Safári