Ejemplo de código HTML: explicación detallada de hipervínculos

Autor：Eve Cole Fecha de actualización：2025-06-11 12:32:01

Los hipervínculos son elementos HTML que se usan con frecuencia en sitios web, porque varias páginas del sitio web están compuestas de hipervínculos, y los hipervínculos completan el salto entre páginas. Los hipervínculos son los principales medios de interacción entre los espectadores y los servidores, y el aprendizaje se profundizará gradualmente en las tecnologías posteriores. Hiperenlace

- Nota: las imágenes también se pueden usar como enlaces, y aprenderá en detalle las imágenes en la próxima página web del capítulo.

4.5.1 Agregar enlaces al texto

La etiqueta de un hipervínculo es <a> </a>, agregar un hipervínculo al texto es similar a otras etiquetas modificadas. El texto después del enlace tiene su propio estilo especial para distinguirlo de otros textos. El estilo de enlace predeterminado es el texto azul y subrayado. El hipervínculo se redirige a otra página, y la etiqueta <a> </a> tiene un atributo HREF que es responsable de especificar la dirección de la nueva página. La dirección especificada por HREF generalmente usa la dirección relativa.

- Nota: en el desarrollo del sitio web, los documentos se usan más comúnmente en relación con las direcciones.

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

Código 4.18 Configuración de hipervínculos: A.HTM

<html>

<title> Configuración de hipervínculos </title>

</ablo>

<Body>

<tamaño de fuente = 5>

<a href = ul_ol.htm> Ingrese la página de configuración de la lista </a>

</body>

</html>

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

Figura 4.19 Configuración de hipervínculo

Los lectores pueden ver el estilo predeterminado del hipervínculo en la Figura 4.19. Cuando hace clic en el enlace en la página, la página saltará a la página UL_OL.HTM en el mismo directorio, es decir, la página de configuración de la lista en la sección anterior. Cuando hace clic en el botón Atrás del navegador y regresa a la página A.HTM, el color del enlace de texto se vuelve púrpura, que le dice al espectador que este enlace ha sido visitado.

4.5.2 Modificar el método de apertura de la ventana del enlace

Por defecto, la forma en que Hyperlinks abren nuevas páginas es auto-Overlay. Dependiendo de las diferentes necesidades del espectador, los lectores pueden especificar otras formas de abrir nuevas ventanas para el hipervínculo. La etiqueta Hyperlink proporciona el atributo de destino para la configuración, con valores como _Self (Self Overwrite, Default), _Blank (cree una nueva ventana para abrir una nueva página), _TOP (abierto en toda la ventana del navegador, todas las estructuras de cuadros se ignorarán) y _Parent (abierto en la ventana anterior).

- Nota: los métodos _TOP y _Parentales se utilizan para las páginas de cuadro, y hay explicaciones detalladas en los siguientes capítulos.

4.5.3 Agregar texto de inmediato al enlace

En muchos casos, el texto del hipervínculo no es suficiente para describir el contenido que se vinculará. La etiqueta Hyperlink proporciona atributos de título para facilitar las indicaciones para los espectadores. El valor del atributo de título es el contenido rápido. El contenido rápido aparecerá cuando el cursor del navegador permanezca en el hipervínculo, lo que no afectará la ordenación del diseño de la página. Modifique el archivo de la página web A.HTM y escriba el código como se muestra en el código 4.19.

Código 4.19 Configuración de hipervínculos: A.HTM

<html>

<title> Configuración de hipervínculos </title>

</ablo>

<Body>

<tamaño de fuente = 5>

<a href = ul_ol.htm Target = _Blank title = Hello Reader, Lo que ve ahora es el texto de inmediato. Haga clic en este enlace para saltar a la página UL_OL.HTM. > Ingrese la página de configuración de la lista </a>

</body>

</html>

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

Figura 4.20 Texto de solicitud de hipervínculo

4.5.4 ¿Qué es un ancla?

Muchos artículos web tienen mucho contenido, lo que conduce a una página larga. Los espectadores deben arrastrar constantemente la barra de desplazamiento del navegador para encontrar el contenido que necesitan. La función de anclaje del hipervínculo puede resolver este problema. El ancla es un ancla que se extrae del barco. Después de arrojar el ancla, el barco no flotará fácilmente ni se perderá. De hecho, los anclajes se utilizan para saltar a diferentes ubicaciones dentro de una sola página, y en algunos lugares se llaman marcadores.

El atributo de nombre de la etiqueta de hipervínculo se usa para definir el nombre del ancla. Una página puede definir múltiples anclajes. A través del atributo href del hipervínculo, puede saltar al ancla correspondiente de acuerdo con el nombre. Cree un archivo de página web en el directorio D:/ web/, llamado a_anchor.htm y escriba el código como se muestra en el código 4.20.

Código 4.20 Ancla de hipervínculo: a_anchor.htm

<html>

<title> Configuración de hipervínculos </title>

</ablo>

<Body>

<tamaño de fuente = 5>

<a name = top> Aquí está el ancla en la parte superior </a>

<a href =#2> el segundo </a>

<a href =#4> La cuarta persona </a>

<a href =#5> el quinto </a>

<H2> Presidentes exitosos de los Estados Unidos </h2>

● La primera persona (1789-1797) <a name = 1> Este es el ancla de la primera persona </a>

Nombre: George Washington

George Washington

Nacido y murió: 1732-1799

Partido político :: Federación

● La segunda persona (1797-1801) <a name = 2> Aquí está el ancla de la segunda persona </a>

Nombre: John Adams

John Adams

Nacido y murió: 1735-1826

Partido político :: Federación

● La tercera persona (1801-1809) <a name = 3> Aquí está el ancla de la tercera persona </a>

Nombre: Thomas Jefferson

Thomas Jefferson

Nacido y murió: 1743-1826

Partido político :: Partido Comunista del Pueblo

● El cuarto post (1809-1817) <a name = 4> Aquí está el ancla del cuarto post </a>

Nombre: James Madison

James Madison

Nacido y murió: 1751-1836

Partido político: la República Popular de China

● El quinto puesto (1817-1825) <a name = 5> Este es el ancla del quinto puesto </a>

Nombre: James Monroe

James Monroe

Nacido y murió: 1758-1831

Partido político: la República Popular de China

</body>

</html> l>

Antes de la prueba, los lectores pueden ver del Código 4.20 que la etiqueta <a> </a> se usa para definir el ancla, y el nombre del ancla se define con el atributo de nombre (el nombre no tiene restricciones y se puede personalizar). El enlace para buscar anclajes utiliza el atributo HREF para especificar el nombre correspondiente, y se debe agregar un símbolo # antes del nombre. Ingrese http: //localhost/a_anchor.htm en la barra de direcciones del navegador, y el efecto de navegación se muestra en la Figura 4.21.

Figura 4.21 Ancla de hipervínculo

Cuando el visor hace clic en el hipervínculo, la página se desplazará automáticamente a la posición de anclaje del nombre del valor del atributo HREF.

- Nota: la etiqueta que define el ancla no necesariamente requiere contenido específico, es solo un posicionamiento.

4.5.5 Links de correo electrónico, FTP y Telnet

Los hipervínculos pueden ampliar aún más las funciones de las páginas web, y las más utilizadas son las conexiones de correo electrónico, FTP y Telnet. Para completar las funciones anteriores, solo necesita modificar el valor HREF del hipervínculo. El formato para enviar un correo electrónico es:

<a href = mailto: dirección de correo electrónico> Envíame correo electrónico </a>

La dirección de correo electrónico debe estar completa, como [email protected].

Como se mencionó anteriormente, el protocolo HTTP se usa para navegar por páginas web, mientras que el servidor FTP está conectado por el protocolo FTP. El formato de enlace es el siguiente:

<a href = ftp: // dirección IP del servidor o nombre de dominio> texto vinculado </a>

La diferencia entre los enlaces del servidor FTP y los enlaces web es que los protocolos utilizados son diferentes. FTP requiere un permiso de inicio de sesión del administrador del servidor. Sin embargo, se puede acceder a algunos servidores FTP de forma anónima, obteniendo así algunos archivos públicos. Del mismo modo, el servidor conectado al protocolo Telnet también adopta un método similar, el formato es el siguiente:

<a href = telnet: // dirección IP del servidor o nombre de dominio> texto vinculado </a>

El protocolo Telnet es muy pocos, y la mayor parte se usa con el protocolo HTTP. Cree un archivo de página web en el directorio D:/ web/, llamado mail.htm y escriba el código como se muestra en el código 4.21.

Código 4.21 Otras configuraciones para hipervínculos: mail.htm

<html>

<title> Otras configuraciones para hipervínculos </title>

</ablo>

<Body>

<tamaño de fuente = 5>

<a href = mailto: [email protected] Title = Hola lectores, haga clic aquí para enviar un correo electrónico. > Envíame un correo electrónico </a>

<a href = ftp: //101.22.25.11 title = Hola lectores, bienvenidos al servidor FTP. > Conecte el servidor FTP </a>

<a href = telnet: //101.22.25.11 title = Hello Readers, bienvenido al servidor Telnet. > Conecte el servidor Telnet </a>

</body>

</html> s

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

Figura 4.22 Otras configuraciones para hipervínculos