Tutoriel de base HTML

Média HTML

Manuel de référence HTML

HTML5 Tutoriel de base

HTML5 API

HTML5 Média

Ancre HTML

Lorsque le contenu d'une page HTML est très long, il peut être difficile pour l'utilisateur de naviguer sur cette page, par exemple, après avoir fait défiler jusqu'au bas, il faut glisser la barre de défilement jusqu'au sommet (ou actualiser la page, ce qui n'est pas une bonne expérience), une méthode plus efficace consiste à définir des ancrages pour résoudre ce problème, permettant des sauts internes ou interpages

Exemple de démonstration d'ancre

Exemple

<!DOCTYPE html><html><head>
　　　　<meta charset="UTF-8">
　　　　<title>Tutoriel de base(oldtoolbag.com), réglage de l'ancre</title></head><body>
　　　　　<a href="#bottom" name="top">Aller au bas</a>
　　　　<div style="height:　5000px; width:　300px; background-color: #123">Ici, nous démontrons comment sauter à la tête et au bas de la page</div>
　　　　<a href="#top" name="bottom">Retour en haut</a></body></html>

Vérifiez et voyez ‹/›

Comment définir une ancre

(Première partie)、Méthode de réglage de la saut de page interne une :

Définir un lien d'ancre <a href="#miao">Trouver l'étoile du chat</a>；（Attention : ajoutez un # au début de la valeur de l'attribut href）
Définir un point d'ancre à l'endroit nécessaire de la page <a name="miao"></a>；（Attention : écrivez un attribut name dans la balise a, la valeur de l'attribut doit être la même que celle de [1] La valeur de l'attribut href est la même, sans le #) et remplissez le texte correspondant dans la balise selon les besoins, généralement sans écrire de contenu。

(Deuxième partie)、Méthode de réglage de la saut de page interne2：

Définir un lien d'ancre <a href="#miao">Trouver l'étoile du chat</a>；（Attention : ajoutez un # au début de la valeur de l'attribut href）
Position de l'ancre <h4 id="miao">Base de l'étoile du chat</h4>; Ajouter un attribut id à la balise où vous souhaitez sauter, la valeur de l'attribut est la même que celle de href dans ①, sans le #

　　 Attention : la méthode deux n'a pas besoin d'ajouter une balise a spécialement pour l'ancre, il suffit d'ajouter un id à l'endroit nécessaire de la balise .

Exemple

<!DOCTYPE html><html><head>
　　　　<meta charset="UTF-8">
　　　　<title>Démonstration d'ancre-Tutoriel de baseoldtoolbag.com</title>
</head>
<body>
　　　　<ul>
　　　　　　　　<li><a href="#miao">Trouver l'étoile du chat</a></li>
　　　　　　　　<li><a href="#wang">Trouver l'étoile du chien</a></li>
　　　　　　　　<li><a href="#meng">Autres adorables</a></li>
　　　　</ul>
　　　　<a name="miao"></a><!--Méthode de réglage de l'ancre1-->
　　　　<h3　id="miao">Base de l'étoile du chat</h3><!--Méthode de réglage de l'ancre2-->
　　　　<p>Miau miau miau~</p>
　　　　<p>Miau miau miau~</p>
　　　　<p>Miau miau miau~</p>
　　　　<p>Miau miau miau~</p>
　　　　<p>Miau miau miau~</p>
　　　　<p>Miau miau miau~</p>
　　　　
　　　　<a name="wang"></a>
　　　　<p>Wou wou wou~</p>
　　　　<p>Wou wou wou~</p>
　　　　<p>Wou wou wou~</p>
　　　　<p>Wou wou wou~</p>
　　　　<p>Wou wou wou~</p>
　　　　<p>Wou wou wou~</p>
　　　　<a　name="meng"></a>
　　　　<p>Chibi~</p>
　　　　<p>Chibi~</p>
　　　　<p>Chibi~</p>
　　　　<p>Chibi~</p>
　　　　<p>Chibi~</p>
　　　　<p>Chibi~</p>
</body>
</html>

Vérifiez et voyez ‹/›

Lecture de vidéo HTML Liens HTML