Enlaces HTML

HTML utiliza hipervínculos para conectar con otro documento en la red.

Los enlaces se pueden encontrar prácticamente en todas las páginas web. Al hacer clic en un enlace, puedes saltar de una página a otra.

实例

Crear hipervínculos
Este ejemplo muestra cómo crear enlaces en un documento HTML.
Usar una imagen como enlace
Este ejemplo muestra cómo usar una imagen como enlace.

(Puedes encontrar más ejemplos en la parte inferior de esta página.)

Hipervínculo de HTML (enlace)

Un hipervínculo puede ser una palabra, una frase o un grupo de palabras, también puede ser una imagen, y puedes hacer clic en estos elementos para saltar a un nuevo documento o a una parte específica del documento actual.

Cuando mueves el puntero del ratón sobre un enlace en una página web, la flecha se convierte en una mano.

Creamos enlaces utilizando la etiqueta <a> en HTML.

有两种使用 <a> 标签的方式:

  1. 通过使用 href 属性 - 创建指向另一个文档的链接
  2. 通过使用 name 属性 - 创建文档内的书签

延伸阅读:什么是超文本?

HTML 链接语法

链接的 HTML 代码很简单。它类似这样:

<a href="url">Texto de enlace</a>

href 属性规定链接的目标。

开始标签和结束标签之间的文字被作为超级链接来显示。

实例

<a href="http://www.codew3c.com/">Visite CodeW3C.com</a>

上面这行代码显示为:Visite CodeW3C.com

点击这个超链接会把用户带到 CodeW3C.com 的首页。

Consejo:"Texto de enlace" no tiene que ser texto. Las imágenes u otros elementos HTML también pueden ser enlaces.

HTML 链接 - target 属性

使用 Target 属性,你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档:

<a href="http://www.codew3c.com/" target="_blank">Visite CodeW3C.com!</a>

亲自试一试

HTML 链接 - name 属性

name 属性规定锚(anchor)的名称。

您可以使用 name 属性创建 HTML 页面中的书签。

书签不会以任何特殊方式显示,它对读者是不可见的。

当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

命名锚的语法:

<a name="label">ancla (texto que se muestra en la página)</a>

Consejo:锚的名称可以是任何你喜欢的名字。

Consejo:您可以使用 id 属性来替代 name 属性,命名锚同样有效。

实例

首先,我们在 HTML 文档中对锚进行命名(创建一个书签):

<a name="tips">consideraciones básicas - indicaciones útiles</a>

然后,我们在同一个文档中创建指向该锚的链接:

<a href="#tips">indicaciones útiles</a>

也可以在其他页面中创建指向该锚的链接:

<a href="http://www.codew3c.com/html/html_links.asp#tips"">Consejos útiles</a>

En el código anterior, hemos agregado el símbolo # y el nombre del ancla al final de la URL, por lo que podemos enlazar directamente al ancla nombrado 'tips'.

Efecto específico:Consejos útiles

Consideraciones básicas - Consejos útiles:

Nota:Asegúrese de siempre agregar la barra oblicua invertida a la subcarpeta. Si escribe el enlace de esta manera: href="http://www.codew3c.com/html"

Consejo:Los anclajes nombrados se utilizan a menudo para crear índices en la parte superior de grandes documentos. Se puede asignar un ancla nombrado a cada sección y luego poner los enlaces a estos anclajes en la parte superior del documento. Si frecuentemente visita la enciclopedia Baidu, descubrirá que prácticamente cada entrada utiliza este método de navegación.

Consejo:Si el navegador no encuentra el ancla nombrada definida, se ubicará en la parte superior del documento. No se producirá ningún error.

Más ejemplos

Abrir enlace en una nueva ventana del navegador
Este ejemplo muestra cómo abrir una página en una nueva ventana del navegador, de modo que el visitante no tenga que salir de su sitio.
Enlace a diferentes ubicaciones de la misma página
Este ejemplo muestra cómo usar un enlace para saltar a otra parte del documento.
Salir del cuadro
Este ejemplo muestra cómo salir del cuadro, si su página está dentro de un cuadro fijo.
Crear enlace de correo electrónico
Este ejemplo muestra cómo hacer un enlace a un correo electrónico. (Este ejemplo solo funcionará después de instalar el programa del cliente de correo electrónico.).
Crear enlace de correo electrónico 2
Este ejemplo muestra un enlace de correo electrónico más complejo.

Etiqueta de enlace de HTML

Etiqueta Descripción
<a> Definir ancla.