프론트엔드 면접 질문의 url, href, src 수집

이 기사에서는 제가 매일 수집하는 프론트엔드 면접 질문용 url, href, src의 문법 규칙과 기본 개념을 공유하겠습니다. 매우 좋고 참고할만한 가치가 있습니다.

1. URL의 개념 Uniform Resource Locator(또는 Uniform Resource Locator/위치 주소, URL 주소 등, 영어: URL로 약칭하는 경우가 많음), 흔히 웹 페이지 주소라고도 함 (웹 주소). 인터넷의 집 번호와 마찬가지로 인터넷의 표준 리소스 주소입니다.

2. URL 형식

2.1 표준 형식

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

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) filename - 문서/리소스의 이름을 정의합니다.

3.2 URL Schemes

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

Schemehttphttpsftpfile

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) 링크는 CSS를 로드할 수 있을 뿐만 아니라 XHTML 태그입니다. , RSS 및 기타 사항을 정의할 수도 있지만 @import는 CSS 범주에 속하며 CSS만 로드할 수 있습니다.

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

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

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

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

Ajax가 Json 형식 데이터를 전송하기 위해 Restful 인터페이스를 호출하는 방법(코드 포함)

Boa 서버에서 Ajax와 cgi 통신(그래픽 자습서)

Ajax+Struts2 구현 확인 코드 확인 기능( 그래픽 튜토리얼)

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

위 내용은 프론트엔드 면접 질문의 url, href, src 수집의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!