Maison  >  Article  >  interface Web  >  Explication détaillée de ce que sont les ancres HTML

Explication détaillée de ce que sont les ancres HTML

PHPz
PHPzoriginal
2017-04-02 09:24:302623parcourir

Explication détaillée de ce que sont les ancres HTML

La première étape dans l'apprentissage des connaissances Web est définitivement le HTML. A quoi sert le point d'ancrage du HTML ?

Pour faire simple, par exemple, si vous souhaitez lire un article très long avec précision par segment, vous pouvez utiliser des points d'ancrage.

Code :

<a href="#001">跳到001</a>
…文字省略
<a name="001" id="001" ></a>
…文字省略

En fait, le point d'ancrage n'a besoin que de nom. L'identifiant est ajouté pour le rendre plus compatible.

La valeur de href doit être la. identique au nom. i d est cohérent et "#" doit être ajouté devant. Le code ci-dessus est compatible avec ie6/7 et ff, mais pas avec ie8.

Comme la valeur de notre point d'ancrage est vide, nous pouvons simplement ajouter un espace pour ne pas affecter l'esthétique

Le code suivant est compatible. avec ie8

<a href="#001">跳到001</a>
…文字省略
<a name="001" id="001" > & n b s p  </a>
…文字省略

Une autre question, souhaitez-vous afficher un certain contenu d'ancre d'une certaine page (comme : 321.html) ?

Le code est le suivant

<a href="123.html#001">跳到001</a>
…文字省略
<a name="001" id="001" > & n b s p </a>
…文字省略

Affichage de tous les codes :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>锚点示例</title>
</head>
<body>
<a name="A0" id="A0"></a>
<a href="#A1">网页第一部分</a>
<a href="#A2">网页第二部分</a>
<div style="height:900px; background:#CCCCCC"></div>
<a name="A1" id="A1"></a>1<a href="#A0">返回顶部</a>
<div style="height:900px; background:#999999"></div>
<a name="A2" id="A2"></a>2<a href="#A0">返回顶部</a>
<div style="height:900px; background:#666666"></div>
</body>
</html>


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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn