Hogar › Teléfono › Lista sin etiquetar html. Listas anidadas con numeración automática

Lista sin etiquetar html. Listas anidadas con numeración automática

Hay dos tipos de listas en HTML: numeradas y no numeradas. Su creación es casi la misma. Incluso las etiquetas difieren en un carácter. También puede crear, que pueden incluir tanto números como marcadores.

Estas listas se pueden transformar de la forma que desee. Todo depende de tu imaginación. Primero, veremos listas estándar, al igual que en el editor de Word, y luego las mejoraremos y las diseñaremos más allá del reconocimiento.

Lista numerada HTML

Se puede crear uno numerado normal utilizando las siguientes etiquetas:

Primer elemento de la lista

Segundo elemento de la lista

Tercer elemento de la lista

Las listas simples se ven así

Según los estándares, cada elemento de la lista debe estar dentro de una etiqueta li de apertura y cierre. Pero si no pones la etiqueta de cierre el resultado será exactamente el mismo. El procesador es bastante inteligente. Durante la conversión de la lista, analiza las etiquetas de apertura. Si ve uno nuevo

, luego automáticamente se pone delante de él

Por lo tanto, se pueden hacer listas como se muestra a continuación.

Pero desde el punto de vista de los profesionales esto es incorrecto.

Las listas sin numerar (o con viñetas) se crean de la misma manera, solo que en lugar de la etiqueta ol, se escribe ul.

No hay números ni letras, sólo varios símbolos llamados marcadores.

Lista numerada de varios niveles HTML

Muchos usuarios están interesados en esta oportunidad. Por lo tanto, cabe señalar que cualquier lista HTML numerada se puede convertir en multinivel. Los niveles adicionales pueden ser iguales o estar etiquetados.

Para crear la lista que se muestra en el ejemplo anterior, debe escribir lo siguiente.

Tenga en cuenta que en este código, a diferencia de los primeros ejemplos, se agrega el atributo de tipo. Gracias a él, puede especificar el tipo de clasificación tanto para listas numeradas como con viñetas.

Para los numerados indicamos el alfabeto o tipo de números, y para el resto de casos, el tipo de marcador.

Si utiliza una etiqueta HTML especial, la lista numerada puede convertirse en lo que desee.

Puede especificar el atributo de tipo con cualquier valor de la tabla. O en la clase de estilo CSS, especifique el tipo de estilo de lista con el tipo de clasificación deseado.

La traducción de valores es bastante sencilla. Con conocimientos básicos de inglés es suficiente. Pero incluso si no puede traducir las palabras "círculo", "cuadrado", etc., puede comprender visualmente cuál será el resultado al especificar estos valores en el atributo de tipo.

Para listas numeradas, utilice las siguientes opciones:

1 - números arábigos;
A - letras mayúsculas;
a - letras latinas minúsculas;
I - números romanos mayúsculas;
i - números romanos en minúscula.

El valor predeterminado es siempre una lista con Es decir, si no especifica nada, es lo mismo que type="1".

Además, las listas numeradas pueden comenzar en cualquier posición deseada. De forma predeterminada, la salida comienza desde 1. Pero si lo desea, puede comenzar al menos desde cien. Para hacer esto, debe especificar el atributo de inicio con cualquier valor.

Además, puedes sacar la conclusión en orden inverso. Para hacer esto necesitas escribir al revés.

Diseño de listas

Una lista numerada en HTML se puede diseñar de manera tan hermosa que es posible que no te des cuenta de inmediato de que se trata de una lista normal y no de una imagen hecha en Photoshop.

A continuación se muestran ejemplos de hermosas listas.

Como puede verse en el ejemplo, puede cambiar la apariencia de la numeración y de los propios elementos.

Puede crear una lista normal como esta.

En los estilos CSS necesitas especificar el diseño de las etiquetas ol. Tenga en cuenta que en este caso la configuración se aplicará a todas las listas del sitio donde se utiliza este archivo de estilo.

Consideremos primero la opción con un diseño de lista redonda. Volver al código de lista. Allí se indica la lista redondeada de clases. Esta es la clase con la que necesitas jugar para crear tanta belleza. Puedes nombrar la clase como quieras.

Ahora veamos el diseño cuadrado.

Los estilos son bastante similares. La diferencia es que en el primer caso el elemento se redondea utilizando las capacidades de CSS.

Un maquetador profesional debe anticipar y comprender que no todos los usuarios utilizan computadoras modernas. No todo el mundo tiene instalado Windows 7, 8, 10. Hay un porcentaje de usuarios que todavía tienen Windows XP y utilizan versiones antiguas del navegador Internet Explorer.

Como regla general, casi todas las mejoras modernas en el diseño de elementos no están respaldadas por ellos. Al usuario le parecerá que no se ha realizado ningún trabajo en el diseño del sitio. Que todo se ha alejado. Los elementos chocan entre sí. Para evitar esto, es necesario considerar todas las opciones.

Algunos webmasters hacen la vista gorda ante ellos a medida que su participación en el mercado moderno se hace cada vez más pequeña. Pero para un profesional, cada visitante es importante, especialmente si se trata de un sitio comercial.

Haga algo adecuado para todos o tenga en cuenta todas las variaciones del navegador.

Las listas se utilizan activamente para la numeración automática de bloques de contenido. Sin embargo, cuando se utilizan listas anidadas, es imposible obtener la numeración de subcláusulas como 1.1, 1.2, 1.3, ya que cada lista será independiente. Pero lo que no es posible en SHTML se puede asignar a estilos.

Primero, veamos cómo crear listas anidadas en general. El contenedor principal es la etiqueta.

. La lista anidada también comienza con

, así es como se mantiene la sintaxis correcta (ejemplo 1).

Ejemplo 1: lista anidada normal

lista anidada

Punto 1
1. Subcláusula 1.1
2. Subcláusula 1.2
3. Subcláusula 1.3

Punto 2
1. Subcláusula 2.1
2. Subcláusula 2.2

El resultado de este ejemplo se muestra en la Fig. 1. Tenga en cuenta que la numeración de las listas anidadas comienza de nuevo cada vez.

Arroz. 1. Vista de lista anidada

Ahora eliminemos la numeración de listas incorporada y creemos una nueva, pero en la forma que necesitamos. Para hacer esto, necesita tres atributos de estilo: contador-reinicio, contador-incremento y contenido.

reinicio del contador: establece una variable que almacenará el valor del contador;

incremento de contador: aumenta o disminuye el valor del contador en el número especificado;

contenido: imprime el valor del contador cuando se utiliza el argumento del contador (variable). Funciona en conjunto con los pseudoelementos posteriores o anteriores.

Para la lista de primer nivel, llamemos a la variable de contador list1, y para el segundo nivel, list2. Entonces el inicio de contadores por listas será el siguiente.

OL (reinicio del contador: lista1;) /* Lista de primer nivel */
OL OL (reinicio del contador: lista2;) /* Lista de segundo nivel*/

En este caso, los selectores de contenido ayudan a separar la lista anidada de la lista externa. La construcción OL OL significa aplicar estilo solo a la etiqueta.

El valor del contador se incrementa a través del selector OL LI:before, al que se agregan los atributos de contraincremento y estilo de contenido. El atributo de incremento de contador con el valor lista1 incrementa el valor de este contador en uno, y el contenido: contador(lista1) "." muestra el valor del contador antes del elemento de la lista. Estos atributos funcionan en pares, por lo que deben habilitarse simultáneamente.

OL LI: antes ( /* Lista de primer nivel */
contraincremento: lista1;
/* Genera el valor como 1., 2.*/
}
OL OL LI:antes ( /* Lista de segundo nivel */
contraincremento: lista2; /* Aumenta el valor del contador */
}

Para una lista anidada, volvemos a usar selectores de contenido (OL OL) y al mismo tiempo usamos la salida del contador list1 y list2, en este caso obtendremos la numeración del tipo que necesitamos.

El código final se muestra en el Ejemplo 2.

Ejemplo 2. Listas anidadas con numeración automática

lista anidada

Párrafo
1. Subcláusula
2. Subcláusula
3. Subcláusula

Párrafo
1. Subcláusula
2. Subcláusula

El resultado de este ejemplo se muestra en la Fig. 2.

Arroz. 2. Tipo de numeración automática de listas en el navegador Opera

Comentario

El ejemplo dado no funciona en el navegador Internet Explorer hasta la versión 7 inclusive, ya que no admite ninguna de las propiedades de estilo dadas.

Dado que el navegador Internet Explorer no admite muchos atributos de estilo interesantes, la numeración habitual en las listas debe dejarse intacta especialmente para él. Para hacer esto, elimine list-style-type: none . Pero esto también afectará a otros navegadores en los que el ejemplo funciona correctamente, por lo que tendrá que utilizar un truco, es decir, una técnica en la que a diferentes navegadores se les asigna un código de estilo diferente. Por ejemplo, puede utilizar la etiqueta! Importante. Agregar !important al valor de un atributo de estilo aumenta su importancia. Si redefine el mismo atributo sin !important , los navegadores lo ignorarán. Pero no en Internet Explorer versión 6 y anteriores.

LI (
tipo de estilo de lista: ninguno! Importante; /* Eliminar numeración en los navegadores Opera, Safari, Firefox */
tipo de estilo de lista: decimal; /* Dejar numeración en navegador IE6 e inferiores */
}

Reemplazando estos códigos con la cadena con el selector LI en el ejemplo 2, obtenemos una lista anidada que funciona correctamente en todos los navegadores.

- 4,5 sobre 5 basado en 2 votos

Muy a menudo, cierta información de un sitio web debe presentarse en forma de listas.

Las listas le permiten organizar y sistematizar información diversa y presentarla al visitante de una forma conveniente.

Las listas en HTML vienen en tres variedades: listas con viñetas, listas numeradas y listas de definiciones. Veamos cómo crearlos en orden.

Lista con viñetas.

Este tipo de lista se utiliza con mayor frecuencia. La lista con viñetas en HTML se crea usando etiquetas

. En este caso, se agrega un marcador frente a cada elemento de la lista de forma predeterminada; es un marcador en forma de círculo; Usando etiquetas, se crea un contenedor, dentro del cual se encuentran los elementos de la lista: .

El código de la lista con viñetas se verá así:

Esta opción es
esta opción
Este tipo de opción

También puedes intentar crear una página HTML usando este código, el resultado será la siguiente lista:

Como puede ver, cada elemento de la lista se coloca en una nueva línea, con ciertas sangrías creadas a la izquierda, arriba y abajo. Cada elemento de la lista comienza con un marcador; el marcador puede ser un círculo relleno (usado de forma predeterminada), un círculo o un cuadrado. en la etiqueta

disco - círculo;
círculo - círculo;
cuadrado - cuadrado.

El valor del disco es el predeterminado.

Un ejemplo de creación de una lista con viñetas con marcadores circulares:

Esta opción es
esta opción
Este tipo de opción

Como resultado, la lista tomará la siguiente forma:

Crear una lista con viñetas con marcadores cuadrados:

Esta opción es
esta opción
Este tipo de opción

La lista se verá así:

El atributo de tipo se puede aplicar a más que solo una etiqueta

. De esta manera puedes crear una lista con una variedad de viñetas.

Esta opción es
esta opción
Este tipo de opción

El resultado será el siguiente:

Listas numeradas.

Las listas numeradas en HTML son listas en las que cada elemento tiene un número de serie. Las listas numeradas se crean mediante una etiqueta;

primera linea
Segunda linea
Tercera línea

La lista se ve así:

Por defecto, la numeración está en números arábigos. Pero la etiqueta

A continuación se detallan versiones abreviadas del código y el tipo de numeración que puede haber en un caso u otro.

Vista de lista:

Numeración en letras minúsculas del alfabeto latino:

Vista de lista:

Lista de definiciones en HTML.

Un tipo especial de lista son las listas de definiciones. Se diferencian en que cada elemento de la lista consta de dos elementos, un término y un texto que revela su significado. Estas listas se crean usando etiquetas.

. Etiqueta

establece el término y la etiqueta

descripción o definición de un término.

Esta lista está escrita de la siguiente manera:

Término 1: Definición 1
Término 2: Definición del término 2
Término 3: Definición 3

El resultado será la siguiente lista:

Como puede ver, esto crea una sangría adecuada para el término y el texto de definición.

Listas anidadas o multinivel en HTML.

A veces es necesario anidar otra lista dentro de un elemento de cierto tipo de lista. HTML le permite incrustar ilimitadamente algunas listas en elementos de otras listas.

Por ejemplo, aquí se muestra un código que anida listas numeradas dentro de elementos de lista con viñetas.

Esta opción es
1. primera linea
2. Segunda linea
3. Tercera línea
esta opción
1. primera linea
2. Segunda linea
3. Tercera línea
Este tipo de opción
1. primera linea
2. Segunda linea
3. Tercera línea

Las listas numeradas son una colección de elementos con sus números de serie. El tipo y tipo de numeración depende de los atributos de la etiqueta.

como se muestra a continuación.

primer punto
Segundo punto
Tercer punto

Si no especifica ningún atributo adicional y simplemente escribe la etiqueta

Ejemplo 11.3. Crear una lista numerada

lista numerada

trabajando con el tiempo

crear puntualidad (nunca llegarás tarde a nada);
cura para la puntualidad (nunca tendrás prisa);
cambio en la percepción del tiempo y los relojes.

El resultado de este ejemplo se muestra en la Fig. 11.3.

Arroz. 11.3. Vista de lista numerada

Tenga en cuenta que una lista numerada también agrega sangría automática en la parte superior, inferior e izquierda del texto.

Los siguientes valores pueden servir como elementos de numeración:

Números arábigos (1, 2, 3,...);
letras latinas mayúsculas (A, B, C, ...);
letras latinas minúsculas (a, b, c, ...);
números romanos mayúsculas (I, II, III, ...);
Números romanos en minúscula (i, ii, iii, ...).

Para indicar el tipo de lista numerada, utilice el atributo tipo de la etiqueta

Tipo de lista	código HTML	Ejemplo
números arábigos		1. Cheburashka 2. Cocodrilo Gena 3. Shapoklyak
Letras mayúsculas del alfabeto latino.		A. Cheburashka B. cocodrilo gena C. Shapoklyak
Letras minúsculas del alfabeto latino.		a. Cheburashka b. Gena cocodrilo do. shapoklyak
Números romanos en mayúsculas.		I. Cheburashka II. Gena cocodrilo III. shapoklyak
Números romanos en minúsculas.		i. Cheburashka ii. Gena cocodrilo III. shapoklyak

Para iniciar una lista con un valor específico, use el atributo de inicio de la etiqueta

Ejemplo 11.4. Numeración de listas

numeros romanos

Rey Magnum XLIV
Rey Sigfrido XVI
Rey Segismundo XXI
Rey Husbrandt I

El resultado de este ejemplo se muestra en la Fig. 11.4.

Arroz. 11.4. Lista numerada con números romanos.

HTML proporciona un conjunto especial de etiquetas para presentar información en forma de listas. Las listas son una de las formas de presentación de datos más utilizadas, tanto en documentos electrónicos como impresos. Nos encontramos con listas casi todos los días: podría ser una lista de compras necesarias en una tienda, estudiantes en una clase o simplemente cosas que hay que hacer. La capacidad de organizar estructuras de listas está disponible en muchos editores de texto; en particular, el potente procesador de textos Microsoft Word tiene herramientas convenientes para formatear listas de varios tipos (las posibilidades de crear listas HTML usando Microsoft Word se analizan en el Capítulo 8). A continuación se muestran algunos casos en los que el uso de listas resulta bastante conveniente:

Combinar piezas de información en una sola estructura para crear una apariencia legible.
Descripción de procesos complejos paso a paso.
Una disposición de la información en estilo tabla de contenido, con párrafos que apuntan a secciones relevantes del documento.

Tenga en cuenta que los puntos anteriores están organizados con precisión en forma de estructura de lista.

HTML proporciona los siguientes tipos principales de listas: lista con viñetas, numerada y de definición. Las siguientes etiquetas se utilizan para implementar listas de varios tipos:

, , . Utilizando varios tipos de listas integradas en un documento, se pueden realizar una variedad de posibilidades, cuya descripción es el tema de este capítulo. Se consideran las características de la construcción de listas de varios tipos, así como el uso de listas anidadas.

Lista con viñetas

Uno de los tipos de listas implementadas en HTML es la lista con viñetas. De lo contrario, las listas de este tipo se denominan sin numerar o

desordenado. El apellido se utiliza a menudo como traducción formal del nombre de la etiqueta correspondiente.

En una lista con viñetas, se utilizan caracteres especiales llamados marcadores de lista para resaltar sus elementos (a menudo se les llama viñetas, que es la pronunciación formal del término inglés viñeta). La apariencia de los marcadores de lista la determina el navegador y, al crear listas anidadas, los navegadores diversifican automáticamente la apariencia de los marcadores en diferentes niveles de anidación.

Etiquetas

Y<LI >

Para crear una lista con viñetas, debe utilizar una etiqueta contenedora, dentro de la cual se encuentran todos los elementos de la lista. Las etiquetas de lista de apertura y cierre proporcionan un salto de línea antes y después de la lista, separando así la lista del contenido principal del documento, por lo que no es necesario utilizar etiquetas de párrafo aquí.

Cada elemento de la lista debe comenzar con una etiqueta.

(LI - Elemento de lista, elemento de lista). Etiqueta
no requiere etiqueta de cierre correspondiente, aunque en principio no está prohibida su presencia. Los navegadores suelen iniciar cada nuevo elemento de la lista en una nueva línea al mostrar un documento.

La información proporcionada es suficiente para construir una lista con viñetas básica. Pongamos un ejemplo de un documento HTML que utiliza una lista con viñetas, cuya visualización en el navegador se muestra en la Fig. 2.1.

Ejemplo de lista con viñetas
Arroz. 2.1. Visualización del navegador de la lista con viñetas

Tenga en cuenta que además de los elementos de la lista marcados con la etiqueta
, es posible que haya otros elementos HTML presentes. En el ejemplo anterior, uno de estos elementos es texto sin formato, que no es un elemento de la lista, pero desempeña la función de título.

Nota

Algunos libros de texto sobre lenguaje HTML indican que se debe utilizar una etiqueta de contenedor para establecer el título de la lista. (LH - Encabezado de lista, encabezado de lista). Actualmente, ningún navegador común reconoce esta etiqueta y no forma parte de la especificación HTML. Por tanto, su uso resulta inútil, aunque no dará lugar a errores.

en la etiqueta