HTML sets the jump of links within the page—anchor link-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

HTML sets the jump of links within the page—anchor link

不言

Dec 04, 2018 pm 03:17 PM

html

What is an anchor link? The so-called anchor link is to create a link to jump to a specified location when the page length is long. In short, it is to jump through the link within the page. Then, the following article will introduce to you about HTML settings. How to jump links within the page.

HTML sets the jump of links within the page—anchor link

First let’s take a look at the writing format of links in HTML

<a href="#">链接名</a>

Copy after login

Link address

Change the link name The id is set to the element of the jump position.

Next let’s look at a specific example

Create the following HTML file

The code is as follows

Anchor.HTML sets the jump of links within the page—anchor link

<!DOCTYPE HTML sets the jump of links within the page—anchor link>
<HTML sets the jump of links within the page—anchor link>
<head>
<meta http-equiv="Content-Type" content="text/HTML sets the jump of links within the page—anchor link; charset=utf-8"/>
    <title></title>
</head>
<body>
  <a href="#section1">区域1</a><br />
  <a href="#section2">区域2</a><br />
  <a href="#section3">区域3</a><br />
  <hr />
  <a id="section1">区域1</a>
  <div style="height:300px">内容</div> 
  <a id="section2">区域2</a> 
  <div style="height:300px">内容</div> 
  <a id="section3">区域3</a> 
  <div style="height:300px">内容</div> 
</body>
</HTML sets the jump of links within the page—anchor link>

Copy after login

Instructions:

In the code mentioned above,

<a href="#section1">区域1</a>

Copy after login

clicks on the link

<a id="section1">区域1</a>

Copy after login

so that it will jump to the corresponding page. Location.

Run results

Executing the above HTML file will display the following effect

HTML sets the jump of links within the page—anchor link

Click the area 1 link in the page. The page will jump and area 1 will be displayed at the top of the screen.

HTML sets the jump of links within the page—anchor link

Similarly, if you click on area 2 and area 3, the same effect will appear.

Note:

The jump id can be used even if it is not a tag. The following code shows the code when specifying the id of the div tag as the jump target.





    


  <a href="#section1">区域1</a>

  区域2

  区域3

  
  区域1
  内容 
  区域2 
  内容 
  区域3 
  内容

Copy after login

This article ends here. For more exciting content about HTML, you can pay attention to the HTML Video Tutorial column on the php Chinese website! ! !

The above is the detailed content of HTML sets the jump of links within the page—anchor link. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

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