HTML Enlaces

Los enlaces HTML (anchor) son la parte central para saltar entre páginas web.

HTML utiliza enlaces para conectarse con otro documento en la red.

Un enlace en HTML es un elemento utilizado para navegar entre diferentes páginas web.

Un enlace se usa generalmente para asociar una página web con otra página o con un recurso (como documentos, imágenes, archivos de audio, etc.).

Los enlaces permiten que el usuario haga clic en un texto o una imagen mientras navega por una página web para saltar a otra ubicación, logrando así la interconexión entre páginas web.

Los enlaces HTML se crean mediante<a>la etiqueta <a>, y normalmente se usan para llevar al usuario de una página a otra, saltar de una sección a otra dentro de la misma página, descargar archivos, abrir el cliente de correo electrónico o ejecutar funciones de JavaScript, etc.

Sintaxis básica

<a href="URL.html">链接文本</a>

• <a>La etiqueta <a>: define un hipervínculo (anchor). Es la etiqueta principal en HTML para crear enlaces en los que se puede hacer clic.
• hrefEl atributo href: especifica la URL de destino; cuando se hace clic en el enlace, el navegador navegará a esa URL.

El siguiente ejemplo muestra cómo crear un enlace en un documento HTML:

Hiperenlaces HTML (enlaces)

HTML utiliza la etiqueta <a><a>para crear hipervínculos.

Un hipervínculo puede ser una letra, una palabra o un grupo de palabras, y también puede ser una imagen. Puede hacer clic en estos elementos para saltar a un nuevo documento o a una sección concreta del documento actual.

Cuando mueve el puntero del ratón sobre un enlace de la página web, la flecha se convierte en una pequeña mano.

En la etiqueta <a>,<a>se usahrefel atributo href para describir la dirección del enlace.

De forma predeterminada, los enlaces aparecen en el navegador de la siguiente manera:

• Un enlace no visitado se muestra en fuente azul y subrayado.
• Un enlace visitado se muestra en púrpura y subrayado.
• Al hacer clic en el enlace, este se muestra en rojo y subrayado.

Nota: Si estos hipervínculos tienen estilos CSS establecidos, la apariencia mostrada dependerá de la configuración del CSS.

Atributos de los enlaces HTML

El atributo href describe el destino del enlace.

1. href: define el destino del enlace.

Este es el atributo más importante de un hipervínculo; se usa para especificar el destino del enlace, que puede ser otra página web, un archivo, un correo electrónico, un número de teléfono o JavaScript.

2. target: define cómo se abre el enlace.

• _blank`_blank`: abre el enlace en una ventana o pestaña nueva.
• _self`_self`: abre el enlace en la ventana o pestaña actual (por defecto).
• _parent`_parent`: abre el enlace en el marco principal.
• _top`_top`: abre el enlace en la ventana completa, cancelando cualquier marco.

3. rel: define la relación entre el enlace y la página de destino.

nofollow`nofollow`: indica que los motores de búsqueda no deben seguir este enlace; se usa a menudo en enlaces externos.

noopenerynoreferrer`noopener`: evita problemas de seguridad al abrir enlaces en una pestaña nueva, especialmente al usartarget="_blank"`_blank`.

• noopenerEvita que el nuevo contexto de navegación (página) acceda awindow.openerla propiedad `opener` y alopenmétodo.
• noreferrerNo envía la cabecera `Referer` (es decir, no le dice al sitio de destino de dónde viene).
• noopener noreferrerSe usan a la veznoopenerynoreferrer. Por ejemplo:<a href="https://www.example.com" rel="noopener noreferrer">安全链接</a>

4. download: indica al navegador que descargue el destino del enlace en lugar de navegar hasta él.

Si se especifica un nombre de archivo, el navegador pedirá que se descargue y se guarde con ese nombre.

5. title: define información adicional sobre el enlace; es la información sobre herramientas que se muestra al pasar el ratón sobre el enlace.

6. id: se usa para anclar enlaces; normalmente salta a una posición específica dentro de la misma página.

7. hreflang: especifica el idioma de la URL de destino del enlace.

8. type: especifica el tipo MIME del recurso del enlace.

9. class: se usa para especificar el nombre de clase del elemento (definido en CSS).

10. style: define estilos CSS directamente en el elemento.

Ejemplo

<a href="../index.html">访问Ejemplo</a>

La línea de código anterior se muestra como:Visite el Tutorial para novatos

Al hacer clic en este hipervínculo, el usuario será llevado a la página principal del Tutorial para novatos.

Consejo: "texto del enlace"No tiene que ser texto necesariamente. Las imágenes u otros elementos HTML también pueden ser enlaces.

Enlace de texto:El tipo de enlace más común es el enlace de texto, que usa el elemento <a> para convertir un fragmento de texto en un enlace en el que se puede hacer clic, por ejemplo:

<a href="https://www.example.com">访问示例网站</a>

Enlace de imagen:También puede usar una imagen como enlace. En este caso, el elemento <a> envuelve al elemento <img>. Por ejemplo:

<a href="https://www.example.com">
  <img src="example.jpg.html" alt="示例图片">
</a>

Enlace ancla:Además de enlazar a otras páginas web, también puede crear enlaces internos dentro de la misma página; esto se llama enlace ancla. Para crear un enlace ancla, debe definir una marca con el elemento <a> en la posición de destino y hacer referencia a esa marca con el símbolo #. Por ejemplo:

<a href="../index.html">跳转到第二部分</a>
<!-- 在页面中的某个位置 -->
<a name="section2"></a>

Enlace de descarga:Si desea que el enlace sirva para descargar un archivo en lugar de navegar a otra página web, puede usar el atributo download. Por ejemplo:

<a href="document.pdf.html" download>下载文档</a>

Enlaces HTML - atributo target

Con el atributo target, puede definir dónde se mostrará el documento enlazado.

La siguiente línea abrirá el documento en una ventana nueva:

Enlaces HTML - atributo id

El atributo id puede usarse para crear un marcador en un documento HTML.

Consejo:Los marcadores no se muestran de ninguna manera especial; es decir, no se ven en la página HTML, por lo que están ocultos para el lector.

Ejemplo

Insertar un ID en un documento HTML:

<a id="tips">有用的提示部分</a>

Crear un enlace en el documento HTML a la "sección de consejos útiles (id="tips")":

<a href="../index.html">访问有用的提示部分</a>

O bien, crear un enlace desde otra página a la "sección de consejos útiles (id="tips")":

<a href="../html/html-links.html">
访问有用的提示部分</a>

Enlaces vacíos

A continuación se muestran algunos métodos comunes para crear enlaces vacíos y las diferencias entre ellos:

Notas básicas - Consejos útiles

Nota:Agrega siempre la barra diagonal a las subcarpetas. Si escribes el enlace así: href="../html.html", se generarán dos solicitudes HTTP al servidor. Esto se debe a que el servidor agregará una barra diagonal a esta dirección y luego creará una nueva solicitud, así: href="../html/index.html".

Más ejemplos

Enlaces de imagen
Cómo usar enlaces de imagen.

Vincular a una posición específica en la página actual
Cómo usar marcadores

Salir del marco
Este ejemplo demuestra cómo salir de un marco, si tu página está fijada dentro de un marco.

Crear un enlace de correo electrónico
Este ejemplo demuestra cómo vincular a un correo electrónico. (Este ejemplo solo funciona después de instalar un programa de cliente de correo).

Crear un enlace de correo electrónico 2
Este ejemplo demuestra enlaces de correo más complejos.

Etiqueta de enlace HTML