Cette fois, je vais vous apporter une explication détaillée de l'utilisation de url, href et src, et quelles sont les précautions d'utilisation de url, href et src. Ce qui suit est un cas pratique, jetons un coup d'œil.
1. Le concept d'URL
Uniform Resource Locator (ou Uniform Resource Locator/adresse d'emplacement, adresse URL, etc., anglais : Uniform Resource Locator, souvent abrégé en URL), parfois également appelé adresse Web (adresse Web). Tout comme un numéro de maison sur Internet, il s’agit de l’adresse d’une ressource standard sur Internet.
2. Format URL
2.1 Format standard
Type de protocole : [// Serveur adresse[:numéro de port]][/chemin du fichier UNIX au niveau de la ressource]Nom du fichier ? Requête
2.2 Format complet
Type de protocole :[//[Ressources d'accès requises informations d'identification@]Adresse du serveur[:numéro de port]][/chemin du fichier UNIX au niveau de la ressource]Nom du fichier?Requête
où [informations d'identification d'accès@;:numéro de port;?requête;#ID fragment] sont toutes les options Remplissez les articles.
3. Règles de syntaxe de l'URL
Par exemple, l'URL http://segmentfault.com/html/index.asp doit être conforme les règles de syntaxe suivantes :
schéma : //host.domain:port/path/filename
3.1 Description
(1) schéma - Définir Type de services Internet. Le type le plus courant est http
(2) host - définit l'hôte du domaine (l'hôte par défaut pour http est www)
(3) domain - définit le nom de domaine Internet, tel que w3school .com.cn
(4):port - définit le numéro de port sur l'hôte (le numéro de port par défaut pour http est 80)
(5) path - définit le chemin sur le serveur (en cas d'omission, le document doit être situé dans le répertoire racine du site Web).
(6) nom de fichier - définit le nom du document/ressource
3.2 Schémas d'URL
Voici quelques-uns des schémas les plus populaires :
| Schéma | Accès | pour... | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| http | Hypertext Transfer Protocol | Pages Web ordinaires commençant par http://. Pas de cryptage. | |||||||||||||||
| https | Protocole de transfert hypertexte sécurisé | Page Web sécurisée. Chiffrez toutes les informations échangées. | |||||||||||||||
| ftp | File Transfer Protocol | est utilisé pour télécharger ou charger des fichiers sur un site Web. | |||||||||||||||
| fichier |
|
Un fichier sur votre ordinateur. |
4. Types d'URL
4.1 URL absolue
L'URL absolue (URL absolue) affiche le fichier Chemin complet, ce qui signifie que l'emplacement de l'URL absolue elle-même n'a rien à voir avec l'emplacement du fichier réel référencé.
4.2 URL relative
Une URL relative utilise l'emplacement du dossier contenant l'URL elle-même comme point de référence pour décrire l'emplacement du dossier cible.
En général, vous devez toujours utiliser des URL relatives pour les fichiers sur le même serveur, elles sont plus faciles à saisir et plus pratiques lors du déplacement de pages du système local vers le serveur, à condition que chaque fichier soit relatif. La position reste inchangé et le lien est toujours valide.
Voici plusieurs symboles spéciaux utilisés pour établir les chemins et leurs significations.
(1) .: Représente le répertoire courant, chemin relatif. Par exemple : Text ou
(2) .. : Représente le répertoire de niveau supérieur, chemin relatif. Par exemple : text ou
(3) ../../ : représente le répertoire de niveau supérieur. répertoire supérieur, chemin relatif. Par exemple :
(4) / : représente le répertoire racine, chemin absolu. Par exemple : [text] (/abc) ou
5. Le concept de href
.5.1 Explication de la spécification
href (Hypertext Reference) spécifie l'emplacement d'une ressource réseau, définissant ainsi un lien entre l'élément actuel ou le document actuel et l'ancre ou la ressource requise définie par l'attribut actuel Lien ou relation.
5.2 Compréhension populaire
href Le but n'est pas de référencer des ressources, mais d'établir une connexion afin que la balise actuelle puisse être liée à l'adresse cible.
6. Le concept de src
source (abréviation), pointe vers l'emplacement des ressources externes, et le contenu pointé sera appliqué au document actuel L'emplacement de l'étiquette.
7. La différence entre href et src
7.1 Différents types de ressources demandées
(1) href pointe vers l'emplacement de la ressource réseau et établit une connexion avec l'élément actuel (ancre) ou le document actuel (lien).
(2) Lors de la demande de la ressource src, la ressource vers laquelle elle pointe sera téléchargée et appliquée au document, comme les scripts JavaScript et les images img
7.2 Les résultats sont ; différent
(1) href est utilisé pour établir une connexion entre le document actuel et la ressource référencée
(2) src est utilisé pour remplacer le contenu actuel
;7.3 Parcourir Les méthodes d'analyse du navigateur sont différentes
(1) S'il est ajouté dans le document, le navigateur reconnaîtra le document comme un fichier CSS, téléchargera la ressource en parallèle et n'arrête pas le traitement du document en cours. C'est pourquoi il est recommandé d'utiliser la méthode link pour charger CSS au lieu d'utiliser la méthode @import.
(2) Lorsque le navigateur l'analyse, il suspend le téléchargement et le traitement des autres ressources jusqu'à ce que la ressource soit chargée, compilée et exécutée. Il en va de même pour les images et les cadres, de la même manière que pour l'application du pointage. ressource vers le contenu actuel. C'est pourquoi il est recommandé de placer les scripts js en bas plutôt qu'en tête.
8. La différence entre link et @import
Les deux sont des moyens de référencer CSS en externe, mais il existe certaines différences :
Le lien(1) est une balise XHTML en plus de charger du CSS, il peut également définir d'autres transactions telles que RSS tandis que @import appartient à la catégorie CSS et ne peut charger que du CSS.
(2) Lorsque le lien fait référence à CSS, il est chargé en même temps que la page est chargée ; @import nécessite que la page soit complètement chargée avant le chargement.
(3) le lien est une balise XHTML et ne présente aucun problème de compatibilité ; @import a été proposé dans CSS2.1 et n'est pas pris en charge par les navigateurs de versions inférieures.
(4) le lien prend en charge l'utilisation de Javascript pour contrôler le DOM afin de changer le style alors que @import ne le prend pas en charge ;
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Comment utiliser Node.js pour enregistrer l'activation par e-mail
jQuery fait défiler l'image et fait un fondu entrant et sortant
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
