프론트엔드의 url, href, src에 대한 지식에 대한 자세한 설명

이번에는 프론트엔드의 url, href, src에 대한 지식을 자세하게 설명드리겠습니다. 살펴보자.

1. URL의 개념

Uniform Resource Locator(또는 Uniform Resource Locator/위치 주소, URL 주소 등, 영어: URL로 약칭함), 흔히 웹페이지 주소라고도 함 ( 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

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

Schemehttphttpsftp파일file

IV.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는 정규 표현식을 사용하여 생년월일을 결정합니다.

Vue 필터 형식 지정 방법에 대한 자세한 설명

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

위 내용은 프론트엔드의 url, href, src에 대한 지식에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!