Examples to explain how to use HTML to jump to the page by clicking on the Button element

In HTML, you can use the tag to jump to a page, but how to jump to a page through a button? This requires the use of the tag in HTML. This article will introduce how to jump to the page by clicking the Button element in HTML.

1. Basic syntax of HTML Button

To use HTML Button to implement page jump, you need to add the onclick attribute in the

tag, and then write in the attribute value Enter JavaScript code to realize page jump. The basic syntax is as follows:

Jump page

Among them, window.location.href is part of the JavaScript code and represents the URL address of the page to jump to.

2. HTML Button page jump sample code

The following is a sample code for HTML Button to implement page jump:

<title>HTML Button跳转页面</title>

<button onclick="window.location.href=&#39;https://www.baidu.com/&#39;">前往百度</button>

< /html>

In the above code, when the "Go to Baidu" button is clicked, it will jump to Baidu's official website.

3. HTML Button jumps to relative path page

In actual development, it is often necessary to jump to other pages within the same website. In this case, relative paths can be used, and Not the complete URL address. The sample code is as follows:

<title>HTML Button跳转页面</title>

<button onclick="window.location.href=&#39;about.html&#39;">关于我们</button>

In the above code, when the "About Us" button is clicked, it will jump to about.html in the same directory. page.

4. Use JavaScript to implement HTML Button jump

In addition to writing JavaScript code directly in the onclick attribute to implement page jump, you can also implement page jump through a function . The sample code is as follows:

<title>HTML Button跳转页面</title>

<button onclick="goToPage()">跳转页面</button>
<script type="text/javascript">
    function goToPage() {
        window.location.href = "https://www.baidu.com/";
    }
</script>

In the above code, when the "Jump Page" button is clicked, a function named goToPage will be called. Inside the function Implement page jump.

5. HTML Button implements back and refresh operations

In addition to jumping to other pages, HTML Button can also implement back and refresh operations. The sample code is as follows:

<title>HTML Button跳转页面</title>

<button onclick="window.history.back()">返回</button>
<button onclick="window.location.reload()">刷新</button>

In the above code, when the "Return" button is clicked, it will return to the previous page, and click "Refresh" button will refresh the current page.

In short, HTML Button is one of the important elements to realize page jump, back, refresh and other functions. By mastering the basic syntax and related knowledge of HTML Button, you can easily implement various operations and provide convenient tools for web development.

The above is the detailed content of Examples to explain how to use HTML to jump to the page by clicking on the Button element. For more information, please follow other related articles on the PHP Chinese website!