Comment accéder à une page en HTML ? Partage de conseils

Le saut HTML fait référence au processus consistant à passer d'un lien de page Web à une autre page Web. Il peut également s'agir d'un saut au sein de la même page, comme sauter du haut vers le bas d'un article. Jetons un coup d'œil aux méthodes et techniques de saut HTML.

1. Hyperlink Jump

L'hyperlien est le moyen le plus courant de sauter en HTML En ajoutant une balise de lien hypertexte en HTML, les utilisateurs peuvent accéder à d'autres pages Web ou à d'autres emplacements sur la même page en cliquant sur le lien.

Le format de syntaxe du saut de lien hypertexte HTML est le suivant :

<a href="跳转链接">链接文本</a>

Parmi eux, "href" représente l'adresse cible du lien, qui peut être l'URL d'autres pages Web ou l'identifiant d'emplacement au sein de la même page.

1. Aller vers d'autres pages Web

Si vous souhaitez accéder à un lien vers d'autres pages Web, il vous suffit de spécifier l'URL de la page Web cible dans l'attribut "href".

Par exemple :

<a href="http://www.baidu.com">前往百度</a>

En cliquant sur le lien « Aller à Baidu », vous accéderez à la page d'accueil de Baidu.

2. Sauter à la position d'ancrage interne de la même page

L'ajout d'ancres dans les documents HTML permet aux utilisateurs d'accéder à d'autres emplacements sur la même page en cliquant sur le lien.

Le format de syntaxe de l'ancre HTML est le suivant :

<a id="锚点ID">跳转文本</a>

L'attribut "id" est le nom de l'ancre, qui peut être une chaîne de lettres ou de chiffres anglais.

Par exemple :

<a id="section1">第一部分</a>
<a id="section2">第二部分</a>
<a id="section3">第三部分</a>

Le code ci-dessus définit 3 points d'ancrage, correspondant à différents chapitres du document.

Lorsque nous devons accéder à une certaine partie du document, il nous suffit de spécifier le nom de l'ancre dans le lien.

Par exemple :

<a href="#section2">跳转到第二部分</a>

Cliquez sur le lien « Passer à la partie 2 » et la page passera automatiquement à la deuxième partie.

2. Saut JavaScript

En plus des hyperliens, nous pouvons également utiliser du code JavaScript pour réaliser des sauts de page. Cette méthode est plus flexible et peut répondre à des exigences de saut plus complexes.

Il existe deux méthodes pour le saut JavaScript. L'une consiste à utiliser l'attribut location de l'objet window pour implémenter la redirection de page, et l'autre consiste à utiliser l'événement hyperlink onClick pour implémenter le saut de page interne.

1. window.location jump

L'objet window.location contient les informations URL de la fenêtre actuelle. Nous pouvons sauter et rediriger la page en modifiant la valeur de son attribut.

En JavaScript, utilisez la méthode location.replace() pour réaliser des sauts de page et des redirections.

Par exemple :

window.location.replace("http://www.baidu.com");

Après avoir exécuté le code ci-dessus, la page passera immédiatement à la page d'accueil de Baidu.

2. Saut d'événement Hyperlink onClick

En plus d'utiliser le saut d'hyperlien, nous pouvons également ajouter des événements onclick aux hyperliens et implémenter des sauts de page via le code JavaScript dans la fonction de gestionnaire d'événements.

Par exemple :

<a href="#" onclick="window.location.href=&#39;http://www.baidu.com&#39;; return false">前往百度</a>

L'événement onclick dans le code ci-dessus définit la propriété window.location.href sur l'URL sautée et empêche le comportement de saut de lien par défaut en renvoyant false.

3. Conseils pour le saut HTML

En plus des méthodes de saut présentées ci-dessus, il existe également certaines techniques qui peuvent rendre le saut HTML plus pratique et flexible.

1. Sauter avec des paramètres

Parfois, nous devons apporter certains paramètres lors du saut de page, tels que les mots-clés de recherche, l'ID utilisateur, etc. Dans ce cas, nous pouvons utiliser les paramètres d'URL pour y parvenir.

Par exemple :

window.location.href="http://www.baidu.com/search?key=HTML";

Dans le code ci-dessus, le mot-clé de recherche "HTML" est utilisé comme valeur du paramètre URL "key". Lorsque la page est redirigée, elle passera à la page de recherche Baidu et recherchera " HTML" par défaut.

2. Jump timer

Parfois, nous devons ajouter un compte à rebours à la page et accéder à la page une fois l'heure atteinte. Dans ce cas, nous pouvons utiliser la minuterie JavaScript pour y parvenir.

Par exemple :

var timer = setTimeout(function(){
    window.location.href = "http://www.baidu.com";
}, 5000);

Le code ci-dessus utilise la méthode setInterval pour accéder à la page d'accueil de Baidu après 5 secondes.

4. Empêcher les soumissions répétées

Lors d'opérations telles que la soumission de formulaires, les utilisateurs peuvent parfois soumettre plusieurs fois rapidement, ce qui exercera une pression inutile sur le serveur et provoquera même des anomalies de données. Pour éviter les soumissions répétées, nous pouvons désactiver le bouton de soumission immédiatement après avoir soumis le formulaire ou utiliser JavaScript pour accéder à la page.

Par exemple :

<form action="submit.php" method="post" onsubmit="return false">
    <button onclick="submitForm()">提交表单</button>
</form>
<script>
function submitForm(){
    // 先禁用提交按钮，避免重复提交
    document.querySelector('button').disabled = true;
    // 执行表单提交操作
    // 此处省略其他代码
    // 提交成功后跳转到另一个页面
    window.location.href = "http://www.baidu.com";
}
</script>

Dans le code ci-dessus, en cas de clic sur le bouton de soumission du formulaire, le bouton de soumission est d'abord désactivé, puis l'opération de soumission du formulaire est effectuée. Une fois le formulaire soumis avec succès, utilisez window.location.href pour accéder à la page d'accueil de Baidu.

Résumé

Ce qui précède est une introduction aux méthodes et techniques liées au saut HTML. En apprenant et en maîtrisant ces connaissances, nous pouvons facilement réaliser le saut et la redirection de pages Web. Dans le développement réel, nous devons choisir différentes méthodes de saut en fonction de besoins spécifiques, et nous devons prêter attention à des problèmes tels que la sécurité et la vitesse de chargement des pages.

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!