Detailed explanation of the methods and functions of adding hyperlinks and anchors to HTML (with video)-HTML Knowledge-php.cn

Home

Daily Programming

HTML Knowledge

Detailed explanation of the methods and functions of adding hyperlinks and anchors to HTML (with video)

藏色散人

Sep 11, 2018 pm 04:15 PM

Hyperlinkanchor point

This article mainly introduces to you Hyperlink anchors in HTMLHow to add settings and what their functions are.

The concepts of HTML hyperlinks and anchors , I believe most of my friends already know it very well, but for newbies who are just getting started with html, how to add html This issue of hyperlink anchor may still be a little unclear. So this article is introduced for novice friends. I hope it will be helpful to those who need it!

Below we will explain it in detail through specific HTML code examples.

The code example for adding hyperlink anchors in HTML is as follows:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<a href="http://www.php.cn">PHP中文网</a>

<a href="#one">第一篇文章</a>
<a href="#two">第二篇文章</a>
<a href="#three">第三篇文章</a>

<a name="one"></a>
<h1 id="第一篇文章">第一篇文章</h1>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>

<a name="two"></a>
<h1 id="第二篇文章">第二篇文章</h1>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>

<a name="three"></a>
<h1 id="第三篇文章">第三篇文章</h1>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>
<p>这是一段文章内容</p>

<a href="">回到顶部</a>
</body>
</html>

In this code, we mainly use the in HTML Tag, when we directly add the href="link address to jump to" attribute directly in the a tag, we can implement a text hyperlink. For example, the above code section PHP Chinese website realizes that when you click on the field of PHP Chinese website, you can jump directly to The specified link page.

When we add the name="#anchor name" attribute in the a tag, it means that the anchor link is set. Then in the body text, you can set the anchor point at the specified position, that is, add name="anchor name" in the a tag. Be careful not to add the # symbol here.

Then the above code, the overall effect is as follows:

Detailed explanation of the methods and functions of adding hyperlinks and anchors to HTML (with video)

##When there is a large section of article content in a page, we can quickly jump to the specified object by setting an anchor point on the page. As shown above, when we click on the first article, second article, and third article respectively, we will quickly jump to the specified content part. At the same time, we can add a hyperlink back to the top at the bottom of the article, just set the href attribute value in the a tag to empty!

This article is about the specific method and function of adding hyperlink anchors to

HTML, so what do you think about anchor links and ordinary hyperlinks You should also have a certain understanding of the difference. The above content is very simple and easy to understand. I hope it will be helpful to friends in need! You can also refer to the corresponding Video Tutorial[Add hyperlinks in HTML and go wherever you want in the anchor page] for reference.

The above is the detailed content of Detailed explanation of the methods and functions of adding hyperlinks and anchors to HTML (with video). For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn