집 > 기사 > 웹 프론트엔드 > 상대 경로와 절대 경로를 지정하기 위한 HTML a 태그 href 속성 사용에 대한 설명

상대 경로와 절대 경로를 지정하기 위한 HTML a 태그 href 속성 사용에 대한 설명

不言원래의: 2018-06-05 14:50:482373검색

href는 프런트 엔드 파일을 연결하는 데 가장 일반적으로 사용되는 중요한 속성 중 하나입니다. 여기서는 상대 경로와 절대 경로를 지정하는 HTML a 태그 속성의 사용법을 살펴보겠습니다.

실제 웹 개발 시 CSS 파일 등을 포함한 그림 삽입에는 모두 경로가 필요합니다. 파일 경로를 잘못 추가하면 참조가 무효화됩니다(링크된 파일을 열람할 수 없거나 삽입된 그림을 표시할 수 없는 등). ). 초보자분들이 많이 헷갈려하시는데요, 아래에서는 상대경로와 절대경로에 대해 자세히 소개하겠습니다.

HTML 상대 경로
는 이 파일이 위치한 경로로 인해 발생하는 다른 파일(또는 폴더)과의 경로 관계를 말합니다. 예:
파일 1.htm의 절대 경로는: d:/www/html/1.htm
파일 2.htm의 절대 경로는: d:/www/html/2.htm
그러면: 1 .htm은 상대입니다. 2.htm의 경로는 1.htm

상대 링크 사용 방법:
동일한 디렉터리에 링크하는 경우 링크할 문서의 이름만 입력하면 됩니다. 예를 들어 :

XML/HTML Code 내용을 클립보드에 복사

<a href =”1 htm”>网页链接 </a>
<img src=”bg.jpg” />

하위 디렉터리로 링크할 경우 디렉터리 이름을 먼저 입력한 후 "/"를 추가한 후 파일을 입력해야 합니다. 이름, 예:

XML/HTML Code클립보드에 내용 복사 Board

<a href =”html/ next.htm”>
<img src=”images/bg.jpg” />

상위 디렉터리에 연결하는 경우 먼저 "../"를 입력한 후 해당 디렉터리를 입력해야 합니다. 이름 및 파일 이름(예:

XML/HTML 코드클립보드에 내용 복사

<a href = “．．/ www/index.htm”>

요약 예시
이제 aaa.html bbb.html ccc라는 4개의 HTML 파일이 있습니다.) html index.htmlaaa.html 경로는 D:/www/adminwang/html/aaa.html
bbb.html 경로는 D:/www/adminwang/bbb.html
ccc 경로입니다. html은 D:/www/ ccc.html
index.html의 경로는 D:/www/ index.html

1. 같은 디렉토리에 파일을 연결하세요
예를 들어 ccc.html 파일의 코드는 다음과 같습니다. index.html 링크는 다음과 같습니다.

XML/HTML Code내용을 클립보드에 복사합니다

<a href="index.html">链接index网页</a>

2. 이전 디렉터리 파일에 연결합니다.
예를 들어, bbb.html은 ccc.html 코드에 연결됩니다.

XML/HTML 코드클립보드에 내용을 복사합니다

<a href="../ccc.html">链接ccc网页</a>

3. 상위 2단계 디렉토리에 파일을 연결합니다
예를 들어 aaa.html 링크 ccc.html의 코드입니다.

XML/HTML 코드클립보드에 내용을 복사합니다

<a href=”../../ccc.html”>链接ccc网页</a>

4. 하위 디렉터리의 파일을 연결합니다
예를 들어 bbb.html에 연결되는 ccc.html의 코드는 다음과 같습니다. 다음과 같습니다:

XML/HTML 코드클립보드에 내용을 복사합니다

<a href="adminwang/bbb.html">链接bbb网页</a>

5. 2레벨 디렉터리의 파일을 연결합니다.
예를 들어 ccc.html의 코드는 aaa.html을 연결합니다.

XML/HTML 코드클립보드에 콘텐츠 복사

<a href="adminwang/html/aaa.html">链接aaa网页</a>

HTML 절대 경로
해당 프로토콜 또는 드라이브 문자를 포함하여 파일에 제공된 전체 경로입니다. 즉, 하드 디스크의 홈 페이지에 있는 파일이나 디렉터리의 실제 전체 경로입니다. 예를 들면 다음과 같습니다. http://www.adminwang.com/index.htm
d:/ www /html/images/bg.jpg
상대 경로를 마스터하면 절대 경로에 대해서는 말할 것도 없습니다. 경로는 매우 간단합니다.

상대 경로와 절대 경로를 지정하기 위한 HTML a 태그 href 속성 사용에 대한 설명

관련 기사