Listas HTML Descripción
Una lista de descripción, que consiste en grupos de nombre-valor, y que se conoce como una lista de definición antes de HTML5. Descripción de las listas están destinadas a grupos de "términos y definiciones, temas y valores de metadatos, preguntas y respuestas, o cualquier otro grupo de datos de nombre-valor".
DL existía en las etiquetas HTML, y se estandarizó en HTML 2.0; siendo actual.
Ejemplo de una lista desordenada y una lista ordenada en HTML:
Lista desordenada:
- ít.
- ít.
- ít.
- ít.
Lista ordenada:
- En primer elemento
- segundo elemento
- tercer punto
- cuarto punto
Las listas no ordenadas HTML
Una lista sin orden comienza con el <ul> etiqueta. Cada elemento de la lista comienza con el <li> etiqueta.
Los elementos de la lista serán marcados con puntos negros (small black circles) :
Las listas no ordenadas HTML - El Style Atributo
Un style atributo se puede añadir a una lista desordenada, para definir el estilo del marcador:
| Estilo | Descripción |
|---|---|
| list-style-type:disc | Los elementos de la lista se marcarán con balas (default) |
| list-style-type:circle | Los elementos de la lista serán marcados con círculos |
| list-style-type:square | Los elementos de la lista serán marcados con cuadrados |
| list-style-type:none | Los elementos de la lista no se marcarán |
Disc :
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> Inténtalo tú mismo " Circle :
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> Inténtalo tú mismo " Square :
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> Inténtalo tú mismo " None :
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> Inténtalo tú mismo " Las listas ordenadas HTML
Una lista ordenada comienza con el <ol> etiqueta. Cada elemento de la lista comienza con el <li> etiqueta.
Los elementos de la lista serán marcados con los números:
Las listas ordenadas HTML - El Type Atributo
Un type atributo se puede añadir a una lista ordenada, para definir el tipo del marcador:
| Tipo | Descripción |
|---|---|
| type="1" | Los elementos de la lista serán numeradas con los números (default) |
| type="A" | Los elementos de la lista se numerarán con letras mayúsculas |
| type="a" | Los elementos de la lista se numerarán con letras minúsculas |
| type="I" | Los elementos de la lista se numerarán con números romanos en mayúsculas |
| type="i" | Los elementos de la lista se numerarán con números romanos en minúscula |
Letras mayúsculas:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol> Inténtalo tú mismo " Letras minusculas:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol> Inténtalo tú mismo " Los números romanos en mayúsculas:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol> Inténtalo tú mismo " Minúsculas números romanos:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol> Inténtalo tú mismo " Descripción listas HTML
HTML también soporta listas de descripción.
Una lista descripción es una lista de términos, con una descripción de cada término.
La <dl> etiqueta define la lista de descripción, la <dt> etiqueta define el término (name) , y el <dd> tag describe cada término:
Ejemplo
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl> Inténtalo tú mismo " Las listas HTML anidadas
Lista puede estar anidada (lists inside lists) :
Ejemplo
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul> Inténtalo tú mismo " elementos de la lista pueden contener nueva lista, y otros elementos HTML, como imágenes y enlaces, etc.
Las listas horizontales
listas HTML pueden ser de estilo de muchas maneras diferentes con CSS.
Una manera popular, es el estilo de una lista que se visualizan horizontalmente:
Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
ul#menu li {
display:inline;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
</body>
</html> Inténtalo tú mismo " Con un poco de estilo adicional, puede hacer que parezca un menú:
Ejemplo
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: black;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color: orange;
} Inténtalo tú mismo " Resumen del capítulo
- Utilice el código HTML <ul> elemento para definir una lista desordenada
- Utilice el código HTML style de atributos para definir el estilo de viñeta
- Utilice el código HTML <ol> elemento para definir una lista ordenada
- Utilice el código HTML type atributo para definir el tipo de numeración
- Utilice el código HTML <li> elemento para definir un elemento de la lista
- Utilice el código HTML <dl> elemento para definir una lista de descripciones
- Utilice el código HTML <dt> elemento para definir el término Descripción
- Utilice el código HTML <dd> elemento para definir los datos Descripción
- Las listas pueden ser anidadas dentro de listas
- elementos de la lista pueden contener otros elementos HTML
- Utilice la pantalla propiedad CSS: en línea para mostrar una lista horizontalmente
Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 » Ejercicio 6»
HTML lista de etiquetas
| Etiqueta | Descripción |
|---|---|
| <ul> | Define una lista desordenada |
| <ol> | Define una lista ordenada |
| <li> | Define un elemento de la lista |
| <dl> | Define una lista de descripciones |
| <dt> | Define el término en una lista de descripciones |
| <dd> | Define la descripción de una lista de descripciones |