CSS Pre Tag

Mientras trabajamos en las secuencias de comandos HTML para crear una página dinámica estática simple, podemos encontrar muchos párrafos o datos de texto con espacios y saltos de línea. Algunas de las etiquetas evitan el uso de espacios blancos adicionales y descansos de línea automáticos y toman todo el contenido como uno. Si bien es la posibilidad de que el contenido esté separado por líneas debido a una razón para crear las páginas más atractivas. Para evitar que las etiquetas HTML eliminen los espacios blancos y las roturas de línea, tenemos la etiqueta "pre" que se puede usar de muchas maneras para lograr este objetivo. Dentro de este artículo, discutiremos todas las formas posibles de usar la etiqueta "pre" para fines particulares.

Ejemplo 01:

Comencemos con el primer ejemplo de nuestro artículo. Necesitamos iniciar este ejemplo de código HTML con el uso de la etiqueta básica "HTML". La etiqueta de la cabeza continúa con el uso de una etiqueta de título, yo.mi. "CSS pre". Para comprender completamente el script HTML, primero debemos mirar la sección del cuerpo de nuestra página web. El encabezado del tamaño 1 se inicializa dentro del cuerpo. Después de eso, se emite un elemento "div" para crear una nueva sección y agregarle otros elementos. Esta sección Div contiene un rumbo del tamaño 2. Después del encabezado, se utiliza una etiqueta de tramo para crear un nuevo tramo dentro de la sección "Div". Este tramo contiene datos de texto largos en él.

Después de todas estas oraciones, la etiqueta del tramo es seguida de cerca por el cierre de la etiqueta "Div". Se completa el cuerpo de nuestra página HTML. Después de esto, debemos echar un vistazo al estilo CSS de este código HTML dentro de la etiqueta de estilo. El elemento de la span se usa para diseñarlo en consecuencia. El atributo "White-Space" se usa con el valor "pre". El atributo de valor "pre" se usa aquí para preservar todos los espacios y descansos de línea que el elemento "SPAN" contiene dentro de él. Después de eso, la familia de fuentes se establece en monoespace, y la propiedad de visualización asigna el valor de "bloque". El tamaño de fuente se establece en 20 píxeles con el color marrón. Mientras que el color de fondo está configurado en "Bisque". Hay otras familias de fuentes utilizadas en el estilo para ser utilizadas por este tramo. La etiqueta de cabeza está completa y podemos ejecutar nuestro código con el código VS.

La salida para esta página HTML dentro del navegador Chrome se da en la siguiente imagen. Puede ver que la página creó una nueva sección y agregó un elemento SPAN dentro de ella. El elemento SPAN contiene algunas líneas como contenido mientras la línea se rompe y los espacios se conservan debido al uso del atributo "pre" como un valor para la propiedad "espacio en blanco" de CSS.

Ejemplo 02:

Dentro del ejemplo anterior, hemos echado un vistazo al uso del atributo "pre" como el valor de la propiedad del espacio blanco. Ahora, lo usamos como una etiqueta en el archivo HTML. Comenzamos este ejemplo con el mismo formato de etiqueta HTML, cabeza y cuerpo. Dentro de la etiqueta del cuerpo de este código de ejemplo, utilizamos el encabezado simple del tamaño 1 seguido de la etiqueta "pre" que contiene un contenido de texto muy grande en él. Este contenido contiene descansos y espacios de línea entre las palabras.

Después de esto, utilizamos otro encabezado del tamaño 1 para afirmar que el preelemento contiene el ancho y la altura fijos. El elemento "div" se usa aquí para crear una nueva sección después del encabezado. La etiqueta de estilo se utiliza dentro de la etiqueta de apertura "div" para diseñar la sección "div" a un ancho de 300 píxeles, desbordamiento establecido en autos, altura de 200 píxeles y un color de fondo de verde claro. Esta sección "div" contiene una etiqueta "pre" dentro de ella para mostrar un conjunto de líneas de una manera de estilo bastante diferente en lugar de usar algunas líneas de texto como contenido. Este contenido de etiqueta "pre" de estilo se muestra en la siguiente imagen. La etiqueta previa y la etiqueta "Div" están cerradas aquí.

Después de eso, cerramos las etiquetas "cuerpo" y "html" porque este código no contiene ningún estilo más que los conceptos básicos que ya proporcionamos en línea en línea. Este código está listo para ser ejecutado en el código de Visual Studio utilizando la opción "Ejecutar".

La salida de este código HTML se muestra a continuación en la siguiente imagen. Muestra claramente el uso de la etiqueta previa estándar en las líneas simples de textos que contienen los espacios. Los descansos muestran el texto del contenido como lo es sin un solo cambio de carácter. Además, el uso del ancho y la altura fijos para la sección "div" no evita que la etiqueta "pre" muestre sus datos tal como es. Después del encabezado 2, el fondo verde con barra de desplazamiento muestra los mismos datos de estilo que se especifican con la etiqueta "pre".

Ejemplo 03:

Tengamos nuestro último ejemplo de este artículo que contiene una etiqueta previa. El código HTML comienza con el mismo formato: la etiqueta HTML y la etiqueta de cabeza después de la etiqueta "Título" para darle a una página HTML un nuevo nombre. Luego, el uso de una etiqueta corporal para agregar algunos elementos que se mostrarán en la pantalla del navegador. Después de usar la etiqueta de la cabeza, usamos el encabezado del tamaño 1 en el cuerpo de una página HTML. La etiqueta de la figura se utiliza antes del uso de la etiqueta "pre". La etiqueta previa está diseñada con el fondo marrón, el color de texto blanco, un ancho de 600 píxeles, un relleno de 10 píxeles y un tamaño de fuente de 16 píxeles a través del estilo en línea.

Agregamos el signo menos y mayor que la página HTML usando los caracteres de palabras clave como LT, GT y la forma de una vaca creada por algunos caracteres especiales junto con algunos textos. La etiqueta previa ahora está completa e inicializamos la etiqueta "Figcaption" para subtitular la forma que formamos dentro de la etiqueta previa. La ID para la etiqueta de Caption de Fig se especifica como "Caption de la vaca" y contiene 2 líneas de datos con algunos espacios y saltos de línea. La etiqueta de la figura, la etiqueta del cuerpo y las etiquetas HTML están cerradas después de eso. Usamos este código en el código VS para ejecutarlo.

La salida muestra que el encabezado está separado de la sección "Div" separada. Esta sección Div contiene una forma de vaca con fondo marrón y la leyenda dada al final de esta figura similar a la imagen. Los espacios se eliminan de la leyenda.

Conclusión

Este artículo trata sobre el uso de las etiquetas previas dentro del código HTML de varias maneras para permitir que los saltos y espacios de la línea por cualquier motivo. Intentamos algunos ejemplos para demostrar su uso en la más fácil y la mejor manera posible. Intentamos utilizar la palabra clave "pre" como el valor de atributo de la propiedad del espacio blanco dentro de uno de nuestros ejemplos. Dentro del resto de los ejemplos, lo probamos como una etiqueta separada para demostrar su trabajo de manera más clara y eficiente.