Haga clic aquí para volver a la columna del tutorial Wulin.com HTML.
Arriba: lenguaje de marcado - punto de anclaje
Fuente original Capítulo 8 Hablemos nuevamente sobre la lista
Anteriormente en el primer capítulo, discutimos varias formas de marcar listas, estudiando los beneficios de marcarlas como listas desordenadas con <ul> y <li>. Este método puede identificar la estructura de la lista, asegurarse de que todos los navegadores y dispositivos puedan mostrar correctamente su contenido, y también permitirnos agregarle varios estilos con CSS.
En varios entornos, no es difícil llenar todo el libro escribiendo todas las prácticas de listas de marcado cuando se trata de problemas individuales. No planeo llenar todo el libro, pero planeo discutir varias otras categorías de listas en un capítulo independiente además de listas desordenadas. Investigue varias situaciones adecuadas para usar listas.
Las listas de verificación son una herramienta poderosa para organizar la estructura de la página, agregando significado a cada proyecto independiente, lo que le permite agregar estilos independientes más adelante en CSS.
Primero veamos la lista numerada de proyectos y dos formas de marcar tales listas. Tal vez pueda ver qué método es más beneficioso de un vistazo, pero aún así explicaré este ejemplo en detalle nuevamente para enfatizar la importancia de la marca estructurada y usar las herramientas adecuadas para resolver problemas. ¿Cuál es la mejor manera de marcar una lista de proyectos numerados?
Supongamos que planea marcar una lista de pasos, cada proyecto tiene un número antes, estudiaremos dos métodos diferentes que pueden lograr este objetivo y explicarán por qué un cierto método es más aplicable. Método A: Orden en el caos
<ul>
<li> 1. Picar las cebollas. </li>
<li> 2. Saltee las cebollas durante 3 minutos. </li>
<li> 3. Agregue 3 clloves de ajo. </li>
<li> 4. Cocine por otros 3 minutos. </li>
<li> 5. Comer. </li>
</ul>
La lista anterior puede ser una de las peores recetas en el historial de cocina. Pero es bastante apropiado usarlo como un ejemplo simple, agregar un poco de sal y huevos podría ser mejor, o ... pase lo que pase, de vuelta al grano.
Método A Eligimos marcar estos pasos con una lista desordenada para obtener todos los beneficios que mencionamos en el Capítulo 1, agregamos estructura al contenido y sabemos que la mayoría de los navegadores, lectores de pantalla y otros dispositivos pueden manejar esta parte correctamente, y también podemos usar CSS para diseñarlo fácilmente, ¡lo cual es genial! Pero ... juegos digitales
Dado que esta es una lista numerada, agregamos números antes de cada proyecto y seguimos un período para identificar el orden de cada paso, pero ¿qué debemos hacer si necesitamos agregar nuevos pasos entre los pasos 2 y 3? Ahora necesitamos volver a numerar todos los artículos después de los nuevos pasos (manualmente). Esta lista no es una molestia, pero si está modificando una lista de 100 elementos, el proceso de modificación se volverá muy tedioso. Aparecen símbolos de puntos pequeños
Dado que marcamos la estructura en este ejemplo con una lista desordenada, veremos un pequeño símbolo de punto antes de cada proyecto numerado (como la Figura 8-1). Puede que te guste el pequeño símbolo de punto. Si no le gusta, por supuesto, puede eliminarlo a través de CSS, pero definitivamente verá estos pequeños símbolos de puntos al navegar por esta lista sin usar CSS.
Figura 8-1, Resultados del método de lectura CSS de cierre de navegador a
Hay un método más simple, más significativo y más fácil de mantener. Echemos un vistazo al método B. Método B: Lista ordenada
<Ol>
<li> Pica las cebollas. </li>
<li> saltea las cebollas durante 3 minutos. </li>
<li> Agregue 3 clloves de ajo. </li>
<li> Cocine por otros 3 minutos. </li>
<li> comer. </li>
</ol>
Estoy seguro de que esto es lo que la mayoría de la gente elige hacer, pero esto no significa que no estamos utilizando el método A. <Ol> Por alguna razón para usar la lista ordenada, por lo que semánticamente usamos los elementos correctos para resolver el problema en nuestras manos. ¿Qué es más especial sobre el método B? Numeración automática
Tal vez encuentre que no tenemos que numerar manualmente cada elemento de lista. Al usar <OL>, generaremos automáticamente números en orden. Si nuestra lista de pasos contiene más de 100 elementos y necesitamos insertar algunos pasos nuevos en el medio, simplemente necesitamos insertar un nuevo elemento <li> en la posición correcta, y el navegador lo renumerará automáticamente, al igual que la magia.
Si utilizan el Método A, necesitamos corregir manualmente todos los números al insertar cada proyecto. Puedo pensar fácilmente en cualquier trabajo más interesante para hacer ...
La Figura 8-2, el efecto de la undécima versión del método de visualización del navegador B, agregó automáticamente un número antes de cada paso.
Figura 8-2 El efecto feliz del método de visualización del navegador B, Parte 2
Otra ventaja del método B es que cuando se rompa un elemento de lista larga, se sangrará después del número generado, mientras que el método A se plegará por debajo del número (Figura 8-3)
Figura 8-3 Comparación de la lista de nuevos efectos de línea del método A y el método B
Aunque los estilos de numeración preestablecidos de una lista ordenada suelen ser números árabes (1,2,3,4,5, etc.), podemos reemplazar el estilo de numeración utilizando el atributo de CSS de tipo List Style. El tipo de estilo de lista se puede seleccionar en uno de los siguientes: decimal: 1,2,3,4, ... (generalmente el valor preestablecido) Alpha superior: a, b, c, d ... alfa inferior: a, b, c, d ... superior-romana: i, ii, iii, iv ... inferior-romano: i, ii, ii, II, iv ... no numerando numeraciones
Entonces, por ejemplo, si queremos que el método B produzca un número romano de capital, podemos lograr el siguiente CSS:
ol li {
Tipo de estilo de lista: Superior-Roman;
}
La Figura 8-4 es el efecto de visualización del método B con este CSS en el navegador. Nuestra lista de pasos ya no es números árabes preestablecidos, sino que se reemplaza con números romanos. Por supuesto, las partes marcadas siguen siendo exactamente las mismas. ¿Has cambiado de opinión? Simplemente haga algunos pequeños cambios y cambie a otros estilos enumerados anteriormente, y puede cambiar inmediatamente el método de numeración de la lista a lo que le gusta.
Figura 8-4 Lista ordenada de interruptores a números romanos
Atributo de tipo HTML: antes, algunas personas pueden usar el atributo de tipo directamente en la etiqueta <Ol>, cambiando el método de numeración de la lista a números romanos, letras inglesas, etc. Sin embargo, para admitir las reglas CSS mencionadas anteriormente, no se recomienda usar el atributo de tipo desde el estándar HTML 4.01. Por lo tanto, ya no debe usar el atributo de tipo, debe usar CSS en su lugar.
Más tarde, en la extensión de la punta, peinaremos esta lista ordenada con CSS. Pero ahora veamos otro ejemplo de tipo de lista.
Página anterior 1 2 3 Página siguiente Lea el texto completo