Cette fois, je vais vous présenter l'utilisation de url, href et src en JS. Quelles sont les précautions lors de l'utilisation de url, href et src en JS. Voici des cas pratiques. regarder. .
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 transférer le Téléchargement de fichiers
|
|||||||||||||||
| 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 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 pointée sera téléchargée et appliquée au document, telle que le script JavaScript, l'image img ; >7.2 Les résultats sont différents
(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 l'actuel ; contenu ;7.3 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 dans parallèle et n'arrêtera 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, ce qui est similaire à l'application. la ressource pointée 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 @importLes deux sont des moyens de référencer CSS en externe, mais il existe certaines différences :
(1) le lien est un (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. (4) le lien prend en chargel'utilisation de Javascript
pour contrôler le DOM afin de changer le style ; mais @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 :
Explication détaillée de l'utilisation du minuteur d'animation JS
Comment implémenter l'arbre de Pythagore avec JS
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)
