Exemples pour expliquer comment utiliser HTML pour accéder à la page en cliquant sur l'élément Button

En HTML, vous pouvez utiliser la balise pour accéder à une page, mais comment accéder à une page via un bouton ? Cela nécessite l'utilisation de la balise Cet article explique comment accéder à la page en cliquant sur l'élément Button en HTML.

1. Syntaxe de base du bouton HTML

Pour utiliser le bouton HTML pour implémenter le saut de page, vous devez ajouter l'attribut onclick dans la balise

, puis écrire du code JavaScript dans la valeur de l'attribut pour implémenter le saut de page. La syntaxe de base est la suivante :

Page de saut

Parmi eux, window.location.href fait partie du Code JavaScript, indiquant l'adresse URL de la page.

2. Exemple de code de saut de page du bouton HTML

Ce qui suit est un exemple de code pour le bouton HTML permettant d'implémenter le saut de page :

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

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

Dans le code ci-dessus, lorsque vous cliquez sur le bouton "Aller à Baidu", il accède au site officiel de Baidu.

3. Le bouton HTML permet d'accéder à la page de chemin relatif

Dans le développement réel, il est souvent nécessaire d'accéder à d'autres pages du même site Web. Dans ce cas, des chemins relatifs peuvent être utilisés à la place des adresses URL complètes. L'exemple de code est le suivant :

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

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

Dans le code ci-dessus, lorsque vous cliquez sur le bouton "À propos de nous", vous accédez à la page about.html du même répertoire.

4. Utilisez JavaScript pour implémenter le saut de bouton HTML

En plus d'écrire directement du code JavaScript dans l'attribut onclick pour implémenter le saut de page, vous pouvez également implémenter le saut de page via une fonction. L'exemple de code est le suivant :

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

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

Dans le code ci-dessus, lorsque vous cliquez sur le bouton "Aller à la page", une fonction nommée goToPage sera appelée et le saut de page sera implémenté à l'intérieur de la fonction.

5. HTML Button implémente des opérations de retour et d'actualisation

En plus de passer à d'autres pages, HTML Button peut également implémenter des opérations de retour et d'actualisation. L'exemple de code est le suivant :

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

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

Dans le code ci-dessus, lorsque vous cliquez sur le bouton "Retour", vous reviendrez à la page précédente et cliquez sur le bouton "Actualiser" pour actualiser la page actuelle.

En bref, le bouton HTML est l'un des éléments importants pour réaliser le saut de page, le retour en arrière, l'actualisation et d'autres fonctions. En maîtrisant la syntaxe de base et les connaissances associées du bouton HTML, vous pouvez facilement mettre en œuvre diverses opérations et fournir des outils pratiques pour le développement Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!