HTML une balise en détail

aLes balises sont les balises les plus courantes dans les navigateurs. Sa fonction principale est de passer d'une page à l'autre. Alors, outre la fonction principale des hyperliens, quelles autres fonctions connaissez-vous des abalises

`a`propriétés de l'étiquette

href

aLa balise a un attribut crucial : href, si cet attribut n'est pas défini, ce sera spanle même et n'a pas de fonction spéciale.

<a href="https://bilibili.com">网址直接跳转</a> 
<a href="images/1.webp">相对路径跳转</a>
<a href="hello.exe">如果是打不开的文件，则下载之</a>
<a href="">空链接是刷新</a>
<a href="#">#是回到顶部</a>
<a href="javascript:;">禁止链接跳转</a>

hrefComment ça marche ¹ :

1) Si la valeur de l'attribut href d'une balise commence par http, le navigateur interprétera immédiatement l'URL : dans un premier temps, il trouvera un fichier hosts sur la machine locale, s'il n'y a pas d'host correspondant pour le nom de domaine dans le fichier hosts, puis parcourir Le serveur ira sur le serveur dns correspondant pour trouver le numéro d'hôte correspondant au nom de domaine. Si l'hébergeur correspondant est trouvé, la requête sera envoyée à l'hébergeur correspondant, et enfin la page sera ouverte.
2) Si la valeur de l'attribut href d'une balise ne commence par aucun protocole, le navigateur démarre l'interpréteur de protocole de fichier pour expliquer le chemin de la ressource.
3) Si la valeur de l'attribut href de la balise a n'est pas basée sur le protocole http, mais sur d'autres protocoles, le navigateur ira dans le registre de notre ordinateur local pour savoir s'il existe une application qui gère ce protocole. , puis démarrez immédiatement l'application pour gérer le protocole. Protocoles couramment utilisés :

<a href="tel:12345678">拨打电话</a>
<a href="mailto:[email protected]">打开邮箱应用</a>

Si vous cliquez sur le lien correspondant, le navigateur affichera une boîte de dialogue ou ouvrira directement l'application par défaut. Cette fonctionnalité est très intéressante, les lecteurs peuvent l'essayer par eux-mêmes.

cible

aLa fonction principale du label est le saut de page. La page cible du saut peut être ouverte dans la fenêtre courante ou dans une nouvelle fenêtre. La fonction de la nouvelle fenêtre peut être contrôlée par targetla propriété

<a href="https://bilibili.com" tatget="_blank">新窗口打开网页</a> 
<a href="https://bilibili.com" tatget="_self">当前窗口打开网页</a>

[Remarque] Il y a un trait de soulignement devant la valeur de l'attribut.

`a`Imbrication de balises

aUne étiquette est un élément en ligne, qui peut être utilisé comme sous-élément d'autres éléments de niveau bloc, et des éléments de niveau bloc peuvent également être imbriqués à l'intérieur, de sorte que cliquer sur un élément de contenu peut passer à d'autres pages (carte liens), mais les étiquettes ne peuvent pasa imbriquer une autre abalise :

<a href="">
  <h3>出Bug了</h3>
  <span class="box">
    <a href="">哈哈哈</a>
  </span>
</a>

est analysé dans le navigateur comme :

<a href>
  <h3>出Bug了</h3>
  <span class="box">
  </span>
</a>
<a href="">哈哈哈</a>

Les gens normaux ne nichent pas comme ça, mais il est inévitable d'être stupide s'il y a trop de balises imbriquées, donc se souvenir de ce cas particulier est utile pour déboguer et trouver des erreurs.

`a`style d'étiquette

souligner

aLes étiquettes sont généralement accompagnées d'un trait de soulignement. L'effet de soulignement peut être défini via CSS :

a {
    
    
  text-decoration: none; /*去掉下划线*/
}

/*加上下划线*/
a {
    
    
  text-decoration: underline;
}

/*还能设置线型样式*/
a {
    
    
  text-decoration: underline dotted red;
}

Pour plus de styles, veuillez vous référer à : MDN text-decoration .

couleur de la police

aLa couleur de police par défaut de l'étiquette est le bleu. Nous savons que le style de police : la taille de la police, la hauteur de ligne, la couleur et d'autres attributs peuvent hériter de l'élément parent, mais si l'élément a un style spécial fourni avec le navigateur (utilisateur style de l'agent), alors cet attribut ne sera pas hérité. Pour cette raison, ale paramètre de couleur de l'étiquette doit être initialisé par nous-mêmes :

a {
    
    
  color: inherit;
}

De cette façon, al'étiquette peut également hériter de la couleur de l'élément parent, et il n'est pas nécessaire de la définir séparément.

propriétés de la boîte

aUne étiquette est un élément en ligne, comme tout autre élément en ligne :

Le réglage de la largeur et de la hauteur n'est pas valide
La définition des marges supérieure et inférieure n'est pas valide
Définir le rembourrage supérieur et inférieur répartira l'arrière-plan, mais pas le contenu.

Mais parfois, une page Web a besoin d'un long lien comme un bouton. Le bouton doit définir la hauteur et la largeur, les marges intérieures et extérieures. Vous pouvez placer une couche de balises de comptabilité à l'extérieur de la balise a, ou la définir comme un élément de bloc en ligne pour résoudre il:

a {
    
    
  display: inline-block;
  
  height: 32px;
  line-height: 32px;
  padding: 4px 16px;
  border-radius: 5px;
  
  /*辅助样式*/
  text-decoration: none;
  color: deeppink;
  background-color: lightpink;
}

effet dynamique

aLes étiquettes peuvent être stylisées en fonction du comportement de l'utilisateur, par exemple lorsque la souris survole un lien, la forme de la souris prend la forme d'une main. L'effet est en fait :

a:hover {
    
    
  cursor: pointer;
}

/*改成其他的就变了*/
a:hover {
    
    
  cursor: auto;
}

Plus de styles de pointeur de souris peuvent faire référence au curseur MDN .

Il convient de mentionner que :hovercela représente l'état lorsque la souris survole l'élément, qui s'appelle un sélecteur de pseudo-classe. Il y a aussi:

/* 带有 href 的a标签会生效, 用得比较少了*/
a:link {
    
    
  color: brown;
}

/* visited 点过的链接会生效，用的比较少了*/
a:visited {
    
    
  color: aquamarine;
}

/* 鼠标滑过时生效，使用非常多 */
a:hover {
    
    
  color: blueviolet;
}

/* 鼠标长按元素的生效 */
a:active {
    
    
  color: darkcyan;
}

En règle générale, un seul des styles de pseudo-classe ci-dessus sera utilisé, mais si vous souhaitez définir les quatre styles ci-dessus en même temps, vous devez faire attention à l'ordre de déclaration. Si un lien n'a pas été visité, il peut avoir deux attributs de lien et de survol en même temps, et le lien ne peut pas être écrit derrière, sinon, le style du lien sera affiché indépendamment du fait que le survol soit ; la même raison , si un lien a été visité Ensuite, il peut avoir deux attributs de visité et de survol en même temps, et le survol doit être ² derrière visité .

【Compétences】Méthode de mémoire : Mettez les conditions difficiles à l'arrière.

article de référence

♥ Merci beaucoup pour vos goûts et votre attention. L'article est organisé à partir d'Internet, s'il y a des omissions, veuillez les corriger dans la zone de commentaire.

★ Cet article est open source ( lien Github ) bienvenue pour participer à la contribution, reproduit doit indiquer la source : Xiao Xingsen.HTML une balise explication détaillée.Zhihu .

★ La photo de couverture provient de : https://www.pexels.com/.

★ Pour une coopération commerciale, veuillez envoyer un message privé ou un e-mail à : [email protected], et indiquer le sujet : coopération commerciale.

★ Si la publicité est bonne, le produit n'est pas mauvais Si la publicité est bonne, le produit est n°1. Je suis Xiao Xingsen du front-end, laissez les utilisateurs voir le meilleur produit. Je connais un peu le front-end. Si votre entreprise a des produits ou des services de première classe qui ont besoin d'ingénieurs front-end pour les montrer, ou ont besoin d'un ingénieur front-end pour réaliser votre rêve d'entreprise, veuillez envoyer un e-mail : [email protected] , et indiquez le sujet : Recrutement d'ingénieurs frontaux.

Petits soldats sur la route de front. Explication détaillée d'une balise HTML (balise de lien hypertexte) . Blog Jardin. ↩︎
Du Juncheng. Le bon ordre des pseudo-classes de la balise a, et pourquoi . Blog Garden. ↩︎

apropriétés de l'étiquette