Lien hypertexte du didacticiel de base HTML

Les hyperliens sont visibles partout sur le site Web. Ouvrez Baidu News et cliquez sur n'importe quel paragraphe pour ouvrir la page de détails de l'actualité :

. Ensuite, introduisons la connaissance détaillée des hyperliens

Hyperliens

Format de syntaxe :

Remarque : <a> ne peut pas contenir la balise <a>

Attributs communs

href : L'adresse URL du fichier cible L'URL peut être une adresse relative ou une adresse absolue.
target : La fenêtre d'affichage du fichier cible.

_blank : Ouvrez le fichier cible dans une nouvelle fenêtre.
_self : Ouvre le fichier cible dans la fenêtre courante (ouverte par défaut), équivalent à l'opération "remplacer".
_parent : Ouvrez le fichier cible dans la fenêtre parent.
_top : ouvrez le fichier cible dans la fenêtre de niveau supérieur.

Parmi les pages web frame couramment utilisées de _parent et _top, nous les présenterons plus tard

nom : Définir le nom du lien d'ancrage .

1. URL d'adresse absolue

(1) Adresse absolue distante

Pour accéder aux fichiers distants, commencez toujours par "<a href="http://"nom de domaine et nom d'hôte.">http://"nom de domaine et nom d'hôte.</a>" 🎜>

Exemple :

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <h1>欢迎加入php.cn</h1>
        <a href="http://www.php.cn/" >php.cn</a>
        <hr>
        <a href="http://www.taobao.com/" target="_blank">淘宝网</a>
        <hr>
        <a href="http://www.baidu.com/" target="_blank">百度</a>
    </body>
</html>

(2) Adresse absolue locale (rarement utilisée)

L'absolue L'adresse pour accéder à la zone locale est une adresse absolue commençant par <a href="http://file:///.">file:///. </a>

Ajouter sur la base de l'exemple précédent :

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <h1>欢迎加入php.cn</h1>
        <a href="http://www.php.cn/" >php.cn</a>
        <hr>
        <a href="http://www.taobao.com/" target="_blank">淘宝网</a>
        <hr>
        <a href="http://www.baidu.com/" target="_blank">百度</a>
        <a href="file:///D:/image.html" target="_blank">点击查看图片</a>  
    </body>
</html>

Remarque : veuillez tester localement

2. URL d'adresse relative (le chemin dans le projet est généralement un chemin relatif, veuillez le tester localement)

(1) Le fichier actuel et le fichier cible sont dans la même relation de niveau, et l'adresse du lien écrit directement le nom du fichier cible.

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <h1>欢迎加入php.cn</h1>
       <a href="1.jpg">图片</a>  
    </body>
</html>

(2) Le fichier actuel et le dossier où se trouve le fichier cible sont dans la même relation de niveau. Recherchez d'abord le « nom du dossier », puis le « nom du fichier ». ".

C'est-à-dire que le fichier cible se trouve au niveau suivant.

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <h1>欢迎加入php.cn</h1>
       <a href="image/1.jpg">图片</a>  
    </body>
</html>

(3) Le fichier cible se trouve dans le répertoire supérieur, recherchez le répertoire correspondant, puis trouvez le fichier dans le répertoire.

Recherchez et utilisez le symbole "../".

"../" représente le répertoire de niveau supérieur

"../../" représente les deux niveaux au-dessus

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <h1>欢迎加入php.cn</h1>
       <a href="../image/1.jpg">图片</a>  
    </body>
</html>

3. Lien spécial

(1), lien de téléchargement

Quels types de fichiers auront des invites de téléchargement ?

Par contre, quels fichiers et pages web peuvent être exécutés directement ? Tels que : .jpg, .png, .gif, .html, .htm, .txt, etc.

La plupart des fichiers ne peuvent pas être exécutés directement par le navigateur. Tels que : .doc, .xls, .ppt, .rar, .psd... Si

ne peut pas être exécuté directement, une boîte de téléchargement apparaîtra

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <h1>欢迎加入php.cn</h1>
       <a href="image/1.rar">下载</a>  
    </body>
</html>

(2), lien par e-mail

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <h1>欢迎加入php.cn</h1>
       <a href="mailto:php@php.cn">有问题的话，请给我们发邮件</a>  
    </body>
</html>

(3), lien vide ordinaire (#)

Étape pour exécuter n'importe quel lien de saut :

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
        <h1>欢迎加入php.cn</h1>
       <a href="#">这是一个空链接</a>  
    </body>
</html>

Formation continue

nouveau fichier

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>欢迎加入php.cn</h1> <a href="http://www.php.cn/" >php.cn</a> <hr> <a href="http://www.taobao.com/" target="_blank">淘宝网</a> <hr> <a href="http://www.baidu.com/" target="_blank">百度</a> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Lien hypertexte du didacticiel de base HTML

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]