insira a descrição da imagem aqui

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

Diretório de artigos

prefácio
A introdução de hiperlinks
2. Introdução do valor do atributo
Resumir

prefácio

Neste artigo, vou levá-lo a aprender como adicionar hiperlinks às páginas. Na verdade, devemos estar muito familiarizados com hiperlinks, que é o processo de pular para uma nova página depois que geralmente clicamos no link.

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

A introdução de hiperlinks

Primeiro apresentamos a tag hyperlink: < a > </ a> Obviamente esta é uma tag dupla. Sua função é que quando clicamos no conteúdo do rótulo, vamos pular para uma nova página . O conteúdo do rótulo pode ser texto ou imagens. Este artigo usa texto como exemplo. Você pode tentar o conteúdo como imagens.

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

Construção de quadro 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 uma etiqueta
```
<body>
    <a></a>
</body>
```

Implementar a troca de hiperlink (página inicial pessoal)

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

Mostrar resultados

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

2. Introdução do valor do atributo

Valor do atributo	significado
href	Adicionar caminho de salto
título	Dica de ferramenta ao passar o mouse
alvo	Método de salto

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

2.1 valor do atributo href

A função do atributo href é fornecer o caminho para que nossa tag possa identificar o destino.

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

2.1.1 Ir para o mesmo caminho de arquivo

Código de amostra

<!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 图片。

anotação:

A premissa da implementação do código acima é que a imagem mostrada acima precisa ser adicionada no caminho. Você mesmo pode adicionar a imagem e experimentá-la.

2.1.2 Ir para qualquer URL

Exemplo de salto para o 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>

Você pode copiar o código acima e ver o resultado

2.2 valor do atributo do título

A função do valor do atributo title é exibir as informações do prompt quando passamos o mouse, por exemplo, queremos exibir o prompt 'jump to ***' quando o mouse passa sobre o conteúdo do hiperlink. Neste momento, precisamos apenas definir o valor do atributo title como 'jump to ***'.

诸位一定要自行尝试！

2.3 valor do atributo de destino

A função do valor do atributo de destino é definir a maneira de abrir a página do hiperlink da Web. Podemos optar por abrir o hiperlink da página atual ou podemos optar por pular para uma nova página para abri-lo.

valor do atributo de destino	caminho aberto
padrão ou _self	Abrir hiperlinks na página atual por padrão
_em branco	Abrir hiperlink em nova página

Exemplo 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>

anotação:

Você pode copiar o código acima e executá-lo você mesmo para ver a diferença.Criei dois hiperlinks, um para o salto de página atual e outro para o novo salto de página.

Resumir

Estou muito feliz em conhecê-lo. É o destino conhecê-lo. Desejo-nos tudo de bom!