L'utilisation de l'url, du href et du src dans JS

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

Scheme	访问	用于...
http	超文本传输协议	以 http:// 开头的普通网页。不加密。
https	安全超文本传输协议	安全网页。加密所有信息交换。
ftp	文件传输协议	用于将文件下载或上传至网站。
file		您计算机上的文件。

ou téléchargement sur le 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 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 @import

Les 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.

(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 ; 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!