Cómo Obtener El Valor De La Etiqueta P En Javascript

| | | | | | | | | | | | | | | | | | | | | | | | | | |

El HTML "span" La etiqueta le permite aplicar estilos a una parte de una página web o un párrafo. A menudo se utiliza para estilizar el texto de un párrafo, por ejemplo, cambiando el color de una palabra. La etiqueta "span" La etiqueta por defecto no tiene estilos.

Cuando esté programando en HTML, puede decidir que desea aplicar un estilo a algo especìfico en su página web. Por ejemplo, es posible que desee enfatizar una determinada palabra en una oraciòn o un vìnculo especìfico en una lista de vìnculos.

Ahì es donde viene la etiqueta HTML "span" in. "span" es un contenedor en lìnea genérico que le permite redactar contenido en un documento web. La etiqueta "span" se utiliza habitualmente con fines de estilo & mdash; especialmente para aplicar estilos al texto.

Este tutorial explicará, con ejemplos, còmo utilizar HTML "span & gt ; para dise√±ar elementos en una página web. Al final de la lectura de este tutorial, será un experto en el uso de la etiqueta HTML "span".

HTML "span" Etiqueta

La etiqueta HTML "span" etiqueta manipula parte de una página web. A menudo se utiliza dentro de una etiqueta "p" elemento para aplicar estilos a una parte especìfica de un párrafo. Por ejemplo, puede utilizar "span" para cambiar el color de una palabra en un párrafo.

Por sì misma, la etiqueta "span" no tiene representaciòn ni valores predeterminados. Esto significa que si usa la etiqueta sin ning√∫n atributo, no tendrá ning√∫n efecto en còmo se representa su página web.

La etiqueta "span" se usa a menudo con CSS para aplicar un cierto estilo a un elemento o elementos especìficos en una página web. "span" le facilita la aplicaciòn de un determinado estilo a varios elementos de una página web a la vez.

Sintaxis HTML "span"

La etiqueta HTML Span tiene una apertura ("span") y un cierre ( "/ span"). Podemos utilizar la siguiente sintaxis para utilizar la etiqueta "span":

La etiqueta HTML "span" no tiene etiqueta -Atributos especìficos. Por ejemplo, la etiqueta "img" la etiqueta tiene " altura " y " ancho " como atributos especìficos de la etiqueta. "span" no tiene ninguno de estos tipos de atributos porque se basa en CSS para el estilo. La etiqueta "span" admite todos los atributos HTML globales .

Puede pensar en la etiqueta "span" etiqueta tan similar a "div" en ese "span" no tiene ning√∫n estilo especìfico en sì mismo. Pero, "div" Las etiquetas se utilizan para definir secciones y bloques de un texto porque "div" es un elemento de bloque. "span" se utiliza para aplicar estilos a partes especìficas de un documento, como un párrafo.

En la siguiente secciòn, veremos algunos ejemplos que ilustran còmo "span" funciona en HTML.

"span" Ejemplos de etiquetas HTML

Veamos algunos ejemplos de còdigo que utiliza la etiqueta "span" para dise√±ar elementos en lìnea en HTML. Nuestro primer ejemplo utilizará la etiqueta "span" en un párrafo; nuestro segundo ejemplo lo usará en una lista.

"span" HTML en un párrafo

Supongamos que estamos dise√±ando una página web para una panaderìa local & mdash; Pringle and Sons Bakery. Esta página web describirá la historia de la panaderìa. El propietario de la panaderìa, el Sr. Pringle, nos pidiò que enfatizáramos ciertos hechos clave con texto rojo.

Podrìamos usar el siguiente còdigo para realizar esta tarea:

Nuestro còdigo devuelve:

En nuestro ejemplo, enfatizamos los términos " deliciosos productos horneados " y "miles". El Sr. Pringle nos dijo que estos términos son importantes, por lo que ordenamos al programa que los muestre en rojo.

Definimos una cadena de texto dentro de Etiquetas "p" HTML . Este texto describe la historia de Pringle and Sons Bakery. Luego, incluimos los términos que queremos que aparezcan en rojo en las etiquetas "span".

En nuestro archivo CSS, especificamos que el color de cualquier elemento asignado a la clase redText debe ser rojo. Esto nos permite cambiar el color de nuestro texto a rojo cuando usamos la etiqueta "span class = " redText "".

La etiqueta "span & gt ; es √∫til en este caso porque solo querìamos enfatizar palabras particulares en nuestro texto. Podrìamos haber aplicado el estilo de texto rojo a la propia etiqueta "p". Pero eso habrìa resultado en un párrafo completo de texto rojo.

"span" HTML en una lista

Supongamos que Pringle and Sons Bakery nos pide que agreguemos una lista a su sitio web con enlaces a sus páginas de redes sociales.

The Bakery se√±alò que los enlaces a su Twitter y Las páginas de Facebook son especialmente importantes porque el equipo es más activo en esas plataformas. Entonces, quieren que resaltemos esos enlaces en texto azul claro.

Podrìamos usar el siguiente còdigo para realizar esta tarea:

Nuestro còdigo devuelve:

HfpJCIX4ycBUcStlx4EzsAWQzvWNJ 2CLshhieSA BtyOWUe420vh 0KC45uZlVS SsXrpfIP0XBg7turyR5LmnqyarvOug2yL6bfrpS7 KERmAAONXuh5Za9I6x4uL8r FjvWz3

En nuestro còdigo HTML, hemos creado una lista desordenada con el "etiqueta ; ul & gt. Esta lista tiene tres elementos, cada uno de los cuales está contenido en etiquetas "li".

Los elementos de la lista para Twitter y Facebook se incluyen en etiquetas HTML Span ("span class = " blue "" y "/ span"). La etiqueta de apertura de cada elemento de la lista especifica un atributo de clase. El valor del atributo de clase es " azul & rdquo ;.

Definimos un estilo llamado .blue que cambia el color de fondo de cualquier elemento al que se aplica a azul claro. Esto provocò el color de fondo de todos los enlaces con la clase CSS . azul en nuestro còdigo HTML para cambiar a azul claro.

El color de fondo asociado con nuestro enlace de Instagram no cambiò porque no incluimos el texto de ese enlace dentro de las etiquetas "span".

Conclusiòn

La etiqueta HTML "span" es un contenedor genérico que se utiliza para aplicar estilos a elementos especìficos en una página HTML. De forma predeterminada, la etiqueta "span" no hace nada, pero se puede usar en combinaciòn con CSS para aplicar estilos a los elementos.

Como desafìo, defina un "span & gt ; etiqueta que hace que una palabra en una oraciòn aparezca en letras may√∫sculas. Deberá utilizar una regla CSS para transformar el texto en may√∫sculas con su "span" etiqueta.

Este tutorial explica, con ejemplos, còmo utilizar la etiqueta HTML "span" en su còdigo. ¬°Ahora está listo para comenzar a usar la etiqueta "span" como un desarrollador web profesional!

Para obtener orientaciòn y asistencia sobre còmo aprender HTML, lea nuestra Guìa de còmo aprender HTML .