웹페이지 제작 퍼즐 : 이미지 파일 경로_HTML/Xhtml_웹페이지 제작

본 글은 스크립트하우스 라이트닝의 원본입니다. 재인쇄 시 이 문장을 삭제할 수 있으나, 어떤 변명이나 방법으로 글의 내용을 변경하지 마세요. 그렇지 않을 경우 그에 따른 책임은 본인에게 있습니다! 전재시에는 저자와 출처를 표기해 주시기 바랍니다.
오래전부터 지금까지 많은 네티즌들이 저에게 비슷한 질문을 해왔습니다. 특히 이 사이트에서 일부 그래픽 및 이미지 특수 효과 코드를 복사한 후 사진이 항상 표시되지 않는 등의 문제는 특히 이러한 초보자를 위한 것입니다. 관련 튜토리얼이 있습니다. 이에 대해 질문이 없으면 떠나십시오!
웹 페이지의 이미지 적용, 즉 웹 페이지의 이미지 태그 적용에 대해 여러분을 위해 요약하겠습니다!
1) 이미지 마크업 개요.
웹페이지에 텍스트만 있고 이미지가 없다면 활력을 많이 잃은 것 같습니다. 웹페이지 제작에서 이미지는 매우 중요한 요소입니다. HTML Professional에서는 이미지를 출력하기 위해 태그를 제공합니다. 웹페이지로. 이 태그에는 SRC, ALT, ALIGN, BORDER, WIDTH 및 HEIGHT 속성이 있습니다.
2) 속성 소개.
SRC 속성. 태그의 경우 해당 SRC 속성은 필수 속성입니다. 즉, SRC는 태그에 값을 할당해야 하며 태그에서 없어서는 안 될 부분입니다. 이때 IMG는 다음과 같은 형식으로 작성되어야 합니다.

그 중 매개변수 값은 이미지의 전체 파일명과 경로입니다.
이미지 파일은 일반적으로 HTML 문서와 같은 일반 텍스트 파일보다 훨씬 더 많은 공간을 차지하며 웹 디자인에서는 매력을 높이기 위해 많은 이미지를 추가해야 하는 경우가 많습니다. 규모가 매우 커질수록 네트워크 전송 속도는 필연적으로 매우 느려집니다.
태그는 실제로 HTML 문서에 이미지를 추가하지 않지만 HTML에게 어떤 이미지 파일인지 알려줍니다. 어디? HTML이 이미지 파일의 원래 위치에서 호출할 수 있도록 합니다. SRC 속성의 기능은 이 두 가지 질문에 대답하는 것이므로 SRC 속성의 매개변수 값에는 이미지 파일의 전체 파일 이름, 즉 파일 이름과 확장자가 있어야 합니다(예: logo.gif). 어떤 이미지 파일인지에 대한 질문; 매개변수 값에는 HTML이 이미지 파일을 찾을 수 있는 위치를 알 수 있도록 이미지 파일에 대한 경로도 있어야 합니다.
SRC 속성의 매개변수 값 중 이미지 파일의 경로를 어떻게 작성하는가가 초보자에게는 문제가 되는 경우가 많습니다.
이미지 파일 경로는 상대 경로 또는 URL일 수 있습니다. 소위 상대 경로는 현재 HTML 문서와 현재 HTML 파일에 링크되거나 삽입될 파일의 ​​상대 위치에 의해 형성되는 경로를 의미합니다. HTML 파일과 이미지 파일(이름은 logo.gif로 가정)이 동일한 디렉터리에 있는 경우 이미지 파일이 현재 HTML 파일이 있는 디렉터리의 하위 디렉터리에 있으면 과 같이 코드를 작성할 수 있습니다. 위치합니다(하위 디렉터리 이름이 (이미지의 경우)라고 가정하면 코드는 이어야 합니다. 이미지 파일이 현재 HTML 파일이 있는 디렉터리의 상위 디렉터리에 있는 경우(상위 디렉터리 이름이 home이라고 가정) , 상대 경로는 유사 웹사이트여야 합니다. 즉, ". ./"를 사용하여 개발자 웹사이트를 나타내고 그 뒤에 개발자 웹사이트의 이미지 파일 경로가 옵니다. 예를 들어 home이 이 웹사이트 아래의 디렉터리라고 가정하면 코드는 이어야 합니다. home이 웹사이트 아래 디렉터리 king 아래의 하위 디렉터리인 경우 코드는 로 작성되어야 합니다.
기타 숙소. 태그의 ALT, ALIGN, BORDER, WIDTH 및 HEIGHT 속성은 선택 사항입니다. ALIGN 속성은 이미지의 정렬이며 매개변수 값은 왼쪽, 가운데, 오른쪽입니다. BORDER는 이미지의 테두리이며 해당 매개변수는 0보다 크거나 같고 기본 단위는 픽셀입니다. WIDTH 및 HEIGHT 속성은 이미지의 너비와 높이이며 해당 매개변수의 기본 단위는 픽셀입니다. ALT 속성은 이미지 위로 마우스를 이동할 때 표시되는 텍스트입니다. 웹페이지를 만들 때 속성을 사용하는 목적은 무엇인가요? 어떤 이유로 이미지가 표시되지 않을 때 프롬프트 텍스트를 표시할 수 있어 사용자 편의성이 높아집니다.