Las listas se utilizan para almacenar datos o información en páginas web en forma ordenada o desordenada. HTML admite varios tipos de elementos de lista que se pueden incluir en la etiqueta <BODY> del documento. Estos elementos también se pueden anidar, es decir, el inicio de los elementos se puede incrustar dentro de otro. Hay tres tipos de lista disponibles en HTML:
- Lista desordenada
- Lista ordenada
- Lista de descripciones
Ahora, antes de pasar a la lista, en primer lugar, entendemos qué es una etiqueta de elemento de lista.
Etiqueta de elemento de lista
La etiqueta de elemento de lista se utiliza para definir cada elemento de una lista. Una vez que definimos los elementos de la lista con la etiqueta <li>, la lista aparece en los navegadores web en forma de viñetas (por defecto). Se usa dentro de una lista ordenada y desordenada.
Sintaxis:
<li> contenido </li>
Atributo de la etiqueta del artículo:
valor : el atributo de valor de la etiqueta <li> se utiliza para especificar el valor del primer elemento. El valor debe ser un número y solo se puede utilizar en el caso de una lista ordenada. Los elementos de la lista subsiguientes incrementarán el valor del número.
Sintaxis:
<li valor = número>
Ejemplo 1:
HTML
<html > <head> <title>inline style attribute</title> </head> <body> <li>sachin</li> <li>sujay</li> <li>Amraditya</li> <li>shivam</li> <li>Parth</li> </body> </html>
Producción:
Ejemplo 2:
HTML
<html > <head> <title>inline style attribute</title> </head> <body> <ol> <li value="51">English</li> <li>Hindi</li> <li>Maths</li> <li>Science</li> <li>social science</li> </ol> </body> </html>
Producción:
Ahora discutiremos toda la lista provista por el HTML una por una en detalle:
Lista ordenada
Una lista ordenada define una lista de elementos en la que el orden de los elementos es importante. Una lista ordenada también se llama lista de números. La ordenación viene dada por un esquema de numeración, utilizando números arábigos, letras, números romanos. O, en otras palabras, la etiqueta de lista ordenada se usa para crear una lista ordenada.
Sintaxis:
<ol> contenido </ol>
Atributos de la lista ordenada:
1. invertido: este atributo se utiliza para especificar que el orden de la lista debe invertirse.
Sintaxis:
<ol al revés>
2. inicio: este atributo se utiliza para especificar el valor de inicio de la lista.
Sintaxis:
<ol inicio = “número”>
3. tipo: este atributo se utiliza para especificar el tipo de creador de elementos de la lista. El valor de este atributo es decimal (predeterminado)/romano inferior/romano superior/alfa inferior/alfa superior
Sintaxis:
<tipo ol = “1|b|A|i|I”>
Ejemplo 1:
HTML
<html> <head> <title>ordered list</title> </head> <body> <h1>Example of ordered list in default</h1> <ol > <li>Sachin</li> <li>Manoj</li> <li>Parth</li> <li>sujay</li> <li>Amraditya</li> </ol> </body> </html>
Producción:
Ejemplo 2:
HTML
<html> <head> <title>ordered list</title> </head> <body> <h1>Example of ordered list whose type = "A"</h1> <ol type="A"> <li>Sachin</li> <li>Manoj</li> </ol> <h1>Example of reverse ordered list</h1> <ol reversed> <li>Parth</li> <li>sujay</li> </ol> <h1>Example of ordered list start from 10</h1> <ol start = "10"> <li>Pushpa</li> <li>Purvi</li> </ol> </body> </html>
Producción:
Lista desordenada:
Una lista desordenada define una lista de elementos en la que el orden de los elementos no lo hace. O, en otras palabras, la etiqueta de lista desordenada se usa para crear una lista desordenada. También se conoce como lista con viñetas. En la lista desordenada, cada elemento de la lista se define mediante la etiqueta <li>.
Sintaxis:
<ul> contenido </ul>
Atributos de la lista desordenada:
Tipo de estilo de lista: este atributo se usa para especificar el estilo de viñeta que se usará como marcador de elemento de lista. El valor de este atributo es Ninguno/disco (predeterminado)/círculo/cuadrado.
Sintaxis:
<ul style=”list-style-type:cuadrado|disco|ninguno;”>
Ejemplo 1:
HTML
<html> <head> <title>unordered list</title> </head> <body> <h1>Example of unordered list in default</h1> <ul> <li>Sachin</li> <li>Manoj</li> <li>Parth</li> <li>sujay</li> <li>Amraditya</li> </ul> </body> </html>
Producción:
Ejemplo 2:
HTML
<html> <head> <title>unordered list</title> </head> <body> <h2>Example of unordered list in circle</h2> <ul style="list-style-type:circle;"> <li>sachin</li> <li>manoj</li> </ul> <h2>Example of unordered list in disk</h2> <ul style="list-style-type:disk;"> <li>Priya</li> <li>Mohit</li> </ul> <h2>Example of unordered list in square</h2> <ul style="list-style-type:square;"> <li>Pinky</li> <li>Punam</li> </ul> <h2>Example of unordered list in none</h2> <ul style="list-style-type:none;"> <li>Mukti</li> <li>Dhama</li> </ul> </body> </html>
Producción:
Lista de descripciones
La lista de descripción es una lista en la que cada término contiene su descripción. Esta etiqueta contiene etiquetas <dt> y <dd>.
- <dt></dt>: Esta etiqueta se utiliza para definir el nombre o término
- <dd><dd>: esta etiqueta se utiliza para describir el término.
Sintaxis:
<dl> contenido </dl>
Ejemplo:
HTML
<html> <head> <title>Description list</title> </head> <body> <h2>Example of description list</h2> <dl> <dt>Python:</dt> <dd>It is a programming language</dd> <dt>C++:</dt> <dd>It is also a programming language</dd> </dl> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por ysachin2314 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA