此文为【前端修炼场】第六篇，上一篇文章链接：img tag
Article directory
foreword
In this article, I will lead you to learn how to add hyperlinks to pages. In fact, we should be very familiar with hyperlinks, which is the process of jumping to a new page after we usually click on the link.
话不多说，诸君准备好了么？打开 VSCode 和我一起操作吧！
The introduction of hyperlinks
First we introduce the hyperlink tag: < a > </ a> Obviously this is a double tag. Its function is that when we click on the content of the label, we will jump to a new page . The content of the label can be text or pictures. This article uses text as an example. You can try the content as pictures.
接下来我们直接在 VSCode 里面进行操作吧
-
HTML frame construction
<!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> -
build a tag
<body> <a></a> </body> -
Implement hyperlink switching (personal home page)
<body> <a href="https://blog.csdn.net/fsadagds?type=blog" title="一碗黄豆酱的个人主页" target="_blank">一碗黄豆酱的个人主页</a> </body> -
Show results
细心的道友肯定已经发现了，我们前面光介绍了 a 标签，别的啥也没讲咋就突然搞出来超链接来了？我也没错过什么呀，那当然是因为我们超链接标签的属性值没有介绍，接下来我们详细介绍一下超链接的属性值。
2. Introduction of attribute value
| attribute value | meaning |
|---|---|
| href | Add jump path |
| title | Tooltip on mouseover |
| target | Jump method |
接下里我将为诸位详细介绍每一个属性值。
2.1 href attribute value
The role of the href attribute is to provide the path so that our a tag can identify the target.
接下来我带诸位详细的感受一下 href 属性值（前面我们讲过的绝对地址和相对地址，如果忘记了可以回顾一下）portal
2.1.1 Jump under the same file path
-
sample code
<!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 图片。 -
annotation:
The premise of the above code implementation is that the picture shown above needs to be added under the path. You can add the picture yourself and try it.
2.1.2 Jump to any URL
-
Example jump to 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> -
You can copy the above code and see the result
2.2 title attribute value
The function of the title attribute value is to display the prompt information when we hover the mouse. For example, we want to display the prompt of 'jump to ***' when the mouse hovers over the content of the hyperlink. At this time, we only need to set the title attribute value to 'jump to ***'.
诸位一定要自行尝试！
2.3 target attribute value
The role of the target attribute value is to set the way to open the hyperlink web page. We can choose to open the hyperlink from the current page, or we can choose to jump to a new page to open it.
| target attribute value | open way |
|---|---|
| default or _self | Open hyperlinks on the current page by default |
| _blank | Open hyperlink in new page |
-
Code example:
<!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> -
annotation:
You can copy the above code and run it yourself to see the difference. I created two hyperlinks, one for the current page jump, and the other for the new page jump.
Summarize
I am very happy to meet you. It is fate to meet you. I wish us all the best!
