Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about how to use the anchor points in html5 web pages. The content is detailed and the logic is clear. I believe most people still know too much about this, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Anchor is a kind of hyperlink in web page making, also known as named anchor. Named anchors, like a quick locator, are hyperlinks within a page and are widely used.

English name: anchor

Use named anchors to set tags in a document, which are usually placed at or at the top of a specific theme of the document. You can then create links to these named anchors that quickly take visitors to a 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 points at the appropriate location on the HTML page:

Here is the TOP section.

Here is the CONTENT section.

Here is the FOOT section.

You can use the id attribute instead of the name attribute, and named anchors are also valid. [1])

There are two ways to access the anchor point above

One is to use hyperlink tags to make anchor links, which are mainly used to access anchor points in the page.

Click my link to TOP

Click my link to CONTENT

Click my link to FOOT

Another way is to add an anchor mark 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, simply visit the following link

Http:// file path / index.html#foot

What exactly is the 2.html anchor for?

To put it simply, for example, in a long article, if you want to look at it accurately by segments, you can use anchor points.

Code:

Jump to 001

... Text ellipsis

... Text ellipsis

In fact, the anchor point only needs name, and id is added to make it more compatible.

For the value of href to be consistent with name\ id, it must be preceded by "#". The above code is compatible in ie6/7,ff, but not in ie8.

Because the value of our anchor point is empty, in order not to affect the beauty, we just add a space.

Such as the following code, it is compatible with ie8

Jump to 001

... Text ellipsis

& nbsp

... Text ellipsis

Another question, do you want to display the content of an anchor point on a page (such as 123.html)?

The code is as follows

Jump to 001

... Text ellipsis

& nbsp

... Text ellipsis

This is yesterday in the background, want to achieve "modify positioning", moved out the anchor mark (it is usually forgotten by me).

But the program says that if they want to take a value, there must be "?" in the connection. Or "&", then my anchors are not compatible.

He he! There will be a solution later!

Although there is a problem with anchor compatibility in jsp pages, there is no problem in static pages, and it is worth learning!

3. In WEB development, page anchors are used. HTML page anchors are used to link to a chapter of a page. W3School says that creating anchors uses tags and name attributes, but this is not the only way to create page anchors. Here are two ways to make HTML page anchors.

We can use W3School's online testing tools to test. The test code after opening the link uses that there is no problem with the test. Then test after "Chapter4", and the effect is the same.

Note that in addition to using the anchor label name attribute, you can also use the id attribute to make a page anchor. The value of the href attribute in the anchor tag begins with # plus the value of the target's name or id:

Copy the code

The code is as follows:

Page Anchor method 1

Page Anchor method 2

Method one

Use the href and name attributes of the anchor tag

Method two

Use anchor tags and id attributes

These are all the contents of the article "how to use anchors in html5 pages". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.