사진에 대해 말하자면, 일상 생활과 사용에서 항상 그림을 볼 수 있고, 그림을 적절하게 사용하면 말보다 그림이 더 표현력이 풍부하고 매력적이기 때문에 모두가 익숙하다고 생각합니다. 더욱 아름답고 직관적이며, 특히 웹페이지를 처음 보는 것이 매우 중요합니다.
1. src 속성
기호: img
특징: 단일 라벨
암호:
<!doctypehtml><html><head><metacharset=utf-8><title>HTML 삽입 그림</title></head><body><p>표시할 그림:</p><imgsrc=fish .jpg></body></html>
요약: img 태그에 src 속성 이름을 삽입하면 이미지 삽입이 완료될 수 있습니다. 여기서 src 속성 값은 "파일 이름" 또는 "경로./파일 이름"입니다. 참고: 삽입할 이미지는 다음 위치에 있어야 합니다. HTML 프로젝트와 동일한 파일이 발견되었습니다! 이 섹션에서는 주요 설명을 제공합니다.
2. 기타 속성
3. 대체 사용법
설명: 어떤 이유로 이미지를 표시할 수 없는 경우 alt 속성에 해당하는 속성값을 표시합니다.
암호:
<!doctypehtml><html><head><metacharset=utf-8><title>HTML 삽입 그림</title></head><body><p>표시할 그림:</p><imgsrc=potato .jpgwidth=500alt=감자></body></html>
아래에 표시됩니다:
4. 타이틀 사용
참고: 그림이 정상적으로 표시되는 경우 그림 위에 마우스를 올리면 제목 속성의 속성값에 해당하는 내용이 표시됩니다.
암호:
<!doctypehtml><html><head><metacharset=utf-8><title>HTML 삽입 그림</title></head><body><p>표시할 그림:</p><imgsrc=fish .jpgwidth=500alt=fish title=요리된 생선입니다></body></html>
효과: 그림이 정상적으로 표시될 경우 그림 위에 마우스를 올리면 "이것은 요리된 생선입니다"라는 문구가 나타납니다.
다음과 같이 표시됩니다.
5. 속성특성
이미지 태그의 속성 특성은 대부분의 HTML 태그에 적용 가능합니다.
1. 태그의 속성은 시작 태그 안에 기록됩니다.
2. 태그에는 동시에 여러 속성이 존재할 수 있습니다.
3. 속성을 공백으로 구분하세요.
4. 태그 이름과 속성은 공백으로 구분해야 합니다.
5. 속성 사이에는 순서가 없습니다.
6. 경로 설명 및 그림 교차 레벨 삽입
(1) 경로 소개
1. 절대 경로
디렉터리 아래의 절대 위치는 대상 위치에 직접 도달할 수 있으며 일반적으로 드라이브 문자 또는 전체 URL에서 시작하는 경로를 참조합니다. HTML 이미지 삽입 시에는 일반적으로 절대 경로를 사용하지 않고, 상대 경로를 더 많이 사용합니다.
2. 상대 경로
현재 파일부터 시작하여 대상 파일을 찾는 과정이 자주 사용됩니다.
(2) 레벨에 걸쳐 그림 삽입
1. 같은 레벨
삽입할 이미지가 생성된 html 파일과 동일한 레벨일 경우, src 속성값은 "target file name.suffix" 또는 "./target file name.suffix" 로 직접 삽입할 수 있습니다. 컴파일러를 사용해 코딩할 때 같은 레벨의 파일 이름 첫 글자를 입력하면 컴파일러가 자동으로 나머지 내용에서 빠져나가는 경우가 많습니다.
코드 표시: (그림 이름이 picture이고 jpg 형식이라고 가정)
<imgsrc=picture.jpg> 또는 <imgsrc=./picture.jpg>
2. 부하직원
html 파일이 파일 폴더와 동일한 수준에 있고 삽입할 그림이 파일 폴더에 있는 경우 html 파일에 그림을 삽입하는 것은 교차 수준 이미지 액세스 작업입니다.
<imgsrc=파일/그림.jpg>
3. 슈페리어
total 폴더에 그림이 있고 test 폴더에 또 다른 폴더가 있고 test 폴더에 html 파일이 있다면, html 파일에 그림을 삽입하는 것은 상위 폴더에 접근하는 코드입니다.
<imgsrc=../picture.jpg>
상위 2개 수준 폴더의 사진에 액세스해야 하는 경우 코드는 다음과 같습니다.
<imgsrc=../../picture.jpg>
4. 종합적인 적용
file1과 file2라는 두 개의 폴더가 있고 file1은 html 파일을 저장하고 file2는 jpg 형식으로 삽입할 이미지 플래그를 저장하는 경우 html 파일에 플래그 이미지를 삽입하는 코드는 다음과 같습니다.
<imgsrc=../file2/flag.jpg>
(먼저 이전 레벨로 돌아간 후 다음 레벨로 이동)