Explication détaillée de ce que sont les ancres HTML-tutoriel HTML-php.cn

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

PHPz

Libérer： 2017-04-02 09:24:30

original

2587 Les gens l'ont consulté

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>
…文字省略

Copier après la connexion

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>
…文字省略

Copier après la connexion

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>
…文字省略

Copier après la connexion

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>

Copier après la connexion

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!