JS에서 url, href, src 사용

이번에는 JS에서 url, href, src를 사용하는 방법을 알려드리겠습니다. JS에서 url, href, src를 사용할 때 notes란 무엇인지 살펴보겠습니다.

1. URL의 개념

Uniform Resource Locator(또는 Uniform Resource Locator/위치 주소, URL 주소 등, 영어:Uniform Resource Locator, 흔히 URL로 약칭함), 때로는 일반적으로 웹페이지 주소(웹사이트). 인터넷의 집 번호와 마찬가지로 인터넷의 표준 리소스 주소입니다.

2. URL 형식

2.1 표준 형식

프로토콜 유형: [//서버 주소 [:포트 번호]][/리소스 수준 UNIX 파일 경로] Query

2.2 전체 형식

프로토콜 유형: [//[리소스에 액세스하는 데 필요한 자격 증명@]서버 주소 [:포트 번호]][/리소스 수준 UNIX 파일 경로]파일 이름? Query
where [액세스 자격 증명@;:포트 아니요 .;?Query;#fragment ID]는 모두 선택 사항입니다.

3. URL의 문법 규칙

예를 들어, http://segmentfault.com/html/index.asp URL은 다음 문법 규칙을 준수해야 합니다.

scheme: //host.domain: port/path /filename

3.1 Description

(1) Scheme - 인터넷 서비스의 종류를 정의한다. 가장 일반적인 유형은 http입니다.

(2) 호스트 - 도메인 호스트를 정의합니다(http의 기본 호스트는 www입니다)

(3) 도메인 - w3school.com.cn과 같은 인터넷 도메인 이름을 정의합니다

(4 ): port - 정의 호스트의 포트 번호(http의 기본 포트 번호는 80)

(5) path - 서버의 경로를 정의합니다(생략할 경우 문서는 웹사이트의 루트 디렉터리에 위치해야 함) .

(6) 파일 이름 - 문서/리소스의 이름을 정의합니다.

3.2 URL Schemes

다음은 가장 널리 사용되는 스키마 중 일부입니다.

Scheme	Access	은...
http	Hypertext Transfer Protocol	http://로 시작하는 일반 웹 페이지입니다. 암호화가 없습니다.
https	HTTP 보안	보안 웹페이지. 교환되는 모든 정보를 암호화합니다.
ftp	파일 전송 프로토콜	은 파일을 다운로드하거나 웹사이트에 업로드하는 데 사용됩니다.
file		컴퓨터에 있는 파일.

4. URL의 종류

4.1 절대 URL

절대 URL(절대 URL)은 파일의 전체 경로를 표시하므로 절대 URL 자체의 위치는 위치와 관련이 없습니다. 참조되는 실제 파일의

4.2 상대 URL

상대 URL(상대 URL)은 URL 자체가 포함된 폴더의 위치를 ​​참조점으로 사용하여 대상 폴더의 위치를 ​​설명합니다.

일반적으로 동일한 서버에 있는 파일에 대해 항상 상대 URL을 사용해야 합니다. 각 파일의 상대 위치가 동일하게 유지되는 한 로컬 시스템에서 서버로 페이지를 이동할 때 입력하기가 더 쉽고 편리합니다. 링크는 여전히 유효합니다.

다음은 경로와 그 의미를 설정하는 데 사용되는 몇 가지 특수 기호입니다.

(1) .: 현재 디렉터리, 상대 경로를 나타냅니다. 예: Text 또는

(2) ..: 상위 디렉터리, 상대 경로를 나타냅니다. 예: text 또는

(3) ../../: 상위 디렉터리 디렉터리의 상위 수준을 나타냅니다. 상대 경로. 예:

(4) /: 루트 디렉터리, 절대 경로를 나타냅니다. 예: [text] (/abc) 또는

5. href

5.1 사양 설명

href(하이퍼텍스트 참조)의 개념은 다음과 같습니다. 네트워크 리소스 위치를 지정하여 현재 요소 또는 현재 문서와 현재 속성에 의해 정의된 필수 앵커 또는 리소스 간의 링크 또는 관계를 정의합니다.

5.2 대중적인 이해

href 목적은 리소스를 참조하는 것이 아니라 현재 태그가 대상 주소에 연결될 수 있도록 연결을 설정하는 것입니다.

6. src 개념

source(약어)는 외부 리소스의 위치를 ​​가리키며, 가리키는 내용은 문서 내 현재 태그의 위치에 적용됩니다.

7. href와 src의 차이점

7.1 요청된 리소스의 종류

(1) href는 현재 요소(앵커) 또는 현재 요소 사이에 설정된 네트워크 리소스의 위치를 ​​가리킵니다. 문서(링크) 연락처.

(2) src 리소스를 요청하면 해당 리소스가 가리키는 리소스가 다운로드되어 JavaScript 스크립트, img 이미지

7.2 결과가 다릅니다

(1) href;

(2) src는 현재 콘텐츠를 대체하는 데 사용됩니다.

7.3 브라우저 구문 분석 방법이 다릅니다.

(1) 문서에 추가된 경우 , 브라우저는 문서를 CSS 파일로 인식하고 리소스는 병렬로 다운로드되며 현재 문서의 처리는 중단되지 않습니다. 이것이 CSS를 로드할 때 @import 메서드를 사용하는 대신 link 메서드를 사용하는 것이 권장되는 이유입니다.

(2) 브라우저가 구문 분석할 때 리소스가 로드, 컴파일 및 실행될 때까지 다른 리소스의 다운로드 및 처리를 일시 중지합니다. 이는 지정된 리소스를 리소스에 적용하는 것과 유사합니다. 현재 콘텐츠. 이것이 js 스크립트를 헤드 대신 하단에 배치하는 것이 권장되는 이유입니다.

8. link와 @import의 차이점

둘 다 CSS를 외부에서 참조하는 방법이지만 확실한 차이점이 있습니다.

(1) 링크는 XHTML 태그입니다. CSS를 로드하려면 RSS와 같은 다른 트랜잭션을 정의할 수도 있지만 @import는 CSS 범주에 속하며 CSS만 로드할 수 있습니다.

(2) 링크가 CSS를 참조하면 페이지가 로드될 때 동시에 로드됩니다. @import에서는 로드하기 전에 페이지가 완전히 로드되어야 합니다.

(3) 링크는 XHTML 태그이며 호환성 문제가 없습니다. @import는 CSS2.1에서 제안되었으며 하위 버전 브라우저에서는 지원되지 않습니다.

(4) 링크는 Javascript를 사용하여 DOM을 제어하여 스타일을 변경하는 것을 지원하지만 @import는 이를 지원하지 않습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

JS 애니메이션 타이머 사용에 대한 자세한 설명

JS로 피타고라스 트리를 구현하는 방법

위 내용은 JS에서 url, href, src 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!