HTML을 사용하여 Button 요소를 클릭하여 페이지로 이동하는 방법을 설명하는 예

HTML에서는 태그를 사용하여 페이지로 이동할 수 있는데, 버튼을 통해 페이지로 이동하려면 어떻게 해야 할까요? 이를 위해서는 HTML에서 태그를 사용해야 합니다. 이번 글에서는 HTML에서 Button 요소를 클릭하여 페이지로 이동하는 방법을 소개합니다.

1. HTML 버튼의 기본 구문

HTML 버튼을 사용하여 페이지 점프를 구현하려면

태그에 onclick 속성을 추가한 후 속성 값에 JavaScript 코드를 작성하여 페이지 점프를 구현해야 합니다. 기본 구문은 다음과 같습니다.

Jump page

그 중 window.location.href는 페이지 URL 주소를 나타내는 JavaScript 코드입니다.

2. HTML 버튼 페이지 점프 샘플 코드

다음은 페이지 점프를 구현하기 위한 HTML 버튼의 샘플 코드입니다:

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

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

위 코드에서 '바이두로 가기' 버튼을 클릭하면 바이두 공식 홈페이지로 이동합니다.

3. HTML 버튼은 상대 경로 페이지로 이동합니다

실제 개발에서는 동일한 웹 사이트 내의 다른 페이지로 이동해야 하는 경우가 많습니다. 이 경우 전체 URL 주소 대신 상대 경로를 사용할 수 있습니다. 샘플 코드는 다음과 같습니다:

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

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

위 코드에서 "About Us" 버튼을 클릭하면 같은 디렉터리에 있는 about.html 페이지로 이동합니다.

4. JavaScript를 사용하여 HTML 버튼 점프 구현

onclick 속성에 JavaScript 코드를 직접 작성하여 페이지 점프를 구현하는 것 외에도 함수를 통해 페이지 점프를 구현할 수도 있습니다. 샘플 코드는 다음과 같습니다:

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

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

위 코드에서 "페이지로 이동" 버튼을 클릭하면 goToPage라는 함수가 호출되고, 그 함수 내부에 페이지 점프가 구현됩니다.

5. HTML 버튼은 뒤로 및 새로 고침 작업을 구현합니다.

다른 페이지로 이동하는 것 외에도 HTML 버튼은 뒤로 및 새로 고침 작업을 구현할 수도 있습니다. 샘플 코드는 다음과 같습니다:

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

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

위 코드에서 "Return" 버튼을 클릭하면 이전 페이지로 돌아가고, "Refresh" 버튼을 클릭하면 현재 페이지를 새로고침합니다.

간단히 말하면 HTML 버튼은 페이지 이동, 뒤로, 새로 고침 및 기타 기능을 구현하는 중요한 요소 중 하나입니다. HTML Button의 기본 구문과 관련 지식을 익히면 다양한 연산을 쉽게 구현하고 웹 개발에 편리한 도구를 제공할 수 있습니다.

위 내용은 HTML을 사용하여 Button 요소를 클릭하여 페이지로 이동하는 방법을 설명하는 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!