AdNow

loading...

Listas de HTML

-

Listas de HTML

❮ AnteriorSiguiente ❯

 Ejemplo de lista HTML

Una lista desordenada:

  • ít.
  • ít.
  • ít.
  • ít.

Una lista ordenada:

  1. Primer elemento
  2. Segundo artículo
  3. Tercer artículo
  4. Cuarto artículo
Pruebelo usted mismo »

Lista de HTML sin ordenar

Una lista desordenada comienza con la etiqueta ul . Cada elemento de la lista comienza con la etiqueta li .
Los elementos de la lista se marcarán con viñetas (círculos negros pequeños) de forma predeterminada:

Ejemplo

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Lista de HTML sin ordenar: elija Marcador de elemento de lista

La propiedad de tipo de estilo de lista CSS se usa para definir el estilo del marcador de elemento de lista:
ValueDescription
discSets the list item marker to a bullet (default)
circleSets the list item marker to a circle
squareSets the list item marker to a square
noneThe list items will not be marked

Ejemplo - Disco

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Pruebelo usted mismo »

Ejemplo: círculo

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Pruebelo usted mismo »

Ejemplo - Square

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Pruebelo usted mismo »

Ejemplo - Ninguno

<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Pruebelo usted mismo »

Lista ordenada de HTML

Una lista ordenada comienza con la etiqueta ol . Cada elemento de la lista comienza con la etiqueta li .
Los elementos de la lista se marcarán con números de forma predeterminada:

Ejemplo

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Pruebelo usted mismo »

Lista HTML ordenada: el atributo de tipo

El atributo de tipo de la etiqueta ol define el tipo de marcador de elemento de lista:
TypeDescription
type="1"The list items will be numbered with numbers (default)
type="A"The list items will be numbered with uppercase letters
type="a"The list items will be numbered with lowercase letters
type="I"The list items will be numbered with uppercase roman numbers
type="i"The list items will be numbered with lowercase roman numbers

Números:

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Pruebelo usted mismo »

Letras mayúsculas:

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Pruebelo usted mismo »

Letras minusculas:

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Pruebelo usted mismo »

Números romanos en mayúsculas:

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Pruebelo usted mismo »

Números romanos en minúsculas:

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
Pruebelo usted mismo »

Listas de descripción HTML

HTML también es compatible con listas de descripción.
Una lista de descripción es una lista de términos, con una descripción de cada término.
La etiqueta dl define la lista de descripción, la etiqueta dt define el término (nombre) y la etiqueta dd describe cada término: 

Ejemplo

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>
Pruebelo usted mismo »

Nested HTML Listas

La lista se puede anidar (listas dentro de listas):

Ejemplo

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
Pruebelo usted mismo »
Nota: Los elementos de la lista pueden contener una lista nueva y otros elementos HTML, como imágenes y enlaces, etc.

Listas horizontales

Las listas HTML se pueden diseñar de muchas formas diferentes con CSS.
Una forma popular es diseñar una lista horizontalmente para crear un menú:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;}

li {
    float: left;}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;}

li a:hover {
    background-color: #111111;}</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>
Pruebelo usted mismo »

Resumen del capítulo

  • Use el elemento HTML ul para definir una lista desordenada
  • Utilice la propiedad de tipo de estilo de lista de CSS para definir el marcador de elemento de lista
  • Utilice el elemento HTML ol para definir una lista ordenada
  • Use el atributo de tipo HTML para definir el tipo de numeración
  • Use el elemento HTML li para definir un elemento de lista
  • Use el elemento HTML dl para definir una lista de descripción
  • Use el elemento HTML dt para definir el término de la descripción
  • Use el elemento HTML dd para describir el término en una lista de descripción
  • Las listas se pueden anidar dentro de las listas
  • Los elementos de lista pueden contener otros elementos HTML
  • Utilice el flotador de la propiedad CSS : izquierda o pantalla: en líneapara mostrar una lista horizontalmente

Ponte a prueba con ejercicios!

Etiquetas de lista HTML

TagDescription
ulDefines an unordered list
olDefines an ordered list
liDefines a list item
dlDefines a description list
dtDefines a term in a description list
ddDescribes the term in a description list

❮ AnteriorSiguiente ❯

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Entradas más populares de este blog

Listado pasaporte y cedulas SAIME 2018

-
Imagen
click aqui para descargar el listado en formato pdf 21 de Julio de 2018 Con el propósito de dar celeridad al proceso de entrega de documentos, el Director General del Servicio Administrativo de Identificación, Migración y Extranjería (Saime), Gustavo Vizcaíno Gil, ordenó habilitar todas las oficinas del país los días sábados, únicamente para la entrega de cédulas y pasaportes. Saime abre sus oficinas los días sábados Con el propósito de dar celeridad al proceso de entrega de documentos, el Director General del Servicio Administrativo de Identificación, Migración y Extranjería (Saime), Gustavo Vizcaíno Gil, ordenó habilitar todas las oficinas del país los días sábados, únicamente para la entrega de cédulas y pasaportes. Los usuarios podrán ingresar en la página web del Saime  www.saime.gob.ve  y verificar si están en el listado donde le indicará en que oficina pueden retirar sus documentos de identificación. Esta iniciativa  da cumplimiento a la sép...
Leer más

Etiqueta HTML < abbr >

-
Etiqueta  HTML  <abbr> ❮ Referencia HTML completa anterior Siguiente  ❯ Ejemplo Una abreviatura se marca de la siguiente manera: The  < abbr  title ="World Health Organization" > WHO < /abbr >  was founded in 1948. Pruebelo usted mismo » Definición y uso La etiqueta <abbr> define una abreviatura o un acrónimo, como "Sr.", "Dec.", "ASAP", "ATM". Sugerencia:  una abreviatura y un acrónimo son versiones abreviadas de otra cosa.  Ambos a menudo se representan como una serie de letras. Marcar las abreviaturas puede proporcionar información útil para navegadores, sistemas de traducción y motores de búsqueda. Soporte del navegador Element <abbr> Yes Yes Yes Yes Yes Consejos y notas Consejo:  El atributo de título global se puede usar en la etiqueta <abbr> para mostrar la versión completa de la abreviatura / acrónimo al pasar el mouse sobre el elemento <abbr>. Difere...
Leer más

HTML < a > tag

-
HTML  <a>  día ❮ Referencia HTML completa anterior Siguiente  ❯ Ejemplo Un enlace a W3Schools.com: < a  href ="https://www.w3schools.com" > Visit W3Schools.com! < /a > Pruebelo usted mismo » More "Pruebelo usted mismo" examples below. Definición y uso La etiqueta <a> define un hipervínculo, que se usa para vincular de una página a otra. El atributo más importante del elemento <a> es el atributo href, que indica el destino del enlace. Por defecto, los enlaces aparecerán de la siguiente manera en todos los navegadores: Un enlace no visitado está subrayado y azul Un enlace visitado está subrayado y morado Un enlace activo está subrayado y rojo Soporte del navegador Element <a> Yes Yes Yes Yes Yes Consejos y notas Sugerencia:  los siguientes atributos: descarga, hreflang, medios, rel, destino y tipo no pueden estar presentes si el atributo href no está presente. Consejo:  Normalmente,...
Leer más

Visitas a este blog