Home > Article > Web Front-end > How to implement HTML jump to web page
In web page production, it is often necessary to jump to other pages or other websites, such as various options in the navigation bar or clicking on a link. This jump function is implemented in HTML through hyperlinks. This article will introduce the various attributes and usage methods of hyperlinks in HTML, and help beginners learn how to jump to web pages in HTML.
Basic syntax of hyperlinks
In HTML, hyperlinks are defined through the "a" tag. Its basic syntax is as follows:
<a>link text</a>
Among them, href
defines the target address of the link, which is the URL to be jumped to. link text
is the text of the link, which is the content displayed on the web page. Please note that the value of the href
attribute needs to be enclosed in double or single quotes.
Example 1: Internal webpage jump
Suppose there is such a page, which contains four chapters. We want to jump to the corresponding page by clicking on different options in the navigation bar. chapter.
For each navigation option we need to add the following syntax:
<a>Section 1</a>
It is important to note that the # symbol means jump Go to an anchor point in this document, followed by
section1
which is the name of the anchor point. In order to specify an anchor, we need to add the id
attribute to the HTML element where the anchor is located:
<h2>Section 1</h2> <p>This is the content of section 1...</p>
For other navigation options, you can repeat the above steps to add different anchor names, thus Implement internal web page jumps.
Example 2: External webpage jump
In addition to jumping to the anchor point inside this document, HTML jump webpages can also jump to other websites or pages.
<a>Click me to open Google in a new window</a>
In the above example, we use the href
attribute to specify the link address of the external website. If you want to open the website in a new window, you can add the target="_blank"
attribute within the a
tag. As shown below:
<a>Click me to open Google in a new window</a>
Example 3: Jump to the same page
This situation is usually used to click a button or image to jump to another part, such as the bottom of the web page. Unlike internal jumps, same page jumps need to find the location of the target element, not the anchor point.
<a>Click me to go to the bottom of the page!</a> ... <!-- some content here --> ... <p>This is the bottom of the page!</p>
In the above code, we give the target element an id
attribute, and then use the href
attribute in the link to point the link address to this location.
Advanced properties of hyperlinks
HTML jump web pages are not limited to basic hyperlink syntax. Here are some other important hyperlink properties that you can set according to your needs.
title
: Text prompt
title
attribute adds a mouse-over prompt for the link. When the mouse pointer hovers over a link, a text hint for the link will appear in the browser.
<a>HTML</a>
target
: Opening method
target
The attribute specifies how the link is opened. In the previous example two, we opened the target page in a new window by adding the target="_blank"
attribute to the a
tag. In addition, there are the following ways to open it.
"_self"
: Open the link in the current window "_parent"
: Open the link in the parent window of the current window"_top"
: Open the link in the top-most main windowrel
: Relationship attribute
# The ##rel attribute is used to specify the relationship between the linked page and the current page. The most common relationship is
rel="nofollow", which indicates that the link is not just a simple hyperlink, but an advertisement or website link that is not directly related to this website.
<a>HTML</a>Summary and AdvancedThis tutorial introduces the basic syntax of jumping to web pages in HTML and other important hyperlink attributes. Hyperlinks are the most basic element in web page production. More advanced uses of HTML, such as CSS styles and JavaScript interactions, are all based on hyperlinks. Therefore, it is very important to learn to implement HTML jump web pages. It is the basis for you to understand and use other advanced skills. If you want to learn more about HTML and web development, we recommend you explore some of the following tutorials and resources:
The above is the detailed content of How to implement HTML jump to web page. For more information, please follow other related articles on the PHP Chinese website!