Listas - Listados
Las listas son ideales para el diseño de menús.
Las listas
Las listas nos permiten ordenar o enumerar datos o elementos para facilitar su lectura.
Tenemos tres tipos de listas:
- Ordenadas.
- Desordenadas.
- De definición.
Listas Ordenadas
Son aquellas que ordenan la lista anteponiendo números ,letras o signos.
Las listas ordenadas comienzan con la etiqueta <ol> y para cada uno de los items de la misma, utilizamos la etiqueta <li>.
Ejemplo |
|
Vamos a crear una lista ordenada |
|
|
Código
<ol><li>Naranjas</li> <li>Manzanas</li> <li>Bananas</li> </ol> |
Resultado
|
Dentro de cada Item se pueden agregar imágenes, párrafos, otras listas, etc.
Listas Desordenadas
Exponen la lista anteponiendo un punto, cuadrado o triángulo negro.
Las listas desordenadas comienzan con la etiqueta <ul> y para cada uno de los Items de la misma utilizamos la etiqueta <li>.
Ejemplo |
|
|
Código
<ul><li>Tomates</li> <li>Pepinos</li> <li>Cebollas</li> </ul> |
Resultado
|
Listas de definición
Se utilizan para definir términos.
Las listas de definición se representan con la etiqueta <dl>.
Los términos de las mismas con <dt>.
La definición de esos términos comienza con <dd>.
Ejemplo |
|
|
Código
<dl><dt>Chocolate</dt> <dd>Elaborado a base de cacao</dd> <dt>Caramelo</dt> <dd>Elaborado a base de azúcar</dd> </dl> |
Resultado
|
| Dentro de las etiquetas <dd> se pueden agregar imágenes, párrafos, otras listas, etc. | |
Etiquetas y atributos de las listas
| Etiquetas | Atributos | Valor | Descripción | Ej. |
|---|---|---|---|---|
| <ol> | Define una lista ordenada. | ![]() |
||
| compact Desaprobado |
Representa la lista de un modo más compacto. Use las propiedades de las listas en CSS en su lugar. | ![]() |
||
| start Desaprobado |
número del 1° objeto | Especifica el número del primer objeto de una lista. Use las propiedades de las listas en CSS en su lugar. | ![]() |
|
| type Desaprobado |
A | Especifica el estilo de un objeto de lista. Use las propiedades de las listas en CSS en su lugar. | ![]() |
|
| a | ![]() |
|||
| I | ![]() |
|||
| i | ![]() |
|||
| 1 | ![]() |
|||
| <ul> | Define una lista desordenada. | ![]() |
||
| compact Desaprobado |
Representa la lista de un modo más compacto. Use las propiedades de las listas en CSS en su lugar. | ![]() |
||
| type Desaprobado |
disc | Especifica el estilo de un objeto de lista. Use las propiedades de las listas en CSS en su lugar. | ![]() |
|
| square | ![]() |
|||
| circle | ![]() |
|||
| <li> | Define el comienzo del Item. | ![]() |
||
| type Desaprobado |
disc | Especifica el estilo de un objeto de lista. Use las propiedades de las listas en CSS en su lugar. | ![]() |
|
| square | ![]() |
|||
| circle | ![]() |
|||
| A | ![]() |
|||
| a | ![]() |
|||
| I | ![]() |
|||
| i | ![]() |
|||
| 1 | ![]() |
|||
| value Desaprobado |
número del objeto | Establece el número del objeto de lista actual. Use las propiedades de las listas en CSS en su lugar. | ![]() |
|
| <dl> | Define una lista de definición. | ![]() |
||
| <dt> | Términos de los objetos de lista. | ![]() |
||
| <dd> | Descripción de los objetos de lista. | ![]() |
||
| <dir> Desaprobado |
Actúa como <ul>. | ![]() |
||
| <menu> Desaprobado |
Actúa como <ul>. | ![]() |
Atributos estándard
Si deseas una descripción completa, diríjete a: atributos estándard.
Eventos intrínsecos
Si desea una descripción completa, diríjete a: eventos intrínsecos.
<<< Las tablas de HTML Los formularios de HTML >>>

