In this article, let's talk about hyperlink tags
Table of contents
1. Introduction to hyperlink tags
1. Introduction to hyperlink tags
The hyperlink tag is a very important tag in HTML, let's take a look at it together
In HTML tags, the <a> tag is used to define a hyperlink , which is used to link from one page to another .
In the web pages we visit every day, sometimes when we click on a text, it will jump to another page, which is a hyperlink.
Link syntax:
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>Note: a is the abbreviation of the word anchor, meaning: anchor
The two attributes of the link tag work as follows:
| Attributes | effect |
| href | The url address used to specify the link target is a required attribute. When the attribute href attribute is applied to the label, it has the function of a hyperlink |
| target | Used to specify the opening method of the page, where _self is the default value, and _blank is the opening method in a new window |
1.1 Classification of Links
Let's look at the classification of hyperlinks:
1. External link: click to open the link of the external web page. For example:
<a href="https://www.baidu.com/?tn=15007414_8_pg" target="_self">
<img src="https://www.baidu.com/img/pcdoodle_2a77789e1a67227122be09c5be16fe46.png" />
</a>2. Internal link: the mutual connection between the internal pages of the website. Just connect directly to the internal page name of the web page. For example:
<a href="index.html">登录</a>3. Empty link: If the link target is not determined at that time, use # to replace the link address. For example:
<a href="#">没有写完的页面</a>4. Download link: If the address in the href is a file or compressed package, the file will be downloaded.
<a href="../hb.rar">下载文件</a>5. Links to webpage elements : hyperlinks can be added to various webpage elements in webpages, such as text, images, tables, audio, video, etc.
<a href="https://www.baidu.com/?tn=15007414_8_pg" target="_blank">
<img src="../hb.jpg" width="300" />
</a>6. Anchor link: click on the link, you can quickly locate a certain position on the page
- In the href attribute of the link text, set the attribute value in the form of #name, such as <a href="#two" >Second Episode</a>
- Find the label of the target location, and add an id attribute = the name just now, such as <h3 id="two">Introduction to the second episode</h3>
<h3>
<a href="#Picture">请看图片</a>
</h3>
<img id="Picture" src="../hb.jpg" width="300" />2. Specific case explanation
Next, through specific cases, explain the above six hyperlink labels in detail
2.1 External links
This link is actually a very simple link, that is, enter an external URL in href , and then click it to jump directly to this URL
Let's demonstrate it in detail
Analysis: There is actually nothing to say about this, it is to fill the content in href into a URL.
Note: This URL must start with "http:" or "https:", which is common sense
2.2 Internal Labels
The internal label, to put it bluntly, is to jump to a certain place inside the machine . For example, you can put an absolute path of a picture, and click it to display that picture ; you can also write an absolute path of an HTML file, and click it to jump to this HTML page .
Below, the two cases are demonstrated respectively:
Analysis: This is nothing to say
Note: Be sure to write the correct path , whether it is a relative path or an absolute path
2.3 Empty links
An empty link, to put it bluntly, is a placeholder, it does not realize the jump, it just occupies a place
Analysis: Nothing to say
Note: A new page will be generated after clicking, but this new page is this page
2.4 Download link
The function of this link is that when you click it, you can download the file written in the attribute href
Analysis: Nothing to say
Note: The path of the file is still written in href, so you must understand the path
2.5 Web page element links
This link means that various web page elements in the web page, such as text, images, tables, audio, video, etc., can be hyperlinked. In other words, in the middle of <a></a>, not only files can be written, but other elements can also be placed, such as pictures, tables, audio, video, etc.
Analysis: In fact, this tag has explained a truth to us. In HTML, it can be used within tags . Labels are directly nestable within each other . At the same time, it also shows that HTML is relatively " rigid ". The nested use of tags mentioned here generally refers to the double tag or single tag inside the double tag, and the single tag generally cannot be double tagged .
Note: Here, it is easy for beginners to confuse the content in href and the content in src. Just remember one, just remember src , which is used to write the address and used in the img tag, and the other will be clear naturally
2.6 Anchor tags
The function of this tag is to click on the content to quickly navigate to the corresponding position on the page
code show as below:
<!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>
<h1 id="6a">目录</h1>
<h3 ><a href="#1a">1.外部链接</a></h3><br />
<h3 ><a href="#2a">2.内部链接</a></h3><br />
<h3 ><a href="#3a">3.空链接</a></h3><br />
<h3 ><a href="#4a">4.下载链接</a></h3><br />
<h3 ><a href="#5a">5.网页元素链接</a></h3><br />
<h2 id="1a">1.外部链接</h2><br />
<a href="https://www.baidu.com/" target="_blank">点击这里，跳转到百度首页</a><br />
<h2 id="2a">2.内部链接</h2><br />
<a href="D:\MyPhotos\BeautifulPhotos\C23.jpg" target="_blank">点击这里，跳转到本机内部的某一张图片</a><br />
<a href="09-路径演示.html" target="_blank">点击这里，跳转到另一个HTML文档页面</a><br />
<h2 id="3a">3.空链接</h2>
<a href="#" target="_blank">这是空链接，你点了也没什么用</a><br />
<h2 id="4a">4.下载链接</h2>
<a href="../hb.rar" target="_blank">点击它，下载一张图片</a>
<h2 id="5a">5.网页元素链接</h2>
<a href="https://baike.baidu.com/item/%E5%AF%92%E5%86%B0%E5%B0%84%E6%89%8B/74390?fr=aladdin" target="_blank">
<img src="../hb.jpg" height="500" />
</a><br />
<h6><a href="#6a">返回顶部</a></h6>
</body>
</html>Analysis: Before we write any code, we must carefully analyze the requirements in our minds . This anchor link is relatively abstract, so we should send the requirements for analysis. The function you want to achieve is: click on this line of text, it will jump to the target place of the page . So, this line of text is just a hyperlink , you need to add <a></a>, and then, how to connect each other? By id , so you have to add the id attribute in <a> . Where are you jumping to? To jump to the target place , you need to add the id attribute to the label of the target place . Among them, the id attribute in the hyperlink tag has #, but there is no # in the id attribute of the target place, OK, if you think about this, you can write it out.
Notice:
Not just anchor links, but also many other tags. When we write HTML files, we must have a clear mind, we must know what we need to accomplish, what tags are there, and how to use these tags to fulfill these requirements.
3. Summary
In this article, we learned about a hyperlink, which is a label, and then write the corresponding address in it, and then jump with one click.
Let's talk about the perception of learning.
No matter what you learn, you must use the knowledge you have learned to solve problems and create value. In this process, there is such a logic: when faced with an actual situation, we must first analyze what we need to do, what problems we need to solve, what goals we need to achieve, and what we need to accomplish; then, we need to recall what we have in hand What tools we have, what knowledge we have in our minds; finally, we need to think about how to use what we have to solve this problem.
In fact, we can divide it into three parts: analyzing needs, basic knowledge, and solving problems. In fact, for a beginner, basic knowledge is the most important, without it, all your follow-up will be castles in the air. Therefore, we must master and be proficient in basic knowledge.
Share with you!