<a>
balise HTML <a>
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <a href="http://www.php.cn">访问php中文网!</a> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Prise en charge des navigateurs
Tous les principaux navigateurs prennent en charge la balise <a>
Définition du tag et instructions d'utilisation
Que signifie un tag ? La balise
<a> définit un lien hypertexte qui permet de créer un lien d'une page à une autre. L'attribut le plus important de l'élément
<a> est l'attribut href, qui spécifie la cible du lien.
L'apparence par défaut des liens dans tous les navigateurs est la suivante :
Les liens non visités sont soulignés et bleus
Liens visités sont soulignés et en violet
Les liens actifs sont soulignés et en rouge
Conseils et notes
Conseils : Si l'attribut href n'est pas utilisé, les attributs hreflang, media, rel, target et type ne peuvent pas être utilisés.
Conseil : Affiche généralement la page liée dans la fenêtre actuelle du navigateur, à moins qu'une autre cible ne soit spécifiée.
Conseil : Veuillez utiliser CSS pour modifier le style du lien.
Différences entre HTML 4.01 et HTML5
Dans HTML 4.01, la balise <a> peut être soit un lien hypertexte, soit une ancre. En HTML5, la balise <a> est un lien hypertexte, mais sans l'attribut href, il s'agit simplement d'un espace réservé pour le lien hypertexte.
HTML5 a de nouveaux attributs et certains attributs HTML 4.01 ne sont plus pris en charge.
Attribut
Nouveau : Nouvel attribut en HTML5.
| 属性 | 值 | 描述 |
|---|---|---|
| charset | char_encoding | HTML5 不支持。规定目标 URL 的字符编码。 |
| coords | coordinates | HTML5 不支持。规定链接的坐标。 |
| downloadNew | filename | 指定下载链接 |
| href | URL | 规定链接的目标 URL。 |
| hreflang | language_code | 规定目标 URL 的基准语言。仅在 href 属性存在时使用。 |
| mediaNew | media_query | 规定目标 URL 的媒介类型。默认值：all。仅在 href 属性存在时使用。 |
| name | section_name | HTML5 不支持。规定锚的名称。 |
| rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag | 规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用。 |
| rev | text | HTML5 不支持。规定目标 URL 与当前文档之间的关系。 |
| shape | default rect circle poly | HTML5 不支持。规定链接的形状。 |
| target | _blank _parent _self _top framename | 规定在何处打开目标 URL。仅在 href 属性存在时使用。 |
| type New | MIME_type | 规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用。 注：MIME = Multipurpose Internet Mail Extensions。 |
Attributs globaux
<a> prend en charge les attributs globaux HTML.
Attributs d'événement
La balise <a> prend en charge les attributs d'événement HTML.
Essayez-le - Exemple
Créer un lien hypertexte
Cet exemple montre comment créer un lien dans un document HTML.
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>我使用了外部样式文件来格式化文本 </h1> <p>我也是!</p> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Utiliser une image comme lien
Cet exemple montre comment utiliser une image comme lien.
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p> 图像作为链接: <a href="http://php.cn"> <img border="0" alt="w3cschool" src="logo.png" width="100" height="100"> </a> </p> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Ouvrir le lien dans une nouvelle fenêtre de navigateur
Cet exemple montre comment ouvrir une page dans une nouvelle fenêtre afin que les visiteurs n'aient pas besoin de quitter votre site.
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <a href="http://www.php.cn/" target="_blank">访问php中文网!</a> <p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Créer un lien vers un e-mail
Cet exemple montre comment créer un lien vers un e-mail. (Cet exemple ne fonctionnera qu'après l'installation du programme client de messagerie.)
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p> 这是一个电子邮件链接： <a href="mailto:someone@example.com?Subject=Hello%20again" target="_top"> 发送邮件</a> </p> <p> <b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser will display the text properly. </p> </body> </html>
Exécuter l'instance»
Cliquez sur Bouton "Exécuter l'instance" pour afficher l'instance en ligne
Créer un lien de courrier électronique 2
Cet exemple montre un lien de courrier électronique plus complexe.
Instance
<!DOCTYPE html> <html> <body> <p> This is another mailto link: <a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">Send mail!</a> </p> <p> <b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser will display the text properly. </p> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Utilisez des ancres pour accéder à différents emplacements sur la même page
Cet exemple montre comment utiliser l'attribut id de l'ancre pour accéder à différents emplacements sur la page (HTML5 ne prend pas en charge l'attribut name).
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h2><a id="top">这是标题，底部链接可以链接到这</a></h2> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <a href="#top">链接到标题</a> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Articles connexes
Tutoriel HTML : Lien HTML
Manuel de référence HTML DOM : Objet d'ancrage
