Modificación detallada de varios formatos de fuente de páginas web HTML

Autor：Eve Cole Fecha de actualización：2025-06-07 00:48:02

Esta sección comienza con la modificación detallada del texto, lo que permite a los lectores comprender los cambios en varios formatos de fuentes de HTML y crear páginas web más profesionales.

4.2 Modificación de texto diversificada

En la sección anterior, aprendí varias configuraciones de grandes párrafos, que parecían más atractivos para el texto en sí. Esta sección comienza con la modificación detallada del texto, lo que permite a los lectores comprender los cambios en varios formatos de fuentes de HTML y crear páginas web más profesionales.

4.2.1 Etiquetas básicas para la configuración de estilo de texto: 

La etiqueta básica para configurar estilos de fuente es , y el texto contenido en ella es el área de acción de estilo. En la redacción del código HTML para principiantes, es fácilmente anidada por múltiples fuentes, como <Atributo Font 1 = Valor 1> Text . Otra situación es la desalineación de anidación de etiquetas, como text . Para estandarizar la escritura de código y evitar errores innecesarios, los lectores deben ser cautelosos al aprender.

4.2.2 Establezca el color del texto

El color es uno de los atributos de la etiqueta , que se usa para establecer el color del texto. Cree un archivo de página web en el directorio D:/ web/, llamado Font_Color.htm, y escriba el código como se muestra en el código 4.7.

Código 4.7 Configuración del color de fuente: Font_color.htm

<html>

<title> Configuración de color de fuente </title>

</ablo>

<Body>

Texto rojo claro: La esencia del aprendizaje HTML es usar lo que deba ser <r />

Texto carmesí: La esencia del aprendizaje HTML es usar lo que deba ser <r />

Texto verde claro: La esencia del aprendizaje HTML es usar lo que deba ser <r />

Texto verde oscuro: La esencia del aprendizaje HTML es usar lo que deba ser <r />

Texto azul claro: La esencia del aprendizaje HTML es usar lo que deba ser <r />

Texto azul oscuro: La esencia del aprendizaje HTML es usar lo que deba ser <r />

Texto amarillo claro: La esencia del aprendizaje HTML es usar lo que deba ser <r />

Texto amarillo oscuro: La esencia del aprendizaje HTML es usar lo que deba ser <r />

Texto de cian ligero: La esencia del aprendizaje HTML es usar lo que deba ser

Texto azul oscuro: La esencia del aprendizaje HTML es usar lo que deba ser <r />

Texto de color púrpura ligero: La esencia del aprendizaje HTML es usar lo que deba ser <r />

Texto púrpura profundo: La esencia del aprendizaje HTML es usar lo que deba ser <r />

</body>

</html>

Ingrese http: //localhost/font_color.htm en la barra de direcciones del navegador, y el efecto de navegación se muestra en la Figura 4.7.

Figura 4.7 Configuración de color de fuente

Los lectores no solo pueden aprender cómo se usa el atributo de color en la etiqueta de fuente del código 4.7, sino que también estará familiarizado con los métodos de representación de varios colores.

4.2.3 Establezca el tamaño del texto

El tamaño también es una propiedad de la etiqueta , que se utiliza para establecer el tamaño del texto. El valor del tamaño es 1-7, y el valor predeterminado es 3. Podemos agregar + y - caracteres antes del valor del atributo de tamaño para especificar el incremento o la disminución en relación con el valor inicial del tamaño de la fuente. Cree un archivo de página web en el directorio D:/ web/, llamado Font_Size.htm y escriba el código como se muestra en el código 4.8.

Código 4.8 Configuración del tamaño de fuente: font_size.htm

<html>

<title> Configuración de tamaño de fuente </title>

</ablo>

<Body>

El tamaño es 1: html aprendizaje <r />

El tamaño es 2: html aprendizaje <r />

El tamaño es 3: html aprendizaje <r />

El tamaño es 4: html aprendizaje <r />

El tamaño es 5: html aprendizaje <r />

El tamaño es 6: html aprendizaje <r />

El tamaño es 7: html aprendizaje <r />

</body>

</html>

Ingrese http: //localhost/font_size.htm en la barra de direcciones del navegador, y el efecto de navegación se muestra en la Figura 4.8.

Figura 4.8 Configuración del tamaño de la fuente

Los lectores pueden intentar agregar + y - caracteres antes del valor de tamaño para establecer el tamaño del texto de manera más flexible.

4.2.4 Establezca la fuente del texto

La cara también es una propiedad de la etiqueta , que se usa para establecer fuentes de texto (fuentes). Las fuentes que se muestran en las páginas web HTML se llaman desde el sistema de navegación, por lo que para mantener la fuente consistente, se recomienda usar la fuente de canciones, y las páginas HTML también usan la fuente de canciones de forma predeterminada. Cree un archivo de página web en el directorio D:/ web/, llamado font_face.htm, y escriba el código como se muestra en el código 4.9.

Código 4.9 Configuración de fuente de fuente: font_face.htm

<html>

<title> Configuración de fuente de fuente </title>

</ablo>

<Body>

La fuente es la fuente de la canción: Qinyuanchun · Changsha-mao zedong <r />

La fuente está en Kaishi: qinyuanchun · changsha-mao zedong <r />

La fuente es audaz: qinyuanchun · changsha-mao zedong <r />

La fuente es lishu: Qinyuanchun · Changsha-mao Zedong

</body>

</html>

Ingrese http: //localhost/font_face.htm en la barra de direcciones del navegador, y el efecto de navegación se muestra en la Figura 4.9.

Figura 4.9 Configuración de fuentes

El autor establece el tamaño de texto de la fuente modificada en el número 5 para que los lectores lo vean.

4.2.5 Haga que el texto se incline

El uso de etiquetas dobles puede inclinar el texto que se aplicará, logrando efectos especiales, como la fecha del artículo. se llama etiqueta de énfasis y en cursiva. Actualmente se usa con más frecuencia que las etiquetas . El método de escritura es el siguiente:

Este es texto en cursiva

Esto también es cursiva

4.2.6 Haz que el texto sea audaz

El uso de etiquetas dobles puede hacer que el texto se aplique en negrita, lo que hace que el texto sea más llamativo, como la parte del título del artículo. se llama un énfasis especial en las etiquetas, y también es audaz en el texto. Actualmente se usa con más frecuencia que las etiquetas . El método de escritura es el siguiente:

Este es un texto en negrita

Este también es texto en negrita

4.2.7 Subrayar el texto

Use etiquetas dobles para agregar subrayos al texto aplicado. El siguiente es un ejemplo completo de inclinación de texto, en negrita y subrayada. Cree un archivo de página web en el directorio D:/ web/, llamado Font_style.htm y escriba el código como se muestra en el código 4.10.

Código 4.10 Configuración de modificación de texto: font_style.htm

<html>

<title> Configuración de modificación de fuente </title>

</ablo>

<Body>

cursiva: qinyuanchun · Changsha-mao zedong <r />

Bold: Qinyuanchun · Changsha-Mao Zedong <r />

Subrayado: qinyuanchun · changsha-mao zedong

Entreño en negrita: qinyuanchun · Changsha-mao zedong

</body>

</html>

Ingrese http: //localhost/font_style.htm en la barra de direcciones del navegador, y el efecto de navegación se muestra en la Figura 4.10.

Figura 4.10 Configuración de modificación de fuentes

El autor establece todos los tamaños de texto en <Body> </body> al No. 5 para que los lectores lo vean.

- Nota: Cuando múltiples etiquetas contienen la misma pieza de texto, su orden de inclusión no puede ser desalineado.

4.2.8 Uso de múltiples estilos de título

En los artículos web, para resaltar la importancia del título, el estilo del título es relativamente especial. La tecnología HTML protege un conjunto de etiquetas de estilo para títulos, a saber, etiquetas dobles <h1> a <h6>, y los tamaños de texto representan diferentes niveles de títulos de grandes a pequeños. La etiqueta del título tiene una función, que es exclusiva de una línea, en negrita en el texto y se centra en el texto. De esta manera, es fácil establecer el título y puede establecer títulos de varios niveles. Cree un archivo de página web en el directorio D:/ web/, llamado Font_h.htm y escriba el código como se muestra en el código 4.11.

Código 4.11 Configuración del título: Font_h.htm

<html>

<title> Configuración del título </title>

</ablo>

<Body>

<h1> Título No. 1 </h1>

<h2> Título No. 2 </h2>

<h3> Título No. 3 </h3>

<h4> Título No. 4 </h4>

<h5> Título No. 5 </h5>

<h6> Título No. 6 </h6>

<h1> Magazine Fortune: ¿Por qué Google no cae después de su prosperidad? </h1>

<h3> Encuentro con problemas potenciales </h3>

& nbsp; & nbsp; & nbsp; & nbsp; Algunos expertos de la industria creen que Google puede disminuir después de un monopolio a largo plazo en el mercado de búsqueda y publicidad de Internet. ... Al mismo tiempo, los nuevos planes recientes de Google, como Open Mobile Alliance, la plataforma universal del sitio web de redes sociales Opensocial, y la posible inversión de miles de millones de dólares en ofertas para la banda de frecuencia inalámbrica, también se ha cuestionado ampliamente.

<h3> continuará monopolizando la búsqueda </h3>

& nbsp; & nbsp; & nbsp; & nbsp; Los artículos recientes dicen que si aparecen mejores motores de búsqueda, las personas se rendirán en Google sin dudarlo. Pero incluso si realmente hay mejores motores de búsqueda, Google aún puede mantenerse firme por un tiempo. ... En este caso, la velocidad del sitio web a menudo se convierte en la clave del resultado.

</body>

</html>

Ingrese http: //localhost/font_h.htm en la barra de direcciones del navegador, y el efecto de navegación se muestra en la Figura 4.11.

Figura 4.11 Configuración de título

4.2.9 Aprenda a manejar caracteres especiales en páginas web

En HTML, algunos caracteres tienen significados especiales, como <y> son los soportes de la etiqueta izquierda y cerrada, mientras que la etiqueta controla la visualización de HTML. La etiqueta en sí solo puede ser analizada por el navegador y no se puede mostrar en la página. Entonces, ¿cómo mostrar <y> en html? HTML especifica la forma de escribir algunos caracteres especiales que se mostrarán en las páginas web, como se muestra en la Tabla 4.1.

Tabla 4.1 Caracteres especiales en HTML

Símbolos especiales

Código HTML

Símbolos especiales

Código HTML

& lt;

™ (símbolo de marca registrada)

&comercio;

& gt;

® (símbolo de registro)

& reg;

(Medio ancho en inglés)

& quot;

&veces;

&secta;

&Copiar;

Cree un archivo de página web en el directorio D:/ web/, llamado String.htm, y escriba el código String.htm como se muestra en el código 4.12.

Código 4.12 Configuración de caracteres especiales: string.htm

<html>

<title> Configuración de caracteres especiales </title>

</ablo>

<Body>

<tamaño de fuente = 5>

Cómo mostrar etiquetas: & lt; html & gt;

Cómo mostrar citas: "Cotizaciones dobles de medio ancho en inglés"

Método de pantalla de marca registrada: & comercio;

Cómo mostrar los símbolos de registro: & reg; <r />

Cómo mostrar símbolos de derechos de autor: & Copy;

Show & sect;

Show & Times;

</body>

</html>

Ingrese http: //localhost/string.htm en la barra de direcciones del navegador, y el efecto de navegación se muestra en la Figura 4.12.

Figura 4.12 Configuración de caracteres especiales

- Descripción: Los símbolos deben mostrarse por separado y deben usarse con código & amp;.

4.2.10 Cómo ignorar más convenientemente el análisis del navegador de algunos HTML

Si hace un ejemplo de código HTML similar a este libro en una página web, es posible que deba convertir todo <y> en & lt; Y parecerá más problemático. <Sintext> y <xmp> </xmp> en el código HTML pueden resolver fácilmente este problema.

<MaintExt> es una sola etiqueta. Cuando se inserta en el código HTML, todas las etiquetas HTML después de él no son válidas. Es decir, el navegador no analiza todas las etiquetas HTML después de <Maintext> y las muestra directamente en la página.

<xmp> </ xmp> es una etiqueta doble, que solo invalida las etiquetas en el contenido que contiene, y el uso de <xmp> </ xmp> es más común. Cree un archivo de página web en el directorio D:/ web/, llamado html.htm, y escriba el código como se muestra en el código 4.13.

Código 4.13 Ignorar la configuración de las etiquetas: html.htm

<html>

<title> Ignorar la configuración de las etiquetas </title>

</ablo>

<Body>

<h2> Qinyuanchun · Changsha </h2>

<xmp> Independiente del frío otoño, Vaya al norte del río Xiangjiang , la cabeza de la isla Orange. Mira las montañas rojas y los bosques están teñidos; El río es verde y claro, y cientos de barcos compiten por la corriente. </xmp>

Las águilas golpean el cielo, los peces nadan en el fondo poco profundo, y todo tipo de especies compiten por la libertad en el cielo de las heladas. Cuando estoy triste por la vasta tierra, ¿quién es responsable de los altibajos?

Traje a cientos de parejas a viajar, y recordé los últimos años gloriosos. Los compañeros de clase son jóvenes, en su mejor momento; El erudito está lleno de entusiasmo y coraje. Dígale al país e inspire palabras, El estiércol de la tierra era de diez mil hogares en ese entonces. ¿Alguna vez has recordado que cuando golpeas el agua en el medio, las olas dejarán de volar barcos?

</body>

</html>

Ingrese http: //localhost/string.htm en la barra de direcciones del navegador, y el efecto de navegación se muestra en la Figura 4.13.

Figura 4.13 Ignorar la configuración de las etiquetas

4.2.11 Otros métodos de modificación de texto

Para satisfacer las necesidades de diferentes campos, HTML tiene otras etiquetas que modifican el texto. Los más utilizados son las etiquetas de formato SuperScript y las etiquetas de formato de subíndice. En algunos casos, incluso debe usar el efecto de eliminación, y puede usar la etiqueta HTML de escritura media.

- La etiqueta de formato SuperScript es la etiqueta doble <up> </up>, que se usa principalmente para representar exponentes matemáticos, como el medidor cuadrado o cúbico de cierto número.

- La etiqueta de formato de subíndice es la etiqueta doble , que se usa principalmente para la anotación y la representación básica matemática.

-La etiqueta de puntuación media es la doble etiqueta <factor> </strike>, que se usa principalmente para efectos de eliminación.

Cree un archivo de página web en el directorio D:/ web/, llamado otro.htm y escriba el código como se muestra en el código 4.14.

Código 4.14 Otra configuración de etiqueta de modificación: OTRO.htm

<html>

<title> Otras configuraciones para modificar etiquetas </title>

</ablo>

<Body>

<tamaño de fuente = 5>

Qinyuanchun <up> Changsha !

Representación del índice matemático: 2 <up> 3 </up> = 8, 100 <up> 2 </up> = 10000 <hr />

Qinyuanchun Changsha !

Representación de números básicos matemáticos: Log 3 81 = 4, log 5 125 = 3 <hr />

Efecto de deleción: <Bitle> Fui eliminado </title>

</body>

</html>

Ingrese http: //localhost/other.htm en la barra de direcciones del navegador, y el efecto de navegación se muestra en la Figura 4.14.

Figura 4.14 Configuración de otras etiquetas de modificación