inserte la descripción de la imagen aquí

此文为【前端修炼场】第六篇，上一篇文章链接：etiqueta de imagen

Directorio de artículos

prefacio
La introducción de hipervínculos.
2. Introducción del valor del atributo
Resumir

prefacio

En este artículo, lo llevaré a aprender cómo agregar hipervínculos a las páginas. De hecho, deberíamos estar muy familiarizados con los hipervínculos, que es el proceso de saltar a una nueva página después de que normalmente hacemos clic en el enlace.

话不多说，诸君准备好了么？打开 VSCode 和我一起操作吧！

La introducción de hipervínculos.

Primero introducimos la etiqueta de hipervínculo: < a > </ a> Obviamente esta es una etiqueta doble. Su función es que cuando hagamos clic en el contenido de la etiqueta, saltaremos a una nueva página . El contenido de la etiqueta puede ser texto o imágenes. Este artículo usa texto como ejemplo. Puede probar el contenido como imágenes.

接下来我们直接在 VSCode 里面进行操作吧

Construcción de marcos HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  
</body>
</html>

construir una etiqueta
```
<body>
    <a></a>
</body>
```

Implementar el cambio de hipervínculo (página de inicio personal)

<body>
    <a href="https://blog.csdn.net/fsadagds?type=blog" title="一碗黄豆酱的个人主页" target="_blank">一碗黄豆酱的个人主页</a>
</body>

Mostrar resultados

细心的道友肯定已经发现了，我们前面光介绍了 a 标签，别的啥也没讲咋就突然搞出来超链接来了？我也没错过什么呀，那当然是因为我们超链接标签的属性值没有介绍，接下来我们详细介绍一下超链接的属性值。

2. Introducción del valor del atributo

valor de atributo	sentido
href	Añadir ruta de salto
título	Información sobre herramientas al pasar el mouse
objetivo	método de salto

接下里我将为诸位详细介绍每一个属性值。

2.1 valor de atributo href

La función del atributo href es proporcionar la ruta para que nuestra etiqueta pueda identificar el objetivo.

接下来我带诸位详细的感受一下 href 属性值（前面我们讲过的绝对地址和相对地址，如果忘记了可以回顾一下）portal

2.1.1 Saltar bajo la misma ruta de archivo

Código de muestra

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="img/pic1.jpeg">超链接</a>
</body>
</html>

a 标签内容我们写入 ‘超链接’ ，href 属性我们填入 img/pic1.jpeg，这就说明我们跳转的目的地址为同一文件目录下的 img 文件内的 pic1.jpeg 图片。

anotación:

La premisa de la implementación del código anterior es que la imagen que se muestra arriba debe agregarse debajo de la ruta. Puede agregar la imagen usted mismo e intentarlo.

2.1.2 Saltar a cualquier URL

Ejemplo de salto a Baidu

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://www.baidu.com/">百度</a>
</body>
</html>

Puede copiar el código anterior y ver el resultado.

2.2 valor del atributo del título

La función del valor del atributo de título es mostrar la información del mensaje cuando pasamos el mouse por encima. Por ejemplo, queremos mostrar el mensaje de 'saltar a ***' cuando el mouse pasa sobre el contenido del hipervínculo. En este momento, solo necesitamos establecer el valor del atributo de título en 'saltar a ***'.

诸位一定要自行尝试！

2.3 valor de atributo objetivo

La función del valor del atributo de destino es establecer la forma de abrir la página web del hipervínculo. Podemos elegir abrir el hipervínculo desde la página actual, o podemos elegir saltar a una nueva página para abrirlo.

valor de atributo de destino	camino abierto
predeterminado o _self	Abrir hipervínculos en la página actual de forma predeterminada
_vacío	Abrir hipervínculo en página nueva

Ejemplo de código:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://www.baidu.com/" target="_self" >百度</a>
    <a href="https://www.baidu.com/" target="_blank" >百度</a>
</body>
</html>

anotación:

Puede copiar el código anterior y ejecutarlo usted mismo para ver la diferencia Creé dos hipervínculos, uno para el salto de página actual y el otro para el salto de página nuevo.

Resumir

Estoy muy feliz de conocerte, es el destino conocerte, ¡nos deseo lo mejor!