Estilos de lista HTML - Tipos de estilos de lista em HTML com exemplos

Introdução aos estilos de lista HTML

As listas são o requisito comum para colocar os dados de maneira formatada, como se você criou uma página da Web na qual precisa exibir o conteúdo do menu de pizza de um hotel, provavelmente é um estilo de lista HTML, que deve aparecer em de maneira clara e discreta.
Outro caso pode ser o local em que você está tendo um conjunto de fileiras de alunos que apareceram entre os melhores alunos da turma; nesse contexto, o requisito será colocar o aluno da classificação 1 no topo e outros abaixo dele em uma ordem crescente de classificação, por que precisamos formatar isso em uma lista classificada.
Outro tipo pode ser listas personalizadas que você pode criar usando o javascript e o html juntos, onde a dinâmica dos objetos também pode ser configurada e as listas podem ter uma perspectiva personalizada.

Estilos de lista diferentes em HTML:

Abaixo estão os vários estilos de lista html da seguinte maneira:

1) Listas não ordenadas -

Aqui, a ordem de exibição do conteúdo não é algo com o qual precisamos nos preocupar, apenas precisamos colocar as coisas bem, de modo que a página HTML as coloque na frente do usuário de forma clara e bem formatada.

Existem duas tags na linguagem HTML que manipulam essas listas e, provavelmente, você também pode criar a barra de navegação e a barra lateral vertical, usando apenas essas tags.

- : representa os itens da lista, o conjunto de itens a serem colocados na lista não ordenada, ou seja, sob o
  - tag. Os itens marcados com essas marcações carregam automaticamente alguns marcadores ou círculos no início; esses são os recursos básicos de HTML.

Agora vamos ver um código para

com base em listas não ordenadas e com a aparência da página HTML, depois de executar esse arquivo, observe que você pode escrever em um editor como o bloco de notas e salvar o arquivo com a extensão ".html", portanto, pode ser aberto com qualquer um dos navegadores.

Fragmento de exemplo -
HTML Lists list of pizzas farmhouse peppy paneer onion pizza
HTML Lists list of pizzas farmhouse peppy paneer onion pizza
HTML Lists list of pizzas farmhouse peppy paneer onion pizza
- HTML Lists list of pizzas farmhouse peppy paneer onion pizza
- HTML Lists list of pizzas farmhouse peppy paneer onion pizza
- HTML Lists list of pizzas farmhouse peppy paneer onion pizza
HTML Lists list of pizzas farmhouse peppy paneer onion pizza

Resultado -
2) Listas solicitadas -

Agora, veremos um caso em que procuramos colocar os alunos de maneira ordenada, com base em suas classificações na sala de aula, e isso aparecerá de maneira ordenada, usando
1. tags, esses terão os itens da lista.
  1. Tag.
  2. tag foi explicada acima.
    
    Vamos ver um exemplo agora também para este caso e você precisa salvá-lo exatamente como feito acima.
    
    Código de exemplo -
    
    HTML Lists list of students John Harris Plunket
    HTML Lists list of students John Harris Plunket
    HTML Lists list of students John Harris Plunket
    1. HTML Lists list of students John Harris Plunket
    2. HTML Lists list of students John Harris Plunket
    3. HTML Lists list of students John Harris Plunket
    HTML Lists list of students John Harris Plunket
    
    Página Saída / HTML -
    
    Agora, vamos ver algumas variantes delas, nas quais podemos personalizar ou formatar essas listas apenas adicionando algumas propriedades CSS à página HTML, o que fará com que a aparência da página pareça melhor.
    1. Nas listas não ordenadas, temos as seguintes propriedades que podem ser fornecidas -
    2. Tipo de estilo de lista - pode ser disco, círculo, quadrado ou nenhum. Portanto, os círculos que você viu em itens de lista não ordenados não aparecerão se não escolhermos nenhum aqui, vamos fazê-lo.
    Exemplo -
    
    HTML Lists list of students John Harris Plunket
    HTML Lists list of students John Harris Plunket
    HTML Lists list of students John Harris Plunket
    - HTML Lists list of students John Harris Plunket
    - HTML Lists list of students John Harris Plunket
    - HTML Lists list of students John Harris Plunket
    HTML Lists list of students John Harris Plunket
    
    Página Saída / HTML -
    
    Portanto, os marcadores de círculo não existem mais, você pode personalizá-lo com as opções fornecidas acima.
    
    Da mesma forma, nas listas de pedidos, existe uma disposição para escolher se os valores da lista de pedidos serão exibidos com números, romanos ou alfabetos.
    
    Você pode definir o tipo de propriedade em