Etiqueta
Caracter stica principal de la etiqueta
Con la etiqueta
Atributos de etiqueta
- Qu es pre en HTML: concepto y caracter sticas
- Ventajas de usar la etiqueta pre en HTML
- C mo funciona la etiqueta pre en HTML
- Sintaxis de etiqueta pre en HTML
- Caracter sticas del formato de texto en la etiqueta pre
- Etiqueta pre y sangr a en marcado HTML
- Ejemplos de uso de la etiqueta pre en HTML
- Pregunta-respuesta
- Qu es pre en el marcado?
- C mo usar la etiqueta pre correctamente?
- Cu les son las caracter sticas de escribir c digo con una etiqueta pre?
- Es posible usar la etiqueta pre para formatear texto no solo en HTML?
Qu es pre en HTML: concepto y caracter sticas
Etiqueta
Principales caracter sticas del uso de la etiqueta
- Mantener el formato: todos los espacios y saltos de l nea insertados dentro de la etiqueta
- Fuente monoespaciada: texto dentro de la etiqueta
- Guardar espacios en blanco: etiqueta
Etiqueta
Por ejemplo, el uso de una etiqueta
Como resultado, la p gina web mostrar el siguiente c digo:
Etiqueta
Etiqueta
Ventajas de usar la etiqueta pre en HTML
La etiqueta pre en HTML se usa para Mostrar texto preformateado. Le permite Mostrar todos los caracteres y espacios exactamente como se escriben en el c digo fuente.
Una de las principales ventajas de usar una etiqueta pre es preservar el dise o, incluidas las sangr as, los espacios y los saltos de l nea. Este enfoque es especialmente til cuando se muestra el c digo fuente de los programas o se muestra texto que debe reproducirse exactamente en una p gina web.
Adem s, la etiqueta pre se puede utilizar para crear una lista estructurada. Para hacer esto, se pueden usar etiquetas ol (lista numerada) y ul (lista con vi etas) dentro de la etiqueta pre, y cada elemento de la lista se indica con una etiqueta li.
Datos 1
Datos 2
Datos 3
Por lo tanto, el uso de la etiqueta pre en HTML le permite conservar el formato del texto, crear listas y tablas estructuradas, facilita la visualizaci n del c digo fuente de los programas y otros datos de texto en una p gina web.
C mo funciona la etiqueta pre en HTML
La etiqueta pre se usa en HTML para Mostrar texto, manteniendo todos los espacios en blanco, saltos de l nea y otros espacios en blanco exactamente como se escriben en el c digo fuente.
Por lo general, cuando el navegador muestra texto, todos los espacios en blanco se comprimen en un solo espacio. Esto nos permite presentar el texto de una manera conveniente y legible sin tener que agregar muchos espacios manualmente.
Sin embargo, a veces necesitamos Mostrar el texto exactamente como est escrito en el c digo, manteniendo los espacios en blanco y los saltos de l nea. En este caso, la etiqueta pre nos ayudar .
Para usar la etiqueta pre, es suficiente envolver el texto deseado dentro de las etiquetas de apertura y cierre. Por ejemplo:
Hola mundo!
Este texto
se mostrar
sin cambios.
El resultado se ver a as :
Hola mundo!
Este texto
se mostrar
sin cambios.
La etiqueta pre se usa a menudo para Mostrar el c digo fuente de un programa o un archivo de texto con sangr a y formato. Esto puede ser til al crear documentaci n o ejemplos de c digo para el entrenamiento.
Sin embargo, vale la pena recordar que cuando se usa la etiqueta pre, todos los espacios en blanco se conservan, por lo que no se recomienda usarla para textos largos o grandes bloques de texto para evitar el desplazamiento horizontal de la p gina.
Sintaxis de etiqueta pre en HTML
La etiqueta pre en HTML se usa para Mostrar texto preformateado, conservando todos los espacios y saltos de l nea. Es til cuando desea Mostrar el c digo de un programa, dibujar gr ficos ASCII o Mostrar ejemplos de salida de texto mientras mantiene su formato original.
Un ejemplo del uso de la etiqueta pre se puede ver a continuaci n:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer nec odio.
Praesent libero.
Sed cursus ante dapibus diam.
Sed nisi.
Nulla quis sem at nibh elementum imperdiet.
- Duis sagittis ipsum.
- :
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer nec odio.
Praesent libero.
Sed cursus ante dapibus diam.
Sed nisi.
Nulla quis sem at nibh elementum imperdiet.
Duis sagittis ipsum.
Tenga en cuenta tambi n que dentro de la etiqueta pre se pueden usar etiquetas HTML, pero se mostrar n literalmente como en el c digo fuente. Para ello es necesario utilizar secuencias de escape.
La etiqueta pre se usa com nmente junto con las etiquetas para Mostrar c digo o tablas para mantener el formato del texto original. Por ejemplo, puede usar las etiquetas code y pre juntas para Mostrar el c digo del programa.
Tambi n se puede usar la etiqueta pre para Mostrar ejemplos de salida de texto que deben coincidir con el texto original. En este caso, generalmente se usa una fuente monoespaciada para que cada car cter ocupe la misma cantidad de espacio.
Caracter sticas del formato de texto en la etiqueta pre
Etiqueta pre (del Ingl s "preformatted text" "texto con formato predefinido") es una de las etiquetas de marcado HTML est ndar. Est dise ado para Mostrar texto con espacios en blanco, saltos de l nea y otros formatos especificados en el c digo fuente.
La caracter stica principal de una etiqueta pre es que todos los caracteres dentro de esa etiqueta se muestran "tal cual", sin conversi n previa de caracteres como:
lagunas;
saltos de l nea;
tabulaci n y otros caracteres de control.
- Esto hace que la etiqueta pre sea muy til para Mostrar el c digo fuente del software, as como para preservar el formato del texto, cuyo formato autom tico puede provocar cambios no v lidos.
- A diferencia de la etiqueta code, que se usa para resaltar fragmentos de c digo fuente dentro de otras etiquetas (por ejemplo, en la etiqueta p), la etiqueta pre est dise ada para Mostrar grandes bloques de texto, manteniendo el formato original del texto en s .
- Tambi n dentro de la etiqueta pre, todos los espacios, tabulaciones y saltos de l nea se consideran caracteres significativos. Esto significa que el c digo fuente dentro de la etiqueta pre se mostrar con la sangr a y la alineaci n preservadas. Sin embargo, esto puede causar problemas con la visualizaci n de l neas largas que pueden ignorar las restricciones de ancho de bloque y crear una barra de desplazamiento horizontal dentro de la etiqueta pre.
Si desea Mostrar el c digo fuente sin guardar los caracteres de salto de l nea o espacios al comienzo de cada nueva l nea, puede usar la etiqueta code dentro de la etiqueta pre.
La etiqueta pre se considera obsoleta en HTML5, sin embargo, sigue siendo ampliamente utilizada para Mostrar c digo de programa y otros fragmentos de texto que requieren el mantenimiento del formato.
Etiqueta pre y sangr a en marcado HTML
Uno de los principales casos de uso de la etiqueta pre es mapear espacios y sangr as en el c digo. A menudo, para el formato Visual de la sangr a en el texto del programa se utilizan espacios o un car cter de tabulaci n. Cuando dicho texto se muestra en etiquetas normales, todas las secuencias de espacios y tabulaciones se comprimen en un solo espacio y se imprimen sus entidades HTML para su visualizaci n. Sin embargo, al usar la etiqueta pre, los espacios y las pesta as se mostrar n exactamente como se especificaron en el c digo fuente.
function helloWorld() {
var msg = "Hello, world!";
console.log(msg);
Otra forma de agregar relleno en el marcado HTML es usar relleno dentro de las etiquetas. Para ello, puede utilizar la propiedad CSS-margin. Por ejemplo, para agregar sangr a a la izquierda de un elemento de la lista, puede establecer el valor correspondiente en la propiedad margin-left.
Ejemplo de uso de sangr a dentro de etiquetas:
Elemento de lista con sangr a a la izquierda
Elemento de lista normal
Otro punto de la izquierda
Como puede ver en los ejemplos, el uso de la etiqueta pre le permite mantener la estructura original del texto, incluidas las sangr as y los espacios en blanco, lo cual es especialmente til cuando muestra c digo de programa en una p gina web. Sin embargo, en la mayor a de los casos, se recomienda usar estilos CSS para agregar sangr a en el marcado HTML.
Ejemplos de uso de la etiqueta pre en HTML
Etiqueta
Nombre
1
Ivanov