Listas HTML

Uma lista ordenada pode exibir os dados em diferentes formatos, como alfabético, numérico, romano, etc. Por padrão, a lista exibe os "itens da lista" em forma numérica, mas pode ser alterada usando seu atributo "Type".

Exemplo 1

Vamos considerar o exemplo a seguir que determina como a lista ordenada funciona:

Lista de estruturas de desenvolvimento da web

1. Django


2. Laravel


3. Asp.Líquido


4. Frasco


5. ExpressJs

O código acima dará à saída algo assim:

Da saída, podemos observar que a lista apareceu em forma numérica.

E se o requisito é exibir a lista em algum outro formato i.e alfabático, romano, etc.? Nesse caso, devemos ter que especificar o formato no "tipo" atributo.

Exemplo 2

Vamos supor que precisamos declarar os itens da lista no formato alfabético, então o atributo de tipo será definido para o formato especificado I.e. "Type = A" ou "Type = A" Como mostrado no snippet seguinte:

Lista de estruturas de desenvolvimento da web

1. Django


2. Laravel


3. Asp.Líquido


4. Frasco


5. ExpressJs

Agora, este código gerará a seguinte saída:

Exemplo 3

Além disso, podemos especificar o índice de partida para a lista usando o "começar" atributo como mostrado no script a seguir:

Lista de estruturas de desenvolvimento da web

6. Django


7. Laravel


8. Asp.Líquido


9. Frasco


10. ExpressJs

A saída provará que o índice da lista começou a partir do "VI":

Depois de ter o conhecimento detalhado sobre a lista ordenada de HTML, vamos avançar e aprender a lista não ordenada HTML.

Lista HTML não ordenada

Geralmente usado se não houver necessidade de organizar os dados em qualquer pedido específico.

tag serão usados ​​para criar a lista não ordenada e dentro da lista, os itens serão escritos dentro do
• marcação.

  Uma lista não ordenada exibe os dados em vários formatos, como quadrado, círculo, etc. Por padrão, ele mostra os "itens de lista" em forma de marcadores, mas pode ser alterada usando seu "tipo" atributo.

  Exemplo

  O exemplo-de-dado abaixo criará duas lista não ordenadas e, na primeira lista, não há tipo mencionado, por isso fornecerá o resultado em forma de marcadores. No entanto, na segunda lista, o atributo de tipo é definido como quadrado e, como resultado, os itens da lista serão iniciados com o quadrado:

  
  
  
  
  
  

  Lista de estruturas de desenvolvimento da web

  
  
  
  
  • Django
  
  
  • Laravel
  
  
  
  
  
  
  • Asp.Líquido
  
  
  • Frasco
  
  
  • ExpressJs
  
  
  
  
  

  A saída do snippet de código acima seria assim:

  Lista de descrição HTML

  Também é conhecido como a lista de definições. É usado para descrever/definir os itens da lista. Existem três tipos de tags usadas na lista de descrição

  marcação,

  tag, e

  marcação.

  • tag representa uma lista de descrição,

  • tag representa termos de dados,
  • Tag representa a definição de dados.

  Exemplo

  Código abaixo dado implementará as listas de descrição para determinar os dois termos de dados com sua definição:

  
  
  
  
  
  

  Lista de estruturas de desenvolvimento da web

  
  

  
  

  Django

  
  

  Estrutura para python

  
  

  Laravel

  
  

  Estrutura para php

  
  

  
  
  

  A saída será assim:

  Listas aninhadas

  HTML suporta o conceito da lista aninhada, o que significa que uma lista pode ser criada dentro da outra lista.

  Exemplo

  Neste exemplo, incorporaremos uma lista não ordenada na lista ordenada:

  
  
  
  
  
  

  Lista de estruturas de desenvolvimento da web

  
  

  
  
  1. Estrutura para python
     
     
     
     • Django
     
     
     • Frasco
     
     
     • Cherrypy
     
     
     
     
  
  
  2. Estrutura para php
     
     
     
     • Laravel
     
     
     • Cakephp
     
     
     • Phalcon
     
     
     
     
  
  

  
  
  

  A saída deste exemplo será a seguinte:

  Conclusão

  HTML lista o grupo de itens diferentes em uma lista. HTML oferece tags diferentes para criar listas, por exemplo, o

  ,
  , e

  As tags são usadas para criar uma lista ordenada, não ordenada e descritiva, respectivamente. Além disso, o

  tag determina o item da lista, o

  tag determina o termo de descrição, enquanto

  descreve a definição para um

  marcação.

  Este tutorial explica como criar listas ordenadas, não ordenadas, descritivas e aninhadas. Para uma melhor compreensão, este artigo explicou cada lista com a ajuda de exemplos.