Introduction to the use of anchors (named anchors) in HTML web pages

The following information is compiled from the Internet

1. Anchor is a type of hyperlink in web page production, also called named anchor . A named anchor is a hyperlink within a page, like a quick locator, and is widely used.
English name: anchor
Named anchors allow you to set markers in your document, which are usually placed at or at the top of a specific topic in the document. You can then create links to these named anchors that quickly take visitors to the specified location.
Creating a link to a named anchor is a two-step process. First, create a named anchor, and then create a link to the named anchor.

Sample Code

Define the following anchor at the appropriate location in the HTML page:
<a name="top">This is the TOP part</a>
<a name="content">This is the CONTENT section</a>
<a name="foot">This is the FOOT part</a>
(You can use an id attribute instead of a name attribute; named anchors also work. [1])
There are two ways to access the above anchor points. One is to use the hyperlink tag <a></a> to create an anchor link, which is mainly used for anchor point access within the page.
<a href="#top">Click me to link to TOP</a>
<a href="#content">Click me to go to CONTENT</a>
<a href="#foot">Click me to go to FOOT</a>
Another way is to add an anchor tag directly after the page address, which is mainly used for anchor access between different pages. If the address of this page is http://file path/index.html, to access the foot anchor, just visit the following link
http://filepath/index.html#foot

2. What exactly is the HTML anchor used for?
To put it simply, if you want to read a long article precisely by paragraphs, you can use anchor points.

Code:
<a href="#001">Jump to 001</a>
...text omitted
<a name="001" id="001" ></a>
...text omitted

In fact, the anchor only needs a name, and adding an id is to make it more compatible.
The value of href must be consistent with name \ id, and "#" must be added in front. The above code is compatible in ie6/7, ff, but not in ie8.
Because the value of our anchor point <a></a> is empty, we just add a space to avoid affecting the appearance.

The following code is compatible with IE8
<a href="#001">Jump to 001</a>
...text omitted
<a name="001" id="001" > & nbsp </a>
...text omitted

Another question, what if you want to display the content of a certain anchor point of a certain page (such as: 123.html)?

The code is as follows
<a href="123.html#001">Jump to 001</a>
...text omitted
<a name="001" id="001" > & nbsp </a>
...text omitted

This was when I was working on the background yesterday. I wanted to implement "modify positioning", so I moved out the anchor mark (I usually forget it).
But the program says that they need to get the value, and there must be a "?" or "&" in the connection, so my anchor point is incompatible...
hehe! There will be a solution later!
Although there are problems with anchor compatibility in jsp pages, there are no problems in static pages, so it is still worth learning!

3. In WEB development, page anchors will be used . HTML page anchors are used to link to a section of a page. W3School says that creating anchors uses the <a> (anchor) tag and the name attribute, but this is not the only way to create a page anchor. Here are two ways to create HTML page anchors.

We can use W3School's online testing tool to test. The test code after opening the link uses <a href="#C4"> and <a name="C4">, and the test has no problem. Then change “ <h2> <a name=”C4″>Chapter 4 </a> </h2>” to “ <h2 id=”C4″>Chapter 4 </h2>” and test it, the effect is the same.

Note: In addition to using the name attribute of the anchor tag, you can also use the id attribute to create a page anchor. The value of the href attribute in the anchor <a> tag starts with # and is followed by the name or id of the target:

Copy code

The code is as follows:

<html>
<body>
<p>
<a href="#method1">Page anchor method 1</a>
</p>
<p>
<a href="#method2">Page anchor method 2</a>
</p>
<h2><a name="method1">Method 1</a></h2>
<p>Use the href and name attributes of the anchor tag</p>
<h2 id="method2">Method 2</h2>
<p>Using anchor tags and id attributes</p>
</body>
</html>

<<: Several methods of horizontal and vertical centering of div content using css3 flex

>>: How to solve the problem of invalid left join in MySQL and the precautions for its use

Introduction to the use of anchors (named anchors) in HTML web pages

JS implements random roll call system

Using shadowsocks to build a LAN transparent gateway

How to migrate sqlite to mysql script

Implementation idea of left alignment of the last row of flex box layout

In-depth understanding of Vue dynamic components and asynchronous components

Solution to elementui's el-popover style modification not taking effect

Detailed Analysis of or, in, union and Index Optimization in MySQL

Detailed tutorial for installing MySQL on Linux

Detailed explanation of using Nginx reverse proxy to solve cross-domain problems

MySQL 8.0 DDL atomicity feature and implementation principle

Recommend

View disk IO in Linux and find out the processes that occupy high IO read and write

How to set up the terminal to run applications after Ubuntu starts

Install Linux using VMware virtual machine (CentOS7 image)

MySQL 5.7.21 installation and configuration tutorial

Detailed steps for installing MinIO on Docker

Detailed explanation of the differences and applications of {{}}, v-text and v-html in Vue

How to use the WeChat Mini Program lottery component

One question to understand multiple parameters of sort command in Linux

Solution to occasional crash of positioning background service on Linux

JavaScript super detailed implementation of web page carousel

A simple explanation of MySQL parallel replication

Detailed explanation of Vue3 sandbox mechanism

Solve the problems that need to be paid attention to when configuring Tomcat's maxPostSize attribute

Detailed explanation of the role of brackets in AngularJS

Solution to the problem of incomplete display of select drop-down box content in HTML and partial coverage