You should know that the < a > tag is a tag we often use, and the < a > tag has powerful functions. Let me summarize the functions of the < a > tag.
1, Hyperlinks
The simplest application of < a > tag is the hyperlink function. A paragraph of text can be nested with < a > tag, and a paragraph of image can realize the hyperlink function. Figure below
The picture on the left is the effect picture. Click the mouse to jump to the specified link. The mouse hovers and has the effect of little finger
There are four other states of hyperlinks that are implemented using the following CSS Styles
<style>
a:link{ /*Default state*/
color: black;
}
a:visited{ /*Browsed*/
color:darkgrey;
}
a:hover{ /*Suspension state*/
color:yellow;
}
a:active{ /*Activated*/
color: red;
}
</style>Important note: write in strict accordance with the sequence above
In addition, the underline of the supplementary a tag can be removed with the following code snippet
<style>
a{
text-decoration:none;
}
</style>2, Anchor link
The following is the code snippet of implementing anchor link with a tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Anchor link</title>
</head>
<body>
<p id="part1">Chapter 1</p>
<div style="height: 300px;background-color: red"></div>
<p id="part2">The second chapter</p>
<div style="height: 300px;background-color: yellow"></div>
<p id="part3">The third chapter</p>
<div style="height: 300px;background-color: gold"></div>
<p id="part4">The fourth chapter</p>
<div style="height: 300px;background-color: green"></div>
<p id="part5">The fifth chapter</p>
<div style="height: 300px;background-color: blue"></div>
<div style="position: fixed;top: 20px;right: 20px"><!-- The style here is to hover the anchor link in the upper right corner -->
<a href="#Part1 "> Chapter I</a>
<a href="#Part2 "> Chapter II</a>
<a href="#Part3 "> the third chapter</a>
<a href="#Part4 "> Chapter IV</a>
<a href="#Part5 "> Chapter 5</a>
</div>
</body>
</html>The effect is to click chapter one to jump to chapter one, click chapter two to jump to chapter two and so on